agentic-design-system: Skill for Claude Code

Add Component Source

Create the component source and exports given $ARGUMENTS in the format <ComponentName> [core|agents]. Extra context (ARIA pattern, MCP states) may follow — use it instead of re-deriving.

If the package is not specified, infer it using the package inference rules in the shared conventions reference (Step 2).

---

Gotchas

• Never import React from 'react' — use named type imports (import type { ReactElement, ReactNode } from 'react'); write leftIcon?: ReactElement, never React.ReactElement.
• ARIA is mandatory from the first line — apply the correct live region while writing the component, not in a later audit pass.
• color.on.accent and similar token names are not hex violations — only flag #-prefixed literal values.
• Light/dark support is free if you stay on semantic tokens — never read color mode in the component and never read single-mode values off the raw colorModes export for styling. If a needed color has no semantic token, follow the token addition steps in the Theming section of the shared conventions reference (add the color to both tokens/color.dark.json and color.light.json → npm run tokens:generate → use the token name).
• No approval gate — this skill creates exactly the files listed below; proceed without asking. The /add-component orchestrator owns plan approval for full scaffolds.

---

Step 1 — Check for existing component

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

If any output is produced, stop immediately and respond:

## Already exists: <ComponentName>

`<path shown in ls output>` already exists.
Use `/update-component <ComponentName>` to audit and update it instead.

Do not read, write, or modify any files.

Step 2 — Read context

Read:

• .claude/skills/shared/references/conventions.md — file layout, package inference, import/export/token rules
• .claude/skills/shared/references/aria-patterns.md — ARIA pattern per component type, MCP states
• packages/<package>/src/index.ts — current export pattern
• One existing component source in the target package (e.g. packages/agents/src/ThinkingIndicator/ThinkingIndicator.tsx) — code style