ui-ux-pro-max-skill/skills/ui-ux-pro-max/data/stacks/shadcn.csv

1	No	Category	Guideline	Description	Do	Don't	Code Good	Code Bad	Severity	Docs URL
2	1	Setup	Use CLI for installation	Install components via shadcn CLI for proper setup	npx shadcn@latest add component-name	Manual copy-paste from docs	npx shadcn@latest add button	Copy component code manually	High	https://ui.shadcn.com/docs/cli
3	2	Setup	Initialize project properly	Run init command to set up components.json and globals.css	npx shadcn@latest init before adding components	Skip init and add components directly	npx shadcn@latest init	npx shadcn@latest add button (without init)	High	https://ui.shadcn.com/docs/installation
4	4	Theming	Use CSS variables for colors	Define colors as CSS variables in globals.css for theming	CSS variables in :root and .dark	Hardcoded color values in components	bg-primary text-primary-foreground	bg-blue-500 text-white	High	https://ui.shadcn.com/docs/theming
5	5	Theming	Follow naming convention	Use semantic color names with foreground pattern	primary/primary-foreground secondary/secondary-foreground	Generic color names	--primary --primary-foreground	--blue --light-blue	Medium	https://ui.shadcn.com/docs/theming
6	6	Theming	Support dark mode	Include .dark class styles for all custom CSS	Define both :root and .dark color schemes	Only light mode colors	.dark { --background: 240 10% 3.9%; }	No .dark class styles	High	https://ui.shadcn.com/docs/dark-mode
7	11	Dialog	Use Dialog for modal content	Dialog component for overlay modal windows	Dialog for confirmations forms details	Alert for modal content	<Dialog><DialogContent>	<Alert> styled as modal	High	https://ui.shadcn.com/docs/components/dialog
8	12	Dialog	Handle dialog state properly	Use open and onOpenChange for controlled dialogs	Controlled state with useState	Uncontrolled with default open only	<Dialog open={open} onOpenChange={setOpen}>	<Dialog defaultOpen={true}>	Medium	https://ui.shadcn.com/docs/components/dialog
9	13	Dialog	Include proper dialog structure	Use DialogHeader DialogTitle DialogDescription	Complete semantic structure	Missing title or description	<DialogHeader><DialogTitle><DialogDescription>	<DialogContent><p>Content</p></DialogContent>	High	https://ui.shadcn.com/docs/components/dialog
10	16	Form	Use Form with react-hook-form	Integrate Form component with react-hook-form for validation	useForm + Form + FormField pattern	Custom form handling without Form	<Form {...form}><FormField control={form.control}>	<form onSubmit={handleSubmit}>	High	https://ui.shadcn.com/docs/components/form
11	17	Form	Use FormField for inputs	Wrap inputs in FormField for proper labeling and errors	FormField + FormItem + FormLabel + FormControl	Input without FormField wrapper	<FormField><FormItem><FormLabel><FormControl><Input>	<Input onChange={...}>	High	https://ui.shadcn.com/docs/components/form
12	18	Form	Display form messages	Use FormMessage for validation error display	FormMessage after FormControl	Custom error text without FormMessage	<FormControl><Input/></FormControl><FormMessage/>	<Input/>{error && <span>{error}</span>}	Medium	https://ui.shadcn.com/docs/components/form
13	19	Form	Use Zod for validation	Define form schema with Zod for type-safe validation	zodResolver with form schema	Manual validation logic	zodResolver(formSchema)	validate: (values) => { if (!values.email) }	Medium	https://ui.shadcn.com/docs/components/form
14	20	Select	Use Select for dropdowns	Select component for option selection	Select for choosing from list	Native select element	<Select><SelectTrigger><SelectContent>	<select><option>	Medium	https://ui.shadcn.com/docs/components/select
15	21	Select	Structure Select properly	Include Trigger Value Content and Items	Complete Select structure	Missing SelectValue or SelectContent	<SelectTrigger><SelectValue/></SelectTrigger><SelectContent><SelectItem>	<Select><option>	High	https://ui.shadcn.com/docs/components/select
16	25	Table	Include proper table structure	Use TableHeader TableBody TableRow TableCell	Semantic table structure	Missing thead or tbody	<TableHeader><TableRow><TableHead>	<Table><TableRow> without header	High	https://ui.shadcn.com/docs/components/table
17	26	DataTable	Use DataTable for complex tables	Combine Table with TanStack Table for features	DataTable pattern for sorting filtering pagination	Custom table implementation	useReactTable + Table components	Custom sort filter pagination logic	Medium	https://ui.shadcn.com/docs/components/data-table
18	27	Tabs	Use Tabs for content switching	Tabs component for tabbed interfaces	Tabs for related content sections	Custom tab implementation	<Tabs><TabsList><TabsTrigger><TabsContent>	<div onClick={() => setTab(...)}	Medium	https://ui.shadcn.com/docs/components/tabs
19	29	Accordion	Use Accordion for collapsible	Accordion for expandable content sections	Accordion for FAQ settings panels	Custom collapse implementation	<Accordion><AccordionItem><AccordionTrigger>	<div onClick={() => setOpen(!open)}>	Medium	https://ui.shadcn.com/docs/components/accordion
20	32	Toast	Add Toaster to layout	Include Toaster component in root layout	<Toaster /> in app layout	Toaster in individual pages	app/layout.tsx: <Toaster />	page.tsx: <Toaster />	High	https://ui.shadcn.com/docs/components/sonner
21	36	DropdownMenu	Use DropdownMenu for actions	DropdownMenu for action lists and context menus	DropdownMenu for user menu actions	Popover for action lists	<DropdownMenu><DropdownMenuTrigger><DropdownMenuContent>	<Popover> for menu actions	Medium	https://ui.shadcn.com/docs/components/dropdown-menu
22	37	DropdownMenu	Group menu items	Use DropdownMenuGroup and DropdownMenuSeparator	Organized menu with separators	Flat list of items	<DropdownMenuGroup><DropdownMenuItem><DropdownMenuSeparator>	<DropdownMenuItem> without organization	Low	https://ui.shadcn.com/docs/components/dropdown-menu
23	39	Tooltip	Add TooltipProvider	Wrap app or section in TooltipProvider	TooltipProvider at app level	TooltipProvider per tooltip	<TooltipProvider><App/></TooltipProvider>	<Tooltip><TooltipProvider>	High	https://ui.shadcn.com/docs/components/tooltip
24	42	AlertDialog	Use AlertDialog for confirms	AlertDialog for destructive action confirmation	AlertDialog for delete confirmations	Dialog for confirmations	<AlertDialog><AlertDialogTrigger><AlertDialogContent>	<Dialog> for delete confirmation	High	https://ui.shadcn.com/docs/components/alert-dialog
25	43	AlertDialog	Include action buttons	Use AlertDialogAction and AlertDialogCancel	Standard confirm/cancel pattern	Custom buttons in AlertDialog	<AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction>	<Button>Cancel</Button><Button>Confirm</Button>	Medium	https://ui.shadcn.com/docs/components/alert-dialog
26	45	Sidebar	Wrap in SidebarProvider	Use SidebarProvider for sidebar state management	SidebarProvider at layout level	Sidebar without provider	<SidebarProvider><Sidebar></SidebarProvider>	<Sidebar> without provider	High	https://ui.shadcn.com/docs/components/sidebar
27	46	Sidebar	Use SidebarTrigger	Include SidebarTrigger for mobile toggle	SidebarTrigger for responsive toggle	Custom toggle button	<SidebarTrigger/>	<Button onClick={() => toggleSidebar()}>	Medium	https://ui.shadcn.com/docs/components/sidebar
28	47	Chart	Use Chart for data viz	Chart component with Recharts integration	Chart component for dashboards	Direct Recharts without wrapper	<ChartContainer config={chartConfig}>	<ResponsiveContainer><BarChart>	Medium	https://ui.shadcn.com/docs/components/chart
29	49	Chart	Use ChartTooltip	Apply ChartTooltip for interactive charts	ChartTooltip with ChartTooltipContent	Recharts Tooltip directly	<ChartTooltip content={<ChartTooltipContent/>}/>	<Tooltip/> from recharts	Low	https://ui.shadcn.com/docs/components/chart
30	50	Blocks	Use blocks for scaffolding	Start from shadcn blocks for common layouts	npx shadcn@latest add dashboard-01	Build dashboard from scratch	npx shadcn@latest add login-01	Custom login page from scratch	Medium	https://ui.shadcn.com/blocks
31	51	Blocks	Customize block components	Modify copied block code to fit needs	Edit block files after installation	Use blocks without modification	Customize dashboard-01 layout	Use dashboard-01 as-is	Low	https://ui.shadcn.com/blocks
32	53	A11y	Maintain focus management	Dialog Sheet handle focus automatically	Let components manage focus	Custom focus handling	<Dialog> traps focus	document.querySelector().focus()	High	https://ui.shadcn.com/docs/components/dialog
33	56	Performance	Lazy load dialogs	Dynamic import for heavy dialog content	React.lazy for dialog content	Import all dialogs upfront	const HeavyContent = lazy(() => import('./Heavy'))	import HeavyContent from './Heavy'	Medium