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/ply-css/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/ply-css/ply-classes.json ./ply-classes.json

The JSON contains three sections:

Discovery

llms.txt

ply publishes llms.txt and llms-full.txt — standard files that AI tools use to auto-discover documentation. llms.txt is a brief index; llms-full.txt is the complete reference in a single file.

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

By the Numbers

Token Efficiency

ply was designed for AI consumption from the start — small class vocabulary, semantic HTML auto-styling, and a single context file. A Replit-generated analysis compared ply against Bootstrap and Tailwind across three dimensions.

Upfront context cost

What it takes to give an AI agent complete framework knowledge.

Per-element output cost

A card with title, description, and button — the same component in each framework.

<div class="bg-surface border-radius padding">
  <h3>Title</h3>
  <p class="text-secondary">Description.</p>
  <button class="btn btn-primary">Action</button>
</div>

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Title</h5>
    <p class="card-text text-muted">Description.</p>
    <a href="#" class="btn btn-primary">Action</a>
  </div>
</div>

<div class="bg-white rounded-lg p-6 shadow-md
     dark:bg-gray-800">
  <h3 class="text-lg font-semibold
       text-gray-900 dark:text-white">Title</h3>
  <p class="mt-2 text-gray-600
      dark:text-gray-300">Description.</p>
  <button class="mt-4 rounded-lg bg-blue-600
      px-4 py-2 text-white hover:bg-blue-700">
    Action
  </button>
</div>

Hallucination risk

Analysis generated by Replit. Token counts are estimates based on representative component patterns.