--nf-lime: #BBFD3B        (primary accent)
--nf-surface: #00000E     (deepest background)
--nf-near-black: #181818  (page background)
--nf-card-bg: #222222     (card/panel background)
--nf-dark-bg: #333333     (borders, secondary background)
--nf-muted: #8E8E8E       (muted text, icons)
--nf-light-gray: #DCDCDC  (secondary text)
--nf-white: #FFFFFF        (primary text)
--nf-error: #FA541C       --nf-success: #74FFBB
--nf-warning: #FAAD14     --nf-cyan: #41FAF4
--nf-blue: #4C78FF        --nf-pink: #FF74A7
--nf-orange: #FB7A38

frontend/components/
├── ui/             # Reusable base components (shadcn + custom extracted)
│   ├── button.tsx        # (existing shadcn)
│   ├── card.tsx          # (existing shadcn)
│   ├── avatar.tsx        # (existing shadcn)
│   ├── badge.tsx         # (existing shadcn)
│   ├── tabs.tsx          # (existing shadcn)
│   ├── ...               # other existing shadcn components
│   └── stat-card.tsx     # (example: newly extracted from .pen)
├── pages/          # Full page components composed from ui/ components
│   ├── home.tsx
│   ├── post-list.tsx
│   ├── post-detail.tsx
│   ├── proposal-list.tsx
│   ├── proposal-detail.tsx
│   ├── category-detail.tsx
│   ├── user-profile.tsx
│   ├── team.tsx
│   ├── assets.tsx
│   └── following-list.tsx
└── interactive/    # Client components for user interactions (future)

1. Open the document:
   open_document("specs/ui/components/{page-name}.pen")

2. Get editor state to understand structure:
   get_editor_state(include_schema=false)

3. Read the top-level frame and its full tree:
   batch_get(readDepth=10)

4. If the design has reusable components:
   batch_get(patterns=[{reusable: true}], readDepth=3, searchDepth=5)

5. Take a screenshot for visual reference:
   get_screenshot(nodeId="{top-frame-id}")

frontend/components/ui/
├── avatar.tsx    → Avatar, AvatarFallback (Radix-based)
├── badge.tsx     → Badge with variant support
├── button.tsx    → Button with size/variant (CVA-based)
├── card.tsx      → Card, CardHeader, CardContent, CardFooter, CardTitle, CardDescription
├── dropdown-menu.tsx → DropdownMenu (Radix-based)
├── input.tsx     → Input
├── scroll-area.tsx → ScrollArea (Radix-based)
├── separator.tsx → Separator
├── tabs.tsx      → Tabs, TabsList, TabsTrigger, TabsContent (Radix-based)
├── tooltip.tsx   → Tooltip (Radix-based)

1. Read the component node with full depth:
   batch_get(nodeIds=["{component-id}"], readDepth=5)

2. If it contains path geometry (SVGs, icons):
   batch_get(nodeIds=["{component-id}"], includePathGeometry=true)

3. Take a screenshot for visual reference:
   get_screenshot(nodeId="{component-id}")

// frontend/components/ui/{component-name}.tsx
import { cn } from "@/lib/utils"

interface {ComponentName}Props {
  // Props derived from .pen instance overrides
  className?: string
}

export function {ComponentName}({ className, ...props }: {ComponentName}Props) {
  return (
    <div className={cn(
      // Base styles from .pen component definition
      "...",
      className
    )}>
      {/* Children from .pen component tree */}
    </div>
  )
}

// frontend/components/pages/{page-name}.tsx
"use client"

import { /* icons */ } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
// ... other imports

// Mock data (to be replaced by API calls via openapi-to-components skill)
const mockData = [...]

export function {PageName}() {
  return (
    <div className="flex flex-col h-screen bg-[var(--nf-near-black)]">
      {/* Header */}
      <header className="flex items-center justify-between h-14 px-6 border-b border-[var(--nf-dark-bg)] bg-[var(--nf-near-black)]">
        {/* ... */}
      </header>

      {/* Body */}
      <div className="flex flex-1 overflow-hidden">
        {/* Sidebar */}
        <aside className="w-[60px] bg-[var(--nf-near-black)] flex flex-col items-center pt-4 gap-4">
          {/* ... */}
        </aside>

        {/* Main Content */}
        <main className="flex-1 overflow-y-auto px-8 py-6 flex flex-col gap-6">
          {/* Page-specific content */}
        </main>
      </div>
    </div>
  )
}

// Mock data — will be replaced by API integration
const cards = [
  { id: 1, title: "...", author: "..." },
  // ...
]

// 1. React/Next.js imports
import { useState } from "react"

// 2. Icon imports
import { Menu, Search, Zap } from "lucide-react"

// 3. UI component imports (shadcn)
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"

// 4. Custom UI component imports
import { StatCard } from "@/components/ui/stat-card"

// 5. Type imports
import type { Post } from "@/lib/types"

Is the element used in 2+ pages?
├─ YES → Extract to components/ui/
└─ NO
   ├─ Is it a recognizable UI pattern (card variant, stat display, etc.)?
   │  ├─ YES → Extract to components/ui/ (likely reusable later)
   │  └─ NO
   │     ├─ Is it a complex sub-section with its own layout?
   │     │  ├─ YES → Consider extraction for readability
   │     │  └─ NO → Inline in page component
   │     └─ Is the element a simple wrapper or spacer?
   │        └─ YES → Inline in page component
   └─ Is the element already available as shadcn/ui component?
      └─ YES → Use existing shadcn component directly

<svg className="w-6 h-6" viewBox="0 0 24 24">
  <path
    d="{exact geometry from .pen}"
    className="fill-[var(--nf-lime)]"
  />
</svg>

pen-to-react → openapi-to-components → (deploy)