``` ```tsx // CORRECT — use the numeric scale

// h-96 = 384px, w-72 = 288px

// 384px — close enough, or max-w-xs / max-w-md

// gap-3.5 = 14px, p-4 = 16px ``` ### 5.2 Numeric Scale Reference ``` h-6 = 24px h-8 = 32px h-10 = 40px h-12 = 48px h-16 = 64px h-20 = 80px h-24 = 96px h-32 = 128px h-48 = 192px h-64 = 256px h-80 = 320px h-96 = 384px gap-1 = 4px gap-2 = 8px gap-3 = 12px gap-4 = 16px gap-5 = 20px gap-6 = 24px p-2 = 8px p-3 = 12px p-4 = 16px p-5 = 20px p-6 = 24px ``` ### 5.3 Use Semantic Width Utilities ```tsx // CORRECT

// 384px

// 448px

// 512px

// 576px

// 672px

// sidebar = 256px

// kanban column = 288px ``` ### 5.4 Responsive Breakpoints Only ```tsx // CORRECT

// WRONG — custom media query

``` --- ## 6. Component Patterns ### 6.1 Card Structure Use `Card > CardHeader + CardContent` for content grouping. ```tsx import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" Section Title {/* content */} ``` ### 6.2 KPI / Stat Cards — py-0 KPI cards use `py-0` on CardContent to let the parent padding control vertical rhythm. ```tsx // CORRECT

Total Agents

// WRONG — default py causes too much padding in stat grids ``` ### 6.3 Sidebar Navigation Standard sidebar width is `w-64` (256px), with `bg-muted/30 border-r`. ```tsx ``` ### 6.4 ScrollArea for Overflow Any list that may overflow its container must use `ScrollArea`. ```tsx import { ScrollArea } from "@/components/ui/scroll-area"

{items.map((item) => )}

``` ### 6.5 Badge Variants ```tsx // Status badge (with dot)

Active

// Type badge OpenClaw ``` ### 6.6 Avoid Inline Styles ```tsx // WRONG

// CORRECT

``` --- ## 7. Hydration Safety ### 7.1 Never Use Date in useState Initializer `new Date()`, `Date.now()`, and `toLocaleTimeString()` return different values on the server vs. the client, causing React hydration errors. ```tsx // WRONG — causes "Hydration failed" error const [events, setEvents] = useState(() => [ { id: "1", timestamp: new Date().toLocaleTimeString() }, ]) // WRONG — locale-dependent const [time, setTime] = useState(new Date().toLocaleTimeString()) ``` ```tsx // CORRECT — static strings for initial SSR state const INITIAL_TIMESTAMPS = ["10:30:00", "10:30:04", "10:30:08"] const [events, setEvents] = useState(() => INITIAL_DATA.slice(0, 3).map((e, i) => ({ ...e, id: `init-${i}`, timestamp: INITIAL_TIMESTAMPS[i], })) ) // Live timestamps only inside useEffect / setInterval (client-only) function nowTimeString() { const d = new Date() return [d.getHours(), d.getMinutes(), d.getSeconds()] .map((n) => String(n).padStart(2, "0")) .join(":") } useEffect(() => { const interval = setInterval(() => { setEvents((prev) => [ ...prev, { id: `evt-${Date.now()}`, timestamp: nowTimeString(), ... } ]) }, 2000) return () => clearInterval(interval) }, []) ``` ### 7.2 suppressHydrationWarning for Intentional Mismatches If a mismatch is truly intentional (e.g. a live clock that intentionally differs): ```tsx {displayTime} ``` --- ## 8. Block Authoring Guide ### 8.1 File Structure Every block consists of two files: 1. `registry/creative-tim/blocks/.tsx` — the component 2. `registry/creative-tim/blocks//page.tsx` — the page wrapper The page wrapper simply renders the block: ```tsx import BlockName from "@/registry/creative-tim/blocks/" export default function Page() { return } ``` ### 8.2 Registry Entry Add to `registry/registry-blocks.ts`: ```ts { name: "my-block-01", type: "registry:block", categories: ["my-category"], meta: { isFree: true, label: "My Block", createdAt: "2026-03-14", }, registryDependencies: ["button", "card", "badge"], // SHORT NAMES ONLY files: [ { path: "registry/creative-tim/blocks/my-block-01.tsx", type: "registry:component", }, { path: "registry/creative-tim/blocks/my-block-01/page.tsx", type: "registry:page", target: "app/blocks/my-block-01/page.tsx", }, ], } ``` **IMPORTANT:** `registryDependencies` must use **short names** (`"button"`, `"card"`, `"badge"`) — never full URLs. ### 8.3 After Adding Blocks Rebuild the registry: ```bash pnpm --filter www registry:build ``` This regenerates `public/r/*.json`, `__index__.tsx`, and `__blocks__.json` (which powers `llms.txt`). ### 8.4 Import Paths in Blocks Use the registry alias, not relative paths: ```tsx import { Button } from "@/registry/creative-tim/ui/button" import { Card, CardContent } from "@/registry/creative-tim/ui/card" ``` ### 8.5 Block Checklist Before submitting a new block: - [ ] No `violet` or `purple` colors — use `orange` for brand accent - [ ] All readable text uses `text-sm` minimum - [ ] No arbitrary Tailwind values (`[10px]`, `[85%]`, etc.) - [ ] KPI/stat `CardContent` uses `px-4 py-0` - [ ] No `new Date()` in `useState` initializers - [ ] No inline `style={{}}` attributes - [ ] `registryDependencies` uses short names - [ ] `registry:build` completes without errors