skills.rest
idy-00
idy-00COMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-component

Generates UI component specifications with anatomy, variants, states, token mapping, and accessibility rules.

Updated Jul 20, 2026
Search Tags:#accessibility#design system#design tokens#wcag#aria#component spec#ui states
One-click install
npx skills add https://github.com/idy-00/paytrack --skill design-component-idy-00
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-component
Source: https://github.com/idy-00/paytrack/tree/main/backend/.agents/skills/design-component
Command: npx skills add https://github.com/idy-00/paytrack --skill design-component-idy-00

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing a UI component to a consistent quality bar requires covering anatomy, variants, sizes, all 8 interaction states, design token mapping, and WCAG accessibility — a process that is easy to get wrong or leave incomplete when done ad hoc. ## Core Features & Use Cases - Complete Component Specs: Produces specifications with anatomy diagrams, variant and size tables, all 8 applicable states (default, hover, focus, active, disabled, loading, error, selected), token mapping, and ARIA/keyboard/screen-reader guidance. - Verification Gates: Builds a states harness and runs contrast, axe accessibility, text-measurement, focus-trap, and responsive-overflow scripts, plus Playwright screenshot inspection in light and dark modes. - House Patterns: Enforces tokenized motion, lucide icon sprites, mobile-first responsive layout, and verified custom checkbox/radio patterns for visual consistency. - Use Case: Ask for a spec for a new combobox or toast component and receive a full spec document plus a tested HTML states harness that passes every accessibility and contrast gate. ## Quick Start Design a spec for a modal dialog component including all states, token mapping, and accessibility requirements.

Frequently Asked Questions about design-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I write a UI component specification for a design system?▼

A complete component spec includes an anatomy diagram, variants table, sizes table, all applicable interaction states, design token mapping, and accessibility details covering ARIA role, keyboard behavior, and screen reader output. Match the existing spec format in your component documentation files.

How do I test all states of a UI component for accessibility?▼

Build a states harness rendering every variant in default, hover, focus, active, disabled, loading, error, and selected states in one HTML file. Then run contrast, axe audit, and text-measurement scripts against it in both light and dark modes, and screenshot it with Playwright to catch visual defects.

What contrast ratio do icon-only buttons need to meet?▼

Graphical and icon-only controls without text must meet a 3:1 contrast ratio under WCAG 1.4.11, rather than the 4.5:1 required for text. Set the control's color explicitly and drive the visual via currentColor so the measured contrast reflects the real indicator.

Why does my custom checkbox not toggle when clicked?▼

A drawn overlay box covering the real input blocks the click unless the box has pointer-events:none or an enclosing label forwards the click. Keep a real input underneath for native accessibility and keyboard support, with the visual box as a non-interactive overlay.

When should I use design-component versus generating framework code?▼

Use this skill when you need a spec-level definition of a component — anatomy, states, tokens, and accessibility — before or alongside implementation. For generating actual framework code from a spec, use the design-code skill instead.

Related Skills

Explore More Design & Creative Skills→
jac007xjac007x

design-system-validator

Audit Walmart design-system compliance across tokens, components, and spacing.

Community
Advanced
ThorStarlordThorStarlord
1

ui-generate-code

Convert approved UI component specifications into deterministic frontend code.

Community
Advanced
SensLiaoSensLiao

qa-visual-regression

Compare UI screenshots against baselines to detect visual regressions.

Community
Advanced
Marcus-BoniMarcus-Boni
1

shadcn

Manage shadcn components and project configurations via CLI.

Community
Advanced