UI System Design & Component Documentation
Design systems that scale: document UI patterns, components, and tokens
What You Can Do
You can build comprehensive design system documentation that scales across your organization. Claude analyzes your component specifications, design tokens, and UI patterns to generate structured documentation, accessibility audits, usage guidelines, and interactive examples—all from a single prompt. This skill ensures design consistency, speeds up developer onboarding, and makes your design system a living, maintained artifact.
Features
Generate structured documentation for each component including props, states, variants, code examples, and visual specifications in a format ready for developer handoff.
Document and organize design tokens—colors, typography scales, spacing, shadows, animations—into a centralized, searchable reference that developers can import directly into code.
Validate components against WCAG 2.1 guidelines, identifying contrast issues, keyboard navigation gaps, and screen reader compatibility problems with remediation steps.
Generate working HTML/CSS/React code snippets for each component variant, showing real-world usage patterns that developers can copy, modify, and integrate immediately.
Map all component states, sizes, colors, and combinations into a visual matrix, ensuring no edge cases are missed and every permutation is documented.
Auto-generate do's and don'ts, common pitfalls, and performance considerations for each component based on design and accessibility best practices.
Convert visual specifications, typography scales, and color systems into production-ready CSS variables, Tailwind config, or styled-component templates.
Example Output
Component Documentation Example:
## Button Component
### Props
- `variant`: 'primary' | 'secondary' | 'outline' (required)
- `size`: 'sm' | 'md' | 'lg' (default: 'md')
- `disabled`: boolean (default: false)
- `isLoading`: boolean (default: false)
### Variants
[Primary, Secondary, Outline] × [sm, md, lg] = 9 combinations documented
### Accessibility
✓ WCAG AA contrast: 4.5:1 on all text
✓ Focus visible: 2px outline offset
✓ Keyboard navigation: Enter/Space to activate
### Code Example
<Button variant="primary" size="md" onClick={handleSubmit}>
Submit Form
</Button>
Design Token Registry Example:
## Color Palette
- `--color-primary`: #2563FF (primary actions)
- `--color-success`: #16A34A (confirmations)
- `--color-danger`: #EF4444 (destructive actions)
## Typography
- `--font-heading-lg`: 32px / 1.2 / 600 weight
- `--font-body-md`: 16px / 1.5 / 400 weight
What's Included
- Component Template: Reusable markdown template with sections for props, variants, accessibility, and code examples that you customize for each component.
- Design Token Generator: Script that exports design tokens from your specifications into CSS variables, JSON, or Tailwind config format for immediate developer use.
- Accessibility Audit Checklist: WCAG 2.1 compliance checklist covering contrast, keyboard navigation, screen readers, focus management, and semantic HTML for every component.
- Component Inventory Tracker: Structured format for tracking all components, their status (documented/in-progress/review), dependencies, and version history.
- Usage Guidelines Framework: Template for generating do's/don'ts, best practices, common mistakes, and performance tips automatically from component specs.
- Visual Specification Parser: Techniques for converting Figma specs, design handoff documents, or visual mockups into structured component documentation.
Who It's For
- Design System Leads
- Product Designers
- Frontend Engineers & Architects
- Design Operations Managers
- Brand & Marketing Leaders
Best For
- Building design systems from scratch
- Documenting existing component libraries
- Ensuring WCAG accessibility across components
- Scaling design consistency across multiple product teams
- Creating developer handoff documentation
You might also like
You can design culturally appropriate survey instruments tailored to international development contexts, analyze mixed-methods data by integrating quantitative findings with qualitative insights, and implement robust data quality management systems for your field operations. Claude helps you create survey templates with adaptive logic, develop validation protocols, and produce data quality reports that highlight issues before analysis begins.
by skillslib
Prepare comprehensive expert witness reports and testimony that meet Daubert standards for admissibility and withstand cross-examination scrutiny. You'll get structured case analyses integrating psychological assessments, relevant case law citations, and anticipated counterarguments. The skill helps you document your forensic opinions with the legal rigor required in criminal, civil, and family law proceedings.
by skillslib
You can systematically evaluate architectural options by building decision matrices, identifying trade-offs, and documenting design rationale. This skill generates comparison frameworks, risk assessments, and architecture decision records (ADRs) that help you choose between competing approaches based on concrete criteria like performance, scalability, cost, and team capabilities.
by skillslib
You provide a single core insight or perspective, and this skill transforms it into a complete, coordinated thought leadership content suite across every major channel. It generates optimized articles, social threads, email sequences, presentation outlines, and more—all reinforcing the same core message while adapting to each platform's unique audience and format. Every piece maintains strategic consistency while maximizing reach and engagement.
by skillslib
Analyze commercial insurance applications by extracting risk factors, evaluating loss history and industry exposure, and generating structured underwriting recommendations with standardized documentation. You'll reduce review time per application, ensure consistent decision criteria across your team, and maintain compliant audit trails for every underwriting action.
by skillslib
You can convert raw discovery call notes into polished, multi-section sales proposals that include executive summaries tailored to buyer personas, needs analysis mapped to your solution architecture, tiered pricing options with competitive positioning, ROI projections with financial justification, and realistic implementation timelines. The skill preserves personalization and strategic positioning while automating structural components, letting you respond to RFPs and time-sensitive opportunities without sacrificing quality or consistency.
by skillslib
This skill analyzes property damage claims to identify viable subrogation opportunities against third-party defendants. It quantifies recovery potential using liability assessment, damages analysis, and comparable settlement benchmarks—then develops negotiation-backed strategies to maximize your recovery. The skill guides you through intake, documentation, negotiation, and settlement workflows to transform claims into recoveries.
by skillslib
Turn project descriptions, timelines, and structured data into professional draw.io diagrams instantly. You can generate flowcharts, org charts, Gantt charts, swimlane diagrams, and process flows by describing what you need. Claude creates draw.io XML that you can open directly in the editor or modify further.
by skillslib