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

Herramientas de Diseño

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

Acerca de

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.

Características Principales

Automated component classification for layout vs. interactive needs
Standardized dark mode implementation using Tailwind CSS variants
0 GitHub stars
Integrated CLI commands for adding shadcn components on the fly
Hierarchical orchestration of Tailwind UI, shadcn, and Radix UI components
Comprehensive quality checklist for mobile-first responsiveness and accessibility

Casos de Uso

Scaffolding complex page layouts and hero sections using proven structural patterns
Implementing accessible forms and interactive overlays with shadcn/ui components
Refactoring existing frontend code to adhere to professional design system standards

Acerca de

Características Principales

Automated component classification for layout vs. interactive needs
Standardized dark mode implementation using Tailwind CSS variants
0 GitHub stars
Integrated CLI commands for adding shadcn components on the fly
Hierarchical orchestration of Tailwind UI, shadcn, and Radix UI components
Comprehensive quality checklist for mobile-first responsiveness and accessibility

Casos de Uso

Scaffolding complex page layouts and hero sections using proven structural patterns
Implementing accessible forms and interactive overlays with shadcn/ui components
Refactoring existing frontend code to adhere to professional design system standards