Component Documentation

Component Documentation — a ready-to-use text prompt with customizable fields (variant, shade, size) for Career & Productivity. Fill in your details and paste into ChatGPT, Claude, or your preferred AI assistant.

How to use it

Fill in variant, shade, size below (or keep the suggested defaults).
Copy the generated prompt.
Paste it into ChatGPT, Claude, or your preferred AI assistant.

Pairs well with English Pronunciation Helper — try running them back to back.

Optional: use the “Additional context” field to add extra details, tone, constraints, or background the AI should know about, then include it when you copy the prompt.

Optional: pick a “Prompting Technique” below (Few-shot, Chain-of-Thought, Self-Consistency, Generate Knowledge, Directional Stimulus, Meta Prompting) to wrap this prompt with a proven prompting strategy.

The base prompt

You are a design systems documentarian creating the component specification
for a CLAUDE.md file. This documentation will be used by AI coding assistants
(Claude, Cursor, Copilot) to generate consistent UI code.

## Context
- **Token system:** [Paste or reference Phase 2 output]
- **Component to document:** [Component name, or "all components from inventory"]
- **Framework:** [Next.js + React + Tailwind / etc.]

## For Each Component, Document:

### 1. Overview
- Component name (PascalCase)
- One-line description
- Category (Navigation / Input / Feedback / Layout / Data Display)

### 2. Anatomy
- List every visual part (e.g., Button = container + label + icon-left + icon-right)
- Which parts are optional vs required
- Nesting rules (what can/cannot go inside this component)

### 3. Props Specification
For each prop:
- Name, type, default value, required/optional
- Allowed values (if enum)
- Brief description of what it controls visually
- Example usage

### 4. Visual Variants
- Size variants with exact token values (padding, font-size, height)
- Color variants with exact token references
- State variants: default, hover, active, focus, disabled, loading, error
- For EACH state: specify which tokens change and to what values

### 5. Token Consumption Map
Component: Button
├── background → button-bg-${variant} → color-brand-${shade}
├── text-color → button-text-${variant} → color-white
├── padding-x → button-padding-x-${size} → spacing-{n}
├── padding-y → button-padding-y-${size} → spacing-{n}
├── border-radius → button-radius → radius-md
├── font-size → button-font-${size} → font-size-{n}
├── font-weight → button-font-weight → font-weight-semibold
└── transition → motion-duration-fast + motion-ease-default

### 6. Usage Guidelines
- When to use (and when NOT to use — suggest alternatives)
- Maximum instances per viewport (e.g., "only 1 primary CTA per section")
- Content guidelines (label length, capitalization, icon usage)

### 7. Accessibility
- Required ARIA attributes
- Keyboard interaction pattern
- Focus management rules
- Screen reader behavior
- Minimum contrast ratios met by default tokens

### 8. Code Example
Provide a copy-paste-ready code example using the actual codebase's
patterns (import paths, className conventions, etc.)

## Output Format

Markdown, structured with headers per section. This will be directly
inserted into the CLAUDE.md file.

Want it filled in and enhanced? Use the builder →

You are a design systems documentarian creating the component specification for a CLAUDE.md file. This documentation will be used by AI coding assistants (Claude, Cursor, Copilot) to generate consistent UI code. ## Context - **Token system:** [Paste or reference Phase 2 output] - **Component to document:** [Component name, or "all components from inventory"] - **Framework:** [Next.js + React + Tailwind / etc.] ## For Each Component, Document: ### 1. Overview - Component name (PascalCase) - One-line description - Category (Navigation / Input / Feedback / Layout / Data Display) ### 2. Anatomy - List every visual part (e.g., Button = container + label + icon-left + icon-right) - Which parts are optional vs required - Nesting rules (what can/cannot go inside this component) ### 3. Props Specification For each prop: - Name, type, default value, required/optional - Allowed values (if enum) - Brief description of what it controls visually - Example usage ### 4. Visual Variants - Size variants with exact token values (padding, font-size, height) - Color variants with exact token references - State variants: default, hover, active, focus, disabled, loading, error - For EACH state: specify which tokens change and to what values ### 5. Token Consumption Map Component: Button ├── background → button-bg- → color-brand- ├── text-color → button-text- → color-white ├── padding-x → button-padding-x- → spacing-{n} ├── padding-y → button-padding-y- → spacing-{n} ├── border-radius → button-radius → radius-md ├── font-size → button-font- → font-size-{n} ├── font-weight → button-font-weight → font-weight-semibold └── transition → motion-duration-fast + motion-ease-default ### 6. Usage Guidelines - When to use (and when NOT to use — suggest alternatives) - Maximum instances per viewport (e.g., "only 1 primary CTA per section") - Content guidelines (label length, capitalization, icon usage) ### 7. Accessibility - Required ARIA attributes - Keyboard interaction pattern - Focus management rules - Screen reader behavior - Minimum contrast ratios met by default tokens ### 8. Code Example Provide a copy-paste-ready code example using the actual codebase's patterns (import paths, className conventions, etc.) ## Output Format Markdown, structured with headers per section. This will be directly inserted into the CLAUDE.md file.

Component Documentation

English Pronunciation Helper

Career Counselor

Self-Help Book

Aphorism Book