diff --git a/apps/admin/CLAUDE.md b/apps/admin/CLAUDE.md new file mode 100644 index 0000000..a15e18f --- /dev/null +++ b/apps/admin/CLAUDE.md @@ -0,0 +1,114 @@ +# Admin Dashboard UI — Implementation Rules + +Applies to all UI work inside `apps/admin/`. These rules take precedence over +general project conventions for anything under this directory. + +--- + +## 1. Component Library — ShadCN UI Only + +All UI must be composed strictly from ShadCN UI components. No other component +libraries, no raw HTML element styling where a ShadCN component exists. + +**Before building any UI, check if ShadCN has a component for it:** + +| Category | Components | +|--------------|-----------| +| Layout | `Sheet`, `Separator`, `ScrollArea`, `ResizablePanel` | +| Navigation | `NavigationMenu`, `Breadcrumb`, `Tabs` | +| Data display | `Table`, `Card`, `Badge`, `Avatar` | +| Forms | `Form`, `Input`, `Select`, `Checkbox`, `Switch`, `Textarea`, `RadioGroup`, `DatePicker` | +| Feedback | `Toast` (via Sonner), `Alert`, `Dialog`, `AlertDialog` | +| Loading | `Skeleton` | +| Actions | `Button`, `DropdownMenu`, `ContextMenu`, `Command` | + +**Install components via the ShadCN CLI — never copy-paste or hand-write ShadCN component source:** + +```bash +npx shadcn@latest add button +npx shadcn@latest add table +``` + +**ShadCN best practices:** + +- Use `cn()` from `lib/utils.ts` for all conditional className merging — never string concatenation +- Extend ShadCN components via `className` props, never modify files in `components/ui/` directly +- Use `variant` and `size` props before reaching for custom styles +- Compose complex components by combining primitives — a stat card is `Card` + `CardHeader` + `CardContent`, not a custom div +- Use `asChild` when you need to change the rendered element (e.g. wrapping a Next.js `Link` in a `Button`) + +--- + +## 2. Skills & MCP Usage + +**Always invoke the `shadcn-ui` skill** before starting any new page or significant component: + +``` +/shadcn-ui +``` + +The skill guides intentional layout, spacing, and visual hierarchy decisions within the ShadCN constraint. + +**If the ShadCN MCP server is available**, use it to look up component APIs before implementing. Do not guess prop names or variant values from memory. + +**When MCP is unavailable**, refer to https://ui.shadcn.com/docs/components before writing component usage. + +--- + +## 3. No SEO + +- No `` metadata beyond the bare minimum `layout.tsx` title +- No `generateMetadata` functions on admin pages +- No Open Graph, Twitter card, or structured data tags +- No sitemap or robots.txt entries for admin routes + +--- + +## 4. Accessibility — Required Minimums + +ShadCN handles most accessibility via Radix UI primitives. Additionally ensure: + +- All interactive elements are keyboard navigable (use ShadCN correctly and this is automatic) +- Form fields always have an associated `