What triggers a docs update?

Changes to the core component API (props, slots, events), CSS tokens, behavior, or accessibility features that affect the public docs.

Do I need to update all frameworks?

Yes. Ensure Lit, React, and Vue stories reflect the same API and that VitePress and Storybook are synchronized.

What happens after approval?

The updater applies changes across all frameworks, verifies consistency, and confirms completion.

update-component-docs

npx machina-cli add skill AgnosticUI/agnosticui/update-component-docs --openclaw

Files (1)

SKILL.md

2.4 KB

Usage: /update-component-docs COMPONENT_NAME

Examples:

/update-component-docs button
/update-component-docs alert

Update docs for component: $ARGUMENTS

Setup:

Read .claude/PROJECT_CONTEXT.md for AgnosticUI structure and paths

Process:

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*

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
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
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
WAIT FOR USER APPROVAL
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
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

Source

git clone https://github.com/AgnosticUI/agnosticui/blob/master/.claude/skills/update-component-docs/SKILL.mdView on GitHub

Overview

update-component-docs automates keeping component documentation in lockstep with code changes. It reads the project context, locates component files, and identifies updates to API, CSS tokens, behavior, and accessibility to propose synchronized updates across VitePress, Storybook for Lit/React/Vue, and examples.

How This Skill Works

It scans the component codebase (v2/lib/src/components, v2/site/docs/components, and related v2/playgrounds and v2/examples) to detect API, token, or behavior changes. It then proposes targeted updates (props, events, slots, tokens, and usage) and prompts for approval before applying consistent changes across Lit, React, and Vue documentation and stories.

When to Use It

When the component API (props, slots, events) changes and needs updated docs
When CSS custom properties or design tokens are added, renamed, or updated
When behavior, interaction patterns, or accessibility features are modified
When there are breaking changes or new additions requiring documentation alignment
When related playbooks or framework-specific docs need synchronization

Quick Start

Step 1: Read .claude/PROJECT_CONTEXT.md to map the AgnosticUI structure and component paths
Step 2: Locate component files using v2/lib/src/components/$ARGUMENTS*, v2/site/docs/components/$ARGUMENTS.md, and related v2/playgrounds/*/src/stories/*$ARGUMENTS* and v2/examples/*/src/*$ARGUMENTS*
Step 3: Propose documentation updates (VitePress, Storybook across frameworks, examples, playbooks, and tokens); wait for user approval before applying changes across Lit, React, and Vue

Best Practices

Start with documenting changes to the core component API before token or styling updates
Read .claude/PROJECT_CONTEXT.md to map structure and paths
Update VitePress API tables, events, slots, and usage examples first
Synchronize Storybook across Lit, React, and Vue with consistent args/controls and descriptions
Verify all examples still work with the new API and obtain user approval before applying across frameworks

Example Use Cases

Button gains a new 'variant' prop; update VitePress API table and Storybook controls
Card component tokens renamed (shadow, radius); refresh design tokens and related docs
Tooltip accessibility improved (aria-label, keyboard focus); update accessibility notes and examples
Alert onClose event signature changes; update API docs and framework stories accordingly
New use-case playbook added; ensure docs across Lit/React/Vue reflect the pattern

Frequently Asked Questions

Add this skill to your agents