skills.rest
launchapp-dev
launchapp-devOFFICIAL
Explore all skills by this author →
GitHub

component-spec

Generate structured component specifications with anatomy, variants, props, states, and accessibility.

38|5|Updated Feb 24, 2026
Search Tags:#documentation#accessibility#specification#component#design-system#props#variants
One-click install
npx skills add https://github.com/launchapp-dev/animus-cli --skill component-spec-launchapp-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-spec
Source: https://github.com/launchapp-dev/animus-cli/tree/main/.claude/skills/component-spec
Command: npx skills add https://github.com/launchapp-dev/animus-cli --skill component-spec-launchapp-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams craft thorough, implementation-ready component specifications for design systems, detailing anatomy, states, variants, props, accessibility, and usage guidelines.

Core Features & Use Cases

  • Overview, anatomy, and usage for designers and developers
  • Variants, states, and accessibility considerations to guide implementation
  • Structured documentation that supports handoff to engineering and QA

Quick Start

Describe a complete component spec for a sample UI element including its anatomy, 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
What should a component specification include for a design system?▼

Design system documentation should structure component specifications to include anatomy, variants, props, states, behavior, accessibility, and usage guidelines, covering both designer overview and developer handoff requirements.

How do I write accessibility requirements for component variants?▼

Accessibility requirements for component variants are documented by detailing specific states, behaviors, and usage guidelines, ensuring the specification addresses all necessary accessibility considerations for implementation and QA handoff.

Can I generate a full component spec from a single UI element description?▼

You can generate a comprehensive component specification from a single UI element description by automatically structuring the output to include anatomy, props, states, variants, and accessibility requirements for design system documentation.

What is the best way to document props and states for developer handoff?▼

The best way to document props and states for developer handoff is to create a structured specification that defines the component API, details all behavioral states, and outlines usage guidelines for engineering and QA teams.

Does generating component documentation automatically cover usage guidelines?▼

Yes, generating component documentation automatically covers usage guidelines by producing a structured specification that explicitly includes usage instructions alongside anatomy, variants, states, and accessibility considerations for designers and developers.

Related Skills

Explore More Design & Creative Skills→
PiercingXXPiercingXX
1

sleek

Generate implementation-ready minimalist design-system guidance with tokens, component rules, and WCAG 2.2 AA acceptance criteria.

Community
Intermediate
hulusi-tunchulusi-tunc
3

component-spec

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

Community
Advanced
rakibulismrakibulism
2

design-system

Audit design system components for naming, tokens, states, and accessibility.

Community
Intermediate
soeiroosoeiroo

component-spec

Draft comprehensive component specifications for design systems.

Community
Advanced