UI Component Specification Generator
Generate production-ready component specs and design system documentation
What You Can Do
You provide Claude with your component requirements, design tokens, and accessibility needs, and it generates comprehensive, production-ready component specifications. The skill produces detailed documentation including prop tables, variant documentation, implementation examples, and accessibility guidelines—everything your design system needs to stay consistent and maintainable at scale.
Features
Creates detailed specifications for UI components including purpose, props, states, behaviors, and design rationale in structured markdown format.
Generates comprehensive design token reference guides covering colors, typography, spacing, shadows, and other foundational design system values.
Automatically includes WCAG 2.1 guidelines, keyboard navigation patterns, ARIA attributes, and testing requirements for each component.
Generates code examples in React, Vue, or plain HTML/CSS showing real-world usage patterns and common variants.
Maps out all component variants, states (hover, focus, disabled, loading), transitions, and when to use each variant.
Produces a hierarchical design system guide including component hierarchy, relationships, and inheritance patterns.
Documents best practices, anti-patterns, common mistakes, and when to use alternative components.
Specifies animations, interactions, transitions, and responsive breakpoints for dynamic component behavior.
Example Output
Button Component Specification
Purpose: Primary action trigger for forms, navigation, and user interactions
Variants: primary | secondary | outline | ghost | danger
Props Table:
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
variant | string | 'primary' | No | Visual style variant |
size | 'sm' | 'md' | 'lg' | 'md' | No | Button size |
disabled | boolean | false | No | Disable interaction |
onClick | function | — | No | Click handler |
Accessibility: Keyboard accessible, focus visible, aria-label support, WCAG AAA contrast ratio ✓
Implementation:
<Button variant="primary" size="md" onClick={handleClick}>
Click Me
</Button>
What's Included
- Component Specification Documents: Detailed markdown specs for each component with purpose, props, variants, behaviors, and rationale.
- Design System Guide: Comprehensive design system documentation including component hierarchy, relationships, and architectural decisions.
- Design Token Reference: Complete documentation of colors, typography scales, spacing system, shadows, and other design tokens with CSS/SCSS variable names.
- Accessibility Checklist: WCAG 2.1 compliance checklist, keyboard navigation specs, ARIA requirements, and testing procedures for each component.
- Implementation Code Examples: Real-world code examples in your chosen framework showing typical usage, variants, and common patterns.
- Component Library Index: Organized index of all components with cross-references, dependency graph, and quick-reference visual guide.
Who It's For
- Design System Managers
- UI/UX Designers
- Design Engineers & Architects
- Frontend Developers
- Product Managers
Best For
- Building design systems from scratch
- Documenting existing component libraries
- Standardizing component behavior across teams
- Scaling accessible design documentation
- Maintaining consistency during design evolution
You might also like
This skill helps you structure and validate residential appraisal reports that meet USPAP (Uniform Standards of Professional Appraisal Practice) requirements. You can quickly organize comparable sales data, run valuation reconciliation, and document your analysis in a format ready for compliance review. It accelerates report generation while ensuring every section meets regulatory standards.
Transform raw market data into a rigorous investment thesis framework that guides real estate development decisions. You provide property details, market conditions, and competitive context — Claude structures them into a comprehensive analysis covering market opportunity, risk factors, financial scenarios, and go/no-go recommendations. The thesis becomes your decision document, aligned with your investment criteria and portfolio strategy.
Systematically evaluate your real estate portfolio's performance against benchmarks, identify assets dragging down returns, and receive data-driven recommendations for rebalancing. You'll uncover concentration risks, compare performance across property types and geographies, and optimize your allocation for better risk-adjusted outcomes.
Transform raw feature analytics into clear, actionable insights by analyzing engagement patterns, identifying performance trends, and synthesizing recommendations. You can compare feature performance across segments, detect anomalies, and generate reports that guide product decisions with data-backed confidence. This skill automates the heavy lifting of analytics interpretation so you focus on strategy.
This skill analyzes user funnels from raw event data or summary metrics to reveal conversion rates, drop-off patterns, and performance trends. You'll receive detailed metrics for each funnel stage, cohort-level insights, and data-driven recommendations for boosting conversions. Get clear visibility into where users abandon your flow and what changes matter most.
This skill helps you draft professional eminent domain appraisal reports, systematically analyze comparable properties, and organize valuation evidence into defensible documentation. You can synthesize property data, calculate adjustment factors, and produce compelling comparable analyses that withstand legal scrutiny.
You can rapidly structure technical talks, develop compelling narratives that work across multiple formats, and automatically repurpose content into blog posts, guides, and social media snippets. The skill ensures your core message remains consistent whether you're presenting live, writing long-form content, or reaching audiences on social platforms.
Accelerate your appraisal process by analyzing comparable properties, calculating price adjustments automatically, and drafting comprehensive appraisal narratives. You provide property data and comparable sales—Claude handles market analysis, adjustment calculations, and formatted report generation with built-in validation to catch data inconsistencies before they reach your final report.