Skill: Design Component

Step 0: is the kit here? This skill reads files from the kit. Check once: ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING On KIT_MISSING only the skill folders were installed, which is what npx skills add does. Say so plainly, point the user at npx ux-ui-agent-skills init or the plugin install, and stop. Do not guess the contents of a file you could not open.

Produce a complete component specification matching the project format.

Steps

1. Read ${CLAUDE_SKILL_DIR}/../../../.claude/rules/components.md → "Component Quality Bar" (the 8-state table) and "Atomic Design"; the always-on 8-state table is in ${CLAUDE_SKILL_DIR}/../../../CLAUDE.md → Non-Negotiables.
2. Check if it already exists: ${CLAUDE_SKILL_DIR}/../../../components/atoms.md, molecules.md, organisms.md, templates.md, navigation.md, feedback.md, forms-advanced.md, overlays.md. Match the existing spec format.
3. Pull the ARIA pattern from ${CLAUDE_SKILL_DIR}/../../../accessibility/aria-patterns.md and contrast/target rules from ${CLAUDE_SKILL_DIR}/../../../accessibility/wcag-checklist.md.
4. Map every value to tokens (${CLAUDE_SKILL_DIR}/../../../tokens/*.json): sizes via sizing.json, states via states.json.
5. Apply visual judgment from ${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md (states, focus, no slop).
6. Optional fast start: python3 ${CLAUDE_SKILL_DIR}/../../../scripts/scaffold_component.py "<Name>" to emit a stub, then fill it in.

Output

Spec with: anatomy diagram, variants table, sizes table, all 8 applicable states, token mapping, accessibility (role/keyboard/SR), and a note to render via ${CLAUDE_SKILL_DIR}/../../../frameworks/adapter-protocol.md.