Frontend Design Standards

About

This skill elevates AI-generated UI from generic prototypes to production-ready frontend code by enforcing a rigorous mandatory checklist for React and TypeScript. It eliminates 'div soup' through semantic HTML, mandates WCAG-compliant accessibility, ensures theme-driven styling without hardcoded colors, and requires comprehensive state handling for loading, error, and empty views. Ideal for developers building professional web applications, it ensures every component follows modern web standards, mobile-first responsive design, and brand-specific design systems.

Key Features

• Strict theme variable enforcement with zero hardcoded hex or Tailwind colors
• Automated accessibility (WCAG AA) and ARIA landmark compliance
• 0 GitHub stars
• Semantic HTML prioritization to eliminate unnecessary container nesting
• Mandatory 16px typography standards and 44px touch target minimums
• Comprehensive UI state management for loading, error, and success feedback

Use Cases

• Building accessible and theme-consistent React component libraries
• Refactoring generic AI-generated code into brand-specific, production-ready interfaces
• Ensuring mobile-first responsiveness and keyboard navigation in complex web apps