frontend-design

name	frontend-design
description	Frontend design patterns for production-grade UI. shadcn/ui component library, layout patterns, accessibility, responsive design, animation. Used by cs-frontend-dev agent.
user-invocable	false

Frontend Design Patterns

Component library: shadcn/ui. Styling: Tailwind CSS v4. Icons: Lucide React.

shadcn/ui Component Library

shadcn/ui provides copy-paste components built on Radix UI + Tailwind CSS. Components live in src/components/ui/ and are fully customizable.

Available Components (46)

Accordion, Alert, AlertDialog, AspectRatio, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Carousel, Chart, Checkbox, Collapsible, Combobox, Command, ContextMenu, DataTable, DatePicker, Dialog, Drawer, DropdownMenu, Form, HoverCard, Input, InputOTP, Label, Menubar, NavigationMenu, Pagination, Popover, Progress, RadioGroup, Resizable, ScrollArea, Select, Separator, Sheet, Skeleton, Slider, Sonner (toast), Switch, Table, Tabs, Textarea, Toggle, ToggleGroup, Tooltip

Installation (via MCP or CLI)

# Install individual components
npx shadcn@latest add button
npx shadcn@latest add card dialog form input label

# Or use shadcn/ui MCP for component details and code

Component Composition Pattern

import { Button } from '@/components/ui/button'
import { Card, , , , ,  }  
 {  }  
 {  }  

   () {
   (
    
  )
}