skills.rest
hpsgd
hpsgdOFFICIAL
Explore all skills by this author →
WebsiteGitHub

component-spec

Generate machine-parseable component specifications for UI design systems.

Updated Apr 1, 2026
Search Tags:#design#documentation#accessibility#ui-design#design-systems#component-spec
One-click install
npx skills add https://github.com/hpsgd/claude-marketplace --skill component-spec-hpsgd
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-spec
Source: https://github.com/hpsgd/claude-marketplace/tree/main/plugins/product/ui-designer/skills/component-spec
Command: npx skills add https://github.com/hpsgd/claude-marketplace --skill component-spec-hpsgd

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Component specifications often lag behind design reality, leading to ambiguous APIs, missing states, and inconsistent implementations. This skill provides a complete, machine-readable and engineer-friendly specification that you can load into your tooling to drive development and QA.

Core Features & Use Cases

  • Uplinks a precise props API, states, and accessibility requirements into a single spec.
  • Guides engineers from design intent to implementation with concrete examples and usage scenarios.
  • Use Case: When handing off a new UI component, generate a full spec that covers purpose, props, states, responsive behavior, accessibility, and usage examples.

Quick Start

Write a component specification for a new Button component that includes its purpose, props, states, and a usage example.

Frequently Asked Questions about component-spec

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

FAQPage Schema
How do I document component specifications for design hand-off?▼

Document component specifications by generating a complete spec covering purpose, props, states, responsive behaviour, accessibility requirements, and usage examples. This bridges design intent and engineering implementation through a machine-parseable frontmatter structure.

What is included in a UI component spec for design systems?▼

A UI component spec includes the component purpose, precise props API, states, responsive behaviour, accessibility requirements, and concrete usage examples. This ensures a complete, machine-readable specification structure.

How do I write component documentation that prevents ambiguous APIs and missing states?▼

Write component documentation that uplinks a precise props API, states, and accessibility requirements into a single spec. This prevents ambiguous APIs and missing states by ensuring a machine-parseable structure drives implementation and QA.

Can I use a machine-readable component spec to drive development and quality checks?▼

You can use a machine-readable component spec to drive development, reviews, and quality checks. The complete spec structure ensures engineers can load the output into tooling to automate implementation and QA processes.

What's the best way to generate a full spec for a new Button component?▼

Generate a full Button component spec by requesting documentation that covers its purpose, props, states, responsive behaviour, accessibility requirements, and a usage example. This provides an engineer-friendly specification for immediate hand-off.

Related Skills

Explore More Design & Creative Skills→
yonetim258852yonetim258852

generate-ui-from-brand

Convert a URL or DESIGN.md into a structured UI specification with design tokens.

Community
Advanced
datamonsterrdatamonsterr

speckit-drift

Compare FR-* and SC-* requirements against code to produce drift reports.

Community
Advanced
JKc66JKc66
14

nothing-design

Applies the Nothing design system to UI tasks when explicitly requested.

Community
Intermediate
superpollo02superpollo02

shadcn

Generate shadcn/ui-inspired component guidance with token-first rules and WCAG 2.2 AA constraints.

Community
Intermediate