/update-component-docs

name: update-component-docs
description: Update component documentation when code changes
disable-model-invocation: true
allowed-tools: Read, Grep, Glob

**Usage:** `/update-component-docs COMPONENT_NAME`

**Examples:**

• `/update-component-docs button`
• `/update-component-docs alert`

Update docs for component: $ARGUMENTS

**Setup:** 1. Read `.claude/PROJECT_CONTEXT.md` for AgnosticUI structure and paths

**Process:**

2. **Locate component files:**

   Read v2/lib/src/components/$ARGUMENTS*
   Read v2/site/docs/components/$ARGUMENTS.md
   Glob v2/playgrounds/*/src/stories/*$ARGUMENTS*
   Glob v2/examples/*/src/*$ARGUMENTS*

3. **Identify what changed:**

• Core component API (props, slots, events)
• CSS custom properties or design tokens
• Behavior or interaction patterns
• Accessibility features
• Breaking changes vs additions

4. **Check related documentation:**

• VitePress component page for API tables and usage examples
• Storybook stories across Lit, React, and Vue playgrounds
• Example implementations in each framework
• Related playbook if component has specific use case docs
• Design tokens if styling/theming changed

5. **Propose documentation updates:**

• **VitePress:** Update props tables, events, slots, CSS custom properties, usage examples
• **Storybook stories:** Update args, controls, story descriptions across all three frameworks
• **Examples:** Verify examples still work with new API
• **Playbooks:** Update if related to specific workflow/pattern
• **Design tokens:** Note if component uses new/changed tokens

6. **WAIT FOR USER APPROVAL**

7. **Update consistently across frameworks:**

• Ensure Lit, React, and Vue stories show equivalent functionality
• Use framework-appropriate syntax but consistent examples
• Same terminology and descriptions across all docs
• Code examples match current API
• Note framework-specific differences where relevant

8. **Verify completeness:**

• All frameworks (Lit, React, Vue) documented
• VitePress and Storybook in sync
• Examples updated if API changed
• Design token references accurate

**Token Optimization:**

• Start with core component to understand changes
• Only read framework-specific files if API differs by framework
• Skip playbooks unless component has dedicated workflow docs
• Check design tokens only if styling/theming aspects changed