agentic-design-system: Skill for Claude Code

Add Component Story

Create the Storybook story given $ARGUMENTS in the format <ComponentName>.

---

Gotchas

• Never import React from 'react' in story files — jsx-runtime handles JSX and Storybook's own types cover everything else.
• Import the component from the package (@agentic-ds/core or @agentic-ds/agents), not by relative path — this is the existing story convention.
• Every variant needs a story before the component is considered done — enumerate the props interface; do not stop at Default.
• Light/dark comes from the global toolbar, not from stories — .storybook/preview.tsx wraps every story in AgenticProvider with the selected colorScheme. Never wrap a story in AgenticProvider yourself, never add per-scheme story duplicates, and never hardcode scheme-specific background hexes in a story.
• No approval gate — creating/extending one story file 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:

• .claude/skills/shared/references/conventions.md — import rules, file layout
• The component source file — enumerate every prop, variant, enum value, and state
• One existing story in apps/storybook/src/stories/ (e.g. ThinkingIndicator.stories.tsx) — story style
• If apps/storybook/src/stories/<ComponentName>.stories.tsx already exists, read it — extend it, don't recreate it

Step 3 — Create or extend the story

File: apps/storybook/src/stories/<ComponentName>.stories.tsx

Requirements: