Does it support Tailwind CSS projects?

Yes, it specifically enforces using Tailwind theme variables (e.g., bg-primary) while prohibiting hardcoded utility classes and hex codes to ensure design system consistency.

How does this skill prevent the 'generic AI look'?

It forbids generic defaults like hardcoded gray-and-blue palettes, enforces brand-specific shape language and typography, and requires micro-interactions that make interfaces feel alive.

What accessibility standards are enforced?

The skill mandates WCAG AA contrast ratios, screen-reader-friendly semantic elements, ARIA labels for icon-only buttons, and focus management for keyboard users.

How does it handle mobile and responsive design?

It requires a mobile-first development approach, ensuring all touch targets meet a 44px minimum and layouts adapt correctly across all device breakpoints.

Can it help with project structure?

Yes, it prevents 'God Components' by enforcing a 250-line limit and requiring the extraction of logic into hooks and sub-components for better maintainability.

Frontend Design Standards

Name: Frontend Design Standards
Author: infiniV

byinfiniV

デザインツール

Enforces production-grade UI standards for React and TypeScript to prevent generic AI aesthetics while ensuring accessibility and theme compliance.

概要

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.

主な機能

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

ユースケース

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

概要

主な機能

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

ユースケース

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