Can this skill help with web accessibility?

Absolutely. It prioritizes Radix UI and shadcn for their built-in accessibility features and includes ARIA attributes in its quality checklist.

How does it handle dark mode?

The skill treats dark mode as a first-class citizen, ensuring that 'dark:' variants are applied consistently across all UI components and layouts.

How does the Frontend Design skill choose between UI libraries?

The skill uses a 'Layout First' approach, selecting Tailwind UI for structural patterns, shadcn for interactive components, and Radix UI for custom low-level primitives.

Does this skill support mobile-responsive design?

Yes, the skill enforces a mobile-first approach using standard Tailwind CSS breakpoints (sm, md, lg) for all implementations.

Frontend Design

Name: Frontend Design
Author: alizain

byalizain

0•

Design Tools

Orchestrates Tailwind UI, shadcn/ui, and Radix UI to build production-grade, accessible React interfaces with consistent styling.

The Frontend Design skill provides a standardized workflow for building high-quality React user interfaces within Claude Code. It eliminates guesswork by establishing a clear hierarchy for component implementation: using Tailwind UI for structural layouts, shadcn/ui for interactive elements, and Radix UI for low-level accessibility primitives. The skill includes built-in quality checks for responsiveness, dark mode compatibility, and ARIA compliance, ensuring that every piece of UI generated is polished and follows modern frontend best practices.

Key Features

01Automated component classification for layout vs. interactive needs

02Standardized dark mode implementation using Tailwind CSS variants

030 GitHub stars

04Integrated CLI commands for adding shadcn components on the fly

05Hierarchical orchestration of Tailwind UI, shadcn, and Radix UI components

06Comprehensive quality checklist for mobile-first responsiveness and accessibility

Use Cases

01Scaffolding complex page layouts and hero sections using proven structural patterns

02Implementing accessible forms and interactive overlays with shadcn/ui components

03Refactoring existing frontend code to adhere to professional design system standards

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add alizain/wizard-wheezes frontend-design

For use in Claude.ai and ChatGPT

Download Skill