@reinvented/design 0.4.0 → 1.1.0

package/skills/layouts/settings-page.md

@@ -0,0 +1,106 @@
+# Layout: Settings Page
+
+Narrow content area with sidebar section navigation. Used for app settings, account preferences, and profile editing.
+
+## Complete Template
+
+```tsx
+<div className="max-w-4xl mx-auto px-6 py-8">
+  <h1 className="text-2xl font-bold mb-6">Settings</h1>
+  <div className="flex flex-col sm:flex-row gap-8">
+    <!-- Section navigation -->
+    <nav className="w-full sm:w-48 shrink-0 space-y-1">
+      <button v-for="section in sections" :key="section.id"
+              className={cn('w-full text-left px-3 py-2 rounded-md text-sm transition-colors',
+                activeSection === section.id
+                  ? 'bg-accent font-medium'
+                  : 'text-muted-foreground hover:bg-accent/50')}>
+        {{ section.label }}
+      </button>
+    </nav>
+
+    <!-- Settings content -->
+    <div className="flex-1 space-y-8">
+      <!-- Profile section -->
+      <Card>
+        <CardHeader>
+          <CardTitle>Profile</CardTitle>
+          <CardDescription>Manage your public profile information.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label for="name">Display Name</Label>
+            <Input id="name" defaultValue="name" />
+          </div>
+          <div className="space-y-2">
+            <Label for="bio">Bio</Label>
+            <Textarea id="bio" defaultValue="bio" rows="3" />
+          </div>
+        </CardContent>
+        <CardFooter className="justify-end">
+          <Button>Save Changes</Button>
+        </CardFooter>
+      </Card>
+
+      <!-- Notifications section -->
+      <Card>
+        <CardHeader>
+          <CardTitle>Notifications</CardTitle>
+          <CardDescription>Configure how you receive notifications.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium">Email Notifications</p>
+              <p className="text-xs text-muted-foreground">Receive emails about account activity.</p>
+            </div>
+            <Switch />
+          </div>
+          <Separator />
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium">Push Notifications</p>
+              <p className="text-xs text-muted-foreground">Receive push notifications on your device.</p>
+            </div>
+            <Switch />
+          </div>
+        </CardContent>
+      </Card>
+
+      <!-- Danger zone -->
+      <Card className="border-destructive/50">
+        <CardHeader>
+          <CardTitle>Danger Zone</CardTitle>
+          <CardDescription>Irreversible actions for your account.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium">Delete Account</p>
+              <p className="text-xs text-muted-foreground">Permanently delete your account and all data.</p>
+            </div>
+            <Button variant="destructive" size="sm">Delete Account</Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  </div>
+</div>
+```
+
+## Key Dimensions
+- Content max width: `max-w-4xl` (narrower than standard pages)
+- Sidebar nav: `w-48`
+- Gap between sidebar and content: `gap-8`
+- Gap between settings cards: `space-y-8`
+- Active nav item: `bg-accent font-medium`
+
+## Section Pattern
+Each settings section is a Card with:
+- `CardTitle` and `CardDescription` explaining the section
+- Form fields or toggle rows inside `CardContent`
+- Save button in `CardFooter` (right-aligned)
+- Toggle rows use `flex items-center justify-between` with label on left, `Switch` on right
+
+## Mobile Behavior
+On mobile (below `sm:`), the sidebar nav stacks on top of the content area. Consider using horizontal scrolling tabs as an alternative on mobile.

package/skills/layouts/sidebar.md

