update-component-docs

name	update-component-docs
description	Update component documentation when code changes Use when this capability is needed.
metadata	{"author":"agnosticui"}

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

---

Converted and distributed by TomeVault — claim your Tome and manage your conversions.