skills.rest
100Thieves-team
100Thieves-teamOFFICIAL
Explore all skills by this author →
GitHub

component-spec

Writes detailed design system component specifications covering props, states, variants, and accessibility.

Updated Jul 4, 2026
Search Tags:#accessibility#design system#props#variants#aria#component specification#ui documentation
One-click install
npx skills add https://github.com/100Thieves-team/plady-expert-skills --skill component-spec-100thieves-team
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-spec
Source: https://github.com/100Thieves-team/plady-expert-skills/tree/main/.claude/skills/component-spec
Command: npx skills add https://github.com/100Thieves-team/plady-expert-skills --skill component-spec-100thieves-team

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design system components often ship with incomplete documentation, causing inconsistent implementations between designers and developers. This Skill produces a complete, structured component specification so both audiences build the same thing. ## Core Features & Use Cases - Full Spec Structure: Generates eight standard sections covering overview, anatomy, variants, props/API, states, behavior, accessibility, and usage guidelines. - Accessibility Coverage: Documents ARIA roles, keyboard navigation, screen reader behavior, and focus management for every component. - Use Case: When adding a new Button component to your design system, use this Skill to produce a spec defining its size and style variants, all interaction states (hover, focus, disabled, loading), and do/don't usage examples for the team. ## Quick Start Write a complete component specification for a modal dialog including its props, states, variants, and accessibility requirements.

Frequently Asked Questions about component-spec

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

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

Structure the spec into eight sections: overview, anatomy, variants, props/API, states, behavior, accessibility, and usage guidelines. Document every variant and state with examples, and specify behavior rather than just appearance.

What should a component spec include for accessibility?▼

An accessibility section should cover ARIA roles, keyboard navigation, screen reader behavior, and focus management. It should also account for all input methods so the component works for every user.

How do I document component props and states for developers?▼

List each prop with its name, type, default value, description, and required status. Then enumerate all states such as default, hover, focus, active, disabled, loading, and error with an example for each.

When should I not write a full component specification?▼

A full eight-section spec is excessive for one-off components that will not be reused across a design system. Reserve this level of documentation for shared library components consumed by multiple designers and developers.

Related Skills

Explore More Design & Creative Skills→
docaohieu2808docaohieu2808

design

Orchestrate design tasks across brand identity, design tokens, and UI styling.

Community
Advanced
PMDevSolutionsPMDevSolutions
7

storybook-story-generation

Generate CSF3 Storybook stories and MDX autodocs from React component source.

Official
Advanced
EndavaEndava
160

fix-accessibility

Audit and fix accessibility issues in BEEQ StencilJS components.

Official
Advanced
google-labs-codegoogle-labs-code
8.2k

shadcn-ui

Integrates and customizes shadcn/ui components in React applications using Tailwind CSS.

Official
Advanced