# AI-Ready Component Description Template

## Format

For each component, write:

[What it is]. [When to use it]. [Key constraint or behavior].

Keep under 200 characters.

---

## Examples

| Component | Description |
|-----------|-------------|
| Button/Primary | Primary action trigger for forms and dialogs. Use for the single most important action on a page. Always pair with a secondary action for cancel/dismiss. |
| AlertBanner | System-level notification bar for page-wide messages. Use for errors, warnings, and success confirmations that affect the entire view. Dismissible unless the error requires action. |
| Card | Content container grouping related information as a scannable unit. Use in grids and lists for repeating content. Click target is the entire card surface. |
| Input/Text | Single-line text entry field. Use for short-form input (names, emails, search). Always pair with a visible label above the field. |
| Dialog/Destructive | Confirmation overlay for irreversible actions (delete, remove, revoke). Requires explicit user confirmation. Primary button uses danger variant. |
| Select | Dropdown for choosing one option from a predefined list of 5+ items. Use RadioGroup for fewer options. Always pair with a visible label. |
| Toast/Success | Temporary success notification after a completed action. Auto-dismisses after 5s. Never use for errors or warnings that require user action. |
| Avatar | User representation with image, initials, or icon fallback. Use in headers, comments, and lists. Always include alt text or aria-label. |
| Badge | Count or status indicator attached to another element. Use next to nav items or icons. Not interactive. Include aria-label for screen readers. |
| Tabs | Content switcher for related panels in the same view. Not for page navigation. Use underline style for content, pills for filters. |

---

## Batch Prompt

Use this to generate descriptions for multiple components at once:

```
I have a design system with the following components. Write a description for each one following this format: [What it is]. [When to use it]. [Key constraint or behavior].

Keep each description under 200 characters. Be specific about when to use vs when NOT to use. Mention accessibility requirements where relevant.

Components:
1. [Component name]
2. [Component name]
3. [Component name]
```

---

## Tips

- Under 200 characters keeps descriptions scannable
- Start with what it IS, not what it does
- Include one "don't" to prevent misuse
- Mention the key a11y requirement if there is one
- Be specific about context: "for forms" > "for user interaction"
- Run in batches of 20 for best quality