OpenSkillIndex← back to search
claude-code

Agnosticui update-component-docs

Update component documentation when code changes

install
source · Clone the upstream repo
git clone https://github.com/AgnosticUI/agnosticui
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/AgnosticUI/agnosticui "$T" && mkdir -p ~/.claude/skills && cp -r "$T/.claude/skills/update-component-docs" ~/.claude/skills/agnosticui-agnosticui-update-component-docs && rm -rf "$T"
manifest: .claude/skills/update-component-docs/SKILL.md
source content

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

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

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

  4. WAIT FOR USER APPROVAL

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

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