frontend-designlisted

# 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 | +-- Desig