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

0•

デザインツール

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.

主な機能

01Strict theme variable enforcement with zero hardcoded hex or Tailwind colors

02Automated accessibility (WCAG AA) and ARIA landmark compliance

030 GitHub stars

04Semantic HTML prioritization to eliminate unnecessary container nesting

05Mandatory 16px typography standards and 44px touch target minimums

06Comprehensive UI state management for loading, error, and success feedback

ユースケース

01Building accessible and theme-consistent React component libraries

02Refactoring generic AI-generated code into brand-specific, production-ready interfaces

03Ensuring mobile-first responsiveness and keyboard navigation in complex web apps

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add infiniv/secret-ingredients frontend-design-standards

For use in Claude.ai and ChatGPT

Download Skill