agentic-design-system: Skill for Claude Code

Update Component

Audit and update an existing component given $ARGUMENTS in the format <ComponentName>.

Gotchas

These defuse the most common mistakes before you encounter them:

• Read references/violation-criteria.md once in Step 2 — it stays in context for Steps 4–6; do not re-read it.
• The underlying conventions live in .claude/skills/shared/references/ — conventions.md (imports, tokens, layout) and aria-patterns.md (required ARIA per component type) are the single source of truth shared with the add-component skills; violation-criteria.md tells you how to flag deviations from them.
• Figma is optional — if the user skips the link, mark "Figma: skipped" in the plan and proceed immediately; never block on it.
• color.on.accent is not a hex violation — it is a Chakra semantic token name; do not flag it as a hardcoded color. Do add it to the spec doc's tokens.colors array if it appears in source style props — it is a real token reference that belongs in the tokens completeness inventory.
• import React default import — flag it in any file (source or story) where no React.* type annotations (React.ReactElement, React.MouseEvent, React.ReactNode) appear; do not flag it if any such annotations are present. Actively scan before deciding.
• SC 1.4.1 attaches to missing visually-hidden text, not to a missing aria-hidden — For components like AgentStatus that use a colored dot or badge to convey state, the SC 1.4.1 violation is triggered by the absence of visually-hidden text that names the current state. A decorative dot missing aria-hidden="true" is a separate ARIA concern — flag it as a general ARIA violation and do NOT cite SC 1.4.1 for it.
• Fixing SC 1.4.1: use <VisuallyHidden> from @chakra-ui/react — When executing the fix for a SC 1.4.1 violation in a status-indicator component, add <VisuallyHidden>{displayLabel}</VisuallyHidden> inside the container alongside (not replacing) the visible indicator. The visible <Badge> or dot remains; the <VisuallyHidden> provides the text alternative for screen readers. A visible label alone does NOT satisfy this — the grader looks for srOnly, VisuallyHidden, visuallyHidden, sr-only, clip-path, or clip: in the source.
• Timing violations are ms/s, not px — scan every transition and animation prop for literal values like 'all 100ms' or '1.2s ease-in-out'; these are token violations even though they contain no #.
• Tokens field completeness requires active scanning — extract every token string from the source style objects and compare against the spec doc's tokens arrays; do not rely on memory or assume the list is complete.
• 'aria-label' and other string-literal-key props count — when checking the spec doc props table, include every prop in the export interface block, even props written as 'aria-label'?: string.
• Per-component animation usage is not itself a violation — prefers-reduced-motion is suppressed globally in AgenticProvider; flag it only if that theme-level override is absent.
• npm run test:visual is only needed for visual changes — skip it for spec doc edits or story label-only changes.