@@ -0,0 +1,73 @@
+# Layout: Sidebar
+
+The most common SaaS/dashboard layout. Fixed sidebar on the left, scrollable content area on the right.
+
+## Structure
+
+```tsx
+<div className="flex h-screen bg-background">
+  <!-- Sidebar: fixed width, full height, scrollable if needed -->
+  <aside className="w-64 border-r bg-card flex flex-col shrink-0">
+    <!-- Logo area: h-14 to match any topbar -->
+    <div className="h-14 flex items-center px-4 border-b">
+      <div className="flex items-center gap-2">
+        <div className="w-7 h-7 rounded-md bg-primary flex items-center justify-center">
+          <Zap className="w-4 h-4 text-primary-foreground" />
+        </div>
+        <span className="text-sm font-semibold">App Name</span>
+      </div>
+    </div>
+
+    <!-- Navigation: flexes to fill available space -->
+    <ScrollArea className="flex-1">
+      <nav className="p-3 space-y-1">
+        <!-- Nav items here (see patterns/navigation.md) -->
+      </nav>
+    </ScrollArea>
+
+    <!-- User area: pinned to bottom -->
+    <div className="border-t p-3">
+      <!-- User avatar + name + dropdown -->
+    </div>
+  </aside>
+
+  <!-- Main content area: scrollable independently -->
+  <main className="flex-1 overflow-y-auto">
+    <div className="max-w-7xl mx-auto px-6 py-8">
+      <!-- Page content (see specific patterns) -->
+    </div>
+  </main>
+</div>
+```
+
+## Dimensions
+
+| Element | Value | Notes |
+|---------|-------|-------|
+| Sidebar width | `w-64` (256px) | Standard. Use `w-56` (224px) for compact. |
+| Logo bar height | `h-14` (56px) | Matches topbar height for hybrid layouts. |
+| Nav item padding | `px-3 py-2` | Consistent touch targets. |
+| Content max width | `max-w-7xl` (1280px) | Centered with `mx-auto`. |
+| Content padding | `px-6 py-8` | Standard page padding. |
+
+## Sidebar with Collapsible Groups
+
+For apps with many nav items, group them with collapsible sections:
+
+```tsx
+<Collapsible v-model:open="isProjectsOpen" className="space-y-1">
+  <CollapsibleTrigger className="w-full flex items-center justify-between px-3 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wider hover:text-foreground">
+    Projects
+    <ChevronDown className="w-3 h-3 transition-transform" className={isProjectsOpen && 'rotate-180'} />
+  </CollapsibleTrigger>
+  <CollapsibleContent className="space-y-1">
+    <!-- Sub-items -->
+  </CollapsibleContent>
+</Collapsible>
+```
+
+## When to Use
+- SaaS dashboards and admin panels
+- Apps with 5+ primary navigation sections
+- Apps where users spend long sessions (workspace-style)
+- Any app that needs persistent navigation

package/skills/layouts/topbar.md

@@ -0,0 +1,68 @@
+# Layout: Top Bar
+
+Horizontal navigation at the top. Best for simpler apps, consumer products, and marketing sites.
+
+## Structure
+
+```tsx
+<div className="min-h-screen bg-background">
+  <!-- Top bar -->
+  <header className="sticky top-0 z-50 h-14 border-b bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/60">
+    <div className="flex items-center h-full px-6 max-w-7xl mx-auto">
+      <!-- Logo -->
+      <div className="flex items-center gap-2 shrink-0 mr-6">
+        <div className="w-7 h-7 rounded-md bg-primary flex items-center justify-center">
+          <Zap className="w-4 h-4 text-primary-foreground" />
+        </div>
+        <span className="text-sm font-semibold">App Name</span>
+      </div>
+
+      <!-- Navigation -->
+      <nav className="hidden md:flex items-center gap-1">
+        <Button variant="ghost" size="sm" className="font-medium">Dashboard</Button>
+        <Button variant="ghost" size="sm" className="text-muted-foreground">Projects</Button>
+        <Button variant="ghost" size="sm" className="text-muted-foreground">Team</Button>
+      </nav>
+
+      <!-- Right side -->
+      <div className="ml-auto flex items-center gap-2">
+        <Button variant="ghost" size="icon" className="hidden sm:flex">
+          <Search className="w-4 h-4" />
+        </Button>
+        <Button variant="ghost" size="icon">
+          <Bell className="w-4 h-4" />
+        </Button>
+        <!-- User menu -->
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <Button variant="ghost" size="icon" className="rounded-full">
+              <div className="w-7 h-7 rounded-full bg-gradient-to-br from-primary/60 to-primary" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <!-- User menu items -->
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  </header>
+
+  <!-- Main content -->
+  <main className="max-w-7xl mx-auto px-6 py-8">
+    <!-- Page content -->
+  </main>
+</div>
+```
+
+## Key Details
+
+- **Sticky header**: `sticky top-0 z-50` keeps the nav visible while scrolling
+- **Backdrop blur**: `bg-card/95 backdrop-blur` creates a frosted glass effect
+- **Active nav item**: Use `font-medium` for active, `text-muted-foreground` for inactive
+- **Mobile**: Hide nav links with `hidden md:flex`, show hamburger menu instead
+
+## When to Use
+- Consumer-facing products
+- Sites with 3–5 top-level sections
+- Apps where vertical space is more valuable than horizontal space
+- Marketing sites and landing pages

