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
Create comprehensive KPI dashboards that track supply chain performance across cost, quality, delivery, and service metrics. Automate variance analysis to identify root causes of performance deviations and generate executive-level reports that translate operational data into actionable insights for leadership and stakeholders.
by skillslib
You'll design robust SCADA system architectures, configure industrial protocols (Modbus, Profibus, OPC-UA, DNP3), and diagnose connectivity and performance issues across distributed control networks. Get step-by-step configuration guidance, integration workflows, and troubleshooting decision trees tailored to your specific hardware and protocol stack.
by skillslib
You can establish systematic color grading workflows that accelerate project delivery, ensure visual consistency across episodes and projects, and maintain broadcast-quality standards. Claude generates reusable templates, quality control checklists, and grading decision frameworks tailored to your project's color science and deliverable requirements.
by skillslib
You can orchestrate every aspect of your live event with a unified command center that responds to real-time incidents, coordinates teams across departments, and adjusts plans on the fly. The skill generates contingency workflows, communication protocols, and decision frameworks so you stay ahead of problems instead of reacting to them. You'll have structured guidance for everything from timeline adjustments to vendor coordination to emergency escalations.
by skillslib
You'll build complete activation funnels by analyzing user behavior, identifying conversion bottlenecks, and designing targeted onboarding campaigns. Claude creates customer journey maps, funnel stage definitions, engagement messaging frameworks, and A/B testing strategies tailored to your product and audience.
by skillslib
Use Claude to automate your entire collection workflow, from first touch to recovery, with legally sound escalation protocols. You'll recover more money in less time, reduce bad debt write-offs by 25-40%, and build defensible collection records that withstand legal scrutiny. Claude handles customized demand letters, compliance validation, debtor profiling, and escalation strategies tailored to account age, debtor behavior, and jurisdiction.
by skillslib
You can conduct comprehensive active transportation network audits that identify missing links, connectivity gaps, and underserved communities. Claude helps you prioritize infrastructure investments against limited budgets using equity screening, mode-share modeling, and cost-benefit analysis—producing client-ready documentation and stakeholder presentations that justify infrastructure decisions with quantitative evidence rather than assumptions.
by skillslib
This skill helps you troubleshoot Wwise integration issues, diagnose audio performance bottlenecks, and generate comprehensive documentation for interactive audio specifications. You'll get step-by-step fixes for common implementation problems, performance optimization strategies, and best practices for audio systems across different game engines and platforms.
by skillslib