Automated ingestion of prompt: Component Documentation

prompts/coding/component_documentation_1437.md

@@ -0,0 +1,71 @@
+---
+title: "Component Documentation"
+contributor: "@gokbeyinac"
+tags: #coding, #gokbeyinac
+---
+
+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.