package/skills/patterns/auth.md

@@ -0,0 +1,131 @@
+# Pattern: Auth
+
+Login, signup, forgot password, and verification screens.
+
+## Login Page
+
+```tsx
+<div className="flex min-h-screen items-center justify-center px-4">
+  <Card className="w-full max-w-sm">
+    <CardHeader className="text-center">
+      <div className="mx-auto w-10 h-10 rounded-lg bg-primary flex items-center justify-center mb-2">
+        <Zap className="w-5 h-5 text-primary-foreground" />
+      </div>
+      <CardTitle className="text-xl">Welcome back</CardTitle>
+      <CardDescription>Sign in to your account</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <form className="space-y-4" @submit.prevent="handleLogin">
+        <div className="space-y-2">
+          <Label for="email">Email</Label>
+          <Input id="email" type="email" placeholder="you@example.com" defaultValue="email" />
+        </div>
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <Label for="password">Password</Label>
+            <Button variant="link" size="sm" className="px-0 h-auto text-xs">Forgot password?</Button>
+          </div>
+          <Input id="password" type="password" defaultValue="password" />
+        </div>
+        <Button type="submit" className="w-full" :disabled="loading">
+          <Loader2 v-if="loading" className="w-4 h-4 animate-spin" />
+          {{ loading ? 'Signing in...' : 'Sign In' }}
+        </Button>
+      </form>
+    </CardContent>
+    <CardFooter className="justify-center">
+      <p className="text-sm text-muted-foreground">
+        Don't have an account? <Button variant="link" className="px-1 h-auto">Sign up</Button>
+      </p>
+    </CardFooter>
+  </Card>
+</div>
+```
+
+## Signup Page
+
+```tsx
+<div className="flex min-h-screen items-center justify-center px-4">
+  <Card className="w-full max-w-sm">
+    <CardHeader className="text-center">
+      <div className="mx-auto w-10 h-10 rounded-lg bg-primary flex items-center justify-center mb-2">
+        <Zap className="w-5 h-5 text-primary-foreground" />
+      </div>
+      <CardTitle className="text-xl">Create your account</CardTitle>
+      <CardDescription>Get started for free</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <form className="space-y-4" @submit.prevent="handleSignup">
+        <div className="grid grid-cols-2 gap-3">
+          <div className="space-y-2">
+            <Label for="first">First Name</Label>
+            <Input id="first" placeholder="Sarah" defaultValue="firstName" />
+          </div>
+          <div className="space-y-2">
+            <Label for="last">Last Name</Label>
+            <Input id="last" placeholder="Chen" defaultValue="lastName" />
+          </div>
+        </div>
+        <div className="space-y-2">
+          <Label for="signup-email">Email</Label>
+          <Input id="signup-email" type="email" placeholder="you@example.com" defaultValue="email" />
+        </div>
+        <div className="space-y-2">
+          <Label for="signup-password">Password</Label>
+          <Input id="signup-password" type="password" defaultValue="password" />
+          <p className="text-xs text-muted-foreground">Must be at least 8 characters.</p>
+        </div>
+        <div className="flex items-start gap-2">
+          <Checkbox id="terms" v-model:checked="agreedToTerms" className="mt-0.5" />
+          <Label for="terms" className="text-xs text-muted-foreground font-normal leading-relaxed">
+            I agree to the Terms of Service and Privacy Policy
+          </Label>
+        </div>
+        <Button type="submit" className="w-full" :disabled="loading">
+          <Loader2 v-if="loading" className="w-4 h-4 animate-spin" />
+          {{ loading ? 'Creating account...' : 'Create Account' }}
+        </Button>
+      </form>
+    </CardContent>
+    <CardFooter className="justify-center">
+      <p className="text-sm text-muted-foreground">
+        Already have an account? <Button variant="link" className="px-1 h-auto">Sign in</Button>
+      </p>
+    </CardFooter>
+  </Card>
+</div>
+```
+
+## Forgot Password
+
+```tsx
+<Card className="w-full max-w-sm">
+  <CardHeader className="text-center">
+    <CardTitle className="text-xl">Reset password</CardTitle>
+    <CardDescription>Enter your email and we'll send you a reset link.</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <form className="space-y-4" @submit.prevent="handleReset">
+      <div className="space-y-2">
+        <Label for="reset-email">Email</Label>
+        <Input id="reset-email" type="email" placeholder="you@example.com" defaultValue="email" />
+      </div>
+      <Button type="submit" className="w-full">Send Reset Link</Button>
+    </form>
+  </CardContent>
+  <CardFooter className="justify-center">
+    <Button variant="link" className="text-sm"><ArrowLeft className="w-4 h-4" /> Back to sign in</Button>
+  </CardFooter>
+</Card>
+```
+
+## Key Design Rules
+
+- **Centered card**: `max-w-sm` on a centered flex container with `min-h-screen`
+- **Logo at top**: Small icon in `bg-primary` rounded square, centered
+- **Full-width submit button**: `className="w-full"` on the primary Button
+- **Footer link**: Toggle between login/signup with a link below the form
+- **Minimal fields**: Only ask for what's absolutely necessary
+- **Password hint**: `text-xs text-muted-foreground` below the password field
+- **Terms checkbox**: `text-xs` label with muted color, never pre-checked
+- **Name fields**: Side-by-side in `grid grid-cols-2 gap-3`

