# Update Component Docs

> Update component documentation when code changes Use when this capability is needed.

- Skill: `tomevault-io/update-component-docs` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/update-component-docs`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/update-component-docs/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/update-component-docs

---


**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](https://tomevault.io/claim/agnosticui) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->