Getting Started

AI Agents

ply ships with machine-readable reference files so AI coding agents can generate correct, accessible markup without reading documentation.

Markdown

PLY.md

A single Markdown file containing every ply class, usage rule, anti-pattern, and copy-paste snippet. Designed to fit in one context window. Add it to your project root or paste it into your prompt.

cp node_modules/plygrid/PLY.md ./PLY.md

Your agent reads this once and knows the full framework — grid classes, button variants, form patterns, dark mode, accessibility, and theming.

JSON

ply-classes.json

A structured JSON file with every class, CSS custom property, and auto-styled semantic element. Perfect for programmatic tool use, search indexing, and validation.

cp node_modules/plygrid/ply-classes.json ./ply-classes.json

The JSON contains three sections:

Integration

CLAUDE.md / Cursor Rules

For the best results, reference PLY.md in your AI project configuration. This tells the agent to use ply's classes instead of inventing custom CSS.

Claude Code

# CLAUDE.md
See PLY.md for the ply CSS framework reference.
Use ply classes for all styling — do not use Tailwind, Bootstrap, or custom CSS
unless ply doesn't have what you need. Search ply-classes.json before writing
custom styles.

Cursor

# .cursorrules
Use the ply CSS framework (see PLY.md) for all UI styling.
Always use ply classes before writing custom CSS.
Reference ply-classes.json for the complete class list.

Tips

Best Practices