package/skills/patterns/content-display.md

@@ -0,0 +1,164 @@
+# Pattern: Content Display
+
+Card grids, list views, and detail views for browsing and inspecting content.
+
+## Card Grid
+
+Display items as a responsive grid of cards.
+
+```tsx
+<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+  <Card v-for="project in projects" :key="project.id"
+        className="cursor-pointer transition-colors hover:bg-accent/50">
+    <CardHeader className="pb-3">
+      <div className="flex items-center justify-between">
+        <Badge variant="secondary">{{ project.category }}</Badge>
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <Button variant="ghost" size="icon" className="h-8 w-8">
+              <MoreHorizontal className="w-4 h-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem><Pencil className="w-4 h-4" /> Edit</DropdownMenuItem>
+            <DropdownMenuItem className="text-destructive"><Trash2 className="w-4 h-4" /> Delete</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <CardTitle className="text-lg">{{ project.name }}</CardTitle>
+      <CardDescription className="line-clamp-2">{{ project.description }}</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <div className="flex items-center gap-4 text-xs text-muted-foreground">
+        <span className="flex items-center gap-1"><Clock className="w-3 h-3" /> {{ project.updated }}</span>
+        <span className="flex items-center gap-1"><Users className="w-3 h-3" /> {{ project.members }}</span>
+      </div>
+    </CardContent>
+  </Card>
+</div>
+```
+
+## List View (Stacked Cards)
+
+Items displayed as a vertical list with consistent row layout.
+
+```tsx
+<div className="space-y-2">
+  <Card v-for="item in items" :key="item.id"
+        className="cursor-pointer transition-colors hover:bg-accent/50">
+    <CardContent className="flex items-center gap-4 p-4">
+      <!-- Visual identifier -->
+      <div className="w-10 h-10 rounded-lg bg-muted flex items-center justify-center shrink-0">
+        <FileText className="w-5 h-5 text-muted-foreground" />
+      </div>
+      <!-- Content -->
+      <div className="flex-1 min-w-0">
+        <p className="text-sm font-medium truncate">{{ item.title }}</p>
+        <p className="text-xs text-muted-foreground">{{ item.subtitle }}</p>
+      </div>
+      <!-- Metadata -->
+      <div className="hidden sm:flex items-center gap-4 shrink-0">
+        <Badge variant="secondary">{{ item.status }}</Badge>
+        <span className="text-xs text-muted-foreground">{{ item.date }}</span>
+      </div>
+      <!-- Chevron -->
+      <ChevronRight className="w-4 h-4 text-muted-foreground shrink-0" />
+    </CardContent>
+  </Card>
+</div>
+```
+
+## Status Cards
+
+When cards represent items with a specific severity or status (e.g., active, warning, failed), use semantic badges or status dots instead of coloring the card's borders or background. This maintains the "Quiet Confidence" design principle.
+
+```tsx
+<!-- ✅ Recommended: Status Dot (Minimal) -->
+<Card>
+  <CardHeader className="flex flex-row items-center gap-2 pb-2">
+    <div className="w-2 h-2 rounded-full bg-destructive shrink-0" />
+    <CardTitle className="text-sm font-medium">Payment Failed</CardTitle>
+  </CardHeader>
+</Card>
+
+<!-- ✅ Recommended: Semantic Badge (Explicit) -->
+<Card>
+  <CardHeader className="flex flex-row items-center justify-between pb-2">
+    <CardTitle className="text-sm font-medium">Server Alpha</CardTitle>
+    <Badge variant="warning">High Load</Badge>
+  </CardHeader>
+</Card>
+
+<!-- ❌ Anti-Pattern: Heavy colored borders or backgrounds -->
+<!-- Do NOT use: <Card className="border-l-4 border-l-destructive"> -->
+```
+
+## Detail View
+
+Full view of a single entity with header, metadata, and tabbed content.
+
+```tsx
+<div className="max-w-4xl mx-auto px-6 py-8 space-y-6">
+  <!-- Back button -->
+  <Button variant="ghost" size="sm" className="gap-1">
+    <ArrowLeft className="w-4 h-4" /> Back to Projects
+  </Button>
+
+  <!-- Header -->
+  <div className="flex items-start justify-between">
+    <div className="space-y-1">
+      <div className="flex items-center gap-3">
+        <h1 className="text-2xl font-bold">Project Alpha</h1>
+        <Badge>Active</Badge>
+      </div>
+      <p className="text-muted-foreground">Created by Sarah Chen · Updated 2 hours ago</p>
+    </div>
+    <div className="flex items-center gap-2">
+      <Button variant="outline"><Pencil className="w-4 h-4" /> Edit</Button>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <Button variant="outline" size="icon"><MoreHorizontal className="w-4 h-4" /></Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem>Duplicate</DropdownMenuItem>
+          <DropdownMenuItem>Archive</DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem className="text-destructive">Delete</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  </div>
+
+  <!-- Tabbed content -->
+  <Tabs default-value="overview">
+    <TabsList>
+      <TabsTrigger value="overview">Overview</TabsTrigger>
+      <TabsTrigger value="tasks">Tasks <Badge variant="secondary" className="ml-1.5">12</Badge></TabsTrigger>
+      <TabsTrigger value="activity">Activity</TabsTrigger>
+    </TabsList>
+    <TabsContent value="overview" className="mt-6">
+      <!-- Overview content -->
+    </TabsContent>
+  </Tabs>
+</div>
+```
+
+## View Switcher (Grid/List Toggle)
+
+```tsx
+<div className="flex items-center justify-between">
+  <p className="text-sm text-muted-foreground">{{ items.length }} items</p>
+  <ToggleGroup type="single" defaultValue="viewMode">
+    <ToggleGroupItem value="grid" aria-label="Grid view"><LayoutGrid className="w-4 h-4" /></ToggleGroupItem>
+    <ToggleGroupItem value="list" aria-label="List view"><List className="w-4 h-4" /></ToggleGroupItem>
+  </ToggleGroup>
+</div>
+```
+
+## When to Use Which
+
+| Content Type | Display |
+|-------------|---------|
+| Visual items (products, media, projects) | Card grid |
+| Text-heavy items (documents, tasks, emails) | List view |
+| Single entity with sections | Detail view with tabs |

