# Frontend Design
> Visual design systems, UI/UX styling, Tailwind CSS, CSS variables, component libraries (shadcn/ui, Radix UI), design tokens, accessibility (WCAG), responsive layout, dark mode, and Figma-to-code workflows. NOT for React component logic, hooks, or state management (use react-development). NOT for Next.js routing, SSR, or server components (use nextjs-development).
- Skill: `viktorbezdek/frontend-design` (Agent Skill, multi-file: 111 files)
- Install (CLI): `npx skillmds@latest add viktorbezdek/frontend-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/viktorbezdek/frontend-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- License: MIT
- Author: viktorbezdek (https://skillmd.com/u/viktorbezdek)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/viktorbezdek/frontend-design
---
# Frontend Design (UI/UX)
Comprehensive skill for creating beautiful, accessible, and performant user interfaces. This curated skill merges expertise from 11 specialized frontend/UI skills covering design systems, component libraries, CSS frameworks, accessibility patterns, and visual design principles.
## When to Use This Skill
Use this skill when:
- Building UI components with React, Vue, or Next.js
- Implementing design systems (shadcn/ui, Radix UI, fpkit)
- Styling with Tailwind CSS, CSS Modules, or CSS-in-JS
- Creating responsive, mobile-first layouts
- Implementing dark mode and theme customization
- Building accessible components (WCAG 2.2 compliance)
- Generating design tokens from Figma
- Creating component libraries with TypeScript
- Rapid prototyping with immediate visual feedback
- Evaluating and improving UI quality with Playwright
- A/B testing UI variations
---
## Quick Start Decision Tree
```
User Request -> What is the goal?
|
+-- Creating new UI component?
| +-- Simple component -> Quick Start: Component Creation
| +-- Full page/app -> Workflow 1: Full UI Creation
| +-- shadcn/ui component -> Use shadcn_add.py script
| +-- fpkit component -> Use scaffold_component.py script
|
+-- Styling existing UI?
| +-- Tailwind CSS -> Load references/tailwind-utilities.md
| +-- CSS Variables -> Load references/css-variables.md
| +-- Theme customization -> Load references/shadcn-theming.md
|
+-- Design system work?
| +-- Design tokens from Figma -> Use extract_tokens.py, transform_tokens.py
| +-- Token validation -> Use validate_tokens.py
| +-- Component library setup -> Load references/component-patterns.md
|
+-- Accessibility concerns?
| +-- WCAG compliance -> Load references/accessibility-guidelines.md
| +-- Audit existing UI -> Use audit_accessibility.sh
| +-- Accessible patterns -> Load references/accessibility-patterns.md
|
+-- Evaluating/Testing UI?
| +-- Quality evaluation -> Use evaluate-ui.ts
| +-- A/B comparison -> Use compare-variations.ts
| +-- CSS validation -> Use validate_css_vars.py
|
+-- Performance optimization?
+-- Load references/PERFORMANCE_OPTIMIZATION.md
+-- Core Web Vitals guidance
```
---
## Core Stack Architecture
### The Three Pillars
**Layer 1: TailwindCSS (Styling Foundation)**
- Utility-first CSS framework with build-time generation
- Zero runtime overhead, minimal production bundles
- Design tokens: colors, spacing, typography, breakpoints
- Responsive utilities and dark mode support
**Layer 2: Radix UI (Behavior & Accessibility)**
- Unstyled, accessible component primitives
- WAI-ARIA compliant with keyboard navigation
- Focus management and screen reader support
- Unopinionated - full styling control
**Layer 3: shadcn/ui (Beautiful Components)**
- Pre-built components = Radix primitives + Tailwind styling
- Copy-paste distribution (you own the code)
- Built-in React Hook Form + Zod validation
- Customizable variants with type safety
**Key Principle:** Each layer enhances the one below. Start with Tailwind for styling, add Radix for accessible behavior, use shadcn/ui for complete components.
---
## Quick Start: Component Setup
### shadcn/ui + Tailwind Setup
```bash
# Initialize shadcn/ui (includes Tailwind)
npx shadcn@latest init
# Add components
npx shadcn@latest add button card dialog form
# Or use the automation script
python scripts/shadcn_add.py button card dialog
```
### Basic Component Example
```tsx
import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
export function Dashboard() {
return (
Analytics
View your metrics
)
}
```
---
## Design Token System
### Three-Tier Token Architecture
```css
:root {
/* Tier 1: Primitives (immutable) */
--gray-50: 250 250 250;
--gray-900: 24 24 27;
--blue-500: oklch(0.55 0.22 264);
/* Tier 2: Semantics (theme-aware) */
--background: var(--gray-50);
--foreground: var(--gray-900);
--primary: var(--blue-500);
/* Tier 3: Components */
--button-height: 2.5rem;
--card-padding: 1.5rem;
}
.dark {
/* Only semantic tokens change */
--background: var(--gray-900);
--foreground: var(--gray-50);
}
```
### Figma to Code Workflow
```bash
python scripts/extract_tokens.py --file-key YOUR_FIGMA_KEY
python scripts/transform_tokens.py tokens.json --format css
python scripts/validate_tokens.py tokens.json
```
**Load references:** `references/DESIGN_TOKENS.md`, `references/token-naming-conventions.md`
---
## Accessibility Standards
### WCAG 2.2 Contrast Requirements
| Level | Normal Text | Large Text | UI Components |
|-------|-------------|------------|---------------|
| AA (Required) | 4.5:1 | 3:1 | 3:1 |
| AAA (Enhanced) | 7:1 | 4.5:1 | 4.5:1 |
### Accessibility Checklist
- [ ] Semantic HTML (`