Design System Audit & Component Specification Generator
Audit design systems and generate component specs with accessibility reports
What You Can Do
You audit your existing design system against industry best practices, identifying gaps in consistency, coverage, and accessibility. The skill generates detailed component specifications with variants, props, and code examples ready for developer handoff, and produces WCAG 2.1 compliance documentation for every component. You receive a prioritized roadmap for improving system maturity, complete with visual consistency checks and accessibility remediation guidance.
Features
Comprehensive evaluation of your design tokens, components, and patterns against established design system best practices and industry standards
Auto-generates detailed specs for each component including all variants, props with types, usage guidelines, and implementation code examples
Assesses every component against Level AA standards, identifies violations, and provides specific remediation steps with priority ratings
Catalogs all colors, typography scales, spacing systems, and shadows with validation checks for consistency and proper naming conventions
Visualizes relationships between components, identifies composition patterns, and highlights opportunities for reusability and consolidation
Detects deviations in spacing, sizing, color usage, and typography across your component library with flagged inconsistencies
Generates specs in multiple formats (Markdown, JSON, HTML) compatible with Figma, Storybook, design tools, and developer documentation platforms
Prioritized recommendations for system improvements, maturity scoring, and phased rollout guidance for closing identified gaps
Example Output
Button Component Specification
Variants: Primary, Secondary, Tertiary, Destructive, Ghost
Sizes: Small (32px), Medium (40px), Large (48px)
States: Default, Hover, Active, Disabled, Loading
Accessibility Assessment
- ✓ Color contrast: 5.2:1 (WCAG AAA compliant)
- ✓ Keyboard navigation: Full tab and arrow key support
- ✓ Screen reader: Proper ARIA labels and button roles
- ⚠ Touch target size: 36px on mobile (recommend 44px+)
- ✗ Loading state missing aria-busy="true"
Issues & Recommendations
- Inconsistent icon sizing — Icons 16px in Small, 20px in Medium (recommend 16px, 20px, 24px)
- Missing focus indicator — No visible focus ring on keyboard navigation
- Disabled state contrast — 3.1:1 ratio fails WCAG AA (needs 4.5:1)
Implementation Priority
- Critical: Fix disabled state contrast, add aria-busy to loading state
- High: Implement visible focus ring, standardize icon sizing
- Medium: Increase mobile touch target to 44px
What's Included
- Complete Audit Report: Full assessment document covering consistency, coverage gaps, accessibility issues, and overall system maturity score
- Component Specification Templates: Detailed specs for each component including variants, props, accessibility notes, and implementation code examples
- WCAG 2.1 Compliance Checklist: Component-by-component accessibility assessment with violation severity, remediation steps, and compliance status
- Design Token Inventory: Comprehensive catalog of all design tokens with usage frequency, validation status, and consistency checks
- Visual Consistency Analysis: Detailed report of spacing, sizing, color, and typography deviations with visual examples and correction guidance
- Prioritized Implementation Roadmap: Actionable recommendations ranked by impact and effort, with phased rollout suggestions for system improvements
Who It's For
- Design System Leads & Architects
- UX/Product Design Managers
- Design Engineers & Front-End Architects
- Accessibility & QA Specialists
- Engineering Leaders Planning Design System Maturity
Best For
- Auditing existing design systems for gaps and inconsistencies
- Generating component specifications for developer handoff
- Creating accessibility compliance documentation
- Standardizing design tokens across teams and products
- Planning design system modernization and maturity improvements
You might also like
You'll systematically analyze user funnels to identify drop-off points, segment performance by user cohorts, and pinpoint exactly where conversions break down. Get prioritized recommendations for removing friction at each stage, backed by statistical analysis and benchmarking insights that directly inform your optimization roadmap.
You get a comprehensive feasibility analysis that combines market demand research, regulatory constraint assessment, financial modeling, and timeline evaluation. The skill produces professional-grade reports quantifying opportunity cost, identifying regulatory barriers, projecting ROI scenarios, and highlighting key risks—giving you confidence to greenlight or pass on development opportunities. Use it to validate assumptions before land acquisition, secure financing, or present deals to stakeholders.
Upload your funnel metrics and this skill will analyze conversion patterns, identify drop-off stages, and generate prioritized experiments to improve your conversion rates. You get actionable recommendations backed by statistical rigor, including A/B test designs, cohort segmentation insights, and impact projections for each optimization.
Create comprehensive metric definition frameworks that directly align your product metrics with business objectives and ensure consistent measurement practices across teams. You'll develop standardized metric definitions with clear calculation methodologies, success criteria, and governance structures that reduce measurement inconsistency. The result is a shared organizational language around metrics that enables confident data-driven decision making.
You can organize and reconcile multiple property valuation approaches—income, sales comparison, and cost methods—using structured comparable analysis. The skill helps you document adjustment matrices, weight different valuation approaches, and produce defensible appraisal reconciliation reports that demonstrate sound professional judgment and market data analysis.
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 creates comprehensive design system documentation and component specifications from your design assets and requirements. You can generate detailed component specs with props, variants, accessibility guidelines, and implementation examples in minutes. Your entire team gets aligned, up-to-date design documentation that reduces ambiguity and accelerates development velocity.
Analyze real estate acquisition opportunities by generating professional-grade financial models, comparable property analysis, and comprehensive investment thesis documentation. You can evaluate cap rates, project cash flows, assess risk factors, and produce executive summaries that support acquisition decisions with data-driven insights and valuation metrics.