package/skills/patterns/dashboards.md

@@ -0,0 +1,104 @@
+# Pattern: Dashboards
+
+Stats, KPIs, chart areas, activity feeds, and overview layouts.
+
+## Stat Cards Row
+
+```tsx
+<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+  <Card v-for="stat in stats" :key="stat.label">
+    <CardHeader className="flex flex-row items-center justify-between pb-2">
+      <CardTitle className="text-sm font-medium">{{ stat.label }}</CardTitle>
+      <component :is="stat.icon" className="h-4 w-4 text-muted-foreground" />
+    </CardHeader>
+    <CardContent>
+      <div className="text-2xl font-bold">{{ stat.value }}</div>
+      <p className="text-xs text-muted-foreground">{{ stat.change }}</p>
+    </CardContent>
+  </Card>
+</div>
+```
+
+Stat data example:
+```ts
+const stats = ref([
+  { label: 'Total Revenue', value: '$45,231', change: '+20.1% from last month', icon: DollarSign },
+  { label: 'Subscriptions', value: '2,350', change: '+180 this month', icon: Users },
+  { label: 'Active Now', value: '573', change: '+12 since last hour', icon: Activity },
+  { label: 'Conversion Rate', value: '3.2%', change: '+0.4% from last month', icon: TrendingUp },
+])
+```
+
+## Dashboard Layout (Stats + Chart + Table)
+
+```tsx
+<div className="space-y-6">
+  <!-- Page Header -->
+  <div className="flex items-center justify-between">
+    <div>
+      <h1 className="text-2xl font-bold">Dashboard</h1>
+      <p className="text-muted-foreground">Overview of your business metrics.</p>
+    </div>
+    <Button variant="outline"><Download className="w-4 h-4" /> Export</Button>
+  </div>
+
+  <!-- Stats Row -->
+  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+    <!-- 4 stat cards -->
+  </div>
+
+  <!-- Main Content (chart + sidebar) -->
+  <div className="grid grid-cols-1 lg:grid-cols-7 gap-6">
+    <Card className="lg:col-span-4">
+      <CardHeader>
+        <CardTitle>Revenue Overview</CardTitle>
+        <CardDescription>Monthly revenue for the current year.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <AreaChart
+          :data="[{ month: 'Jan', total: 1200 }, { month: 'Feb', total: 2100 }, { month: 'Mar', total: 1800 }]"
+          index="month"
+          :categories="['total']"
+          className="h-72"
+        />
+      </CardContent>
+    </Card>
+    <Card className="lg:col-span-3">
+      <CardHeader>
+        <CardTitle>Recent Activity</CardTitle>
+        <CardDescription>Latest actions in your workspace.</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <!-- Activity feed items -->
+        <div v-for="activity in recentActivity" :key="activity.id" className="flex items-start gap-3">
+          <div className="w-8 h-8 rounded-full shrink-0 flex items-center justify-center text-xs font-medium bg-muted text-muted-foreground">
+            {{ activity.initials }}
+          </div>
+          <div className="flex-1 min-w-0">
+            <p className="text-sm"><span className="font-medium">{{ activity.user }}</span> {{ activity.action }}</p>
+            <p className="text-xs text-muted-foreground">{{ activity.time }}</p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  </div>
+
+  <!-- Bottom Section (table) -->
+  <Card>
+    <CardHeader>
+      <CardTitle>Recent Orders</CardTitle>
+    </CardHeader>
+    <CardContent className="p-0">
+      <!-- Table -->
+    </CardContent>
+  </Card>
+</div>
+```
+
+## Key Rules
+
+- **4 stat cards** is the standard. Use `lg:grid-cols-4` for the grid.
+- **Asymmetric main content**: `lg:grid-cols-7` with the chart spanning `lg:col-span-4` and sidebar `lg:col-span-3`.
+- **Activity feed items**: Avatar + name (bold) + action text + timestamp.
+- **Charts**: Use `<AreaChart>`, `<BarChart>`, `<LineChart>`, or `<DonutChart>` from the design system. Supply realistic dummy data in mockup mode. Always wrap charts in a Card with a `CardTitle` describing the data.
+- Always include a page-level export or date range action in the header.