skills.rest
soeiroo
soeirooCOMMUNITY
Explore all skills by this author →
GitHub

component-spec

Draft comprehensive component specifications for design systems.

Updated Mar 16, 2026
Search Tags:#documentation#accessibility#design-system#props#variants#component-spec#developers
One-click install
npx skills add https://github.com/soeiroo/multifunctional-web --skill component-spec-soeiroo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-spec
Source: https://github.com/soeiroo/multifunctional-web/tree/main/.agents/skills/component-spec
Command: npx skills add https://github.com/soeiroo/multifunctional-web --skill component-spec-soeiroo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Clear, thorough component specifications reduce ambiguity between design and development by documenting anatomy, props, variants, states, behavior, accessibility, and usage guidelines.

Core Features & Use Cases

  • Overview — Name, description, when to use / not use
  • Anatomy — Visual breakdown, required vs optional elements
  • Variants — Size (sm/md/lg), style (primary/secondary/ghost), layout
  • Props/API — Name, type, default, description, required status
  • States — Default, hover, focus, active, disabled, loading, error
  • Behavior — Interactions, animations, responsive behavior, edge cases
  • Accessibility — ARIA roles, keyboard nav, screen reader, focus management
  • Usage Guidelines — Do/don't examples, content rules, related components

Quick Start

Define a new component-spec SKILL.md in your design-system repository and fill in the required frontmatter and the eight structured sections.

Frequently Asked Questions about component-spec

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

FAQPage Schema
What should component specifications include for a design system?▼

Component specifications should include overview, anatomy, variants, props, states, behavior, accessibility, and usage guidelines to reduce ambiguity between design and development teams.

How do I document accessibility and keyboard navigation for UI components?▼

Document accessibility by defining ARIA roles, keyboard navigation, screen reader behavior, and focus management states within the component specification's dedicated accessibility section.

What is the best way to structure props and variants documentation for developers?▼

Structure props documentation by listing name, type, default, description, and required status, while organizing variants by size, style, and layout to guide developers effectively.

How do I write usage guidelines with do and don't examples for design system components?▼

Write usage guidelines by providing explicit do and don't examples, content rules, and related components within the component specification to ensure proper implementation across teams.

Can I use this approach to document component states like loading and error?▼

Yes, you can document default, hover, focus, active, disabled, loading, and error states by detailing interactions, animations, responsive behavior, and edge cases in the behavior section.

Related Skills

Explore More Design & Creative Skills→
AshesOfTheUndeadAshesOfTheUndead

expressive

Generate design guideline documents for UI components using color, typography, and spacing tokens.

Community
Intermediate
hulusi-tunchulusi-tunc
3

component-spec

Generate component specifications with anatomy, variants, states, and accessibility guidelines.

Community
Advanced
FlintmereFlintmere

design-component

Generate a reusable UI primitive spec with TSX sketch, props API, variants, states, accessibility, and tokens.

Official
Advanced
Owl-ListenerOwl-Listener
2.0k

component-spec

Draft component specifications with anatomy, variants, props, states, and accessibility.

Community
Intermediate