update-component-docs— agent skill

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:

1. 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*

1. 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

1. 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

1. 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

1. WAIT FOR USER APPROVAL

1. 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

1. 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