csh
3d83740f88
25d895d 🐛 fix(gitea_workflow): clean up temp repos after job steps 2bc3b11 🐛 fix(gitea_workflow): clean up temporary repo dirs in workflows 98c3f30 📝 docs(agent_rules): allow plan execution on current branch 16c7230 📝 docs(prompts): define custom verify layering 8efc4dd 🐛 fix(skills): quote commit-message description bc8498f 🐛 fix(ci): install tomli for gitea tests 55cda3b 🐛 fix(tests): report missing toml parser clearly c0729c7 🐛 fix(playbook): import Optional for cli compatibility 63e24bf 📦 deps(skills): sync thirdparty skills d2f9356 🐛 fix(ci): isolate gitea workflow repos 588b81d 🐛 fix(ci): inline gitea workflow bootstrap e0b1c3a ♻️ refactor(skills): standardize first-party skill contracts 2c5050d ♻️ refactor(skills): rename repo skills source dir f049dfb 📦 deps(skills): drop duplicate first-party superpowers skills 234b335 ✨ feat(workflow): add superpowers planning and execution state tracking c1702a6 📝 docs(markdown): format tracked markdown and drop stale templates 2325409 📝 docs(markdown): clarify optional markdownlint usage 214c44e 🔧 chore(markdown): add markdownlint baseline and lint fixes a22b324 📝 docs(templates): add execution and memory-bank prompt templates 223a797 📝 docs(templates): update README for Claude Code and current features 4ac8672 📝 docs: simplify README + platform-agnostic tools + auto-create local rules 2431c9d 📝 docs: add claude_md config and use cross-platform paths d64b248 📝 docs: fix README.md inaccuracies and add Claude Code info c8d6bf2 🐛 fix(playbook): use relative paths in CLAUDE.md when not at project root 6518f0f ✨ feat(playbook): auto-create CLAUDE.md with path discovery 6ec9a45 ✨ feat(skills): add skill_link symlink support + platform-agnostic prompt 9f8b6b5 📝 docs: update README and config example for Claude Code support 79cff6c 📝 docs(skills): add Claude Code platform support 452c6f5 ✨ feat(playbook): auto-inject AGENTS.md into CLAUDE.md e1dbf3c 🐛 fix(skills): remove dual-path from commit-message skill f3a7259 🔧 chore(ci): use prepare_repo.sh in both workflows da08212 🔧 chore(ci): extract prepare_repo.sh and clean up workflows 7ade85e 🗑️ remove(tsl): drop syntax_book/, data/ source and build script f94dba0 ♻️ refactor(skills): update playbook.py and tests for thirdparty/ layout b3df412 ♻️ refactor(skills): separate thirdparty skills into thirdparty/ subdirectory 64950e7 📦 deps(skills): sync thirdparty skills a2e3cb0 ✨ feat(playbook): add no_backup deploy controls 8609d59 🐛 fix(docs): repair reference catalog source links 956da11 🐛 fix(playbook): publish hidden ci test fixes 3f67754 📦 deps(skills): sync thirdparty skills 08ca87b 📦 deps(skills): add karpathy thirdparty sync 96b705b 📝 docs(tsl): rebuild canonical syntax and routing manual 3ed5052 📦 deps(skills): sync thirdparty skills 60108dd 📦 deps(skills): sync thirdparty skills da85d4e 🐛 fix(thirdparty): prune nested project snapshots a2a697e 📦 deps(skills): sync thirdparty skills 9df610a 🐛 fix(thirdparty): exclude duplicated superpowers skills 33dd5bb 🐛 fix(thirdparty): preserve optional manifest fields 91b0ea7 🐛 fix(thirdparty): preserve manifest during snapshot update 2e26f98 🔧 chore(thirdparty): generalize skills sync pipeline 5b9c1e3 📦 deps(skills): sync superpowers 2f2d34a 📝 docs(readme): normalize subtree command spacing 62db7db 🐛 fix(ci): serialize superpowers update and sync 3463223 🐛 fix(ci): use literal superpowers sync paths 48f6de8 📦 deps(skills): sync superpowers 4b23529 🔧 chore(ci): merge superpowers update and sync workflow a56d75b 📦 deps(skills): sync superpowers 84bcefa 🔧 chore(ci): use ci[bot] commit author name 00a07e5 📦 deps(skills): sync superpowers 7b84daf 🐛 fix(templates): enforce main loop progress tracking 51373d7 🔧 chore(ci): automate superpowers sync workflow eaaa39c 🐛 fix(ci): prevent stale superpowers sync from restoring skills block 79755c6 📦 deps(skills): sync superpowers 836d878 📦 deps(skills): sync superpowers 8216c9f 📦 deps(skills): sync superpowers 9439505 🐛 fix(playbook): address reported repo issues git-subtree-dir: docs/standards/playbook git-subtree-split: 25d895d8b3f56624ccfe99ad7289e9eb49e0f316
16 KiB
16 KiB
| 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 |