agentic-design-system: Skill for Claude Code

Add Component Spec Doc

Create the spec doc given $ARGUMENTS in the format <ComponentName>.

---

Gotchas

• The tokens field requires active scanning — extract every semantic token string from the source style props (any quoted dotted name in a Chakra style prop that is not #-hex) and list each in the matching tokens.* array. Do not write the list from memory.
• Every prop in the export interface block goes in props — including string-literal-key props like 'aria-label'?: string.
• Use exact TypeScript types in props — Record<string, unknown> is not object; unions list all members.
• The doc is real TypeScript, not markdown — packages/mcp-builder/scripts/generate.ts imports it directly to build the MCP server's component metadata. There is no parse contract to satisfy; tsc and eslint are the only gates. Step 4's regeneration only fails if the file doesn't type-check as ComponentDoc or a required field is missing.
• No approval gate — creating one doc is the whole task; proceed without asking.

---

Step 1 — Locate the component source

ls packages/core/src/<ComponentName>/<ComponentName>.tsx packages/agents/src/<ComponentName>/<ComponentName>.tsx 2>/dev/null

If no output, stop immediately and respond:

## No source: <ComponentName>

Neither package contains `<ComponentName>`. Create it first with
`/add-component-source <ComponentName>` (source only) or `/add-component <ComponentName>` (full scaffold).

Infer the package (core or agents) from which path exists.

Step 2 — Read context

Read:

• The component source file — props interface, variants, states, ARIA attributes, token usage
• packages/core/src/Button/Button.doc.ts — the ComponentDoc shape to follow
• packages/component-doc/src/index.ts — the authoritative ComponentDoc/PropDoc/TypeDoc interfaces
• If packages/<package>/src/<ComponentName>/<ComponentName>.doc.ts already exists, stop and suggest /update-component <ComponentName> instead — spec drift is that skill's job.