agentic-design-system: Skill for Claude Code

Add Component Tests

Create and run unit tests given $ARGUMENTS in the format <ComponentName>.

---

Gotchas

• Test files DO import React — import React from 'react'; this is the opposite of the source/story rule.
• Use renderWithProviders, never render directly — it wraps in AgenticProvider so Chakra tokens resolve. Import it from '../__tests__/test-utils' (relative to the component directory).
• Use userEvent, not fireEvent — userEvent.setup() simulates real browser events. Pass { advanceTimers: vi.advanceTimersByTime } when the component has debounce/delay timers.
• Use fake timers for components with setTimeout — vi.useFakeTimers() in beforeEach, vi.useRealTimers() in afterEach.
• Test ARIA first — role, aria-live, aria-expanded, etc. prove accessibility correctness, not just render correctness.
• No approval gate — creating one test file and running it 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/testing.md — required imports, test groups, timer/userEvent rules
• The component source file — enumerate props, states, ARIA attributes, and interactive behavior to cover
• One existing test file in the target package (e.g. packages/agents/src/ThinkingIndicator/ThinkingIndicator.test.tsx) — test style
• If packages/<package>/src/<ComponentName>/<ComponentName>.test.tsx already exists, read it — extend it, don't recreate it

Step 3 — Create or extend the test file