From 65b4d402c0c4d8f85ea30b7c6cb5053bab72e50b Mon Sep 17 00:00:00 2001
From: Xavier Saliniere <bonjour@xaviers.sh>
Date: Tue, 28 Apr 2026 22:15:53 -0400
Subject: [PATCH 1/2] docs: reorganize LSD skill documentation structure

---
 skills/nipsys-lsd/SKILL.md                    |  336 ++--
 .../examples/complex-application.md           | 1612 +++++++++++++++++
 skills/nipsys-lsd/references/architecture.md  |  772 +-------
 skills/nipsys-lsd/references/colors.md        |  329 +---
 .../references/component-catalog.md           |   69 +
 .../nipsys-lsd/references/component-list.md   |   98 -
 .../references/component-patterns.md          |  371 ++++
 skills/nipsys-lsd/references/composition.md   |  636 ++-----
 skills/nipsys-lsd/references/cva-patterns.md  | 1279 ++-----------
 skills/nipsys-lsd/references/icons.md         |  336 +---
 skills/nipsys-lsd/references/spacing.md       |  219 +--
 .../nipsys-lsd/references/theme-variables.md  |  118 ++
 skills/nipsys-lsd/references/typography.md    |  251 ---
 13 files changed, 2866 insertions(+), 3560 deletions(-)
 create mode 100644 skills/nipsys-lsd/examples/complex-application.md
 create mode 100644 skills/nipsys-lsd/references/component-catalog.md
 delete mode 100644 skills/nipsys-lsd/references/component-list.md
 create mode 100644 skills/nipsys-lsd/references/component-patterns.md
 create mode 100644 skills/nipsys-lsd/references/theme-variables.md
 delete mode 100644 skills/nipsys-lsd/references/typography.md

diff --git a/skills/nipsys-lsd/SKILL.md b/skills/nipsys-lsd/SKILL.md
index 035c38da..6c4f0115 100644
--- a/skills/nipsys-lsd/SKILL.md
+++ b/skills/nipsys-lsd/SKILL.md
@@ -1,240 +1,152 @@
 ---
 name: nipsys-lsd
-description: Use when implementing UI components with @nipsys/lsd in React 19.2.4+ projects. Covers 38+ components, styling conventions, spacing scale, design system integration, TypeScript types, CVA patterns, and common usage patterns.
+description: Use with @nipsys/lsd in React 19+ projects for UI component implementation, theming, and design system integration. Triggers on: "lsd component", "lsd design system", "logos design system", "@nipsys/lsd", component library patterns with spacing tokens (--lsd-spacing-*).
+metadata:
+  version: 1.0.0
+  category: frontend
+  sources:
+    - https://github.com/nipsysdev/lsd
+    - https://lsd.nipsys.dev
 ---
 
-# LSD React Component Library
+# LSD Component Library (@nipsys/lsd)
 
-**LSD** (@nipsys/lsd) is a comprehensive component library built on Radix UI primitives, providing 38+ accessible, composable UI components for React 19.2.4+ applications. It uses TypeScript, Tailwind CSS v4, and CVA (class-variance-authority) for variant management.
+LSD is a monochromatic, content-first component library built on Radix UI primitives with 41 components. High contrast, fully accessible, keyboard-navigable.
 
-The design system follows a monochromatic aesthetics approach with 5 accent themes (monochrome, teal, nord, terracotta, catppuccin). Components are fully accessible, keyboard-navigable, and include built-in light/dark mode support with theme persistence.
-
-## Project Context
-
-Before implementing, verify:
-1. **Check package.json** for `@nipsys/lsd` dependency
-2. **Verify Tailwind CSS v4** configuration in project
-3. **Check tsconfig.json** for path mappings to resolve `@nipsys/lsd`
-4. **Confirm React 19.2.4+** version compatibility
+## Requirements
+- **Node.js:** 24+
+- **React:** 19+
+- **Tailwind CSS:** v4
 
+## Quick Discovery
 ```bash
-grep -E '@nipsys/lsd|react|tailwindcss' package.json
-```
-
-## When to Use This Skill
-
-Use this skill when:
-• Building or editing UI components in React 19.2.4+ projects using @nipsys/lsd
-• Implementing forms, navigation, overlays, or feedback components
-• Need to follow LSD design system conventions (spacing, colors, typography)
-• Working with component composition (Dialog, InputGroup, Tabs, etc.)
-• Creating new components that need to match LSD patterns
-• Debugging LSD component implementation issues
-• Choosing the right component from 38+ options for a given UI need
-
-DO NOT use this skill for:
-• General React development without LSD components
-• Creating components that don't follow LSD patterns
-• Monorepo-specific tasks (docs generator, E2E testing)
+# Verify installation
+npm list @nipsys/lsd
 
-## Core Principles
-
-1. **Use existing components first** - Check if an LSD component fits the need before building custom solutions
-2. **Compose, don't reinvent** - LSD components are designed to be combined and nested
-3. **Use built-in variants before custom styles** - Leverage variant props instead of custom className overrides
-4. **Use semantic colors only** - Stick to `text-primary` and `text-destructive` color tokens
+# View component documentation
+# https://lsd.nipsys.dev/components/[component-name]
+```
 
 ## Critical Rules
 
-### Spacing
-**Always use LSD spacing variables, NEVER standard Tailwind classes:**
+### Spacing → [references/spacing.md](references/spacing.md)
+Use LSD spacing variables ONLY:
 - ✅ `className="mt-(--lsd-spacing-base)"`
 - ❌ `className="mt-4"`
 
-See [references/spacing.md](references/spacing.md) for the 7-value scale and usage examples.
-
-### Color Tokens
-Use only approved LSD color tokens:
-- ✅ `text-primary`, `text-destructive`
-- ❌ `text-muted-foreground`, `bg-muted`
-
-See [references/colors.md](references/colors.md) for the complete color token system.
-
-### Typography
-Use the Typography component with approved variants:
-- `h1`-`h5` - Headings
-- `subtitle1`-`subtitle2` - Subtitles
-- `body1`-`body2` - Body text
-- `label1`-`label2` - Labels
-
-See [references/typography.md](references/typography.md) for usage guidelines.
-
-### Icons
-**Always use Phosphor icons from `@phosphor-icons/react`:**
-- Use `weight="duotone"` for most icons
-- Exceptions: `CheckIcon`, `PlusIcon` use default weight
-
-See [references/icons.md](references/icons.md) for common patterns and examples.
-
-### Component Composition
-Use sub-components for composition:
-- Dialog → DialogRoot, DialogTrigger, DialogContent, DialogTitle, DialogClose
-- InputGroup → InputGroupRoot, InputGroupAddOn, InputGroupAddOnIcon
-
-See [references/composition.md](references/composition.md) for all composition patterns.
-
-### CVA Patterns
-10 components use CVA for variants. Use the `variant` and `size` props:
-- Button, TextField, Badge, Checkbox, Switch, etc.
-
-See [references/cva-patterns.md](references/cva-patterns.md) for variant details.
-
-## Component Selection Guide
-
-| Need | Use | Example |
-|------|-----|---------|
-| Buttons, actions | Button | `<Button variant="filled">Save</Button>` |
-| Primary/secondary actions | ButtonGroup | `<ButtonGroup><Button>Yes</Button><Button>No</Button></ButtonGroup>` |
-| Text input | Input | `<Input placeholder="Enter text" />` |
-| Multi-line text | Textarea | `<Textarea rows={4} />` |
-| Selector with search | Select | `<Select options={items} />` |
-| Custom autocomplete | Autocomplete | `<Autocomplete options={items} completeOnEmpty />` |
-| Yes/no toggle | Switch | `<Switch checked={value} onChange={set} />` |
-| 2-5 option toggle | ToggleGroup | `<ToggleGroup onValueChange={set}><Toggle value="1" /></ToggleGroup>` |
-| Radio buttons | RadioGroup | `<RadioGroup items={items} />` |
-| Checkbox | Checkbox | `<Checkbox checked={value} onChange={set} />` |
-| Toggle button | Toggle | `<Toggle pressed={value} onPressedChange={set} />` |
-| Form validation | Form | `<Form onSubmit={handleSubmit}><Field name="email" /></Form>` |
-| Input with prefix/suffix | InputGroup | `<InputGroup><InputGroupAddOn>$</InputGroupAddOn><Input /></InputGroup>` |
-| Modal dialog | Dialog | `<Dialog><DialogTrigger>Open</DialogTrigger><DialogContent>...</DialogContent></Dialog>` |
-| Alert dialog | AlertDialog | `<AlertDialog><AlertDialogTrigger>Delete</AlertDialogTrigger>...</AlertDialog>` |
-| Slide-over sheet | Sheet | `<Sheet><SheetTrigger>Open</SheetTrigger><SheetContent>...</SheetContent></Sheet>` |
-| Tooltip | Tooltip | `<Tooltip content="Help"><Button>?</Button></Tooltip>` |
-| Dropdown menu | DropdownMenu | `<DropdownMenu><DropdownMenuTrigger>Menu</DropdownMenuTrigger>...</DropdownMenu>` |
-| Command palette | Command | `<Command><CommandInput>Search</CommandInput>...</Command>` |
-| Tabs | Tabs | `<Tabs value={tab}><TabsList><TabsTrigger value="1" /></TabsList><TabsContent value="1" /></Tabs>` |
-| Navigation menu | NavigationMenu | `<NavigationMenu><NavigationMenuList><NavigationMenuItem><NavigationMenuTrigger>Menu</NavigationMenuTrigger>...</NavigationMenuItem></NavigationMenuList></NavigationMenu>` |
-| Menu bar | Menubar | `<Menubar><MenubarMenu><MenubarTrigger>File</MenubarTrigger>...</MenubarMenu></Menubar>` |
-| Alert message | Alert | `<Alert><InfoIcon /><AlertDescription>Warning</AlertDescription></Alert>` |
-| Progress indicator | Progress | `<Progress value={75} />` |
-| Toast notifications | Sonner | `<Toaster><Sonner toast={toast} /></Toaster>` |
-| Badge | Badge | `<Badge variant="filled">New</Badge>` |
-| Card | Card | `<Card><CardHeader><CardTitle>Title</CardTitle></CardHeader><CardContent>...</CardContent></Card>` |
-| Avatar | Avatar | `<Avatar><AvatarImage src="..." /><AvatarFallback>JD</AvatarFallback></Avatar>` |
-| Table | Table | `<Table><TableHeader><TableRow><TableHead>Name</TableHead></TableRow></TableHeader><TableBody>...</TableBody></Table>` |
-| Separator | Separator | `<Separator />` |
-| Scroll area | ScrollArea | `<ScrollArea><div className="max-h-64">...</div></ScrollArea>` |
-| Calendar | Calendar | `<Calendar mode="single" selected={date} onSelect={setDate} />` |
-| Sidebar | Sidebar | `<Sidebar><SidebarHeader><SidebarLogo>...</SidebarLogo></SidebarHeader><SidebarContent><SidebarGroup><SidebarGroupLabel>Menu</SidebarGroupLabel><SidebarMenu><SidebarMenuItem>...</SidebarMenuItem></SidebarMenu></SidebarGroup></SidebarContent></Sidebar>` |
-| Slider | Slider | `<Slider defaultValue={[50]} />` |
-| Typography | Typography | `<Typography variant="body1">Text</Typography>` |
-
-See [references/component-list.md](references/component-list.md) for complete component catalog with examples.
-
-## Component Architecture Patterns
-
-LSD components use 5 architectural patterns. All patterns use `forwardRef` for ref forwarding, `cn()` for class merging, and `displayName` for debugging.
-
-1. **Radix Primitive Wrapper** (25+ components) - Wraps Radix primitives with LSD styling. Examples: Button, Dialog, Checkbox, Switch, Tooltip.
-2. **CVA Pattern** (10 components) - Uses class-variance-authority for variant management with `variant` and `size` props. Examples: Button, Badge, TextField, RadioGroup.
-3. **Context Provider** (8 components) - Composite components with shared state via React Context. Examples: Tabs, InputGroup, Form, Dialog, NavigationMenu.
-4. **Static Component** (5 components) - Simple presentational components without complex state. Examples: Card, Alert, Avatar, Separator, Badge.
-5. **Composite/Custom** (3 components) - Complex components combining multiple patterns or external libraries. Examples: Autocomplete (Radix Popover + cmdk), Calendar (react-day-picker), Sonner (toast system).
-
-See [references/architecture.md](references/architecture.md) for detailed patterns with code examples.
-
-## Import Patterns
-
-```typescript
-// Components
-import { Button, Card, CardContent, CardTitle, Typography } from '@nipsys/lsd';
-
-// Sub-components
-import { Dialog, DialogTrigger, DialogContent, DialogTitle } from '@nipsys/lsd';
-
-// Utilities
-import { cn } from '@nipsys/lsd';
-
-// Types
-import type { SizeVariant, SquareSize, BorderVariant } from '@nipsys/lsd';
-
-// Icons (external)
-import { PlusIcon, ShareIcon, CheckIcon } from '@phosphor-icons/react';
+### Icons → [references/icons.md](references/icons.md)
+All icons MUST use "Icon" suffix:
+- ✅ `import { CheckIcon } from '@phosphor-icons/react'`
+- ❌ `import { Check } from '@phosphor-icons/react'`
+
+### Styling → [references/colors.md](references/colors.md)
+Use semantic color tokens:
+- ✅ `var(--lsd-primary)`, `var(--lsd-destructive)`
+- ❌ `#0066ff`, `#ff0000` (raw hex values)
+
+### Composition → [references/composition.md](references/composition.md)
+Import all required sub-components:
+- Dialog → Dialog, DialogTrigger, DialogContent, DialogTitle, DialogClose
+
+## Component Selection Matrix
+
+| Need | Use |
+|------|-----|
+| Primary action | Button with variant="filled" |
+| Destructive action | Button with variant="destructive" |
+| Form input | Input or Textarea |
+| Form with validation | Field + Field components |
+| Single-line text | Input |
+| Multi-line text | Textarea |
+| Dropdown selection | Select (with sub-components) |
+| Yes/no toggle | Switch |
+| 2-5 option toggle | ToggleGroup |
+| Radio buttons | RadioGroup |
+| Checkbox | Checkbox |
+| Modal dialog | Dialog (with sub-components) |
+| Confirmation dialog | AlertDialog |
+| Slide-over panel | Sheet |
+| Tooltip | Tooltip |
+| Dropdown menu | DropdownMenu (12 sub-components) |
+| Command palette | Command (cmdk-based) |
+| Tabs | Tabs |
+| Navigation menu | NavigationMenu |
+| Menu bar | Menubar |
+| Alert message | Alert (3 variants) |
+| Badge/status | Badge (7 variants) |
+| Card | Card (7 sub-components) |
+| Avatar | Avatar (6 sub-components) |
+| Table | Table (8 sub-components) |
+| Progress | Progress (indeterminate mode) |
+| Toast notifications | Sonner + Toaster |
+| Calendar | Calendar |
+| Typography | Typography (18 variants) |
+| Sidebar | Sidebar (15+ sub-components) |
+
+## Theme System
+
+### Modes (Light/Dark)
+```html
+<!-- Light mode (default) -->
+<html class="light">
+
+<!-- Dark mode -->
+<html class="dark">
+
+<!-- Toggle via JS -->
+document.documentElement.classList.toggle('dark');
 ```
 
-## Key LSD-Specific Details
-
-### Spacing Scale
-Always use LSD spacing variables instead of Tailwind classes. See [references/spacing.md](references/spacing.md) for the complete 7-value scale.
-
-### Theme System
-- **Modes:** `light` (default), `dark` (via `.dark` class)
-- **Accents:** `monochrome`, `teal`, `nord`, `terracotta`, `catppuccin` (via `data-theme` attribute)
-- **Fonts:** `monospace` (default), `serif`, `sans-serif` (via CSS classes)
-
-### Forward Ref Pattern
-Always use `forwardRef` and set `displayName`:
-```tsx
-const Component = React.forwardRef<HTMLButtonElement, Props>(
-  ({ className, ...props }, ref) => (
-    <Button ref={ref} className={cn('...', className)} {...props} />
-  )
-);
-Component.displayName = 'ComponentName';
-```
+### Accent Themes (5 built-in)
+```html
+<html data-theme="monochrome">  <!-- default -->
+<html data-theme="teal">
+<html data-theme="nord">
+<html data-theme="terracotta">
+<html data-theme="catppuccin">
 
-### Disabled State Pattern
-Check component's `disabled` prop:
-```tsx
-<Button disabled={isLoading} disabledText="Saving...">
-  {isLoading ? '...' : 'Submit'}
-</Button>
+<!-- Set via JS -->
+document.documentElement.setAttribute('data-theme', 'teal');
 ```
 
+### Custom Theme
+Use CSS variables. See [references/theme-variables.md](references/theme-variables.md) for complete variable list.
+
 ## Workflow
 
-1. **Check installed LSD components** - `grep '@nipsys/lsd' package.json`
-2. **Identify required UI element** - What interaction? What state? What accessibility?
-3. **Consult Component Selection Guide** - Find component, review variants, check composition needs
-4. **Read component documentation** - Check props, defaults, examples, sub-components
-5. **Import component correctly** - `import { Component } from '@nipsys/lsd'`
-6. **Implement using LSD patterns** - Use built-in variants, LSD spacing, composition, forwardRef
-7. **Use LSD spacing and colors** - Replace Tailwind classes with LSD variables, use only `text-primary`/`text-destructive`, apply proper typography
-8. **Verify accessibility** - Check keyboard navigation, ARIA attributes, screen reader compatibility
+1. **Check installation** - Verify `@nipsys/lsd` in package.json
+2. **Identify need** - Match to component selection matrix
+3. **Check composition** - Review sub-components required
+4. **Implement** - Use LSD spacing variables, semantic colors
+5. **Verify accessibility** - Keyboard navigation works (`Tab`, `Escape`)
 
 ## Common Pitfalls
 
-| ❌ Avoid | ✅ Do Instead |
-|---------|---------------|
-| Standard Tailwind spacing (`mb-4`, `mt-2`) | LSD spacing variables (`mt-(--lsd-spacing-base)`) |
-| Non-LSD colors (`text-muted-foreground`) | LSD colors (`text-primary`, `text-destructive`) |
-| Missing sub-components in composition | Import and use all required sub-components |
-| Forgetting `displayName` with `forwardRef` | Always add `Component.displayName = 'ComponentName'` |
-| Not using `cn()` for class merging | `const className = cn('base-classes', props.className)` |
-| Skipping accessibility attributes | Use built-in Radix accessibility, add custom ARIA when needed |
-| Testing visual styling in E2E tests | Focus on functional behavior only |
-| Creating custom variants | Use CVA `variant` prop or file issue for new variant |
-
-## Troubleshooting
-
-| Issue | Solution |
-|-------|----------|
-| Spacing variables not applying | Verify Tailwind v4 CSS imports include `@nipsys/lsd/styles/core.css` or `dist/style.css` |
-| Theme not syncing in examples | Check `useSendThemeToIframes()` is called in example components |
-| Icons not displaying | Ensure `@phosphor-icons/react` is installed and icons imported correctly |
-| Composite components not working | Verify all sub-components are imported (e.g., Dialog → DialogTrigger, DialogContent) |
-| Colors not matching docs | Use LSD color tokens (`text-primary`, `text-destructive`), not Tailwind equivalents |
-| TypeScript errors on props | Check you're importing types: `import type { ButtonProps } from '@nipsys/lsd'` |
-| Component not rendering | Ensure `'use client'` directive is present for components using hooks |
+| Mistake | Why Wrong | Correct Approach |
+|---------|-----------|------------------|
+| `className="mt-4"` | Tailwind numbers not LSD spacing | `className="mt-(--lsd-spacing-base)"` |
+| `import { X } from '@phosphor-icons/react'` | Missing Icon suffix | `import { XIcon } from '@phosphor-icons/react'` |
+| `style={{ backgroundColor: '#0066ff' }}` | Raw colors, not semantic | `style={{ backgroundColor: 'var(--lsd-surface)' }}` |
+| `<Dialog>_dialog content_</Dialog>` | Missing sub-components | `<Dialog><DialogTrigger>Open</DialogTrigger><DialogContent>...</DialogContent></Dialog>` |
+
+## Quality Checklist
+
+Before completing tasks:
+□ Using LSD spacing variables (`--lsd-spacing-*`)
+□ Icons have "Icon" suffix (`CheckIcon`, not `Check`)
+□ Colors use semantic tokens (`--lsd-primary`, `--lsd-destructive`)
+□ All composition sub-components imported
+□ Accessibility verified (keyboard navigation)
+□ Theme tokens used for customization, not raw values
 
 ## References
 
-- **[references/component-list.md](references/component-list.md)** - All 38+ components organized by category with quick lookup
-- **[references/spacing.md](references/spacing.md)** - Complete spacing scale with usage examples and common patterns
-- **[references/colors.md](references/colors.md)** - Color token system, semantic colors, and theme integration
-- **[references/typography.md](references/typography.md)** - Typography variants, sizing, and responsive behavior
-- **[references/icons.md](references/icons.md)** - Phosphor icon patterns, weight rules, and common icons
-- **[references/composition.md](references/composition.md)** - Component composition rules and sub-component hierarchies
-- **[references/cva-patterns.md](references/cva-patterns.md)** - CVA variant patterns, available variants, and customization
-- **[references/architecture.md](references/architecture.md)** - Detailed architecture patterns with code examples
-- **[examples/](examples/)** - Common usage patterns and implementation examples
+- [Component detailed patterns](references/component-patterns.md)
+- [Spacing scale (7 values)](references/spacing.md)
+- [Color tokens](references/colors.md)
+- [Icon patterns](references/icons.md)
+- [Composition rules](references/composition.md)
+- [CVA variants](references/cva-patterns.md)
+- [Theme variables](references/theme-variables.md)
+- [Architecture patterns](references/architecture.md)
+- [Component catalog](references/component-catalog.md)
diff --git a/skills/nipsys-lsd/examples/complex-application.md b/skills/nipsys-lsd/examples/complex-application.md
new file mode 100644
index 00000000..01856f95
--- /dev/null
+++ b/skills/nipsys-lsd/examples/complex-application.md
@@ -0,0 +1,1612 @@
+# Complex Application Examples
+
+Real-world examples showing multiple LSD components working together with state management.
+
+## Example 1: Task Management Board
+
+Complete feature showing multiple LSD components with shared state, filtering, and CRUD operations.
+
+```typescript
+'use client'
+
+import { useState } from 'react'
+import {
+  Button,
+  Card,
+  CardContent,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Typography,
+} from '@nipsys/lsd'
+import { PlusIcon, TrashIcon, CheckIcon } from '@phosphor-icons/react'
+
+interface Task {
+  id: string
+  title: string
+  description: string
+  status: 'todo' | 'in-progress' | 'done'
+  priority: 'low' | 'medium' | 'high'
+  dueDate?: string
+  createdAt: string
+  tags: string[]
+}
+
+export function TaskBoard() {
+  const [tasks, setTasks] = useState<Task[]>([
+    {
+      id: '1',
+      title: 'Design system components',
+      description: 'Create foundational UI components for the design system',
+      status: 'todo',
+      priority: 'high',
+      dueDate: '2024-02-01',
+      createdAt: '2024-01-15',
+      tags: ['design', 'ui'],
+    },
+    {
+      id: '2',
+      title: 'Implement user auth flow',
+      description: 'Set up authentication with login, register, and password reset',
+      status: 'in-progress',
+      priority: 'medium',
+      dueDate: '2024-01-25',
+      createdAt: '2024-01-14',
+      tags: ['auth', 'backend'],
+    },
+    {
+      id: '3',
+      title: 'Write documentation',
+      description: 'Document all public APIs and component usage',
+      status: 'done',
+      priority: 'low',
+      createdAt: '2024-01-10',
+      tags: ['docs'],
+    },
+    {
+      id: '4',
+      title: 'Set up CI/CD pipeline',
+      description: 'Configure automated testing and deployment',
+      status: 'todo',
+      priority: 'medium',
+      dueDate: '2024-02-05',
+      createdAt: '2024-01-16',
+      tags: ['devops'],
+    },
+  ])
+
+  const [newTaskTitle, setNewTaskTitle] = useState('')
+  const [newTaskDescription, setNewTaskDescription] = useState('')
+  const [newTaskPriority, setNewTaskPriority] = useState<'low' | 'medium' | 'high'>('medium')
+  const [filterStatus, setFilterStatus] = useState<'all' | 'todo' | 'in-progress' | 'done'>('all')
+  const [filterPriority, setFilterPriority] = useState<'all' | 'low' | 'medium' | 'high'>('all')
+  const [searchTerm, setSearchTerm] = useState('')
+  const [showAddForm, setShowAddForm] = useState(false)
+
+  const addTask = () => {
+    if (!newTaskTitle.trim()) return
+
+    const newTask: Task = {
+      id: Date.now().toString(),
+      title: newTaskTitle,
+      description: newTaskDescription,
+      status: 'todo',
+      priority: newTaskPriority,
+      createdAt: new Date().toISOString().split('T')[0],
+      tags: [],
+    }
+
+    setTasks(prev => [newTask, ...prev])
+    setNewTaskTitle('')
+    setNewTaskDescription('')
+    setNewTaskPriority('medium')
+    setShowAddForm(false)
+  }
+
+  const updateTaskStatus = (taskId: string, newStatus: Task['status']) => {
+    setTasks(prev =>
+      prev.map(task =>
+        task.id === taskId ? { ...task, status: newStatus } : task
+      )
+    )
+  }
+
+  const updateTaskPriority = (taskId: string, newPriority: Task['priority']) => {
+    setTasks(prev =>
+      prev.map(task =>
+        task.id === taskId ? { ...task, priority: newPriority } : task
+      )
+    )
+  }
+
+  const deleteTask = (taskId: string) => {
+    setTasks(prev => prev.filter(task => task.id !== taskId))
+  }
+
+  const duplicateTask = (taskId: string) => {
+    const taskToDuplicate = tasks.find(task => task.id === taskId)
+    if (!taskToDuplicate) return
+
+    const duplicatedTask: Task = {
+      ...taskToDuplicate,
+      id: Date.now().toString(),
+      title: `${taskToDuplicate.title} (Copy)`,
+      status: 'todo',
+      createdAt: new Date().toISOString().split('T')[0],
+    }
+
+    setTasks(prev => [duplicatedTask, ...prev])
+  }
+
+  const getPriorityColor = (priority: Task['priority']) => {
+    switch (priority) {
+      case 'high':
+        return 'bg-destructive text-destructive-foreground'
+      case 'medium':
+        return 'bg-primary text-primary-foreground'
+      case 'low':
+        return 'bg-secondary text-secondary-foreground'
+      default:
+        return 'bg-secondary text-secondary-foreground'
+    }
+  }
+
+  const getStatusColor = (status: Task['status']) => {
+    switch (status) {
+      case 'done':
+        return 'border-destructive/50'
+      case 'in-progress':
+        return 'border-primary/50'
+      default:
+        return 'border-transparent'
+    }
+  }
+
+  const filteredTasks = tasks.filter(task => {
+    if (filterStatus !== 'all' && task.status !== filterStatus) return false
+    if (filterPriority !== 'all' && task.priority !== filterPriority) return false
+    if (searchTerm) {
+      const searchLower = searchTerm.toLowerCase()
+      return (
+        task.title.toLowerCase().includes(searchLower) ||
+        task.description.toLowerCase().includes(searchLower) ||
+        task.tags.some(tag => tag.toLowerCase().includes(searchLower))
+      )
+    }
+    return true
+  })
+
+  const taskStats = {
+    total: tasks.length,
+    todo: tasks.filter(t => t.status === 'todo').length,
+    inProgress: tasks.filter(t => t.status === 'in-progress').length,
+    done: tasks.filter(t => t.status === 'done').length,
+  }
+
+  return (
+    <div className="space-y-(--lsd-spacing-larger)">
+      <Card>
+        <CardContent className="p-(--lsd-spacing-base)">
+          <div className="flex items-center justify-between gap-(--lsd-spacing-base)">
+            <div>
+              <Typography variant="h1">Task Board</Typography>
+              <Typography variant="body2" className="text-primary/80">
+                Manage your tasks efficiently
+              </Typography>
+            </div>
+            <Button onClick={() => setShowAddForm(!showAddForm)} variant="filled">
+              <PlusIcon className="mr-(--lsd-spacing-smaller)" weight="duotone" />
+              Add Task
+            </Button>
+          </div>
+
+          <div className="flex gap-(--lsd-spacing-base) mt-(--lsd-spacing-base)">
+            <div className="flex-1">
+              <Input
+                placeholder="Search tasks..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+            </div>
+            <Select value={filterStatus} onValueChange={setFilterStatus}>
+              <SelectTrigger className="w-[180px]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Tasks</SelectItem>
+                <SelectItem value="todo">To Do</SelectItem>
+                <SelectItem value="in-progress">In Progress</SelectItem>
+                <SelectItem value="done">Done</SelectItem>
+              </SelectContent>
+            </Select>
+            <Select value={filterPriority} onValueChange={setFilterPriority}>
+              <SelectTrigger className="w-[150px]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Priorities</SelectItem>
+                <SelectItem value="high">High</SelectItem>
+                <SelectItem value="medium">Medium</SelectItem>
+                <SelectItem value="low">Low</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex gap-(--lsd-spacing-base) mt-(--lsd-spacing-base)">
+            <div className="flex-1 grid grid-cols-4 gap-(--lsd-spacing-smaller)">
+              <div className="text-center">
+                <Typography variant="h2">{taskStats.total}</Typography>
+                <Typography variant="label1" className="text-primary/80">Total</Typography>
+              </div>
+              <div className="text-center">
+                <Typography variant="h2">{taskStats.todo}</Typography>
+                <Typography variant="label1" className="text-primary/80">To Do</Typography>
+              </div>
+              <div className="text-center">
+                <Typography variant="h2">{taskStats.inProgress}</Typography>
+                <Typography variant="label1" className="text-primary/80">In Progress</Typography>
+              </div>
+              <div className="text-center">
+                <Typography variant="h2">{taskStats.done}</Typography>
+                <Typography variant="label1" className="text-primary/80">Done</Typography>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {showAddForm && (
+        <Card>
+          <CardContent className="p-(--lsd-spacing-base)">
+            <div className="space-y-(--lsd-spacing-base)">
+              <Input
+                placeholder="Task title..."
+                value={newTaskTitle}
+                onChange={(e) => setNewTaskTitle(e.target.value)}
+                onKeyDown={(e) => e.key === 'Enter' && addTask()}
+                className="text-lg"
+              />
+              <Input
+                placeholder="Task description (optional)..."
+                value={newTaskDescription}
+                onChange={(e) => setNewTaskDescription(e.target.value)}
+                onKeyDown={(e) => e.key === 'Enter' && addTask()}
+              />
+              <div className="flex gap-(--lsd-spacing-base)">
+                <Select value={newTaskPriority} onValueChange={setNewTaskPriority}>
+                  <SelectTrigger className="flex-1">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="low">Low Priority</SelectItem>
+                    <SelectItem value="medium">Medium Priority</SelectItem>
+                    <SelectItem value="high">High Priority</SelectItem>
+                  </SelectContent>
+                </Select>
+                <Button onClick={addTask} variant="filled" className="flex-1">
+                  <PlusIcon className="mr-(--lsd-spacing-smaller)" weight="duotone" />
+                  Add Task
+                </Button>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      <div className="space-y-(--lsd-spacing-base)">
+        {filteredTasks.map(task => (
+          <Card key={task.id} className={`border-l-4 ${getStatusColor(task.status)}`}>
+            <CardContent className="p-(--lsd-spacing-base)">
+              <div className="flex items-start justify-between gap-(--lsd-spacing-base)">
+                <div className="flex-1">
+                  <Typography variant="subtitle1" className={`mb-(--lsd-spacing-smallest) ${task.status === 'done' ? 'line-through text-primary/60' : ''}`}>
+                    {task.title}
+                  </Typography>
+                  {task.description && (
+                    <Typography variant="body2" className="text-primary/70 mb-(--lsd-spacing-smaller)">
+                      {task.description}
+                    </Typography>
+                  )}
+                  <div className="flex items-center gap-(--lsd-spacing-smaller) flex-wrap mt-(--lsd-spacing-small)">
+                    <Select
+                      value={task.status}
+                      onValueChange={(value: Task['status']) => updateTaskStatus(task.id, value)}
+                    >
+                      <SelectTrigger className="w-[150px] h-8">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="todo">To Do</SelectItem>
+                        <SelectItem value="in-progress">In Progress</SelectItem>
+                        <SelectItem value="done">Done</SelectItem>
+                      </SelectContent>
+                    </Select>
+
+                    <Select
+                      value={task.priority}
+                      onValueChange={(value: Task['priority']) => updateTaskPriority(task.id, value)}
+                    >
+                      <SelectTrigger className="w-[130px] h-8">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="high">High</SelectItem>
+                        <SelectItem value="medium">Medium</SelectItem>
+                        <SelectItem value="low">Low</SelectItem>
+                      </SelectContent>
+                    </Select>
+
+                    <div className={`px-(--lsd-spacing-smaller) py-(--lsd-spacing-smallest) rounded text-xs ${getPriorityColor(task.priority)}`}>
+                      {task.priority}
+                    </div>
+
+                    {task.dueDate && (
+                      <Typography variant="label1" className="text-primary/70">
+                        Due: {task.dueDate}
+                      </Typography>
+                    )}
+
+                    {task.tags.length > 0 && (
+                      <div className="flex gap-(--lsd-spacing-smallest)">
+                        {task.tags.map(tag => (
+                          <div key={tag} className="px-(--lsd-spacing-smaller) py-(--lsd-spacing-smallest) bg-secondary text-secondary-foreground rounded text-xs">
+                            {tag}
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                <div className="flex gap-(--lsd-spacing-smaller)">
+                  {task.status !== 'done' && (
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={() => updateTaskStatus(task.id, 'done')}
+                    >
+                      <CheckIcon size={20} />
+                    </Button>
+                  )}
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={() => duplicateTask(task.id)}
+                  >
+                    <PlusIcon size={20} weight="duotone" />
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={() => deleteTask(task.id)}
+                    destructive
+                  >
+                    <TrashIcon size={20} weight="duotone" />
+                  </Button>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {filteredTasks.length === 0 && (
+        <Card>
+          <CardContent className="p-(--lsd-spacing-largest) text-center">
+            <Typography variant="body1" className="text-primary/60">
+              No tasks found matching your criteria.
+            </Typography>
+            <Typography variant="label1" className="text-primary/50 mt-(--lsd-spacing-smaller)">
+              Create your first task or adjust your filters
+            </Typography>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  )
+}
+```
+
+**Key Patterns Demonstrated:**
+- Complex state management for task CRUD operations
+- Multiple filtering criteria (status, priority, search)
+- Conditional rendering and styling based on state
+- Combining Button, Card, Select, Input with dynamic variants
+- Dense UI layouts with proper LSD spacing
+- Task statistics and real-time updates
+- Duplicate task functionality
+
+## Example 2: User Profile Form
+
+Complex form showing validation, conditional fields, loading states, and feedback.
+
+```typescript
+'use client'
+
+import { useState } from 'react'
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Textarea,
+  Switch,
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  Typography,
+  Progress,
+} from '@nipsys/lsd'
+import { EnvelopeIcon, PhoneIcon, FloppyDiskIcon, CheckCircleIcon, WarningIcon } from '@phosphor-icons/react'
+
+interface FormData {
+  name: string
+  email: string
+  phone: string
+  role: 'developer' | 'designer' | 'manager' | 'qa'
+  bio: string
+  location: string
+  website: string
+  linkedin: string
+  github: string
+  timezone: string
+  notifyEmail: boolean
+  notifyPush: boolean
+}
+
+interface FormErrors {
+  name?: string
+  email?: string
+  phone?: string
+}
+
+type LoadingState = 'idle' | 'validating' | 'saving' | 'success'
+
+export function UserProfileForm() {
+  const [formData, setFormData] = useState<FormData>({
+    name: '',
+    email: '',
+    phone: '',
+    role: 'developer',
+    bio: '',
+    location: '',
+    website: '',
+    linkedin: '',
+    github: '',
+    timezone: 'UTC',
+    notifyEmail: true,
+    notifyPush: false,
+  })
+
+  const [errors, setErrors] = useState<FormErrors>({})
+  const [loadingState, setLoadingState] = useState<LoadingState>('idle')
+  const [showSuccess, setShowSuccess] = useState(false)
+  const [validationProgress, setValidationProgress] = useState(0)
+
+  const validateForm = (): boolean => {
+    const newErrors: FormErrors = {}
+
+    if (!formData.name.trim()) {
+      newErrors.name = 'Name is required'
+    } else if (formData.name.trim().length < 2) {
+      newErrors.name = 'Name must be at least 2 characters'
+    }
+
+    if (!formData.email.trim()) {
+      newErrors.email = 'Email is required'
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+      newErrors.email = 'Invalid email format'
+    }
+
+    if (!formData.phone.trim()) {
+      newErrors.phone = 'Phone is required'
+    } else if (!/^[\d\s\-\+\(\)]+$/.test(formData.phone)) {
+      newErrors.phone = 'Invalid phone format'
+    }
+
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+
+    if (!validateForm()) return
+
+    setLoadingState('validating')
+    setValidationProgress(0)
+
+    const progressInterval = setInterval(() => {
+      setValidationProgress(prev => Math.min(prev + 20, 100))
+    }, 200)
+
+    setTimeout(() => {
+      clearInterval(progressInterval)
+      setLoadingState('saving')
+
+      setTimeout(() => {
+        setLoadingState('success')
+        setShowSuccess(true)
+
+        setTimeout(() => {
+          setShowSuccess(false)
+          setLoadingState('idle')
+        }, 3000)
+      }, 1500)
+    }, 1000)
+  }
+
+  const handleFieldChange = (field: keyof FormData, value: string | boolean) => {
+    setFormData(prev => ({ ...prev, [field]: value }))
+    if (errors[field as keyof FormErrors]) {
+      setErrors(prev => ({ ...prev, [field]: undefined }))
+    }
+  }
+
+  const hasFieldError = (field: keyof FormErrors) => !!errors[field]
+
+  const getFieldHelper = (field: keyof FormErrors) => {
+    if (!hasFieldError(field)) {
+      switch (field) {
+        case 'name':
+          return 'Enter your full name'
+        case 'email':
+          return 'Use your professional email address'
+        case 'phone':
+          return 'Include country code if applicable'
+        default:
+          return ''
+      }
+    }
+    return errors[field]
+  }
+
+  const isFormValid = formData.name.trim() && formData.email.trim() && formData.phone.trim()
+
+  return (
+    <div className="max-w-2xl mx-auto space-y-(--lsd-spacing-base)">
+      {showSuccess && (
+        <Alert>
+          <CheckCircleIcon size={20} weight="duotone" />
+          <AlertTitle>Success!</AlertTitle>
+          <AlertDescription>
+            Your profile has been saved successfully.
+          </AlertDescription>
+        </Alert>
+      )}
+
+      <Card>
+        <CardHeader>
+          <CardTitle>User Profile</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-(--lsd-spacing-base)">
+            <div className="space-y-(--lsd-spacing-base)">
+              <div>
+                <Label htmlFor="name">Full Name</Label>
+                <div className="relative">
+                  <Input
+                    id="name"
+                    placeholder="Enter your name"
+                    value={formData.name}
+                    onChange={(e) => handleFieldChange('name', e.target.value)}
+                    className={hasFieldError('name') ? 'border-destructive' : ''}
+                  />
+                  {hasFieldError('name') && (
+                    <WarningIcon className="absolute right-3 top-1/2 -translate-y-1/2 text-destructive" size={18} weight="duotone" />
+                  )}
+                </div>
+                <Typography variant="label1" className={`mt-(--lsd-spacing-smallest) ${hasFieldError('name') ? 'text-destructive' : 'text-primary/70'}`}>
+                  {getFieldHelper('name')}
+                </Typography>
+              </div>
+
+              <div>
+                <Label htmlFor="email">Email Address</Label>
+                <div className="relative">
+                  <EnvelopeIcon className="absolute left-3 top-1/2 -translate-y-1/2 text-primary/60" size={18} weight="duotone" />
+                  <Input
+                    id="email"
+                    placeholder="you@example.com"
+                    type="email"
+                    value={formData.email}
+                    onChange={(e) => handleFieldChange('email', e.target.value)}
+                    className={`pl-10 ${hasFieldError('email') ? 'border-destructive' : ''}`}
+                  />
+                  {hasFieldError('email') && (
+                    <WarningIcon className="absolute right-3 top-1/2 -translate-y-1/2 text-destructive" size={18} weight="duotone" />
+                  )}
+                </div>
+                <Typography variant="label1" className={`mt-(--lsd-spacing-smallest) ${hasFieldError('email') ? 'text-destructive' : 'text-primary/70'}`}>
+                  {getFieldHelper('email')}
+                </Typography>
+              </div>
+
+              <div>
+                <Label htmlFor="phone">Phone Number</Label>
+                <div className="relative">
+                  <PhoneIcon className="absolute left-3 top-1/2 -translate-y-1/2 text-primary/60" size={18} weight="duotone" />
+                  <Input
+                    id="phone"
+                    placeholder="+1 (555) 123-4567"
+                    type="tel"
+                    value={formData.phone}
+                    onChange={(e) => handleFieldChange('phone', e.target.value)}
+                    className={`pl-10 ${hasFieldError('phone') ? 'border-destructive' : ''}`}
+                  />
+                  {hasFieldError('phone') && (
+                    <WarningIcon className="absolute right-3 top-1/2 -translate-y-1/2 text-destructive" size={18} weight="duotone" />
+                  )}
+                </div>
+                <Typography variant="label1" className={`mt-(--lsd-spacing-smallest) ${hasFieldError('phone') ? 'text-destructive' : 'text-primary/70'}`}>
+                  {getFieldHelper('phone')}
+                </Typography>
+              </div>
+
+              <div>
+                <Label htmlFor="role">Role</Label>
+                <Select
+                  value={formData.role}
+                  onValueChange={(value: FormData['role']) => handleFieldChange('role', value)}
+                >
+                  <SelectTrigger id="role">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="developer">Developer</SelectItem>
+                    <SelectItem value="designer">Designer</SelectItem>
+                    <SelectItem value="manager">Manager</SelectItem>
+                    <SelectItem value="qa">QA Engineer</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div>
+                <Label htmlFor="location">Location</Label>
+                <Input
+                  id="location"
+                  placeholder="City, Country"
+                  value={formData.location}
+                  onChange={(e) => handleFieldChange('location', e.target.value)}
+                />
+              </div>
+
+              <div>
+                <Label htmlFor="bio">Bio</Label>
+                <Textarea
+                  id="bio"
+                  placeholder="Tell us about yourself..."
+                  value={formData.bio}
+                  onChange={(e) => handleFieldChange('bio', e.target.value)}
+                  rows={4}
+                />
+                <Typography variant="label1" className="text-primary/70 mt-(--lsd-spacing-smallest)">
+                  {formData.bio.length} / 500 characters
+                </Typography>
+              </div>
+
+              <div>
+                <Label htmlFor="website">Website (optional)</Label>
+                <Input
+                  id="website"
+                  placeholder="https://yourwebsite.com"
+                  type="url"
+                  value={formData.website}
+                  onChange={(e) => handleFieldChange('website', e.target.value)}
+                />
+              </div>
+
+              <div>
+                <Label htmlFor="linkedin">LinkedIn (optional)</Label>
+                <Input
+                  id="linkedin"
+                  placeholder="https://linkedin.com/in/yourprofile"
+                  type="url"
+                  value={formData.linkedin}
+                  onChange={(e) => handleFieldChange('linkedin', e.target.value)}
+                />
+              </div>
+
+              <div>
+                <Label htmlFor="github">GitHub (optional)</Label>
+                <Input
+                  id="github"
+                  placeholder="https://github.com/username"
+                  type="url"
+                  value={formData.github}
+                  onChange={(e) => handleFieldChange('github', e.target.value)}
+                />
+              </div>
+
+              <div>
+                <Label htmlFor="timezone">Timezone</Label>
+                <Select
+                  value={formData.timezone}
+                  onValueChange={(value) => handleFieldChange('timezone', value)}
+                >
+                  <SelectTrigger id="timezone">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="UTC">UTC (Coordinated Universal Time)</SelectItem>
+                    <SelectItem value="America/New_York">Eastern Time</SelectItem>
+                    <SelectItem value="America/Chicago">Central Time</SelectItem>
+                    <SelectItem value="America/Los_Angeles">Pacific Time</SelectItem>
+                    <SelectItem value="Europe/London">London</SelectItem>
+                    <SelectItem value="Europe/Paris">Paris</SelectItem>
+                    <SelectItem value="Asia/Tokyo">Tokyo</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-(--lsd-spacing-small)">
+                <div className="flex items-center justify-between">
+                  <label htmlFor="notifyEmail" className="text-sm font-medium">Email Notifications</label>
+                  <Switch
+                    id="notifyEmail"
+                    checked={formData.notifyEmail}
+                    onCheckedChange={(checked) => handleFieldChange('notifyEmail', checked)}
+                  />
+                </div>
+
+                <div className="flex items-center justify-between">
+                  <label htmlFor="notifyPush" className="text-sm font-medium">Push Notifications</label>
+                  <Switch
+                    id="notifyPush"
+                    checked={formData.notifyPush}
+                    onCheckedChange={(checked) => handleFieldChange('notifyPush', checked)}
+                  />
+                </div>
+              </div>
+            </div>
+
+            {loadingState !== 'idle' && (
+              <div className="space-y-(--lsd-spacing-smaller)">
+                <Progress value={validationProgress} />
+                <Typography variant="label1" className="text-center text-primary/70">
+                  {loadingState === 'validating' && 'Validating your information...'}
+                  {loadingState === 'saving' && 'Saving your profile...'}
+                  {loadingState === 'success' && 'Profile saved successfully!'}
+                </Typography>
+              </div>
+            )}
+
+            <Button
+              type="submit"
+              className="w-full mt-(--lsd-spacing-base)"
+              disabled={!isFormValid || loadingState !== 'idle'}
+              variant="filled"
+            >
+              <FloppyDiskIcon className="mr-(--lsd-spacing-smaller)" weight="duotone" />
+              {loadingState === 'saving' ? 'Saving...' : 'Save Profile'}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+```
+
+**Key Patterns Demonstrated:**
+- Comprehensive form validation with real-time error feedback
+- Conditional styling based on validation state
+- Inline icons with Input components
+- Character count and helper text
+- Multi-stage loading states with progress indicator
+- Success feedback with Alert
+- Switch components for toggle settings
+- Select dropdowns with predefined options
+
+## Example 3: Data Table Filtering and Sorting
+
+Complex data display with sorting, filtering, pagination, and bulk operations.
+
+```typescript
+'use client'
+
+import { useState, useMemo } from 'react'
+import {
+  Button,
+  Card,
+  CardContent,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Checkbox,
+  Typography,
+  Badge,
+  Alert,
+  AlertDescription,
+} from '@nipsys/lsd'
+import { ArrowUpIcon, ArrowDownIcon, TrashIcon, EditIcon, PersonIcon, CheckCircleIcon } from '@phosphor-icons/react'
+
+interface User {
+  id: string
+  name: string
+  email: string
+  role: 'Admin' | 'Editor' | 'Viewer'
+  status: 'Active' | 'Inactive' | 'Pending'
+  lastLogin: string
+  createdAt: string
+  department: string
+  location: string
+  projects: number
+  avatar?: string
+}
+
+const mockUsers: User[] = [
+  {
+    id: '1',
+    name: 'Alice Johnson',
+    email: 'alice.johnson@company.com',
+    role: 'Admin',
+    status: 'Active',
+    lastLogin: '2024-01-15',
+    createdAt: '2023-06-10',
+    department: 'Engineering',
+    location: 'New York',
+    projects: 12,
+  },
+  {
+    id: '2',
+    name: 'Bob Smith',
+    email: 'bob.smith@company.com',
+    role: 'Editor',
+    status: 'Active',
+    lastLogin: '2024-01-14',
+    createdAt: '2023-07-22',
+    department: 'Marketing',
+    location: 'San Francisco',
+    projects: 8,
+  },
+  {
+    id: '3',
+    name: 'Charlie Brown',
+    email: 'charlie.brown@company.com',
+    role: 'Viewer',
+    status: 'Inactive',
+    lastLogin: '2024-01-10',
+    createdAt: '2023-08-05',
+    department: 'Sales',
+    location: 'Chicago',
+    projects: 5,
+  },
+  {
+    id: '4',
+    name: 'Diana Prince',
+    email: 'diana.prince@company.com',
+    role: 'Admin',
+    status: 'Active',
+    lastLogin: '2024-01-16',
+    createdAt: '2023-05-15',
+    department: 'Engineering',
+    location: 'Austin',
+    projects: 15,
+  },
+  {
+    id: '5',
+    name: 'Ethan Hunt',
+    email: 'ethan.hunt@company.com',
+    role: 'Editor',
+    status: 'Pending',
+    lastLogin: '2024-01-12',
+    createdAt: '2024-01-01',
+    department: 'Operations',
+    location: 'Boston',
+    projects: 3,
+  },
+  {
+    id: '6',
+    name: 'Fiona Gallagher',
+    email: 'fiona.gallagher@company.com',
+    role: 'Viewer',
+    status: 'Active',
+    lastLogin: '2024-01-13',
+    createdAt: '2023-09-18',
+    department: 'Human Resources',
+    location: 'Seattle',
+    projects: 7,
+  },
+  {
+    id: '7',
+    name: 'George Miller',
+    email: 'george.miller@company.com',
+    role: 'Editor',
+    status: 'Active',
+    lastLogin: '2024-01-11',
+    createdAt: '2023-10-02',
+    department: 'Finance',
+    location: 'Denver',
+    projects: 9,
+  },
+  {
+    id: '8',
+    name: 'Hannah Lee',
+    email: 'hannah.lee@company.com',
+    role: 'Viewer',
+    status: 'Inactive',
+    lastLogin: '2024-01-08',
+    createdAt: '2023-11-20',
+    department: 'Marketing',
+    location: 'Los Angeles',
+    projects: 4,
+  },
+  {
+    id: '9',
+    name: 'Ian Wright',
+    email: 'ian.wright@company.com',
+    role: 'Admin',
+    status: 'Active',
+    lastLogin: '2024-01-15',
+    createdAt: '2023-04-12',
+    department: 'Engineering',
+    location: 'Portland',
+    projects: 18,
+  },
+  {
+    id: '10',
+    name: 'Julia Roberts',
+    email: 'julia.roberts@company.com',
+    role: 'Editor',
+    status: 'Active',
+    lastLogin: '2024-01-14',
+    createdAt: '2023-06-30',
+    department: 'Design',
+    location: 'Miami',
+    projects: 11,
+  },
+]
+
+type SortField = keyof User
+type SortOrder = 'asc' | 'desc'
+
+export function UserTable() {
+  const [searchTerm, setSearchTerm] = useState('')
+  const [roleFilter, setRoleFilter] = useState<'all' | 'Admin' | 'Editor' | 'Viewer'>('all')
+  const [statusFilter, setStatusFilter] = useState<'all' | 'Active' | 'Inactive' | 'Pending'>('all')
+  const [departmentFilter, setDepartmentFilter] = useState('all')
+  const [sortField, setSortField] = useState<SortField>('name')
+  const [sortOrder, setSortOrder] = useState<SortOrder>('asc')
+  const [currentPage, setCurrentPage] = useState(1)
+  const [selectedUsers, setSelectedUsers] = useState<Set<string>>(new Set())
+  const [itemsPerPage, setItemsPerPage] = useState(5)
+  const [showBulkDeleteAlert, setShowBulkDeleteAlert] = useState(false)
+
+  const departments = Array.from(new Set(mockUsers.map(u => u.department)))
+
+  const filteredAndSortedUsers = useMemo(() => {
+    let filtered = mockUsers.filter(user => {
+      const matchesSearch =
+        user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        user.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        user.department.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        user.location.toLowerCase().includes(searchTerm.toLowerCase())
+
+      const matchesRole = roleFilter === 'all' || user.role === roleFilter
+      const matchesStatus = statusFilter === 'all' || user.status === statusFilter
+      const matchesDepartment = departmentFilter === 'all' || user.department === departmentFilter
+
+      return matchesSearch && matchesRole && matchesStatus && matchesDepartment
+    })
+
+    filtered.sort((a, b) => {
+      const aValue = a[sortField]
+      const bValue = b[sortField]
+
+      if (aValue < bValue) return sortOrder === 'asc' ? -1 : 1
+      if (aValue > bValue) return sortOrder === 'asc' ? 1 : -1
+      return 0
+    })
+
+    return filtered
+  }, [searchTerm, roleFilter, statusFilter, departmentFilter, sortField, sortOrder])
+
+  const totalPages = Math.ceil(filteredAndSortedUsers.length / itemsPerPage)
+  const paginatedUsers = filteredAndSortedUsers.slice(
+    (currentPage - 1) * itemsPerPage,
+    currentPage * itemsPerPage
+  )
+
+  const handleSort = (field: SortField) => {
+    if (sortField === field) {
+      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')
+    } else {
+      setSortField(field)
+      setSortOrder('asc')
+    }
+  }
+
+  const SortIcon = ({ field }: { field: SortField }) => {
+    if (sortField !== field) return null
+    return sortOrder === 'asc' ? <ArrowUpIcon size={16} /> : <ArrowDownIcon size={16} />
+  }
+
+  const handleSelectUser = (userId: string) => {
+    setSelectedUsers(prev => {
+      const newSet = new Set(prev)
+      if (newSet.has(userId)) {
+        newSet.delete(userId)
+      } else {
+        newSet.add(userId)
+      }
+      return newSet
+    })
+  }
+
+  const handleSelectAll = () => {
+    const allIds = paginatedUsers.map(u => u.id)
+    if (selectedUsers.size === allIds.length && allIds.every(id => selectedUsers.has(id))) {
+      setSelectedUsers(new Set())
+    } else {
+      setSelectedUsers(new Set(allIds))
+    }
+  }
+
+  const isAllSelected = paginatedUsers.length > 0 &&
+    paginatedUsers.every(user => selectedUsers.has(user.id))
+
+  const isSomeSelected = paginatedUsers.some(user => selectedUsers.has(user.id))
+
+  const handleBulkDelete = () => {
+    setShowBulkDeleteAlert(true)
+  }
+
+  const confirmBulkDelete = () => {
+    setSelectedUsers(new Set())
+    setShowBulkDeleteAlert(false)
+    setCurrentPage(1)
+  }
+
+  const getStatusBadge = (status: User['status']) => {
+    const variants: Record<User['status'], 'default' | 'success' | 'warning'> = {
+      Active: 'success',
+      Inactive: 'default',
+      Pending: 'warning',
+    }
+    return <Badge variant={variants[status]}>{status}</Badge>
+  }
+
+  const getRoleBadge = (role: User['role']) => {
+    const color = role === 'Admin' ? 'bg-primary text-primary-foreground' : 'bg-secondary text-secondary-foreground'
+    return <span className={`px-(--lsd-spacing-smaller) py-(--lsd-spacing-smallest) rounded text-xs ${color}`}>
+      {role}
+    </span>
+  }
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString)
+    return new Intl.DateTimeFormat('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    }).format(date)
+  }
+
+  return (
+    <Card>
+      <CardContent className="p-(--lsd-spacing-base)">
+        <div className="space-y-(--lsd-spacing-base)">
+          <div className="flex items-center justify-between">
+            <div>
+              <Typography variant="h1">User Management</Typography>
+              <Typography variant="body2" className="text-primary/70">
+                Manage team members and permissions
+              </Typography>
+            </div>
+            {selectedUsers.size > 0 && (
+              <Button variant="destructive" size="sm" onClick={handleBulkDelete}>
+                <TrashIcon className="mr-(--lsd-spacing-smaller)" size={18} weight="duotone" />
+                Delete ({selectedUsers.size})
+              </Button>
+            )}
+          </div>
+
+          <div className="flex gap-(--lsd-spacing-base) flex-wrap">
+            <div className="flex-1 min-w-[200px]">
+              <Input
+                placeholder="Search users..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+            </div>
+
+            <Select value={roleFilter} onValueChange={setRoleFilter}>
+              <SelectTrigger className="w-[150px]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Roles</SelectItem>
+                <SelectItem value="Admin">Admin</SelectItem>
+                <SelectItem value="Editor">Editor</SelectItem>
+                <SelectItem value="Viewer">Viewer</SelectItem>
+              </SelectContent>
+            </Select>
+
+            <Select value={statusFilter} onValueChange={setStatusFilter}>
+              <SelectTrigger className="w-[150px]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Status</SelectItem>
+                <SelectItem value="Active">Active</SelectItem>
+                <SelectItem value="Inactive">Inactive</SelectItem>
+                <SelectItem value="Pending">Pending</SelectItem>
+              </SelectContent>
+            </Select>
+
+            <Select value={departmentFilter} onValueChange={setDepartmentFilter}>
+              <SelectTrigger className="w-[180px]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Departments</SelectItem>
+                {departments.map(dept => (
+                  <SelectItem key={dept} value={dept}>{dept}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {showBulkDeleteAlert && (
+            <Alert>
+              <WarningIcon size={20} weight="duotone" />
+              <AlertDescription>
+                Are you sure you want to delete {selectedUsers.size} user(s)? This action cannot be undone.
+                <div className="flex gap-(--lsd-spacing-smaller) mt-(--lsd-spacing-small)">
+                  <Button
+                    variant="filled"
+                    size="sm"
+                    onClick={confirmBulkDelete}
+                  >
+                    Confirm Delete
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setShowBulkDeleteAlert(false)}
+                  >
+                    Cancel
+                  </Button>
+                </div>
+              </AlertDescription>
+            </Alert>
+          )}
+
+          <Table className="mt-(--lsd-spacing-base)">
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-[50px]">
+                  <Checkbox
+                    checked={isAllSelected}
+                    onCheckedChange={handleSelectAll}
+                    aria-label="Select all users"
+                  />
+                </TableHead>
+                <TableHead>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleSort('name')}
+                    className="flex items-center gap-(--lsd-spacing-smaller) font-medium"
+                  >
+                    Name <SortIcon field="name" />
+                  </Button>
+                </TableHead>
+                <TableHead>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleSort('email')}
+                    className="flex items-center gap-(--lsd-spacing-smaller) font-medium"
+                  >
+                    Email <SortIcon field="email" />
+                  </Button>
+                </TableHead>
+                <TableHead>Role</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Department</TableHead>
+                <TableHead>Location</TableHead>
+                <TableHead>Projects</TableHead>
+                <TableHead>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleSort('lastLogin')}
+                    className="flex items-center gap-(--lsd-spacing-smaller) font-medium"
+                  >
+                    Last Login <SortIcon field="lastLogin" />
+                  </Button>
+                </TableHead>
+                <TableHead>Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {paginatedUsers.map(user => (
+                <TableRow key={user.id}>
+                  <TableCell>
+                    <Checkbox
+                      checked={selectedUsers.has(user.id)}
+                      onCheckedChange={() => handleSelectUser(user.id)}
+                      aria-label={`Select ${user.name}`}
+                    />
+                  </TableCell>
+                  <TableCell className="font-medium flex items-center gap-(--lsd-spacing-smaller)">
+                    <PersonIcon size={20} weight="duotone" />
+                    {user.name}
+                  </TableCell>
+                  <TableCell>{user.email}</TableCell>
+                  <TableCell>{getRoleBadge(user.role)}</TableCell>
+                  <TableCell>{getStatusBadge(user.status)}</TableCell>
+                  <TableCell>{user.department}</TableCell>
+                  <TableCell>{user.location}</TableCell>
+                  <TableCell>{user.projects}</TableCell>
+                  <TableCell>{formatDate(user.lastLogin)}</TableCell>
+                  <TableCell>
+                    <div className="flex gap-(--lsd-spacing-smaller)">
+                      <Button variant="ghost" size="sm">
+                        <EditIcon size={16} weight="duotone" />
+                      </Button>
+                      <Button variant="ghost" size="sm" destructive>
+                        <TrashIcon size={16} weight="duotone" />
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+
+          {paginatedUsers.length === 0 && (
+            <div className="text-center py-(--lsd-spacing-largest)">
+              <PersonIcon size={48} weight="duotone" className="text-primary/30 mx-auto mb-(--lsd-spacing-base)" />
+              <Typography variant="body1" className="text-primary/60">
+                No users found matching your criteria.
+              </Typography>
+              <Typography variant="label1" className="text-primary/50 mt-(--lsd-spacing-smaller)">
+                Try adjusting your filters or search terms
+              </Typography>
+            </div>
+          )}
+
+          <div className="flex items-center justify-between flex-wrap gap-(--lsd-spacing-base)">
+            <div className="flex items-center gap-(--lsd-spacing-base)">
+              <Select value={itemsPerPage.toString()} onValueChange={(value) => setItemsPerPage(Number(value))}>
+                <SelectTrigger className="w-[100px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="5">5</SelectItem>
+                  <SelectItem value="10">10</SelectItem>
+                  <SelectItem value="20">20</SelectItem>
+                  <SelectItem value="50">50</SelectItem>
+                </SelectContent>
+              </Select>
+              <Typography variant="label1" className="text-primary/70">
+                Showing {((currentPage - 1) * itemsPerPage) + 1} to{' '}
+                {Math.min(currentPage * itemsPerPage, filteredAndSortedUsers.length)} of{' '}
+                {filteredAndSortedUsers.length} users
+              </Typography>
+            </div>
+
+            <div className="flex gap-(--lsd-spacing-smaller)">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
+                disabled={currentPage === 1}
+              >
+                Previous
+              </Button>
+              <div className="flex items-center gap-(--lsd-spacing-smaller)">
+                {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+                  let pageNum = i + 1
+                  if (totalPages > 5 && currentPage > 3) pageNum = currentPage - 2 + i
+                  if (pageNum > totalPages) return null
+
+                  return (
+                    <Button
+                      key={pageNum}
+                      variant={currentPage === pageNum ? 'default' : 'ghost'}
+                      size="sm"
+                      onClick={() => setCurrentPage(pageNum)}
+                    >
+                      {pageNum}
+                    </Button>
+                  )
+                }).filter(Boolean)}
+              </div>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
+                disabled={currentPage === totalPages || totalPages === 0}
+              >
+                Next
+              </Button>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+```
+
+**Key Patterns Demonstrated:**
+- Complex data filtering with multiple criteria
+- Sorting with direction indicators on headers
+- Pagination with configurable page size
+- Bulk selection and operations
+- Conditional styling and badges
+- Empty state handling with icons
+- Responsive layout with flexible wrapping
+- Multi-level filtering (text, role, status, department)
+- Date formatting with Intl API
+
+## Key Lessons for Complex Applications
+
+### 1. State Management Patterns
+
+```typescript
+// Pattern: Lift state up to parent component
+function ParentComponent() {
+  const [state, setState] = useState(initialState)
+
+  return (
+    <>
+      <ChildA data={state} onUpdate={setState} />
+      <ChildB data={state} onUpdate={setState} />
+    </>
+  )
+}
+
+// Pattern: Use useMemo for expensive computations
+const filteredAndSorted = useMemo(() => {
+  return data
+    .filter(item => matchesCriteria(item))
+    .sort((a, b) => compareItems(a, b))
+}, [data, criteria])
+```
+
+**Best Practice:** Keep state close to where it's used, but lift it up when needed by multiple components. Use `useMemo` to prevent unnecessary recalculations.
+
+### 2. Event Handler Patterns
+
+```typescript
+// Pattern: Consistent event handlers for form fields
+const handleFieldChange = <T extends keyof FormData>(
+  field: T,
+  value: FormData[T]
+) => {
+  setFormData(prev => ({ ...prev, [field]: value }))
+  // Clear errors, trigger validation, etc.
+  if (errors[field as keyof FormErrors]) {
+    setErrors(prev => ({ ...prev, [field]: undefined }))
+  }
+}
+
+// Pattern: Generic action handlers
+const handleBulkAction = (action: 'delete' | 'archive' | 'export') => {
+  const selected = Array.from(selectedIds)
+  switch (action) {
+    case 'delete':
+      confirmBulkDelete(selected)
+      break
+    case 'archive':
+      archiveItems(selected)
+      break
+    case 'export':
+      exportItems(selected)
+      break
+  }
+}
+```
+
+**Best Practice:** Create reusable, type-safe event handlers that can clear related state (like errors) and trigger side effects.
+
+### 3. Composition Patterns
+
+```typescript
+// Pattern: Compose LSD components together
+<div className="space-y-(--lsd-spacing-base)">
+  <Card>
+    <CardContent className="p-(--lsd-spacing-base)">
+      <div className="space-y-(--lsd-spacing-base)">
+        <div>
+          <Label htmlFor="field">Field Label</Label>
+          <Input id="field" />
+        </div>
+        <div>
+          <Label htmlFor="another">Another Field</Label>
+          <Select>
+            <SelectTrigger id="another">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="option1">Option 1</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <Button>Submit</Button>
+      </div>
+    </CardContent>
+  </Card>
+</div>
+```
+
+**Best Practice:** Wrap related components in Cards for visual grouping, use consistent spacing with LSD variables, and maintain clear semantic hierarchy.
+
+### 4. Loading and Error States
+
+```typescript
+// Pattern: Show loading state during async operations
+const [loading, setLoading] = useState<boolean>(false)
+const [error, setError] = useState<string | null>(null)
+const [loadingProgress, setLoadingProgress] = useState(0)
+
+const handleSubmit = async () => {
+  setLoading(true)
+  setError(null)
+  setLoadingProgress(0)
+
+  const progressInterval = setInterval(() => {
+    setLoadingProgress(prev => Math.min(prev + 10, 100))
+  }, 100)
+
+  try {
+    await apiCall()
+    // Show success state
+  } catch (err) {
+    setError('Failed to save. Please try again.')
+  } finally {
+    clearInterval(progressInterval)
+    setLoading(false)
+  }
+}
+
+return (
+  <form onSubmit={handleSubmit}>
+    {/* Form fields */}
+    <Button disabled={loading}>
+      {loading ? 'Saving...' : 'Save'}
+    </Button>
+    {error && (
+      <Alert variant="destructive">
+        <AlertDescription>{error}</AlertDescription>
+      </Alert>
+    )}
+    {loading && (
+      <Progress value={loadingProgress} />
+    )}
+  </form>
+)
+```
+
+**Best Practice:** Always disable buttons during loading, show meaningful error messages, and provide progress feedback for long-running operations.
+
+### 5. Conditional Rendering
+
+```typescript
+// Pattern: Show different UI based on state
+{loading ? (
+  <div className="flex items-center justify-center py-(--lsd-spacing-largest)">
+    <Typography variant="body1" className="text-primary/70">
+      Loading...
+    </Typography>
+  </div>
+) : error ? (
+  <Alert>
+    <AlertDescription>{error}</AlertDescription>
+  </Alert>
+) : items.length === 0 ? (
+  <EmptyState
+    icon={PersonIcon}
+    title="No items found"
+    description="Try adjusting your filters or create a new item"
+  />
+) : (
+  <Table>
+    {/* Table rows */}
+  </Table>
+)}
+```
+
+**Best Practice:** Handle all possible states explicitly (loading, error, empty, success). Use descriptive empty states that guide users to the next action.
+
+---
+
+## Additional Best Practices
+
+### Consistent Spacing with LSD Variables
+
+Always use LSD spacing variables instead of arbitrary Tailwind values:
+
+```tsx
+// ✅ Correct
+className="space-y-(--lsd-spacing-base)"
+className="gap-(--lsd-spacing-base)"
+className="mt-(--lsd-spacing-base)"
+className="p-(--lsd-spacing-base)"
+
+// ❌ Incorrect
+className="space-y-4"
+className="gap-2"
+className="mt-4"
+className="p-4"
+```
+
+### LSD Color Tokens Only
+
+Use only LSD-approved color tokens:
+
+```tsx
+// ✅ Correct
+className="text-primary"
+className="text-destructive"
+
+// ❌ Incorrect
+className="text-muted-foreground"
+className="bg-muted"
+```
+
+### Phosphor Icons with Duotone Weight
+
+Import icons from `@phosphor-icons/react` and use `weight="duotone"` for most icons:
+
+```tsx
+import { PlusIcon, TrashIcon, EditIcon } from '@phosphor-icons/react'
+
+// ✅ Correct - Most icons use weight="duotone"
+<Button>
+  <PlusIcon weight="duotone" />
+</Button>
+<Button destructive>
+  <TrashIcon weight="duotone" />
+</Button>
+
+// ✅ Correct - CheckIcon and PlusIcon (without Icon suffix) use default
+<Button>
+  <Check />
+</Button>
+<Button>
+  <Plus />
+</Button>
+```
+
+### Accessibility Considerations
+
+- Use semantic HTML elements
+- Provide clear labels for form inputs
+- Use ARIA attributes when needed
+- Support keyboard navigation
+- Ensure sufficient color contrast
+- Focus management for modals and dialogs
+
+### Performance Optimization
+
+- Use `useMemo` for expensive computations
+- Use `useCallback` for function props
+- Implement debounce for search inputs
+- Lazy load large datasets
+- Virtualize long lists when needed
diff --git a/skills/nipsys-lsd/references/architecture.md b/skills/nipsys-lsd/references/architecture.md
index 763fd212..86a62e04 100644
--- a/skills/nipsys-lsd/references/architecture.md
+++ b/skills/nipsys-lsd/references/architecture.md
@@ -1,740 +1,144 @@
-# LSD Component Architecture Patterns
+# Component Architecture Patterns (LSD)
 
-Detailed guide to the 5 architectural patterns used in @nipsys/lsd components with code examples.
+## 1. Radix Primitive Wrapper
+Wraps Radix primitives with LSD styling, handles `asChild` composition via `Slot`.
 
-## The 5 Architectural Patterns
-
-1. **Radix Primitive Wrapper Pattern** (25+ components)
-2. **CVA Pattern** (10 components)
-3. **Context Provider Pattern** (8 components)
-4. **Static Component Pattern** (5 components)
-5. **Composite/Custom Pattern** (3 components)
-
----
-
-## Pattern 1: Radix Primitive Wrapper Pattern
-
-### Concept
-Wraps Radix UI primitives with LSD styling, uses React.forwardRef, exports displayName. This is the most common pattern.
-
-### Characteristics
-- Wraps a Radix primitive
-- Uses `forwardRef` for ref forwarding
-- Applies `cn()` utility for class merging
-- Always sets `displayName`
-- Minimal logic, just styling and prop forwarding
-
-### Code Example
-```tsx
-import * as React from 'react';
-import { Separator as SeparatorPrimitive } from '@radix-ui/react-separator';
-import { cn } from '@/lib/utils';
-
-export interface SeparatorProps extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive> {}
-
-const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive>,
-  SeparatorProps
->(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
-  <SeparatorPrimitive
-    ref={ref}
-    decorative={decorative}
-    orientation={orientation}
-    className={cn(
-      'shrink-0 bg-border',
-      orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
-      className
-    )}
-    {...props}
-  />
-)
-Separator.displayName = 'Separator';
-
-export { Separator };
-```
-
-### Real-World Examples from LSD
-
-**Button Component**
-```tsx
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, size = 'md', variant = 'filled', ...props }, ref) => (
-    <button
-      ref={ref}
-      className={cn(buttonVariants({ size, variant }), className)}
-      {...props}
-    />
-  )
-)
-Button.displayName = 'Button';
-```
-
-**Checkbox Component**
 ```tsx
-const Checkbox = React.forwardRef<
-  HTMLButtonElement,
-  CheckboxProps
->(({ className, variant = 'default', size = 'md', ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(checkboxVariants({ size, variant }), className)}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator>
-      <CheckIcon />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-))
-Checkbox.displayName = 'Checkbox';
-```
+import * as Primitive from '@radix-ui/react-checkbox'
+import { cn } from '@/lib/utils'
+import { Slot } from '@radix-ui/react-slot'
 
-**Switch Component**
-```tsx
-const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
-  ({ className, variant = 'default', ...props }, ref) => (
-    <SwitchPrimitive.Root
-      ref={ref}
-      className={cn(switchVariants({ variant }), className)}
-      {...props}
-    >
-      <SwitchPrimitive.Thumb />
-    </SwitchPrimitive.Root>
-  )
-)
-Switch.displayName = 'Switch';
-```
-
-**Toggle Component**
-```tsx
-const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
-  ({ className, pressed, pressedChange, ...props }, ref) => (
-    <TogglePrimitive.Root
-      ref={ref}
-      pressed={pressed}
-      onPressedChange={pressedChange}
-      className={cn(toggleVariants(), className)}
-      {...props}
-    />
-  )
-)
-Toggle.displayName = 'Toggle';
-```
-
-**Slider Component**
-```tsx
-const Slider = React.forwardRef<
-  React.ElementRef<typeof SliderPrimitive.Root>,
-  SliderProps
->(({ className, orientation = 'horizontal', ...props }, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    orientation={orientation}
-    className={cn('relative flex', orientation === 'horizontal' ? 'w-full' : 'h-full', className)}
-    {...props}
-  >
-    <SliderPrimitive.Track className="bg-primary/20 flex-1 h-1">
-      <SliderPrimitive.Range className="bg-primary h-full rounded" />
-    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-4 w-4 rounded bg-primary" />
-  </SliderPrimitive.Root>
+export const Checkbox = forwardRef<
+  ElementRef<typeof Primitive.Root>,
+  ComponentPropsWithoutRef<typeof Primitive.Root> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => (
+  <Primitive.Root ref={ref} className={cn(/* base */, className)} {...props} />
 ))
-Slider.displayName = 'Slider';
+Checkbox.displayName = Primitive.Root.displayName
 ```
 
-### When to Use
-- When you need to style a Radix primitive
-- When you need accessibility features built-in
-- When you need keyboard navigation
-- When component behavior is standard
-
----
-
-## Pattern 2: CVA Pattern
+## 2. CVA Pattern
+Uses `class-variance-authority` for variants/sizes. Consistent `size`, `variant` props.
 
-### Concept
-Uses class-variance-authority (CVA) for variant management with `variant` and `size` props. Provides multiple pre-defined variants for different visual styles.
-
-### Characteristics
-- Uses CVA for variant definitions
-- Supports `variant` and `size` props
-- Defines `baseClasses` for shared styles
-- `defaultVariants` for fallback values
-- Often combines with Radix primitives
-
-### Code Example
 ```tsx
-import { cva } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
+import { cva } from 'class-variance-authority'
+import { type SizeVariant, type SquareSize } from '@/lib/types'
 
-const componentVariants = cva('base-classes', {
+const { base, variants } = cva('base-classes', {
   variants: {
-    variant: {
-      default: 'default-classes',
-      destructive: 'destructive-classes',
-    },
-    size: {
-      sm: 'small-classes',
-      md: 'medium-classes',
-      lg: 'large-classes',
-    },
+    size: { sm: 's-sm', md: 's-md', lg: 's-lg' },
+    variant: { default: 'v-default', destructive: 'v-destructive' },
   },
-  defaultVariants: {
-    variant: 'default',
-    size: 'md',
-  },
-});
-
-function Component({ variant, size, className, ...props }: Props) {
-  return (
-    <div className={cn(componentVariants({ variant, size }), className)} {...props} />
-  );
-}
-```
-
-### Real-World Examples from LSD
-
-**Badge Variants**
-```tsx
-const badgeVariants = cva(
-  'inline-flex items-center justify-center rounded px-2.5 py-0.5 text-xs font-semibold',
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary/10 text-primary',
-        outlined: 'border border-primary text-primary bg-transparent',
-        ghost: 'bg-transparent text-primary',
-        destructive: 'bg-destructive/10 text-destructive',
-      },
-      size: {
-        sm: 'text-[10px] px-2 py-0',
-        md: 'text-xs px-2.5 py-0.5',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'md',
-    },
-  }
-);
-
-export function Badge({ variant, size, className, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant, size }), className)} {...props} />;
-}
-```
+  defaultVariants: { size: 'md', variant: 'default' },
+})
 
-**Button Variants**
-```tsx
-const buttonVariants = cva(
-  'inline-flex items-center justify-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
-  {
-    variants: {
-      variant: {
-        filled: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        outlined: 'border border-primary bg-transparent text-primary hover:bg-primary/10',
-        ghost: 'bg-transparent text-primary hover:bg-primary/10',
-        link: 'text-primary underline-offset-4 hover:underline',
-        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-      },
-      size: {
-        sm: 'h-8 px-3 text-xs',
-        md: 'h-10 px-4',
-        lg: 'h-11 px-8',
-      },
-    },
-    defaultVariants: {
-      variant: 'filled',
-      size: 'md',
-    },
-  }
-);
-```
-
-**TextField Variants**
-```tsx
-const textFieldVariants = cva(
-  'flex flex-col',
-  {
-    variants: {
-      variant: {
-        default: '',
-        outlined: '',
-        underlined: '',
-      },
-      size: {
-        sm: 'text-sm',
-        md: 'text-base',
-        lg: 'text-lg',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'md',
-    },
-  }
-);
+export const Button = forwardRef<..., SizeVariant props>(({ size, variant, className, ... }, ref) => (
+  <button ref={ref} className={base({ size, variant, className })} />
+))
 ```
 
-### When to Use
-- When component needs multiple visual variants
-- When component needs different sizes
-- When combining variant patterns with other patterns
-- When styling needs to be consistent across variants
-
----
-
-## Pattern 3: Context Provider Pattern
-
-### Concept
-Composite components with shared state via React Context. Provides hierarchical structure where child components access parent state.
+## Components: Button, Badge, Toggle, Label, Alert, InputGroupAddon, Tabs, Accordion, SidebarMenuButton, ButtonGroup, Typography, Menubar (13 total)
 
-### Characteristics
-- Creates React Context for state sharing
-- Root component provides context value
-- Child components consume context
-- Often combines with Radix primitives
-- Enables complex component hierarchies
+## 3. Context Provider
+Composite components with shared state. Provider + child components consuming context.
 
-### Code Example
 ```tsx
-import * as React from 'react';
+const TabsContext = createContext<TabsContextValue | null>(null)
 
-const Context = React.createContext<ContextValue | undefined>(undefined);
-
-function Root({ children, ...props }: RootProps) {
-  const [value, setValue] = React.useState(defaultValue);
-
-  return (
-    <Context.Provider value={{ value, setValue, ...props }}>
-      <Primitive {...props}>{children}</Primitive>
-    </Context.Provider>
-  );
-}
+const Tabs = forwardRef<..., TabsProps>(({ defaultValue, onValueChange, children, ... }, ref) => (
+  <TabsContext.Provider value={{ value, onValueChange }}>
+    <Primitive.Root value={value} onValueChange={onValueChange}>{children}</Primitive.Root>
+  </TabsContext.Provider>
+))
 
-function Child() {
-  const context = React.useContext(Context);
-  if (!context) throw new Error('Child must be used within Root');
-  const { value, setValue } = context;
-  // Use context values
-}
+export const TabsList = /* uses TabsContext */
+export const TabsTrigger = /* uses TabsContext */
+export const TabsContent = /* uses TabsContext */
 ```
 
-### Real-World Examples from LSD
+## Components: Tabs, InputGroup, Field, Dialog, NavigationMenu, Sidebar
 
-**Tabs Component**
-```tsx
-const TabsContext = React.createContext<TabsContextValue | undefined>(
-  undefined
-);
+## 4. Static Component
+Simple presentational components, minimal props, often text/icon displays.
 
-function Tabs({ value, onValueChange, children, ...props }: TabsProps) {
-  return (
-    <TabsContext.Provider value={{ value, onValueChange }}>
-      <TabsPrimitive {...props}>{children}</TabsPrimitive>
-    </TabsContext.Provider>
-  );
-}
-
-function TabsTrigger({ value: triggerValue, children, ...props }: TabsTriggerProps) {
-  const context = React.useContext(TabsContext);
-  const { value, onValueChange } = context!;
-
-  return (
-    <TabsPrimitive.Trigger
-      value={triggerValue}
-      onClick={() => onValueChange?.(triggerValue)}
-      className={value === triggerValue ? 'active-classes' : 'inactive-classes'}
-      {...props}
-    >
-      {children}
-    </TabsPrimitive.Trigger>
-  );
-}
-```
-
-**InputGroup Component**
 ```tsx
-const InputGroupContext = React.createContext<InputGroupContextValue | undefined>(
-  undefined
-);
-
-function InputGroup({ children, ...props }: InputGroupProps) {
-  return (
-    <InputGroupContext.Provider value={props}>
-      <div className={cn('flex items-center', props.className)} {...props}>
-        {children}
-      </div>
-    </InputGroupContext.Provider>
-  );
-}
-
-function InputGroupAddOn({ children, className }: InputGroupAddOnProps) {
-  const context = React.useContext(InputGroupContext);
-  return (
-    <div className={cn('relative flex items-center', className)}>
-      {children}
-    </div>
-  );
-}
-
-function InputGroupAddOnIcon({ children }: InputGroupAddOnIconProps) {
-  return (
-    <div className="absolute inset-y-0 left-3 flex items-center pointer-events-none">
-      {children}
-    </div>
-  );
-}
-```
-
-**Dialog Component Pattern** (Simplified)
-```tsx
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-
-export const Dialog = DialogPrimitive.Root;
-export const DialogTrigger = DialogPrimitive.Trigger;
-export const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPrimitive.Portal>
-    <DialogPrimitive.Overlay className="fixed inset-0 bg-black/50" />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn('fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2', className)}
-      {...props}
-    >
-      {children}
-    </DialogPrimitive.Content>
-  </DialogPrimitive.Portal>
+export const Separator = forwardRef<..., SeparatorProps>(({ className, orientation = 'horizontal', decorative, ... }, ref) => (
+  <Primitive.Root ref={ref} decorative={decorative} orientation={orientation} className={cn(...)} />
 ))
-DialogContent.displayName = 'DialogContent';
 ```
 
-### When to Use
-- When components need shared state
-- When building composable hierarchies
-- When parent-child communication is needed
-- When complex component structure is required
-
----
-
-## Pattern 4: Static Component Pattern
+## 5. Composite/Custom
+Complex components combining multiple patterns or external libraries.
 
-### Concept
-Simple presentational components without complex logic or state. Often wraps HTML elements with consistent styling.
-
-### Characteristics
-- Simple functional components
-- No complex state management
-- Extends native HTML element props
-- Uses `cn()` for class merging
-- Often wraps single HTML element
-
-### Code Example
 ```tsx
-import * as React from 'react';
-import { cn } from '@/lib/utils';
-
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-function Card({ className, ...props }: CardProps) {
+// Autocomplete: cmdk + dialog + CVA variants
+export const Autocomplete = ({ options, filterFn, ... }) => {
+  const [open, setOpen] = useState(false)
   return (
-    <div
-      className={cn(
-        'rounded-lg border bg-card text-card-foreground shadow-sm',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function CardHeader({ className, ...props }: CardProps) {
-  return (
-    <div
-      className={cn('flex flex-col space-y-1.5 p-6', className)}
-      {...props}
-    />
-  );
-}
-
-function CardContent({ className, ...props }: CardProps) {
-  return (
-    <div className={cn('p-6 pt-0', className)} {...props} />
-  );
+    <Popover open={open} onOpenChange={setOpen}>
+      <Command>
+        <CommandInput />
+        <PopoverContent>
+          <CommandList><CommandGroup>{options.map(...)}</CommandGroup></CommandList>
+        </PopoverContent>
+      </Command>
+    </Popover>
+  )
 }
 ```
 
-### Real-World Examples from LSD
+## Components: Autocomplete (cmdk), Calendar (react-day-picker), Sonner (toast system)
 
-**Alert Component**
-```tsx
-export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
-  variant?: 'default' | 'destructive';
-}
+## Common Implementation Patterns
 
-function Alert({ className, variant = 'default', ...props }: AlertProps) {
-  return (
-    <div
-      role="alert"
-      className={cn(
-        'relative w-full rounded-lg border p-4',
-        variant === 'default' && 'bg-white border-gray-200',
-        variant === 'destructive' && 'bg-red-50 border-red-200',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-```
-
-**Avatar Component**
+**Ref Forwarding**
 ```tsx
-export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-function Avatar({ className, ...props }: AvatarProps) {
-  return <div className={cn('relative shrink-0', className)} {...props} />;
-}
-
-function AvatarImage({ className, ...props }: React.ImgHTMLAttributes<HTMLImageElement>) {
-  return (
-    <img
-      className={cn('aspect-square h-full w-full rounded-full', className)}
-      {...props}
-    />
-  );
-}
-
-function AvatarFallback({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn(
-        'flex h-full w-full items-center justify-center rounded-full bg-muted',
-        className
-      )}
-      {...props}
-    />
-  );
-}
+import { forwardRef } from 'react'
+export const Component = forwardRef<HTMLButtonElement, ComponentProps>((props, ref) => ( ... ))
 ```
 
-**Avatar Internal State (Hybrid)**
+**Class Merging** - `cn()` NOT exported from LSD, implement locally:
 ```tsx
-const Avatar = React.forwardRef<
-  HTMLDivElement,
-  AvatarProps
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    className={cn(
-      'relative flex shrink-0 overflow-hidden rounded-full',
-      className
-    )}
-    {...props}
-  />
-))
-Avatar.displayName = 'AvatarPrimitive.Root';
-
-const AvatarImage = React.forwardRef<
-  HTMLImageElement,
-  AvatarImageProps
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image
-    ref={ref}
-    className={cn('aspect-square h-full w-full', className)}
-    {...props}
-  />
-))
-AvatarImage.displayName = 'AvatarPrimitive.Image';
-
-const AvatarFallback = React.forwardRef<
-  HTMLDivElement,
-  AvatarFallbackProps
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn(
-      'flex h-full w-full items-center justify-center rounded-full bg-muted',
-      className
-    )}
-    {...props}
-  />
-))
-AvatarFallback.displayName = 'AvatarPrimitive.Fallback';
+import { clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs))
 ```
 
-### When to Use
-- For simple presentational components
-- When wrapping HTML elements with styling
-- When no complex state is needed
-- For card, alert, avatar-like components
-
----
-
-## Pattern 5: Composite/Custom Pattern
-
-### Concept
-Complex components combining multiple patterns or external libraries. Custom implementations that don't fit into standard patterns.
-
-### Characteristics
-- Combines multiple patterns
-- Integrates external libraries
-- Complex state management
-- Custom implementations
-- Often integrates non-Radix dependencies
-
-### Real-World Examples from LSD
-
-**Autocomplete Component** (Radix Popover + cmdk)
+**Display Name** - Required for debugging with React DevTools
 ```tsx
-import * as React from 'react';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-import { Command } from 'cmdk';
-
-function Autocomplete({ options, value, onChange, ...props }: AutocompleteProps) {
-  const [open, setOpen] = React.useState(false);
-
-  return (
-    <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
-      <PopoverPrimitive.Trigger asChild>
-        <Button variant="outlined" className="w-full justify-start">
-          {value?.label || 'Select...'}
-        </Button>
-      </PopoverPrimitive.Trigger>
-      <PopoverPrimitive.Content>
-        <Command>
-          <CommandInput placeholder="Search..." />
-          <CommandList>
-            <CommandEmpty>No results found.</CommandEmpty>
-            <CommandGroup>
-              {options.map((option) => (
-                <CommandItem
-                  key={option.value}
-                  value={option.label}
-                  onSelect={() => {
-                    onChange(option);
-                    setOpen(false);
-                  }}
-                >
-                  {option.label}
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverPrimitive.Content>
-    </PopoverPrimitive.Root>
-  );
-}
+Component.displayName = 'Component'
 ```
 
-**Calendar Component** (react-day-picker integration)
+**asChild Prop** - Enables Radix Slot pattern for custom composition
 ```tsx
-import * as React from 'react';
-import { DayPicker } from 'react-day-picker';
-
-function Calendar({
-  mode = 'single',
-  selected,
-  onSelect,
-  className,
-  classNames,
-  ...props
-}: CalendarProps) {
-  return (
-    <DayPicker
-      mode={mode}
-      selected={selected}
-      onSelect={onSelect}
-      className={cn('p-3', className)}
-      classNames={{
-        months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
-        month: 'space-y-4',
-        caption: 'flex justify-center pt-1 relative items-center',
-        nav: 'space-x-1 flex items-center',
-        ...classNames,
-      }}
-      {...props}
-    />
-  );
-}
+export const Button = ({ asChild = false, ... }) => asChild ? <Slot>{child}</Slot> : <button />
 ```
 
-**Sonner Component** (sonner toast library)
+**data-slot Attributes** - Styling hooks for parent/child relationships
 ```tsx
-import * as React from 'react';
-import { toast as sonnerToast } from 'sonner';
+<div data-slot="trigger" />
+<div data-slot="content" />
+```
 
-function Toaster() {
-  return (
-    <div className="fixed bottom-0 right-0 z-50 flex flex-col gap-2 p-4">
-      {/* Toast container */}
-    </div>
-  );
-}
+**Consistent Prop Naming**
+- `size` - dimension variants (sm, md, lg)
+- `variant` - visual intent (default, destructive, outline)
+- `disabled` - interaction disabled
+- `loading` - loading state
+- `error` - error state
 
-function Toast({ toast, onDismiss }: ToastProps) {
-  return (
-    <div
-      className={cn(
-        'flex items-center gap-3 rounded-lg border p-4 shadow-lg animate-in slide-in-from-right',
-        toast.variant === 'destructive' && 'border-destructive bg-destructive/10'
-      )}
-    >
-      {/* Toast content */}
-    </div>
-  );
-}
-```
+## Type Definitions and Utilities
 
-**Sheet Component** (Built on Radix Dialog)
 ```tsx
-const Sheet = Dialog;
-const SheetTrigger = DialogTrigger;
-const SheetContent = React.forwardRef<
-  React.ElementRef<typeof DialogContent>,
-  SheetContentProps
->(({ side = 'right', className, children, ...props }, ref) => (
-  <DialogContent
-    ref={ref}
-    className={cn(
-      'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out duration-500',
-      side === 'right' && 'inset-y-0 right-0 h-full w-[300px] sm:w-[400px]',
-      className
-    )}
-    {...props}
-  >
-    {children}
-  </DialogContent>
-))
-SheetContent.displayName = 'SheetContent';
+// @/lib/types
+export type SizeVariant = 'sm' | 'md' | 'lg'
+export type SquareSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+export type BorderVariant = 'none' | 'light' | 'default' | 'medium'
 ```
 
-### When to Use
-- When integrating external libraries (cmdk, react-day-picker, sonner)
-- When building complex composite components
-- When custom implementation is required
-- When multiple patterns need to be combined
-
----
-
-## Pattern Selection Guide
-
-| Use Case | Pattern | Example |
-|----------|---------|---------|
-| Style Radix primitive | Pattern 1 | Separator, Switch, Toggle |
-| Multiple variants/sizes | Pattern 2 | Button, Badge, Checkbox |
-| Shared state in hierarchy | Pattern 3 | Tabs, InputGroup, Dialog |
-| Simple presentational | Pattern 4 | Alert, Card, Avatar |
-| Complex/custom integration | Pattern 5 | Autocomplete, Calendar, Sonner |
-
-## Important Notes
+## Exported Utilities from LSD
 
-- **Most components use Pattern 1** (Radix Primitive Wrapper)
-- **CVA often combines with Pattern 1** (Button Checkbox uses both)
-- **Pattern 3 is essential for composition** (Tabs, Dialog, Select)
-- **Pattern 4 is for simple UI elements** (Card, Alert, Avatar)
-- **Pattern 5 handles complex integrations** (Autocomplete, Calendar)
-- All patterns use `forwardRef` when needed
-- All patterns use `cn()` for class merging
-- All patterns set `displayName` for debugging
+ LSD exports minimal utilities. Most are internal primitives.
+- Radix primitives re-exported as-is
+- No `cn()` export - implement with `clsx` + `tailwind-merge`
+- Type utilities are internal to the package
diff --git a/skills/nipsys-lsd/references/colors.md b/skills/nipsys-lsd/references/colors.md
index 1467368a..7d0a7c6f 100644
--- a/skills/nipsys-lsd/references/colors.md
+++ b/skills/nipsys-lsd/references/colors.md
@@ -1,282 +1,115 @@
-# LSD Color Token System
+# LSD Color Tokens Reference
 
-Complete color token system for @nipsys/lsd with semantic meanings and theme integration.
+## Overview
 
-## Concept
+LSD uses CSS custom properties (CSS variables) for theming. All colors must use these tokens—never raw hex values.
 
-LSD uses a controlled color system to maintain design consistency and theme coherence.
+## Color Categories
 
-## Semantic Colors
+| Category | Tokens | Purpose |
+|----------|--------|---------|
+| **Primary** | `--lsd-primary`, `--lsd-primary-foreground` | Brand color & contrast text |
+| **Text** | `--lsd-text-primary`, `--lsd-text-secondary` | Body and muted text |
+| **Surface/Border** | `--lsd-surface`, `--lsd-border` | Backgrounds and separators |
+| **Semantic** | `--lsd-destructive`, `--lsd-success`, `--lsd-warning`, `--lsd-info` | Status and actions |
 
-### Approved Colors
-**ALWAYS use these colors in your components:**
+## Token Values
 
-- `text-primary` - Primary text color, foreground content
-- `text-destructive` - Destructive actions, errors, warning states
+### Primary Colors
 
-### Forbidden Colors
-**NEVER use these colors - they are not part of LSD:**
-
-- `text-muted-foreground` ❌
-- `bg-muted` ❌
-- `ring-offset-background` ❌
-- `accent` ❌
-- `accent-foreground` ❌
-
-## Usage Syntax
+| Token | Light | Dark |
+|-------|-------|------|
+| `--lsd-primary` | #000000 | #ffffff |
+| `--lsd-primary-foreground` | #ffffff | #000000 |
 
 ### Text Colors
-```tsx
-// Primary text
-<Typography className="text-primary">Primary text</Typography>
-
-// Destructive text
-<Typography className="text-destructive">Error message</Typography>
-
-// With hover states
-<Button className="hover:text-destructive">Delete</Button>
-```
-
-### Border Colors
-```tsx
-// Primary border
-<div className="border border-primary">...</div>
-
-// With focus
-<Input className="focus:border-primary" />
-
-// With variants
-<Button variant="outlined" className="border-primary text-primary">
-  Border Button
-</Button>
-```
-
-### Background Colors
-```tsx
-// Transparent backgrounds (LSD default)
-<Card className="bg-transparent">...</Card>
-
-// Hover states
-<Button className="hover:bg-primary/10">Hover</Button>
-```
 
-## Theme Integration
+| Token | Light | Dark |
+|-------|-------|------|
+| `--lsd-text-primary` | #000000 | #ffffff |
+| `--lsd-text-secondary` | #4a4a4a | #d2d2d2 |
 
-### Light Mode (default)
-- `text-primary` → Dark gray (`#1a1a1a`)
-- `text-destructive` → Red (`#dc2626`)
+### Surface & Border
 
-### Dark Mode (`.dark` class)
-- `text-primary` → Light gray (`#e5e5e5`)
-- `text-destructive` → Light red (`#f87171`)
+| Token | Light | Dark |
+|-------|-------|------|
+| `--lsd-surface` | #ffffff | #000000 |
+| `--lsd-border` | #000000 | #ffffff |
 
-### Accent Themes
-Accent colors are applied via `data-theme` attribute on HTML element:
-- `monochrome` - Black/white
-- `teal` - Teal accent
-- `nord` - Nord color palette
-- `terracotta` - Terracotta accent
-- `catppuccin` - Catppuccin palette
+### Semantic Colors
 
-## Component Patterns
+| Token | Light | Dark |
+|-------|-------|------|
+| `--lsd-destructive` | #da0000 | #e5484d |
+| `--lsd-success` | #15803d | #22c55e |
+| `--lsd-warning` | #b45309 | #d97706 |
+| `--lsd-info` | #2563eb | #2563eb |
 
-### Button States
-```tsx
-// Filled button (primary action)
-<Button variant="filled">Save</Button>
-// Uses text-primary for text, theme accent for background
-
-// Outlined button (secondary action)
-<Button variant="outlined">Cancel</Button>
-// Uses border-primary and text-primary
-
-// Ghost button (subtle action)
-<Button variant="ghost">Close</Button>
-// Uses text-primary with transparent background
-
-// Link button (minimal action)
-<Button variant="link">Learn more</Button>
-// Uses text-primary with underline
-
-// Destructive button
-<Button variant="destructive">Delete</Button>
-// Uses text-destructive
-```
-
-### Input States
-```tsx
-// Default input
-<Input className="border-primary text-primary" />
-
-// Error state
-<Input className="border-destructive text-destructive" />
-
-// Disabled state
-<Input className="border-primary text-primary opacity-50" disabled />
-```
-
-### Alert States
-```tsx
-// Info alert (default)
-<Alert>
-  <InfoIcon className="text-primary" />
-  <AlertDescription className="text-primary">
-    Information message
-  </AlertDescription>
-</Alert>
-
-// Error alert
-<Alert variant="destructive">
-  <WarningIcon className="text-destructive" />
-  <AlertDescription className="text-destructive">
-    Error message
-  </AlertDescription>
-</Alert>
-```
+## Usage Examples (JSX)
 
-### Typography Colors
 ```tsx
-// All text uses text-primary by default
-<Typography variant="h1" className="text-primary">
-  Heading
-</Typography>
-
-<Typography variant="body1" className="text-primary">
-  Body text
-</Typography>
-
-// Destructive messages
-<Typography variant="body2" className="text-destructive">
-  This field is required
-</Typography>
-```
-
-### Icon Colors
-```tsx
-// Icons inherit text color
-<PlusIcon className="text-primary" />
-<TrashIcon className="text-destructive" />
-
-// Icon with hover
-<Button>
-  <ShareIcon className="text-primary hover:text-destructive" />
-</Button>
-```
-
-## Hover and Focus States
-
-### Hover States
-```tsx
-// Text hover
-<Typography className="text-primary hover:text-destructive cursor-pointer">
-  Delete
-</Typography>
-
-// Background hover
-<Button className="hover:bg-primary/10">
-  Hover effect
-</Button>
-
-// Border hover
-<Card className="border-primary hover:border-destructive">
-  Hover me
-</Card>
-```
-
-### Focus States
-```tsx
-// Focus ring (built into components)
-<Input className="focus:ring-2 focus:ring-primary" />
-
-// Focus text
-<Button className="focus:text-destructive">
-  Focus me
-</Button>
-```
-
-## Common Patterns
-
-### Success/Error States
-```tsx
-// Success (uses primary color for neutral success)
-<div className="flex items-center gap-(--lsd-spacing-smaller)">
-  <CheckIcon className="text-primary" />
-  <Typography variant="body1" className="text-primary">
-    Saved successfully
-  </Typography>
+import { cn } from '@/lib/utils';
+
+// Button with token colors
+<button className="bg-(--lsd-primary) text-(--lsd-primary-foreground)">
+  Primary Button
+</button>
+
+// Text variants
+<p className="text-(--lsd-text-primary)">Primary text</p>
+<p className="text-(--lsd-text-secondary)">Secondary text</p>
+
+// Semantic buttons
+<button className="bg-(--lsd-destructive)">Delete</button>
+<button className="bg-(--lsd-success)">Confirm</button>
+<button className="bg-(--lsd-warning)">Wait</button>
+<button className="bg-(--lsd-info)">Info</button>
+
+// Card with surface and border
+<div className="bg-(--lsd-surface) border border-(--lsd-border)">
+  Card content
 </div>
 
-// Error
-<div className="flex items-center gap-(--lsd-spacing-smaller)">
-  <ErrorIcon className="text-destructive" />
-  <Typography variant="body1" className="text-destructive">
-    Something went wrong
-</Typography>
+// With utility helper
+<div className={cn('p-(--lsd-spacing-base)', 'bg-(--lsd-surface)', 'border-(--lsd-border)')}>
+  Responsive card
 </div>
 ```
 
-### Form Validation
-```tsx
-// Error message
-<Typography variant="label1" className="text-destructive mb-(--lsd-spacing-smaller)">
-  This field is required
-</Typography>
-<Input className="border-destructive text-destructive" />
+## Theme Inheritance
 
-// Success message
-<Typography variant="label1" className="text-primary mb-(--lsd-spacing-smaller)">
-  Valid
-</Typography>
-<Input className="border-primary text-primary" />
-```
+Colors automatically switch based on the active theme (light/dark) set on the `html` or `body` element:
 
-### Badge Styles
 ```tsx
-// Default badge
-<Badge className="text-primary bg-primary/10">Default</Badge>
-
-// Destructive badge
-<Badge className="text-destructive bg-destructive/10">Error</Badge>
+// Theme provider handles token switching
+<ThemeProvider defaultTheme="dark">
+  <App />
+</ThemeProvider>
 ```
 
-## Color Reference Cards
+Tokens are defined in the theme stylesheet and applied globally. No conditional logic needed—use the token name consistently.
 
-### Approved Colors
-```
-text-primary       → Primary text, foreground content
-text-destructive   → Destructive actions, errors, warnings
-```
+## Overriding Tokens
 
-### Forbidden Colors
-```
-text-muted-foreground    ❌ Not part of LSD
-bg-muted                 ❌ Not part of LSD
-ring-offset-background   ❌ Not part of LSD
-accent                   ❌ Not part of LSD
-accent-foreground        ❌ Not part of LSD
-```
-
-### Theme Behavior
-```
-Light Mode:
-  text-primary      → Dark gray
-  text-destructive  → Red
+Override specific tokens in your component or global CSS:
 
-Dark Mode (.dark class):
-  text-primary      → Light gray
-  text-destructive  → Light red
+```css
+/* Component override */
+.custom-button {
+  --lsd-primary: #6366f1;
+}
 
-Accent Themes (data-theme):
-  monochrome, teal, nord, terracotta, catppuccin
+/* Global override */
+:root[data-theme="custom"] {
+  --lsd-primary: #6366f1;
+  --lsd-primary-foreground: #ffffff;
+}
 ```
 
-## Important Notes
+## Critical Rules
 
-- **ALWAYS** use `text-primary` for normal content
-- **ALWAYS** use `text-destructive` for destructive actions and errors
-- **NEVER** use `text-muted-foreground` or `bg-muted` - these don't exist in LSD
-- Colors automatically adapt to light/dark mode
-- Component variants (`filled`, `outlined`, `ghost`, `link`) handle colors internally
-- Icons inherit text color unless explicitly set
-- Hover and focus states should use the same color system
-- Maintain visual hierarchy with consistent color usage
+1. **NEVER use raw hex colors** in production code
+2. **ALWAYS use token variables** for color values
+3. **Token naming**: Prefixed with `--lsd-` for consistency
+4. **Theme switching**: Automatic via data attributes
+5. **Accessibility**: Semantic tokens maintain WCAG contrast ratios
diff --git a/skills/nipsys-lsd/references/component-catalog.md b/skills/nipsys-lsd/references/component-catalog.md
new file mode 100644
index 00000000..3dea2e08
--- /dev/null
+++ b/skills/nipsys-lsd/references/component-catalog.md
@@ -0,0 +1,69 @@
+# LSD Component Catalog
+
+Quick reference for all 41 components in the @nipsys/lsd library.
+
+## External Dependencies
+- **cmdk** - Command component
+- **react-day-picker** - Calendar component
+- **sonner** - Sonner toast component
+
+---
+
+## Forms & Input (10)
+- **Input** - Text input with label, supporting text, error states. Multiple border variants.
+- **Textarea** - Multi-line text input with label and validation states.
+- **Checkbox** - Checkable input with labeled state.
+- **Switch** - Toggle switch for binary states. `[CVA]`
+- **RadioGroup** - Single-select radio button group. `[Composite]`
+- **Select** - Dropdown select with custom styling. `[Composite]`
+- **Autocomplete** - Select with search/filter functionality. `[Composite]`
+- **InputGroup** - Input with prepend/append elements. `[CVA] [Composite]`
+- **Slider** - Range selector with value indicator.
+- **Field** - Complex form field with label, description, error, helper. `[Composite]`
+
+## Buttons & Actions (4)
+- **Button** - Interactive button with variants, loading, sizes. `[CVA]`
+- **ButtonGroup** - Grouped buttons with separators and text. `[CVA] [Composite]`
+- **Toggle** - Pressable toggle button. `[CVA]`
+- **ToggleGroup** - Single/multi-select toggle group. `[CVA] [Composite]`
+
+## Navigation (5)
+- **Tabs** - Tabbed interface with panels. `[CVA]`
+- **Accordion** - Collapsible panels (single/multiple modes).
+- **NavigationMenu** - Multi-level navigation with dropdowns. `[CVA]`
+- **Menubar** - Horizontal menu bar with nested items. `[CVA]`
+- **Sidebar** - Collapsible sidebar with groups and menus. `[CVA] [Composite]`
+
+## Overlays & Modals (6)
+- **Dialog** - Modal dialog with header, footer, content. `[Composite]`
+- **AlertDialog** - Confirmation dialog for critical actions. `[Composite]`
+- **Sheet** - Slide-over panel from edges. `[Composite]`
+- **Popover** - Floating content positioned relative to trigger.
+- **Tooltip** - Hover information popup.
+- **DropdownMenu** - Context menu with actions. `[Composite]`
+
+## Data Display (7)
+- **Table** - Structured data table with header/body/caption. `[Composite]`
+- **Card** - Content container with header/footer. `[Composite]`
+- **Badge** - Status tags with variants, dismissible, dots. `[CVA]`
+- **Avatar** - User profile image with fallback. `[Composite]`
+- **Progress** - Progress bar with determinate/indeterminate states.
+- **Alert** - Contextual messages with semantic variants. `[CVA]`
+- **Command** - Command palette with search, groups, keyboard nav. `[Composite]`
+
+## Layout & Structure (5)
+- **Separator** - Visual divider line.
+- **ScrollArea** - Custom-styled scrollable area.
+- **Typography** - Text styles (headings, body, code, captions). `[CVA]`
+- **Calendar** - Date picker and calendar display. `[Composite]`
+- **Label** - Form field label with sizing. `[CVA]`
+
+## Feedback & Utilities (2)
+- **Sonner** - Toast notification system.
+- **Form** - Form validation context with react-hook-form.
+
+---
+
+**Legend:**
+- `[CVA]` - Uses class-variance-authority for variant styling
+- `[Composite]` - Requires sub-components for full functionality
\ No newline at end of file
diff --git a/skills/nipsys-lsd/references/component-list.md b/skills/nipsys-lsd/references/component-list.md
deleted file mode 100644
index 9ea39fd8..00000000
--- a/skills/nipsys-lsd/references/component-list.md
+++ /dev/null
@@ -1,98 +0,0 @@
-# LSD Component List
-
-Complete list of all 39 components in @nipsys/lsd organized by category.
-
-## Forms (15 components)
-- **Input** - Single-line text input
-- **Textarea** - Multi-line text input
-- **Checkbox** - Boolean toggle checkbox
-- **Switch** - On/off toggle switch
-- **RadioGroup** - Radio button group for single selection
-- **TextField** - Enhanced input with label integration
-- **Form** - Form container with validation (react-hook-form)
-- **Field** - Form field with label integration
-- **Select** - Dropdown selector
-- **Autocomplete** - Searchable autocomplete with cmdk
-- **InputGroup** - Input with prefix/suffix add-ons and icons
-- **Accordion** - Collapsible content panels
-- **Label** - Form label for inputs
-- **Button** - Primary action button
-- **ToggleGroup** - Group of toggle buttons for multi-selection
-
-## Navigation (6 components)
-- **Menubar** - Application menubar
-- **NavigationMenu** - Hierarchical navigation menu
-- **Tabs** - Tabbed content panels
-- **ButtonGroup** - Group of related buttons
-- **Toggle** - Toggle button
-- **Sidebar** - Application sidebar navigation
-
-## Overlays (5 components)
-- **Dialog** - Modal dialog box
-- **AlertDialog** - Alert dialog for confirmations
-- **Popover** - Floating content popover
-- **DropdownMenu** - Dropdown menu with actions
-- **Sheet** - Slide-over sheet panel
-
-## Feedback (3 components)
-- **Alert** - Alert message with icon
-- **Progress** - Progress indicator bar
-- **Sonner** - Toast notification system
-
-## Layout (3 components)
-- **Card** - Card container with header/content
-- **Separator** - Horizontal/vertical separator
-- **ScrollArea** - Custom scrollable area
-
-## Data Display (6 components)
-- **Table** - Data table with sorting/filtering
-- **Badge** - Badge indicator
-- **Avatar** - User avatar with fallback
-- **Calendar** - Date picker calendar
-- **Slider** - Range slider control
-- **Command** - Command palette with search
-
-## Typography (1 component)
-- **Typography** - Typography component for headings, body text, labels, and UI copy
-
-## Dependency Summary
-
-| Component | External Dependency |
-|-----------|-------------------|
-| Accordion | @radix-ui/react-accordion |
-| AlertDialog | @radix-ui/react-alert-dialog |
-| Autocomplete | cmdk |
-| Calendar | react-day-picker |
-| Checkbox | @radix-ui/react-checkbox |
-| Command | cmdk |
-| Dialog | @radix-ui/react-dialog |
-| DropdownMenu | @radix-ui/react-dropdown-menu |
-| Form | react-hook-form |
-| Icons | @phosphor-icons/react |
-| Label | @radix-ui/react-label |
-| Menubar | @radix-ui/react-menubar |
-| NavigationMenu | @radix-ui/react-navigation-menu |
-| Popover | @radix-ui/react-popover |
-| Progress | @radix-ui/react-progress |
-| RadioGroup | @radix-ui/react-radio-group |
-| ScrollArea | @radix-ui/react-scroll-area |
-| Select | @radix-ui/react-select |
-| Separator | @radix-ui/react-separator |
-| Sheet | @radix-ui/react-dialog (built) |
-| Slider | @radix-ui/react-slider |
-| Sonner | sonner |
-| Switch | @radix-ui/react-switch |
-| Tabs | @radix-ui/react-tabs |
-| Toggle | @radix-ui/react-toggle |
-| ToggleGroup | @radix-ui/react-toggle-group |
-| Tooltip | @radix-ui/react-tooltip |
-
-## Usage Notes
-
-- All components support `className` prop for custom styling
-- Components using CVA support `variant` and `size` props
-- Composite components require importing sub-components
-- All components are fully accessible with ARIA attributes
-- Forward refs are supported on all components
-- Dark mode support via `.dark` class on HTML element
-- Accent themes via `data-theme` attribute on HTML element
diff --git a/skills/nipsys-lsd/references/component-patterns.md b/skills/nipsys-lsd/references/component-patterns.md
new file mode 100644
index 00000000..2bb0414d
--- /dev/null
+++ b/skills/nipsys-lsd/references/component-patterns.md
@@ -0,0 +1,371 @@
+# LSD Component Usage Patterns
+
+## Forms & Input Component Patterns
+
+### Input
+```tsx
+import { Input } from '@nipsys/lsd'
+
+<Input label="Email" placeholder="name@example.com" />
+<Input variant="outlined" size="lg" label="Username" error supportingText="Error message" />
+// variants: underlined (default), outlined, ghost | sizes: sm, md (default), lg
+```
+
+### Textarea
+```tsx
+import { Textarea } from '@nipsys/lsd'
+
+<Textarea placeholder="Enter your message" rows={4} />
+<Textarea aria-invalid defaultValue="Invalid content" />
+```
+
+### Checkbox
+```tsx
+import { Checkbox } from '@nipsys/lsd'
+
+<Checkbox checked={isChecked} onCheckedChange={setChecked}>Accept terms</Checkbox>
+<Checkbox defaultChecked indeterminate />
+```
+
+### Switch
+```tsx
+import { Switch } from '@nipsys/lsd'
+
+<Switch checked={enabled} onCheckedChange={setEnabled} />
+<Switch size="sm" /> <Switch size="md" /> <Switch size="lg" />
+```
+
+### Select
+```tsx
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@nipsys/lsd'
+
+<Select>
+  <SelectTrigger><SelectValue placeholder="Select option" /></SelectTrigger>
+  <SelectContent>
+    <SelectItem value="option1">Option 1</SelectItem>
+    <SelectItem value="option2">Option 2</SelectItem>
+  </SelectContent>
+</Select>
+```
+
+### Autocomplete
+```tsx
+import { Autocomplete } from '@nipsys/lsd'
+
+<Autocomplete items={['Apple', 'Banana']} placeholder="Search..." renderItem={(item) => item} />
+```
+
+### InputGroup
+```tsx
+import { InputGroup, InputGroupInput, InputGroupAddon } from '@nipsys/lsd'
+
+<InputGroup>
+  <InputGroupAddon>$</InputGroupAddon>
+  <InputGroupInput placeholder="Amount" />
+  <InputGroupAddon>USD</InputGroupAddon>
+</InputGroup>
+```
+
+### Slider
+```tsx
+import { Slider } from '@nipsys/lsd'
+
+<Slider defaultValue={[50]} max={100} step={1} />
+```
+
+### Field
+```tsx
+import { Field, FieldLabel, FieldContent, FieldError, FieldDescription } from '@nipsys/lsd'
+
+<Field>
+  <FieldLabel>Full Name</FieldLabel>
+  <FieldContent />
+  <FieldError>Name is required</FieldError>
+  <FieldDescription>Enter your legal name</FieldDescription>
+</Field>
+```
+
+## Buttons & Actions Patterns
+
+### Button
+```tsx
+import { Button } from '@nipsys/lsd'
+
+// Variants
+<Button variant="filled">Default</Button>
+<Button variant="outlined">Outlined</Button>
+<Button variant="filled-rounded">Rounded</Button>
+<Button variant="destructive">Destructive</Button>
+<Button variant="success">Success</Button>
+<Button variant="link">Link</Button>
+<Button variant="ghost">Ghost</Button>
+
+// Sizes
+<Button size="sm">Small</Button>
+<Button size="md">Medium</Button>
+<Button size="lg">Large</Button>
+<Button size="square-md"><Icon /></Button>
+
+// Features
+<Button loading onClick={handleSubmit}>Save</Button>
+<Button fullWidth>Full Width</Button>
+<Button asChild><Link href="/profile">View Profile</Link></Button>
+```
+
+### ButtonGroup
+```tsx
+import { ButtonGroup, ButtonGroupButton } from '@nipsys/lsd'
+
+<ButtonGroup>
+  <ButtonGroupButton variant="filled">Previous</ButtonGroupButton>
+  <ButtonGroupButton variant="outlined">Next</ButtonGroupButton>
+</ButtonGroup>
+```
+
+### Toggle/ToggleGroup
+```tsx
+import { Toggle, ToggleGroup, ToggleGroupItem } from '@nipsys/lsd'
+
+<Toggle pressed={pressed} onPressedChange={setPressed}>Bold</Toggle>
+
+<ToggleGroup type="single" value={value} onValueChange={setValue}>
+  <ToggleGroupItem value="bold">B</ToggleGroupItem>
+  <ToggleGroupItem value="italic">I</ToggleGroupItem>
+</ToggleGroup>
+
+<ToggleGroup type="multiple">
+  <ToggleGroupItem value="left">Left</ToggleGroupItem>
+  <ToggleGroupItem value="center">Center</ToggleGroupItem>
+</ToggleGroup>
+```
+
+## Navigation Patterns
+
+### Tabs
+```tsx
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@nipsys/lsd'
+
+<Tabs defaultValue="tab1">
+  <TabsList>
+    <TabsTrigger value="tab1">Profile</TabsTrigger>
+    <TabsTrigger value="tab2">Settings</TabsTrigger>
+  </TabsList>
+  <TabsContent value="tab1">Profile content</TabsContent>
+  <TabsContent value="tab2">Settings content</TabsContent>
+</Tabs>
+
+<Tabs size="lg" fullWidth bordered />
+```
+
+### Accordion
+```tsx
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@nipsys/lsd'
+
+<Accordion type="single" collapsible>
+  <AccordionItem value="item-1">
+    <AccordionTrigger>Is it accessible?</AccordionTrigger>
+    <AccordionContent>Yes, it's fully accessible.</AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+
+### NavigationMenu/Menubar
+```tsx
+import { NavigationMenu, NavigationMenuTrigger, NavigationMenuContent } from '@nipsys/lsd'
+import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem } from '@nipsys/lsd'
+
+<NavigationMenu>
+  <NavigationMenuList>
+    <NavigationMenuItem>
+      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+      <NavigationMenuContent><NavigationMenuLink href="/p1">Product 1</NavigationMenuLink></NavigationMenuContent>
+    </NavigationMenuItem>
+  </NavigationMenuList>
+</NavigationMenu>
+
+<Menubar>
+  <MenubarMenu>
+    <MenubarTrigger>File</MenubarTrigger>
+    <MenubarContent><MenubarItem>New</MenubarItem></MenubarContent>
+  </MenubarMenu>
+</Menubar>
+```
+
+### Sidebar
+```tsx
+import { Sidebar, SidebarContent, SidebarGroup, SidebarMenu, SidebarMenuItem } from '@nipsys/lsd'
+
+<Sidebar>
+  <SidebarContent>
+    <SidebarGroup>
+      <SidebarMenu>
+        <SidebarMenuItem><SidebarMenuButton>Dashboard</SidebarMenuButton></SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  </SidebarContent>
+</Sidebar>
+```
+
+## Overlays & Modals Patterns
+
+### Dialog
+```tsx
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter, DialogClose } from '@nipsys/lsd'
+
+<Dialog>
+  <DialogTrigger asChild><Button>Open Dialog</Button></DialogTrigger>
+  <DialogContent>
+    <DialogHeader><DialogTitle>Are you sure?</DialogTitle></DialogHeader>
+    <DialogFooter>
+      <DialogClose asChild><Button variant="outlined">Cancel</Button></DialogClose>
+      <Button variant="destructive">Confirm</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+```
+
+### AlertDialog
+```tsx
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@nipsys/lsd'
+
+<AlertDialog>
+  <AlertDialogTrigger asChild><Button>Delete</Button></AlertDialogTrigger>
+  <AlertDialogContent>
+    <AlertDialogHeader><AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle></AlertDialogHeader>
+    <AlertDialogFooter>
+      <AlertDialogCancel>Cancel</AlertDialogCancel>
+      <AlertDialogAction>Continue</AlertDialogAction>
+    </AlertDialogFooter>
+  </AlertDialogContent>
+</AlertDialog>
+```
+
+### Sheet/Popover/Tooltip
+```tsx
+import { Sheet, SheetContent, SheetTrigger } from '@nipsys/lsd'
+import { Popover, PopoverContent, PopoverTrigger } from '@nipsys/lsd'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@nipsys/lsd'
+
+<Sheet><SheetTrigger asChild><Button>Open</Button></SheetTrigger><SheetContent><div>Content</div></SheetContent></Sheet>
+<Popover><PopoverTrigger asChild><Button variant="ghost">Info</Button></PopoverTrigger><PopoverContent><div>Popover</div></PopoverContent></Popover>
+<Tooltip><TooltipTrigger>Hover</TooltipTrigger><TooltipContent><p>Tooltip</p></TooltipContent></Tooltip>
+```
+
+### DropdownMenu
+```tsx
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuShortcut } from '@nipsys/lsd'
+
+<DropdownMenu>
+  <DropdownMenuTrigger asChild><Button variant="ghost">Menu</Button></DropdownMenuTrigger>
+  <DropdownMenuContent>
+    <DropdownMenuItem>Profile<DropdownMenuShortcut>⌘P</DropdownMenuShortcut></DropdownMenuItem>
+    <DropdownMenuSeparator />
+    <DropdownMenuCheckboxItem checked={darkMode} onCheckedChange={setDarkMode}>Dark mode</DropdownMenuCheckboxItem>
+    <DropdownMenuRadioGroup value={viewMode} onValueChange={setViewMode}>
+      <DropdownMenuRadioItem value="list">List view</DropdownMenuRadioItem>
+      <DropdownMenuRadioItem value="grid">Grid view</DropdownMenuRadioItem>
+    </DropdownMenuRadioGroup>
+  </DropdownMenuContent>
+</DropdownMenu>
+```
+
+## Data Display Patterns
+
+### Table
+```tsx
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@nipsys/lsd'
+
+<Table>
+  <TableHeader><TableRow><TableHead>Name</TableHead><TableHead>Email</TableHead></TableRow></TableHeader>
+  <TableBody><TableRow><TableCell>John Doe</TableCell><TableCell>john@example.com</TableCell></TableRow></TableBody>
+</Table>
+```
+
+### Badge
+```tsx
+import { Badge } from '@nipsys/lsd'
+
+<Badge>Default</Badge>
+<Badge variant="destructive">Error</Badge>
+<Badge variant="success">Success</Badge>
+<Badge size="sm">Small</Badge>
+<Badge icon={<Icon />} iconPosition="left">With Icon</Badge>
+<Badge onDismiss={() => {}}>Removable</Badge>
+<Badge dot />
+<Badge variant="outline" onClick={() => {}}>Clickable</Badge>
+// variants: default, outline, destructive, success, dot | sizes: sm, md, lg | iconPosition: left, right
+```
+
+### Avatar/Progress/Alert/Command
+```tsx
+import { Avatar, AvatarFallback, AvatarImage } from '@nipsys/lsd'
+import { Progress } from '@nipsys/lsd'
+import { Alert, AlertDescription, AlertTitle } from '@nipsys/lsd'
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut } from '@nipsys/lsd'
+
+<Avatar><AvatarImage src="/avatar.png" /><AvatarFallback>JD</AvatarFallback></Avatar>
+<Progress value={75} max={100} />
+<Alert variant="destructive"><AlertTitle>Error</AlertTitle><AlertDescription>Something went wrong.</AlertDescription></Alert>
+<Command><CommandInput placeholder="Search..." /><CommandList><CommandEmpty>No results</CommandEmpty><CommandGroup heading="Suggestions"><CommandItem>Calendar<CommandShortcut>⌘K</CommandShortcut></CommandItem></CommandGroup></CommandList></Command>
+```
+
+## Layout & Structure Patterns
+
+### Separator/ScrollArea/Typography/Calendar/Label
+```tsx
+import { Separator } from '@nipsys/lsd'
+import { ScrollArea } from '@nipsys/lsd'
+import { Typography } from '@nipsys/lsd'
+import { Calendar } from '@nipsys/lsd'
+import { Label } from '@nipsys/lsd'
+
+<Separator orientation="horizontal" />
+<ScrollArea className="h-96"><div>Scrollable content</div></ScrollArea>
+<Typography variant="h1">Heading 1</Typography>
+<Typography variant="body">Body text</Typography>
+<Calendar mode="single" selected={date} onSelect={setDate} />
+<Label htmlFor="email">Email</Label>
+```
+
+## Feedback Patterns
+
+### Sonner (Toasts)/Form Validation
+```tsx
+import { toast } from '@nipsys/lsd/ui/toast'
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@nipsys/lsd/ui/form'
+
+toast.success("Changes saved successfully")
+toast.error("Failed to save changes")
+
+<Form {...form}>
+  <FormField control={form.control} name="username" render={({ field }) => (
+    <FormItem>
+      <FormLabel>Username</FormLabel>
+      <FormControl><Input placeholder="John" {...field} /></FormControl>
+      <FormMessage />
+    </FormItem>
+  )} />
+</Form>
+```
+
+## Key Component Props Reference
+
+**Button**: variant (filled, outlined, filled-rounded, outlined-rounded, link, ghost, ghost-rounded, destructive, destructive-rounded, success, success-rounded), size (sm, md, lg, square-sm, square-md, square-lg), loading, fullWidth, asChild
+
+**Input**: variant (underlined, outlined, ghost), size (sm, md, lg), label, supportingText, error
+
+**Badge**: variant (default, outline, destructive, success, dot), size (sm, md, lg), asChild, onDismiss, onClick, icon, iconPosition, dot
+
+**Switch**: size (sm, md, lg)
+
+**Tabs**: size (sm, md, lg), fullWidth, bordered
+
+## Composition Notes
+
+**Dialog**: Dialog → DialogTrigger → DialogContent → DialogHeader → DialogTitle → DialogDescription → DialogFooter → DialogClose
+
+**Form Fields**: Form → FormField → FormItem → FormLabel → FormControl → FormMessage
+
+**Navigation**: TabsList → TabsTrigger, TabsContent | AccordionItem → AccordionTrigger → AccordionContent
+
+**Menus**: DropdownMenuTrigger → DropdownMenuContent → DropdownMenuItem | DropdownMenuCheckboxItem | DropdownMenuRadioItem
diff --git a/skills/nipsys-lsd/references/composition.md b/skills/nipsys-lsd/references/composition.md
index 7c73a573..6362a7cf 100644
--- a/skills/nipsys-lsd/references/composition.md
+++ b/skills/nipsys-lsd/references/composition.md
@@ -1,531 +1,187 @@
-# LSD Component Composition
+# Component Composition Patterns
 
-Complete guide to component composition patterns and sub-component usage in @nipsys/lsd.
+## Pattern Overview
 
-## Concept
+LSD uses compound component composition where parent components manage state and behavior, while sub-components render UI and interact with the parent context. This enables flexible layouts without prop drilling.
 
-Many LSD components are composable, meaning they consist of a root component and sub-components that work together. Always import and use all required sub-components for proper functionality and accessibility.
+## Major Composition Trees
 
-## Composite Components
-
-### Dialog
-
-**Structure:** DialogRoot, DialogTrigger, DialogContent, DialogTitle, DialogClose
-
-```tsx
-import { Dialog, DialogTrigger, DialogContent, DialogTitle, DialogClose } from '@nipsys/lsd';
-
-function Example() {
-  return (
-    <Dialog>
-      <DialogTrigger>
-        <Button>Open Dialog</Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogTitle>
-          <Typography variant="h4">Dialog Title</Typography>
-        </DialogTitle>
-        <DialogDescription>
-          <Typography variant="body2">Dialog description goes here.</Typography>
-        </DialogDescription>
-        <div className="mt-(--lsd-spacing-base)">
-          <Button>Continue</Button>
-          <DialogClose>
-            <Button variant="outlined">Cancel</Button>
-          </DialogClose>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
-```
-
-**Required sub-components:**
-- ❌ **You MUST import:** Dialog, DialogTrigger, DialogContent, DialogTitle, DialogClose
-
-### AlertDialog
-
-**Structure:** AlertDialogRoot, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel
-
-```tsx
-import {
-  AlertDialog,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-} from '@nipsys/lsd';
-
-function Example() {
-  return (
-    <AlertDialog>
-      <AlertDialogTrigger>
-        <Button variant="destructive">Delete</Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogTitle>
-          <Typography variant="h4">Are you sure?</Typography>
-        </AlertDialogTitle>
-        <AlertDialogDescription>
-          <Typography variant="body2">
-            This action cannot be undone.
-          </Typography>
-        </AlertDialogDescription>
-        <div className="flex gap-(--lsd-spacing-base) mt-(--lsd-spacing-base)">
-          <AlertDialogCancel>
-            <Button variant="outlined">Cancel</Button>
-          </AlertDialogCancel>
-          <AlertDialogAction>
-            <Button variant="destructive">Delete</Button>
-          </AlertDialogAction>
-        </div>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
-}
-```
-
-**Required sub-components:**
-- ❌ **You MUST import:** AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel
-
-### Sheet
-
-**Structure:** SheetRoot, SheetTrigger, SheetContent, SheetTitle, SheetClose, SheetHeader
-
-```tsx
-import {
-  Sheet,
-  SheetTrigger,
-  SheetContent,
-  SheetTitle,
-  SheetClose,
-  SheetHeader,
-} from '@nipsys/lsd';
-
-function Example() {
-  return (
-    <Sheet>
-      <SheetTrigger>
-        <Button>Open Sheet</Button>
-      </SheetTrigger>
-      <SheetContent>
-        <SheetHeader>
-          <SheetTitle>
-            <Typography variant="h4">Sheet Title</Typography>
-          </SheetTitle>
-        </SheetHeader>
-        <SheetDescription>
-          <Typography variant="body2">Sheet content goes here.</Typography>
-        </SheetDescription>
-        <SheetClose>
-          <Button variant="outlined">Close</Button>
-        </SheetClose>
-      </SheetContent>
-    </Sheet>
-  );
-}
+### Dialog (11 sub-components)
 ```
-
-**Required sub-components:**
-- ❌ **You MUST import:** Sheet, SheetTrigger, SheetContent, SheetTitle, SheetClose, SheetHeader
-
-### DropdownMenu
-
-**Structure:** DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator
-
-```tsx
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-} from '@nipsys/lsd';
-
-function Example() {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger>
-        <Button>Menu</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuLabel>
-          <Typography variant="label1">Actions</Typography>
-        </DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem>
-          <Typography variant="body1">Edit</Typography>
-        </DropdownMenuItem>
-        <DropdownMenuItem>
-          <Typography variant="body1">Delete</Typography>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-```
-
-**Required sub-components:**
-- ❌ **You MUST import:** DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem
-
-### Popover
-
-**Structure:** PopoverRoot, PopoverTrigger, PopoverContent
-
-```tsx
-import { Popover, PopoverTrigger, PopoverContent } from '@nipsys/lsd';
-
-function Example() {
-  return (
-    <Popover>
-      <PopoverTrigger>
-        <Button>Trigger</Button>
-      </PopoverTrigger>
-      <PopoverContent>
-        <Typography variant="body2">Popover content</Typography>
-      </PopoverContent>
-    </Popover>
-  );
-}
+Dialog
+├── DialogTrigger (opens dialog)
+├── DialogPortal (portal container)
+├── DialogOverlay (backdrop)
+├── DialogContent (main container)
+│   ├── DialogHeader
+│   │   ├── DialogTitle
+│   │   └── DialogDescription
+│   ├── DialogFooter
+│   └── DialogClose
 ```
 
-**Required sub-components:**
-- ❌ **You MUST import:** Popover, PopoverTrigger, PopoverContent
-
-### Tabs
-
-**Structure:** TabsRoot, TabsList, TabsTrigger, TabsContent
-
-```tsx
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '@nipsys/lsd';
+### AlertDialog (12 sub-components)
+Same hierarchy as Dialog, prefixed with AlertDialog:
+- AlertDialog, AlertDialogTrigger, AlertDialogPortal, AlertDialogOverlay
+- AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription
+- AlertDialogFooter, AlertDialogAction, AlertDialogCancel
 
-function Example() {
-  const [value, setValue] = React.useState('tab1');
+### Sheet (11 sub-components)
+Same hierarchy as Dialog, prefixed with Sheet:
+- Sheet, SheetTrigger, SheetPortal, SheetOverlay, SheetContent
+- SheetHeader, SheetTitle, SheetDescription, SheetFooter, SheetClose
 
-  return (
-    <Tabs value={value} onValueChange={setValue}>
-      <TabsList>
-        <TabsTrigger value="tab1">
-          <Typography variant="body1">Tab 1</Typography>
-        </TabsTrigger>
-        <TabsTrigger value="tab2">
-          <Typography variant="body1">Tab 2</Typography>
-        </TabsTrigger>
-      </TabsList>
-      <TabsContent value="tab1">
-        <Typography variant="body1">Content 1</Typography>
-      </TabsContent>
-      <TabsContent value="tab2">
-        <Typography variant="body1">Content 2</Typography>
-      </TabsContent>
-    </Tabs>
-  );
-}
+### DropdownMenu (16 sub-components)
 ```
-
-**Required sub-components:**
-- ❌ **You MUST import:** Tabs, TabsList, TabsTrigger, TabsContent
-
-### InputGroup
-
-**Structure:** InputGroupRoot, InputGroupAddOn, InputGroupAddOnIcon
-
-```tsx
-import { InputGroup, InputGroupAddOn, InputGroupAddOnIcon } from '@nipsys/lsd';
-
-function Example() {
-  return (
-    <InputGroup>
-      <InputGroupAddOn>
-        <InputGroupAddOnIcon>
-          <SearchIcon weight="duotone" />
-        </InputGroupAddOnIcon>
-      </InputGroupAddOn>
-      <Input placeholder="Search..." />
-      <InputGroupAddOn>USD</InputGroupAddOn>
-    </InputGroup>
-  );
-}
+DropdownMenu
+├── DropdownMenuTrigger
+├── DropdownMenuPortal
+└── DropdownMenuContent
+    ├── DropdownMenuLabel
+    ├── DropdownMenuGroup
+    │   └── DropdownMenuItem / DropdownMenuCheckboxItem / DropdownMenuRadioItem
+    ├── DropdownMenuRadioGroup
+    │   └── DropdownMenuRadioItem
+    ├── DropdownMenuSeparator
+    ├── DropdownMenuShortcut
+    └── DropdownMenuSub
+        ├── DropdownMenuSubTrigger
+        └── DropdownMenuSubContent
 ```
 
-**Required sub-components:**
-- ❌ **You MUST import:** InputGroup, InputGroupAddOn, InputGroupAddOnIcon
-
-### Select
-
-**Structure:** SelectRoot, SelectTrigger, SelectValue, SelectContent, SelectItem
-
-```tsx
-import {
-  Select,
-  SelectTrigger,
-  SelectValue,
-  SelectContent,
-  SelectItem,
-} from '@nipsys/lsd';
-
-function Example() {
-  return (
-    <Select defaultValue="option1">
-      <SelectTrigger>
-        <SelectValue placeholder="Select an option" />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectItem value="option1">
-          <Typography variant="body1">Option 1</Typography>
-        </SelectItem>
-        <SelectItem value="option2">
-          <Typography variant="body1">Option 2</Typography>
-        </SelectItem>
-      </SelectContent>
-    </Select>
-  );
-}
+### Sidebar (22 sub-components)
 ```
-
-**Required sub-components:**
-- ❌ **You MUST import:** Select, SelectTrigger, SelectValue, SelectContent, SelectItem
-
-### Command
-
-**Structure:** CommandRoot, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator
-
-```tsx
-import {
-  Command,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandSeparator,
-} from '@nipsys/lsd';
-
-function Example() {
-  return (
-    <Command>
-      <CommandInput placeholder="Type a command or search..." />
-      <CommandList>
-        <CommandEmpty>No results found.</CommandEmpty>
-        <CommandGroup heading="Suggestions">
-          <CommandItem>
-            <Typography variant="body1">Calendar</Typography>
-          </CommandItem>
-          <CommandItem>
-            <Typography variant="body1">Settings</Typography>
-          </CommandItem>
-        </CommandGroup>
-      </CommandList>
-    </Command>
-  );
-}
+Sidebar (main container)
+├── SidebarProvider (context)
+├── SidebarContent (scrollable area)
+│   ├── SidebarHeader
+│   ├── SidebarGroup
+│   │   ├── SidebarGroupLabel
+│   │   ├── SidebarGroupAction
+│   │   └── SidebarGroupContent
+│   │       └── SidebarMenu
+│   │           ├── SidebarMenuItem
+│   │           │   ├── SidebarMenuButton
+│   │           │   ├── SidebarMenuAction
+│   │           │   ├── SidebarMenuBadge
+│   │           │   ├── SidebarMenuSub
+│   │           │   │   ├── SidebarMenuSubItem
+│   │           │   │   └── SidebarMenuSubButton
+│   │           └── SidebarMenuSkeleton
+│   ├── SidebarSeparator
+│   ├── SidebarInput
+│   └── SidebarFooter
+├── SidebarInset (main content area)
+├── SidebarTrigger (toggle button)
+└── SidebarRail (collapsed toggle)
 ```
 
-**Required sub-components:**
-- ❌ **You MUST import:** Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem
-
-### NavigationMenu
+### Field (10 sub-components)
+Field, FieldTitle, FieldLabel, FieldLegend, FieldContent, FieldSet, FieldGroup, FieldSeparator, FieldDescription, FieldError
 
-**Structure:** NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink
+### Select (10 sub-components)
+Select, SelectTrigger, SelectValue, SelectContent, SelectGroup, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton
 
-```tsx
-import {
-  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuTrigger,
-  NavigationMenuContent,
-  NavigationMenuLink,
-} from '@nipsys/lsd';
+### Card (7 sub-components)
+Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction
 
-function Example() {
-  return (
-    <NavigationMenu>
-      <NavigationMenuList>
-        <NavigationMenuItem>
-          <NavigationMenuTrigger>
-            <Typography variant="body1">Menu</Typography>
-          </NavigationMenuTrigger>
-          <NavigationMenuContent>
-            <NavigationMenuLink href="/item1">
-              <Typography variant="body1">Item 1</Typography>
-            </NavigationMenuLink>
-            <NavigationMenuLink href="/item2">
-              <Typography variant="body1">Item 2</Typography>
-            </NavigationMenuLink>
-          </NavigationMenuContent>
-        </NavigationMenuItem>
-      </NavigationMenuList>
-    </NavigationMenu>
-  );
-}
-```
+### Avatar (6 sub-components)
+Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge
 
-**Required sub-components:**
-- ❌ **You MUST import:** NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger
+### Table (8 sub-components)
+Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption
 
-### Menubar
+### Command (9 sub-components)
+Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut
 
-**Structure:** MenubarRoot, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarSeparator
+### NavigationMenu (8 sub-components)
+NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuViewport, NavigationMenuIndicator
 
-```tsx
-import {
-  Menubar,
-  MenubarMenu,
-  MenubarTrigger,
-  MenubarContent,
-  MenubarItem,
-  MenubarSeparator,
-} from '@nipsys/lsd';
-
-function Example() {
-  return (
-    <Menubar>
-      <MenubarMenu>
-        <MenubarTrigger>
-          <Typography variant="body1">File</Typography>
-        </MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>
-            <Typography variant="body1">New</Typography>
-          </MenubarItem>
-          <MenubarItem>
-            <Typography variant="body1">Open</Typography>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>
-            <Typography variant="body1">Quit</Typography>
-          </MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-    </Menubar>
-  );
-}
-```
+### Menubar (16 sub-components)
+Menubar, MenubarMenu, MenubarTrigger, MenubarPortal, MenubarContent, MenubarGroup, MenubarLabel, MenubarItem, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarSub, MenubarSubTrigger, MenubarSubContent MenubarShortcut
 
-**Required sub-components:**
-- ❌ **You MUST import:** Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem
-
-### Form
-
-**Structure:** FormRoot, FormField, FormItem, FormLabel, FormControl, FormMessage
+## Example Implementations
 
+### Basic Dialog
 ```tsx
-import {
-  Form,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormMessage
-} from '@nipsys/lsd';
-
-function Example() {
-  const form = useForm();
-
-  return (
-    <Form {...form}>
-      <FormField
-        control={form.control}
-        name="email"
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>
-              <Typography variant="label1">Email</Typography>
-            </FormLabel>
-            <FormControl>
-              <Input {...field} />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-    </Form>
-  );
-}
+<Dialog>
+  <DialogTrigger>Open</DialogTrigger>
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>Title</DialogTitle>
+        <DialogDescription>Description text</DialogDescription>
+      </DialogHeader>
+      <DialogFooter>
+        <DialogClose>Cancel</DialogClose>
+      </DialogFooter>
+    </DialogContent>
+  </DialogPortal>
+</Dialog>
 ```
 
-**Required sub-components:**
-- ❌ **You MUST import:** Form, FormField, FormItem, FormLabel, FormControl, FormMessage
-
-### Sidebar
-
-**Structure:** SidebarRoot, SidebarHeader, SidebarLogo, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuItem, SidebarMenuButton
-
+### Sidebar with Navigation
 ```tsx
-import {
-  Sidebar,
-  SidebarHeader,
-  SidebarLogo,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupLabel,
-  SidebarMenu,
-  SidebarMenuItem,
-  SidebarMenuButton,
-} from '@nipsys/lsd';
-
-function Example() {
-  return (
-    <Sidebar>
-      <SidebarHeader>
-        <SidebarLogo>
-          <Typography variant="h4">Logo</Typography>
-        </SidebarLogo>
-      </SidebarHeader>
-      <SidebarContent>
-        <SidebarGroup>
-          <SidebarGroupLabel>
-            <Typography variant="label1">Menu</Typography>
-          </SidebarGroupLabel>
+<SidebarProvider>
+  <Sidebar>
+    <SidebarHeader>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton isActive>Home</SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarHeader>
+    <SidebarContent>
+      <SidebarGroup>
+        <SidebarGroupLabel>Projects</SidebarGroupLabel>
+        <SidebarGroupContent>
           <SidebarMenu>
             <SidebarMenuItem>
               <SidebarMenuButton>
-                <DashboardIcon weight="duotone" />
-                <Typography variant="body1">Dashboard</Typography>
+                <Icon /> Project A
+                <SidebarMenuBadge>3</SidebarMenuBadge>
               </SidebarMenuButton>
             </SidebarMenuItem>
           </SidebarMenu>
-        </SidebarGroup>
-      </SidebarContent>
-    </Sidebar>
-  );
-}
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </SidebarContent>
+  </Sidebar>
+  <SidebarInset>Main content</SidebarInset>
+</SidebarProvider>
 ```
 
-**Required sub-components:**
-- ❌ **You MUST import:** Sidebar, SidebarHeader, SidebarLogo, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuItem, SidebarMenuButton
-
-## Simple Components (No Composition)
-
-These components work standalone and don't require sub-components:
-
-- Button, ButtonGroup
-- Input, Textarea
-- Checkbox, Switch, RadioGroup, Toggle, ToggleGroup
-- Card, Alert, Badge, Avatar
-- Progress, Slider
-- Typography, Separator, ScrollArea
-- Sonner, Tooltip
+### Nested Dropdown Menu
+```tsx
+<DropdownMenu>
+  <DropdownMenuTrigger>Menu</DropdownMenuTrigger>
+  <DropdownMenuPortal>
+    <DropdownMenuContent>
+      <DropdownMenuItem>Item 1</DropdownMenuItem>
+      <DropdownMenuSub>
+        <DropdownMenuSubTrigger>Submenu</DropdownMenuSubTrigger>
+        <DropdownMenuSubContent>
+          <DropdownMenuItem>Sub item 1</DropdownMenuItem>
+        </DropdownMenuSubContent>
+      </DropdownMenuSub>
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</DropdownMenu>
+```
 
 ## Common Pitfalls
 
-| ❌ Wrong | ✅ Right |
-|----------|----------|
-| Using only root component | Import ALL required sub-components |
-| `import { Dialog } from '@nipsys/lsd'` | `import { Dialog, DialogTrigger, DialogContent, DialogTitle } from '@nipsys/lsd'` |
-| Forgetting DialogTitle | Always include DialogTitle for accessibility |
-| Mixing components incorrectly | Follow the defined pattern for each component |
-| Using Dialog for confirmations | Use AlertDialog for destructive actions |
+**Missing Sub-components:**
+- Forgetting DialogHeader/DialogFooter breaks semantic structure
+- Missing DropdownMenuPortal causes z-index issues
+- SidebarGroup without SidebarGroupContent won't render menu items
 
-## Important Notes
+**Incorrect Nesting:**
+- DropdownMenuSub must be within DropdownMenuContent, not at root level
+- NavigationMenuContent requires NavigationMenuTrigger as sibling
+- SidebarMenuSubItem requires SidebarMenuSub container
 
-- **ALWAYS** import all sub-components for composite components
-- Sub-components provide accessibility features (ARIA, keyboard navigation)
-- Missing sub-components may break functionality and accessibility
-- Composite components use React Context internally for state sharing
-- Each composite component has a specific structure - follow the pattern
-- Use the example patterns above as templates
+**Provider Context:**
+- Sidebar requires SidebarProvider at app root
+- Dialog/Sheet manage open state internally, don't need external context
diff --git a/skills/nipsys-lsd/references/cva-patterns.md b/skills/nipsys-lsd/references/cva-patterns.md
index a5e11c03..7e7da093 100644
--- a/skills/nipsys-lsd/references/cva-patterns.md
+++ b/skills/nipsys-lsd/references/cva-patterns.md
@@ -1,1086 +1,201 @@
-# LSD CVA Patterns
-
-Complete guide to CVA (class-variance-authority) variant patterns in @nipsys/lsd.
-
-## Concept
-
-17 LSD components use CVA for variant management. These components support `variant` and `size` props to change appearance and behavior without custom CSS.
-
-## CVA Components
-
-1. **Button** - Multiple variants (filled, outlined, rounded variants, destructive, success) with sizes
-2. **Badge** - Semantic variants (destructive, success, warning, info, filled, outlined, ghost) with sizes
-3. **Toggle** - Single toggle with size variants
-4. **ToggleGroup** - Groups toggles with orientation
-5. **Switch** - On/off toggle with size variants
-6. **Typography** - Text variant system (display, heading, subtitle, body, label) with colors
-7. **Tabs** - Tabbed content with size variants and full-width option
-8. **Accordion** - Expandable sections with size variants
-9. **Sidebar** - Menu button variants (default, outline) with sizes
-10. **ButtonGroup** - Group buttons with orientation (horizontal, vertical)
-11. **Menubar** - Menu bar with multiple variant types (trigger, item, label, etc.)
-12. **Label** - Form labels with variant and size
-13. **InputGroupAddon** - Input group addons with alignment
-14. **Alert** - Alerts with semantic variants (destructive, success, warning, info)
-
-## Button
-
-### Variants
-```tsx
-<Button variant="filled">Save</Button>
-<Button variant="outlined">Cancel</Button>
-<Button variant="filled-rounded">Save</Button>
-<Button variant="outlined-rounded">Cancel</Button>
-<Button variant="ghost">Close</Button>
-<Button variant="ghost-rounded">Close</Button>
-<Button variant="link">Learn more</Button>
-<Button variant="destructive">Delete</Button>
-<Button variant="destructive-rounded">Delete</Button>
-<Button variant="success">Confirm</Button>
-<Button variant="success-rounded">Confirm</Button>
-```
-
-### Sizes
-```tsx
-<Button size="sm">Small</Button>
-<Button size="md">Medium</Button>
-<Button size="lg">Large</Button>
-<Button size="square-sm">{<PlusIcon />}</Button>
-<Button size="square-md">{<PlusIcon />}</Button>
-<Button size="square-lg">{<PlusIcon />}</Button>
-```
-
-### Examples
-```tsx
-// Primary action with icon
-<Button variant="filled">
-  <PlusIcon className="mr-(--lsd-spacing-smaller)" />
-  Add Item
-</Button>
-
-// Secondary action
-<Button variant="outlined">Cancel</Button>
-
-// Outlined rounded
-<Button variant="outlined-rounded">
-  <ShareIcon weight="duotone" />
-  Share
-</Button>
-
-// Ghost action in toolbar
-<Button variant="ghost">
-  <SettingsIcon weight="duotone" />
-</Button>
-
-// Destructive action
-<Button variant="destructive">
-  <TrashIcon className="mr-(--lsd-spacing-smaller)" />
-  Delete
-</Button>
-
-// Destructive rounded
-<Button variant="destructive-rounded">
-  <TrashIcon />
-</Button>
-
-// Success action
-<Button variant="success">
-  <CheckIcon className="mr-(--lsd-spacing-smaller)" />
-  Confirm
-</Button>
-
-// Success rounded
-<Button variant="success-rounded">
-  <CheckIcon />
-</Button>
-
-// Small button
-<Button size="sm" variant="filled">Save</Button>
-
-// Large button
-<Button size="lg" variant="outlined">Continue</Button>
-
-// Square icon button
-<Button size="square-md" variant="filled">
-  <PlusIcon />
-</Button>
-```
-
-## Badge
-
-### Variants
-```tsx
-<Badge variant="filled">New</Badge>
-<Badge variant="outlined">Info</Badge>
-<Badge variant="destructive">Critical</Badge>
-<Badge variant="success">Complete</Badge>
-<Badge variant="warning">Pending</Badge>
-<Badge variant="info">Note</Badge>
-<Badge variant="dot">{}</Badge>
-```
-
-### Sizes
-```tsx
-<Badge size="sm">Small</Badge>
-<Badge size="md">Medium</Badge>
-<Badge size="lg">Large</Badge>
-```
-
-### Examples
-```tsx
-// Filled badge
-<Badge variant="filled">New</Badge>
-
-// Outlined badge with icon
-<Badge variant="outlined">
-  <CheckIcon className="mr-(--lsd-spacing-smallest)" />
-  Verified
-</Badge>
-
-// Destructive badge
-<Badge variant="destructive">Error</Badge>
-
-// Success badge
-<Badge variant="success">Complete</Badge>
-
-// Warning badge
-<Badge variant="warning">Pending</Badge>
-
-// Info badge
-<Badge variant="info">
-  <InfoIcon className="mr-(--lsd-spacing-smallest)" />
-  Info
-</Badge>
-
-// Dot badge
-<Badge variant="dot">
-  <CheckCircleIcon />
-</Badge>
-
-// Small badge
-<Badge size="sm" variant="filled">Pro</Badge>
-
-// Large badge
-<Badge size="lg" variant="success">Verified</Badge>
-```
-
-## Toggle
-
-### Sizes
-```tsx
-<Toggle size="sm">Small</Toggle>
-<Toggle size="md">Medium</Toggle>
-<Toggle size="lg">Large</Toggle>
-```
-
-### Examples
-```tsx
-// Default toggle
-<Toggle>
-  <Typography variant="body1">Toggle option</Typography>
-</Toggle>
-
-// With icons
-<Toggle value="bold">
-  <TextBIcon weight="duotone" />
-</Toggle>
-<Toggle value="italic">
-  <TextIIcon weight="duotone" />
-</Toggle>
-
-// Small toggle
-<Toggle size="sm">
-  <Typography variant="body2">Small toggle</Typography>
-</Toggle>
-
-// Large toggle
-<Toggle size="lg">
-  <Typography variant="body1">Large toggle</Typography>
-</Toggle>
-```
-
-## ToggleGroup
-
-### Orientation
-```tsx
-<ToggleGroup orientation="horizontal">...</ToggleGroup>
-<ToggleGroup orientation="vertical">...</ToggleGroup>
-```
-
-### Types
-```tsx
-// Single selection (radio-like)
-<ToggleGroup type="single" onValueChange={setValue}>
-  <Toggle value="option1">Option 1</Toggle>
-  <Toggle value="option2">Option 2</Toggle>
-</ToggleGroup>
-
-// Multiple selection (checkbox-like)
-<ToggleGroup type="multiple" onValueChange={setValues}>
-  <Toggle value="option1">Option 1</Toggle>
-  <Toggle value="option2">Option 2</Toggle>
-</ToggleGroup>
-```
-
-### Sizes
-```tsx
-<ToggleGroup size="sm">...</ToggleGroup>
-<ToggleGroup size="md">...</ToggleGroup>
-```
-
-### Examples
-```tsx
-// Single selection
-<ToggleGroup type="single" onValueChange={setValue} value={value}>
-  <Toggle value="left">
-    <AlignLeftIcon weight="duotone" />
-  </Toggle>
-  <Toggle value="center">
-    <AlignCenterIcon weight="duotone" />
-  </Toggle>
-  <Toggle value="right">
-    <AlignRightIcon weight="duotone" />
-  </Toggle>
-</ToggleGroup>
-
-// Multiple selection
-<ToggleGroup type="multiple" onValueChange={setValues} value={values}>
-  <Toggle value="bold">
-    <Typography variant="body1">Bold</Typography>
-  </Toggle>
-  <Toggle value="italic">
-    <Typography variant="body1">Italic</Typography>
-  </Toggle>
-  <Toggle value="underline">
-    <Typography variant="body1">Underline</Typography>
-  </Toggle>
-</ToggleGroup>
-
-// Vertical orientation
-<ToggleGroup type="single" orientation="vertical">
-  <Toggle value="top">Top</Toggle>
-  <Toggle value="middle">Middle</Toggle>
-  <Toggle value="bottom">Bottom</Toggle>
-</ToggleGroup>
-
-// Small size
-<ToggleGroup size="sm" type="single">
-  <Toggle value="a">A</Toggle>
-  <Toggle value="b">B</Toggle>
-</ToggleGroup>
-```
-
-## Switch
-
-### Size
-```tsx
-<Switch size="sm" />
-<Switch size="md" />
-```
-
-### Examples
-```tsx
-// Default switch with label
-<div className="flex items-center gap-(--lsd-spacing-base)">
-  <Switch checked={enabled} onChange={setEnabled} />
-  <Typography variant="body1">Enable notifications</Typography>
-</div>
-
-// Small switch
-<div className="flex items-center gap-(--lsd-spacing-base)">
-  <Switch size="sm" checked={enabled} onChange={setEnabled} />
-  <Typography variant="body2">Small option</Typography>
-</div>
-```
-
-## Typography
-
-### Variants
-```tsx
-// Display variants
-<Typography variant="display1">Hero Title</Typography>
-<Typography variant="display2">Large Title</Typography>
-<Typography variant="display3">Medium Title</Typography>
-<Typography variant="display4">Small Title</Typography>
-
-// Heading variants
-<Typography variant="h1">Page Title</Typography>
-<Typography variant="h2">Section Title</Typography>
-<Typography variant="h3">Subsection Title</Typography>
-<Typography variant="h4">Component Title</Typography>
-<Typography variant="h5">Small Title</Typography>
-<Typography variant="h6">Micro Title</Typography>
-
-// Subtitle variants
-<Typography variant="subtitle1">Primary Subtitle</Typography>
-<Typography variant="subtitle2">Secondary Subtitle</Typography>
-<Typography variant="subtitle3">Tertiary Subtitle</Typography>
-<Typography variant="subtitle4">Quaternary Subtitle</Typography>
-
-// Body variants
-<Typography variant="body1">Primary Body</Typography>
-<Typography variant="body2">Secondary Body</Typography>
-<Typography variant="body3">Tertiary Body</Typography>
-
-// Label variants
-<Typography variant="label1">Primary Label</Typography>
-<Typography variant="label2">Secondary Label</Typography>
-```
-
-### Colors
-```tsx
-<Typography variant="body1" color="primary">Primary text</Typography>
-<Typography variant="body1" color="secondary">Secondary text</Typography>
-<Typography variant="body1" color="destructive">Destructive text</Typography>
-<Typography variant="body1" color="success">Success text</Typography>
-<Typography variant="body1" color="warning">Warning text</Typography>
-<Typography variant="body1" color="info">Info text</Typography>
-```
-
-### Examples
-```tsx
-// Display heading
-<Typography variant="display1">Welcome to LSD</Typography>
-
-// Page heading
-<Typography variant="h1">Documentation</Typography>
-
-// Section heading
-<Typography variant="h2">Getting Started</Typography>
-
-// Subtitle
-<Typography variant="subtitle1">Learn about LSD components</Typography>
-
-// Body text
-<Typography variant="body1">
-  LSD is a component library built on Radix UI primitives.
-</Typography>
-
-// Secondary body
-<Typography variant="body2" color="secondary">
-  Additional context information here.
-</Typography>
-
-// Label
-<Typography variant="label1">Email Address</Typography>
-
-// Destructive text
-<Typography variant="body1" color="destructive">
-  This action cannot be undone.
-</Typography>
-
-// Success text
-<Typography variant="body1" color="success">
-  Changes saved successfully.
-</Typography>
-```
-
-## Tabs
-
-### Sizes
-```tsx
-<Tabs size="sm">...</Tabs>
-<Tabs size="md">...</Tabs>
-<Tabs size="lg">...</Tabs>
-```
-
-### Full Width
-```tsx
-<Tabs fullWidth>...</Tabs>
-```
-
-### Examples
-```tsx
-// Default tabs
-<Tabs defaultValue="tab1">
-  <TabsList>
-    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
-    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
-  </TabsList>
-  <TabsContent value="tab1">Content 1</TabsContent>
-  <TabsContent value="tab2">Content 2</TabsContent>
-</Tabs>
-
-// Small tabs
-<Tabs size="sm" defaultValue="tab1">
-  <TabsList>
-    <TabsTrigger value="tab1">Small</TabsTrigger>
-    <TabsTrigger value="tab2">Tab</TabsTrigger>
-  </TabsList>
-  <TabsContent value="tab1">Content</TabsContent>
-</Tabs>
-
-// Large tabs
-<Tabs size="lg" defaultValue="tab1">
-  <TabsList>
-    <TabsTrigger value="tab1">Large</TabsTrigger>
-    <TabsTrigger value="tab2">Tab</TabsTrigger>
-  </TabsList>
-  <TabsContent value="tab1">Content</TabsContent>
-</Tabs>
-
-// Full width tabs
-<Tabs fullWidth defaultValue="tab1">
-  <TabsList>
-    <TabsTrigger value="tab1">Full Width</TabsTrigger>
-    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
-    <TabsTrigger value="tab3">Tab 3</TabsTrigger>
-  </TabsList>
-  <TabsContent value="tab1">Content 1</TabsContent>
-</Tabs>
-
-// Tabs with icons
-<Tabs defaultValue="info">
-  <TabsList>
-    <TabsTrigger value="info">
-      <InfoIcon className="mr-(--lsd-spacing-smaller)" />
-      Info
-    </TabsTrigger>
-    <TabsTrigger value="settings">
-      <SettingsIcon className="mr-(--lsd-spacing-smaller)" />
-      Settings
-    </TabsTrigger>
-  </TabsList>
-  <TabsContent value="info">Information content</TabsContent>
-  <TabsContent value="settings">Settings content</TabsContent>
-</Tabs>
-```
-
-## Accordion
-
-### Sizes
-```tsx
-<Accordion size="sm">...</Accordion>
-<Accordion size="md">...</Accordion>
-<Accordion size="lg">...</Accordion>
-```
-
-### Examples
-```tsx
-// Default accordion
-<Accordion type="single" defaultValue="item1">
-  <AccordionItem value="item1">
-    <AccordionTrigger>Section 1</AccordionTrigger>
-    <AccordionContent>Content for section 1</AccordionContent>
-  </AccordionItem>
-  <AccordionItem value="item2">
-    <AccordionTrigger>Section 2</AccordionTrigger>
-    <AccordionContent>Content for section 2</AccordionContent>
-  </AccordionItem>
-</Accordion>
-
-// Small accordion
-<Accordion type="single" size="sm" defaultValue="item1">
-  <AccordionItem value="item1">
-    <AccordionTrigger>Small</AccordionTrigger>
-    <AccordionContent>Small content</AccordionContent>
-  </AccordionItem>
-</Accordion>
-
-// Large accordion
-<Accordion type="single" size="lg" defaultValue="item1">
-  <AccordionItem value="item1">
-    <AccordionTrigger>Large</AccordionTrigger>
-    <AccordionContent>Large content</AccordionContent>
-  </AccordionItem>
-</Accordion>
-
-// Multiple items open
-<Accordion type="multiple">
-  <AccordionItem value="item1">
-    <AccordionTrigger>Section 1</AccordionTrigger>
-    <AccordionContent>Content 1</AccordionContent>
-  </AccordionItem>
-  <AccordionItem value="item2">
-    <AccordionTrigger>Section 2</AccordionTrigger>
-    <AccordionContent>Content 2</AccordionContent>
-  </AccordionItem>
-</Accordion>
-
-// Collapsible single mode
-<Accordion type="single" collapsible>
-  <AccordionItem value="item1">
-    <AccordionTrigger>Toggle Me</AccordionTrigger>
-    <AccordionContent>Can close all items</AccordionContent>
-  </AccordionItem>
-</Accordion>
-```
-
-## Sidebar
-
-### Menu Button Variants
-```tsx
-<SidebarMenuButton variant="default">Default</SidebarMenuButton>
-<SidebarMenuButton variant="outline">Outline</SidebarMenuButton>
-```
-
-### Menu Button Sizes
-```tsx
-<SidebarMenuButton size="default">Default</SidebarMenuButton>
-<SidebarMenuButton size="sm">Small</SidebarMenuButton>
-<SidebarMenuButton size="lg">Large</SidebarMenuButton>
-```
-
-### Examples
-```tsx
-// Default menu button
-<SidebarMenuButton>
-  <HomeIcon weight="duotone" />
-  <span>Home</span>
-</SidebarMenuButton>
-
-// Active menu button
-<SidebarMenuButton isActive>
-  <DashboardIcon weight="duotone" />
-  <span>Dashboard</span>
-</SidebarMenuButton>
-
-// Outline variant
-<SidebarMenuButton variant="outline">
-  <SettingsIcon weight="duotone" />
-  <span>Settings</span>
-</SidebarMenuButton>
-
-// Small menu button
-<SidebarMenuButton size="sm">
-  <UserIcon weight="duotone" />
-  <span>Profile</span>
-</SidebarMenuButton>
-
-// With tooltip
-<SidebarMenuButton tooltip="Shortcuts">
-  <CommandIcon weight="duotone" />
-  <span>Shortcuts</span>
-</SidebarMenuButton>
-```
-
-## ButtonGroup
-
-### Orientation
-```tsx
-<ButtonGroup orientation="horizontal">...</ButtonGroup>
-<ButtonGroup orientation="vertical">...</ButtonGroup>
-```
-
-### Examples
-```tsx
-// Horizontal button group
-<ButtonGroup>
-  <Button variant="filled">Left</Button>
-  <Button variant="filled">Middle</Button>
-  <Button variant="filled">Right</Button>
-</ButtonGroup>
-
-// Vertical button group
-<ButtonGroup orientation="vertical">
-  <Button variant="outlined">Top</Button>
-  <Button variant="outlined">Middle</Button>
-  <Button variant="outlined">Bottom</Button>
-</ButtonGroup>
-
-// Mixed buttons
-<ButtonGroup>
-  <Button variant="filled">Save</Button>
-  <Button variant="outlined">Cancel</Button>
-</ButtonGroup>
-
-// With icons
-<ButtonGroup>
-  <Button variant="filled" size="square-sm">
-    <PlusIcon />
-  </Button>
-  <Button variant="filled" size="square-sm">
-    <MinusIcon />
-  </Button>
-</ButtonGroup>
-```
-
-## Menubar
-
-### Variants
-```tsx
-<MenubarItem variant="default">Default Item</MenubarItem>
-<MenubarItem variant="destructive">Delete</MenubarItem>
-```
-
-### Inset
-```tsx
-<MenubarItem inset>Indented Item</MenubarItem>
-<MenubarLabel inset>Indented Label</MenubarLabel>
-```
-
-### Examples
-```tsx
-// Simple menubar
-<Menubar>
-  <MenubarMenu>
-    <MenubarTrigger>File</MenubarTrigger>
-    <MenubarContent>
-      <MenubarItem>New</MenubarItem>
-      <MenubarItem>Open</MenubarItem>
-      <MenubarSeparator />
-      <MenubarItem variant="destructive">Quit</MenubarItem>
-    </MenubarContent>
-  </MenubarMenu>
-  <MenubarMenu>
-    <MenubarTrigger>Edit</MenubarTrigger>
-    <MenubarContent>
-      <MenubarItem>Undo</MenubarItem>
-      <MenubarItem>Redo</MenubarItem>
-    </MenubarContent>
-  </MenubarMenu>
-</Menubar>
-
-// With labels
-<Menubar>
-  <MenubarMenu>
-    <MenubarTrigger>View</MenubarTrigger>
-    <MenubarContent>
-      <MenubarLabel>Zoom</MenubarLabel>
-      <MenubarItem>Zoom In</MenubarItem>
-      <MenubarItem>Zoom Out</MenubarItem>
-      <MenubarSeparator />
-      <MenubarLabel>Display</MenubarLabel>
-      <MenubarItem>Full Screen</MenubarItem>
-    </MenubarContent>
-  </MenubarMenu>
-</Menubar>
-
-// Inset items
-<Menubar>
-  <MenubarMenu>
-    <MenubarTrigger>Options</MenubarTrigger>
-    <MenubarContent>
-      <MenubarItem>General</MenubarItem>
-      <MenubarItem inset>Advanced</MenubarItem>
-      <MenubarItem inset>Expert</MenubarItem>
-    </MenubarContent>
-  </MenubarMenu>
-</Menubar>
-
-// With submenus
-<Menubar>
-  <MenubarMenu>
-    <MenubarTrigger>Share</MenubarTrigger>
-    <MenubarContent>
-      <MenubarSeparator />
-      <MenubarSub>
-        <MenubarSubTrigger>Email</MenubarSubTrigger>
-        <MenubarSubContent>
-          <MenubarItem>Send as PDF</MenubarItem>
-          <MenubarItem>Send as Link</MenubarItem>
-        </MenubarSubContent>
-      </MenubarSub>
-    </MenubarContent>
-  </MenubarMenu>
-</Menubar>
-```
-
-## Label
-
-### Variants
-```tsx
-<Label variant="default">Email</Label>
-<Label variant="secondary">Optional</Label>
-```
-
-### Sizes
-```tsx
-<Label size="sm">Small</Label>
-<Label size="md">Medium</Label>
-<Label size="lg">Large</Label>
-```
-
-### Examples
-```tsx
-// Default label
-<Label>Email Address</Label>
-
-// Secondary label
-<Label variant="secondary">Phone (Optional)</Label>
-
-// Small label
-<Label size="sm">Code</Label>
-
-// Large label
-<Label size="lg">Full Name</Label>
-
-// With disabled field
-<Field disabled>
-  <Label>Username</Label>
-  <Input placeholder="Enter username" disabled />
-</Field>
-```
-
-## InputGroupAddon
-
-### Alignment
-```tsx
-<InputGroupAddon align="inline-start">prefix</InputGroupAddon>
-<InputGroupAddon align="inline-end">suffix</InputGroupAddon>
-```
-
-### Examples
-```tsx
-// Prefix
-<InputGroup>
-  <InputGroupAddon align="inline-start">
-    <MailIcon />
-  </InputGroupAddon>
-  <Input placeholder="Email" />
-</InputGroup>
-
-// Suffix
-<InputGroup>
-  <Input placeholder="Search" />
-  <InputGroupAddon align="inline-end">
-    <SearchIcon />
-  </InputGroupAddon>
-</InputGroup>
-
-// With text prefix
-<InputGroup>
-  <InputGroupAddon align="inline-start">https://</InputGroupAddon>
-  <Input placeholder="example.com" />
-</InputGroup>
-
-// With keyboard shortcut
-<InputGroup>
-  <Input placeholder="Find" />
-  <InputGroupAddon align="inline-end">
-    <kbd>⌘K</kbd>
-  </InputGroupAddon>
-</InputGroup>
-```
-
-## Alert
-
-### Variants
-```tsx
-<Alert variant="destructive">Error</Alert>
-<Alert variant="success">Success</Alert>
-<Alert variant="warning">Warning</Alert>
-<Alert variant="info">Info</Alert>
-```
-
-### Examples
-```tsx
-// Destructive alert
-<Alert variant="destructive">
-  <AlertDescription>
-    This action is destructive and cannot be undone.
-  </AlertDescription>
-</Alert>
-
-// Success alert
-<Alert variant="success">
-  <AlertDescription>
-    Your changes have been saved successfully.
-  </AlertDescription>
-</Alert>
-
-// Warning alert
-<Alert variant="warning">
-  <AlertDescription>
-    Your account will expire in 3 days.
-  </AlertDescription>
-</Alert>
-
-// Info alert
-<Alert variant="info">
-  <AlertDescription>
-    New features are available in the latest update.
-  </AlertDescription>
-</Alert>
-```
-
-## Types
-
-### Using VariantProps
-
-To extend component types with CVA variant props:
-
-```tsx
-import type { VariantProps } from 'class-variance-authority';
-import { buttonVariants } from '@/components/ui/button/types';
-
-type ButtonVariantProps = VariantProps<typeof buttonVariants>;
-
-// ButtonVariantProps is:
-// {
-//   variant?: 'filled' | 'outlined' | 'filled-rounded' | ...;
-//   size?: 'sm' | 'md' | 'lg' | 'square-sm' | 'square-md' | 'square-lg';
-// }
-```
-
-### Extending Custom Props
-
-```tsx
-import type { VariantProps } from 'class-variance-authority';
-import { badgeVariants } from '@/components/ui/badge/types';
-
-interface CustomBadgeProps
-  extends VariantProps<typeof badgeVariants> {
-  customProp?: string;
-  onClick?: () => void;
-}
-
-function CustomBadge({
-  variant = 'filled',
-  size = 'md',
-  customProp,
-  onClick,
-  ...props
-}: CustomBadgeProps) {
-  return (
-    <badge
-      className={badgeVariants({ variant, size })}
-      onClick={onClick}
-      {...props}
-    >
-      {customProp}
-    </badge>
-  );
-}
-```
-
-### Combining with HTML Attributes
-
-```tsx
-import type { VariantProps } from 'class-variance-authority';
-import { typographyVariants } from '@/components/ui/typography/types';
-
-interface CustomHeadingProps
-  extends React.HTMLAttributes<HTMLHeadingElement>,
-    VariantProps<typeof typographyVariants> {
-  as?: React.ElementType;
-}
-```
-
-## CVA Reference Cards
-
-### Button Variants
-```
-filled              - Primary action, solid background
-outlined            - Secondary action, border only
-filled-rounded      - Primary action with rounded corners
-outlined-rounded    - Secondary action with rounded corners
-ghost               - Subtle action, transparent background
-ghost-rounded       - Subtle action with rounded corners
-link                - Text only, minimal action
-destructive         - Danger action, red styling
-destructive-rounded - Danger action with rounded corners
-success             - Success action, green styling
-success-rounded     - Success action with rounded corners
-```
-
-### Badge Variants
-```
-filled       - Solid background color
-outlined     - Border only, transparent background
-destructive  - Red styling for errors
-success      - Green styling for success
-warning      - Yellow styling for warnings
-info         - Blue styling for information
-dot          - Small dot variant
-```
-
-### Toggle Sizes
-```
-sm - 32px height
-md - 40px height (default)
-lg - 48px height
-```
-
-### ToggleGroup Types
-```
-single   - Radio-like behavior, one selection
-multiple - Checkbox-like behavior, multiple selections
-```
-
-### ToggleGroup Orientation
-```
-horizontal - Buttons arranged horizontally (default)
-vertical   - Buttons arranged vertically
-```
-
-### Typography Variants
-```
-display1     - 5.5rem, 96px line-height
-display2     - 4rem, 72px line-height
-display3     - 3.5rem, 64px line-height
-display4     - 3rem, 56px line-height
-h1           - 2.5rem, 48px line-height (page title)
-h2           - 2rem, 40px line-height (section title)
-h3           - 1.75rem, 36px line-height
-h4           - 1.5rem, 32px line-height
-h5           - 1.25rem, 28px line-height
-h6           - 1rem, 24px line-height
-subtitle1    - 1.125rem, 24px line-height
-subtitle2    - 1rem, 24px line-height
-subtitle3    - 0.875rem, 20px line-height
-subtitle4    - 0.75rem, 16px line-height
-body1        - 1rem, 24px line-height (default)
-body2        - 0.875rem, 20px line-height
-body3        - 0.75rem, 16px line-height
-label1       - 0.875rem, 20px line-height
-label2       - 0.75rem, 16px line-height
-```
-
-### Typography Colors
-```
-primary      - Primary text color
-secondary    - Secondary text color
-destructive  - Destructive (red) text color
-success      - Success (green) text color
-warning      - Warning (yellow) text color
-info         - Info (blue) text color
-```
-
-### Tabs Sizes
-```
-sm - 32px height
-md - 40px height (default)
-lg - 48px height
-```
-
-### Accordion Sizes
-```
-sm - Small text and spacing (xs)
-md - Medium text and spacing (sm, default)
-lg - Large text and spacing (base)
-```
-
-### Sidebar Menu Button Variants
-```
-default - Hover background accent
-outline  - Outline border with shadow
-```
-
-### Sidebar Menu Button Sizes
-```
-default - 32px height, sm text
-sm      - 28px height, xs text
-lg      - 48px height, sm text
-```
-
-### ButtonGroup Orientation
-```
-horizontal - Buttons arranged horizontally (default)
-vertical   - Buttons arranged vertically
-```
-
-### MenubarItem Variants
-```
-default      - Standard styling
-destructive  - Red text styling
-```
-
-### Menubar Inset
-```
-true  - Adds left padding (2rem)
-false - No padding (default)
-```
-
-### Label Variants
-```
-default   - Primary text color
-secondary - Secondary text color
-```
-
-### Label Sizes
-```
-sm - 0.75rem, 16px line-height
-md - 0.875rem, 20px line-height (default)
-lg - 1rem, 24px line-height
-```
-
-### InputGroupAddon Alignment
-```
-inline-start - Left side (prefix, default)
-inline-end   - Right side (suffix)
-```
-
-### Alert Variants
-```
-destructive - Red styling for errors
-success     - Green styling for success
-warning     - Yellow styling for warnings
-info        - Blue styling for information
+# CVA (Class Variance Authority) Variant Patterns - LSD Codebase Reference
+
+## CVA Concept Overview
+
+CVA is a utility for managing component variants in a type-safe, composable way. It allows components to define multiple variant categories (e.g., visual style, size) that combine into className sets without conflicts.
+
+Key benefits:
+- Type-safe variant combinations
+- Conflict resolution through className merging
+- Composable variant definitions
+- Default values for each variant category
+
+## Component Reference
+
+### 1. Button
+**Variants**: filled, outlined, filled-rounded, outlined-rounded, link, ghost, ghost-rounded, destructive, destructive-rounded, success, success-rounded
+**Sizes**: sm, md, lg, square-sm, square-md, square-lg
+**Notes**: Most complete variant system; includes semantic (destructive, success), shape variants (rounded), and button-specific (square) sizes
+
+### 2. Badge
+**Variants**: filled, outlined, destructive, success, warning, info, dot
+**Sizes**: sm, md, lg
+**Notes**: Semantic variants aligned with alert types; includes dot variant for indicators
+
+### 3. Toggle
+**Sizes**: sm, md, lg
+**Pattern**: Uses `data-state="on"` attribute for highlight state instead of variant prop
+
+### 4. Label
+**Variants**: default, secondary
+**Sizes**: sm, md, lg
+**Notes**: Minimal variant set focused on visual weight
+
+### 5. Alert
+**Variants**: destructive, success, warning, info
+**Pattern**: Semantic-only variants for status communication
+
+### 6. InputGroupAddon
+**Variants**: Defined (specific to input grouping context)
+
+### 7. Tabs
+**Size**: sm, md, lg
+**Features**: fullWidth boolean prop
+**Variant Sets**: tabsListVariants, tabsTriggerVariants (nested variant system)
+
+### 8. Accordion
+**Size**: sm, md, lg
+**Variant Sets**: accordionTriggerVariants, accordionContentVariants (nested variant system)
+
+### 9. SidebarMenuButton
+**Variants**: default, outline
+**Sizes**: default, sm, lg
+**Notes**: Variant set specific to sidebar navigation context
+
+### 10. ButtonGroup
+**Variants**: orientation: horizontal, vertical
+**Pattern**: orientation-only variant, no visual styling variants
+
+### 11. Typography
+**Variants**: display1, display2, display3, display4, h1, h2, h3, h4, h5, h6, subtitle1, subtitle2, subtitle3, subtitle4, body1, body2, body3, label1, label2
+**Colors**: primary, secondary, destructive, success, warning, info
+**Pattern**: Hierarchical type scale with separate variant for semantic coloring
+
+### 12. Menubar
+**Pattern**: Multiple variant types for nested menu structure
+
+### 13. NavigationMenuTrigger
+**Pattern**: Uses navigationMenuTriggerStyle helper for variant application
+
+## Example Usage
+
+### Button Component
+```tsx
+import { cva } from "class-variance-authority";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center font-medium transition-colors",
+  {
+    variants: {
+      variant: {
+        filled: "bg-primary text-primary-foreground hover:bg-primary/90",
+        outlined: "border border-primary text-primary hover:bg-primary/5",
+        ghost: "hover:bg-primary/5 text-primary",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+      },
+      size: {
+        sm: "h-8 px-3 text-sm rounded-md",
+        md: "h-10 px-4 text-base rounded-md",
+        lg: "h-12 px-6 text-lg rounded-md",
+      },
+    },
+    defaultVariants: {
+      variant: "filled",
+      size: "md",
+    },
+  }
+);
+
+// Usage
+<Button variant="outlined" size="lg">Click me</Button>
+```
+
+### Badge Component
+```tsx
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full px-2.5 py-0.5 font-medium",
+  {
+    variants: {
+      variant: {
+        filled: "bg-primary text-primary-foreground",
+        outlined: "border border-primary text-primary",
+        destructive: "bg-destructive text-destructive-foreground",
+        success: "bg-success text-success-foreground",
+        dot: "flex items-center gap-1.5",
+      },
+      size: {
+        sm: "text-xs px-2",
+        md: "text-sm",
+        lg: "text-base px-3",
+      },
+    },
+    defaultVariants: {
+      variant: "filled",
+      size: "md",
+    },
+  }
+);
+
+// Usage
+<Badge variant="success" size="sm">Active</Badge>
+```
+
+### Typography Component
+```tsx
+const typographyVariants = cva("", {
+  variants: {
+    variant: {
+      h1: "text-4xl font-bold tracking-tight",
+      h2: "text-3xl font-semibold tracking-tight",
+      body1: "text-base leading-normal",
+      label1: "text-sm font-medium",
+    },
+    color: {
+      primary: "text-primary",
+      secondary: "text-muted-foreground",
+      destructive: "text-destructive",
+    },
+  },
+  defaultVariants: {
+    variant: "body1",
+    color: "primary",
+  },
+});
+
+// Usage
+<Typography variant="h1" color="primary">Heading</Typography>
 ```
 
 ## Common Patterns
 
-### Consistent Button Styling
-```tsx
-// Primary actions - filled
-<Button variant="filled">Save</Button>
-<Button variant="filled">Submit</Button>
-<Button variant="filled-rounded">Create</Button>
-
-// Secondary actions - outlined
-<Button variant="outlined">Cancel</Button>
-<Button variant="outlined">Back</Button>
-<Button variant="outlined-rounded">Edit</Button>
-
-// Subtle actions - ghost
-<Button variant="ghost">Close</Button>
-<Button variant="ghost">Dismiss</Button>
-<Button variant="ghost-rounded">
-  <ShareIcon />
-</Button>
-
-// Destructive actions - destructive
-<Button variant="destructive">Delete</Button>
-<Button variant="destructive">Disable</Button>
-
-// Success actions - success
-<Button variant="success">Confirm</Button>
-<Button variant="success-rounded">
-  <CheckIcon />
-</Button>
-```
-
-### Badge Hierarchy
-```tsx
-// Prominent - filled
-<Badge variant="filled">New</Badge>
-<Badge variant="filled">Pro</Badge>
-
-// Subtle - outlined
-<Badge variant="outlined">Info</Badge>
-
-// Status - semantic
-<Badge variant="success">Complete</Badge>
-<Badge variant="warning">Pending</Badge>
-<Badge variant="destructive">Error</Badge>
-<Badge variant="info">Note</Badge>
-```
-
-### Typography Hierarchy
-```tsx
-// Page
-<Typography variant="display1">Welcome</Typography>
-<Typography variant="h1">Documentation</Typography>
-<Typography variant="h2">Getting Started</Typography>
-
-// Content
-<Typography variant="body1">Main content text</Typography>
-<Typography variant="body2" color="secondary">
-  Supporting information
-</Typography>
-<Typography variant="label1">Form field label</Typography>
-```
-
-## Important Notes
-
-- **ALWAYS** use built-in `variant` and `size` props instead of custom CSS
-- Variants provide consistent styling across components
-- Default variants are designed for most use cases
-- Use `destructive` variant only for dangerous/irreversible actions
-- Use semantic badge/alert variants (success, warning, info) to convey status
-- Typography variants follow a clear hierarchy from display to label
-- Size options (`sm`, `md`, `lg`) maintain consistent scaling
-- CVA components automatically handle focus, hover, and disabled states
-- Use `VariantProps<typeof variants>` to type custom component extensions
-- Avoid custom `className` overrides - use variants instead
+### Semantic Variants
+Components communicate status through consistent semantic variant naming:
+- `destructive`: Error states, dangerous actions
+- `success`: Positive feedback, completed actions
+- `warning`: Cautionary states
+- `info`: Neutral information
+
+### Shape Variants
+Button component extends visual variants with shape modifiers:
+- `-rounded` suffix: Increased border-radius
+- Supports side-by-side use with visual variants (e.g., `filled-rounded`)
+
+### Nested Variant Systems
+Complex components expose multiple variant sets:
+- Tabs: `tabsListVariants`, `tabsTriggerVariants`
+- Accordion: `accordionTriggerVariants`, `accordionContentVariants`
+
+### Size Standardization
+Consistent size naming across components:
+- `sm`: Small (condensed)
+- `md`: Medium (default)
+- `lg`: Large (expanded)
+- Additional sizes: `square-*` for Button (square buttons)
+
+### Data Attribute Pattern
+State changes use data attributes instead of component variants:
+- Toggle: `data-state="on"` for active state
+- Allows dynamic styling without prop proliferation
+
+### Orientation Variant
+ButtonGroup demonstrates orientation as a variant type:
+- `horizontal`: Default row layout
+- `vertical`: Column layout
+
+## Implementation Guidelines
+
+1. **Define clear variant categories** (visual style, size, orientation)
+2. **Use semantic naming** for status-related variants
+3. **Provide sensible defaults** via `defaultVariants`
+4. **Compose variants** through compound variants if needed
+5. **Consider accessibility** in variant choices (color contrast, focus states)
diff --git a/skills/nipsys-lsd/references/icons.md b/skills/nipsys-lsd/references/icons.md
index 810a9fce..853cdad6 100644
--- a/skills/nipsys-lsd/references/icons.md
+++ b/skills/nipsys-lsd/references/icons.md
@@ -1,323 +1,45 @@
-# LSD Icon System
+# Icon Usage Patterns - LSD Components
 
-Complete icon system for @nipsys/lsd using Phosphor icons.
+## Import Pattern
 
-## Concept
-
-**ALWAYS** use Phosphor icons from `@phosphor-icons/react` for all icons in LSD components.
-
-## Icon Import Pattern
-
-```tsx
-// Standard import
-import { PlusIcon, ShareIcon, CheckIcon } from '@phosphor-icons/react';
-
-// Use in components
-<Button><PlusIcon /></Button>
-<Card><ShareIcon weight="duotone" /></Card>
-```
-
-## Icon Weight Rules
-
-### Default Weight (No weight prop)
-Use for:
-- CheckIcon
-- PlusIcon
-
-```tsx
-<Button><PlusIcon /></Button>
-<Button><CheckIcon /></Button>
-```
-
-### Duotone Weight (`weight="duotone"`)
-Use for:
-- All other icons (ShareIcon, TrashIcon, DownloadIcon, etc.)
-- Icons in tooltips, badges, cards, alerts
-
-```tsx
-<Button><ShareIcon weight="duotone" /></Button>
-<Card><InfoIcon weight="duotone" /></Card>
-```
-
-## Common Icons
-
-### Action Icons
-```tsx
-import {
-  PlusIcon,        // Add, create new
-  TrashIcon,       // Delete, remove
-  EditIcon,        // Edit, modify
-  ShareIcon,       // Share, collaborate
-  DownloadIcon,    // Download, export
-  UploadIcon,      // Upload, import
-  CopyIcon,        // Copy, duplicate
-} from '@phosphor-icons/react';
-```
-
-### Navigation Icons
-```tsx
-import {
-  ArrowRightIcon,  // Next, continue
-  ArrowLeftIcon,   // Back, previous
-  ArrowUpIcon,     // Up, collapse
-  ArrowDownIcon,   // Down, expand
-  CaretDownIcon,   // Dropdown, select
-  CaretRightIcon,  // Submenu, nested
-} from '@phosphor-icons/react';
-```
-
-### Status Icons
-```tsx
-import {
-  CheckIcon,       // Success, completed (default weight)
-  CheckCircleIcon, // Success, verified (duotone)
-  WarningIcon,     // Warning, alert
-  ErrorIcon,       // Error, failure
-  InfoIcon,        // Information, help
-  QuestionIcon,    // Question, tooltip
-} from '@phosphor-icons/react';
-```
-
-### UI Element Icons
-```tsx
-import {
-  TextboxIcon,     // Input, text field
-  ListIcon,        // List, menu
-  GridIcon,        // Grid, cards
-  GearIcon,        // Settings, configuration
-  BellIcon,        // Notifications
-  SearchIcon,      // Search, filter
-  FilterIcon,      // Filter options
-  SortIcon,        // Sort, order
-  CalendarIcon,    // Date, calendar
-  ClockIcon,       // Time, duration
-  UserIcon,        // User, person
-  UsersIcon,       // Users, team
-  FolderIcon,      // Folder, directory
-  FileIcon,        // File, document
-  LinkIcon,        // Link, URL
-} from '@phosphor-icons/react';
-```
-
-### Feedback Icons
-```tsx
-import {
-  ThumbsUpIcon,    // Like, approve
-  ThumbsDownIcon,  // Dislike, reject
-  StarIcon,        // Star, favorite
-  HeartIcon,       // Love, save
-  BookmarkIcon,    // Bookmark, save for later
-} from '@phosphor-icons/react';
-```
-
-## Icon Usage Patterns
-
-### Icons in Buttons
-```tsx
-// Icon only button
-<Button><PlusIcon /></Button>
-<Button><ShareIcon weight="duotone" /></Button>
-
-// Icon + text button
-<Button>
-  <PlusIcon className="mr-(--lsd-spacing-smaller)" />
-  Add Item
-</Button>
-
-// Text before icon
-<Button>
-  Save
-  <CheckIcon className="ml-(--lsd-spacing-smaller)" />
-</Button>
-
-// Icon buttons with hover effects
-<Button className="hover:text-destructive">
-  <TrashIcon weight="duotone" />
-</Button>
-```
-
-### Icons in Cards
-```tsx
-// Card header with icon
-<CardHeader>
-  <div className="flex items-center gap-(--lsd-spacing-smaller)">
-    <FileIcon weight="duotone" />
-    <CardTitle>Document</CardTitle>
-  </div>
-</CardHeader>
-
-// Card content with icon
-<CardContent>
-  <div className="flex items-center gap-(--lsd-spacing-smaller)">
-    <CalendarIcon weight="duotone" />
-    <Typography variant="body2">April 24, 2026</Typography>
-  </div>
-</CardContent>
-```
-
-### Icons in Alerts
-```tsx
-// Info alert
-<Alert>
-  <InfoIcon weight="duotone" />
-  <AlertDescription>
-    <Typography variant="body2">Information message</Typography>
-  </AlertDescription>
-</Alert>
-
-// Error alert
-<Alert variant="destructive">
-  <ErrorIcon weight="duotone" />
-  <AlertDescription>
-    <Typography variant="body2">Error message</Typography>
-  </AlertDescription>
-</Alert>
-
-// Success alert
-<Alert>
-  <CheckCircleIcon weight="duotone" />
-  <AlertDescription>
-    <Typography variant="body2">Success message</Typography>
-  </AlertDescription>
-</Alert>
-```
-
-### Icons in Badges
-```tsx
-<Badge>
-  <NewIcon weight="duotone" className="mr-(--lsd-spacing-smallest)" />
-  New
-</Badge>
-```
-
-### Icons with Tooltips
-```tsx
-<Tooltip content="Learn more">
-  <Button><QuestionIcon weight="duotone" /></Button>
-</Tooltip>
-
-<Tooltip content="Settings">
-  <Button><GearIcon weight="duotone" /></Button>
-</Tooltip>
-```
-
-### Icons in Input Groups
-```tsx
-<InputGroup>
-  <InputGroupAddOnIcon>
-    <SearchIcon weight="duotone" />
-  </InputGroupAddOnIcon>
-  <Input placeholder="Search..." />
-</InputGroup>
-```
-
-### Icons in Avatars
-```tsx
-<Avatar>
-  <AvatarImage src="..." />
-  <AvatarFallback>
-    <UserIcon weight="duotone" />
-  </AvatarFallback>
-</Avatar>
-```
-
-### Icons in Navigation
+Icons are imported from `@phosphor-icons/react`:
 ```tsx
-// Sidebar menu items
-<SidebarMenuItem>
-  <SidebarMenuButton>
-    <DashboardIcon weight="duotone" />
-    <span>Dashboard</span>
-  </SidebarMenuButton>
-</SidebarMenuItem>
-
-// Tabs
-<TabsTrigger value="overview">
-  <ColumnsIcon weight="duotone" className="mr-(--lsd-spacing-smaller)" />
-  Overview
-</TabsTrigger>
+import { XIcon, CheckIcon, MagnifyingGlassIcon } from '@phosphor-icons/react'
 ```
 
-## Icon Sizing
-
+Optional weight/dimension props:
 ```tsx
-// Small icon (16px)
-<PlusIcon size={16} />
-
-// Default/medium icon (24px)
-<ShareIcon weight="duotone" />
-
-// Large icon (32px)
-<InfoIcon weight="duotone" size={32} />
-
-// Extra large icon (48px)
-<FolderOpenIcon weight="duotone" size={48} />
+<XIcon weight="duotone" size={20} />
 ```
 
-## Icon Colors
-
-Icons inherit text color by default:
-
-```tsx
-// Inherits text-primary
-<PlusIcon />
-<Button><PlusIcon /></Button>
-
-// Inherits text-destructive
-<TrashIcon weight="duotone" className="text-destructive" />
+## Common Icons & Use Cases
 
-// Custom color
-<ShareIcon weight="duotone" className="text-primary" />
+| Icon | Component/Use Case |
+|------|-------------------|
+| `XIcon` | Close buttons: Dialog, Sheet, Autocomplete, Badge |
+| `CheckIcon` | Selection indicators: Checkbox, DropdownMenuItem, SelectItem |
+| `CircleIcon` | Radio indicators: RadioGroupItem, DropdownMenuRadioItem |
+| `MagnifyingGlassIcon` | Search input: CommandInput |
+| `CaretRightIcon` | Submenu navigation |
+| `CaretDownIcon` | Dropdown triggers, accordions |
+| `CaretUpIcon` | Scroll buttons |
+| `CircleNotchIcon` | Loading spinners |
+| `SidebarSimpleIcon` | Sidebar trigger |
 
-// Hover effect
-<Button>
-  <CheckIcon className="text-primary hover:text-destructive" />
-</Button>
+## CRITICAL: Icon Suffix Rule
 
-// With CSS class
-<InfoIcon weight="duotone" className="text-primary opacity-50" />
-```
-
-## Icon Rotation
-
-```tsx
-// Rotate 90 degrees
-<CaretRightIcon weight="duotone" className="rotate-90" />
-
-// Rotate 180 degrees
-<ArrowDownIcon weight="duotone" className="rotate-180" />
-```
+**ALL icons MUST have "Icon" suffix**
 
-## Icon Reference Cards
+❌ `import { X, Check } from '@phosphor-icons/react'`
+✅ `import { XIcon, CheckIcon } from '@phosphor-icons/react'`
 
-### Default Weight (No prop)
-```
-CheckIcon       - Success, completed
-PlusIcon        - Add, create new
-```
+This is enforced throughout the LSD codebase. Always verify imports end with "Icon".
 
-### Duotone Weight (`weight="duotone"`)
-```
-ShareIcon       - Share, collaborate
-TrashIcon       - Delete, remove
-EditIcon        - Edit, modify
-DownloadIcon    - Download, export
-UploadIcon      - Upload, import
-CopyIcon        - Copy, duplicate
-CheckCircleIcon - Success, verified
-WarningIcon     - Warning, alert
-ErrorIcon       - Error, failure
-InfoIcon        - Information, help
-QuestionIcon    - Question, tooltip
-```
+## Finding Icons
 
-## Important Notes
+Browse available icons at: https://phosphoricons.com
 
-- **ALWAYS** use Phosphor icons from `@phosphor-icons/react`
-- Use `weight="duotone"` for all icons except CheckIcon and PlusIcon
-- Icons inherit text color, add `text-primary` or `text-destructive` if needed
-- Use appropriate spacing with icons and text: `gap-(--lsd-spacing-smaller)`
-- Icon-only buttons work well for toolbars and action menus
-- Use size prop for non-standard icon sizes
-- Consider accessibility - add `aria-label` to icon-only buttons
-- Icons should be meaningful and follow common UI patterns
+All Phosphor Icons are available. Names convert to PascalCase + Icon suffix:
+- `magnifying-glass` → `MagnifyingGlassIcon`
+- `caret-right` → `CaretRightIcon`
+- `sidebar-simple` → `SidebarSimpleIcon`
diff --git a/skills/nipsys-lsd/references/spacing.md b/skills/nipsys-lsd/references/spacing.md
index f1d2edd6..c9596963 100644
--- a/skills/nipsys-lsd/references/spacing.md
+++ b/skills/nipsys-lsd/references/spacing.md
@@ -1,204 +1,47 @@
-# LSD Spacing System
+## LSD Spacing System
 
-Complete spacing scale for @nipsys/lsd with usage patterns and examples.
+A 7-step scale for consistent spacing across all components.
 
-## Concept
+### Spacing Scale
 
-**CRITICAL:** Always use LSD spacing variables with `var()`, NEVER standard Tailwind spacing classes.
+| Variable Name | CSS Value | Pixels | Use Cases |
+|---------------|-----------|--------|-----------|
+| `--lsd-spacing-smallest` | 0.25rem | 4px | Tight spacing, icon text gaps |
+| `--lsd-spacing-smaller` | 0.5rem | 8px | Small spacing, adjacent elements |
+| `--lsd-spacing-small` | 0.75rem | 12px | Compact spacing, card headers |
+| `--lsd-spacing-base` | 1rem | 16px | Default spacing, padding |
+| `--lsd-spacing-large` | 1.25rem | 20px | Comfortable spacing, sections |
+| `--lsd-spacing-larger` | 1.5rem | 24px | Generous spacing, layout gaps |
+| `--lsd-spacing-largest` | 1.75rem | 28px | Maximum spacing, major sections |
 
-## The 7-Value Scale
+### Tailwind Integration
 
-| Variable | Value | Tailwind Equivalent | Use Case |
-|----------|-------|---------------------|----------|
-| `--lsd-spacing-smallest` | 0.25rem | `4px` / `p-1` / `gap-1` | Tight spacing, icon with text |
-| `--lsd-spacing-smaller` | 0.5rem | `8px` / `p-2` / `gap-2` | Default sibling spacing |
-| `--lsd-spacing-small` | 0.75rem | `12px` / `p-3` / `gap-3` | Medium gaps |
-| `--lsd-spacing-base` | 1rem | `16px` / `p-4` / `gap-4` | Section margins/padding |
-| `--lsd-spacing-large` | 1.25rem | `20px` / `p-5` / `gap-5` | Large gaps |
-| `--lsd-spacing-larger` | 1.5rem | `24px` / `p-6` / `gap-6` | Section spacing |
-| `--lsd-spacing-largest` | 1.75rem | `28px` / `p-7` / `gap-7` | Maximum spacing |
+Use parentheses syntax to reference LSD variables:
 
-## Usage Syntax
-
-### Margin
-```tsx
-// Single direction
-className="mt-(--lsd-spacing-base)"      // margin-top
-className="mb-(--lsd-spacing-smaller)"    // margin-bottom
-className="ml-(--lsd-spacing-small)"      // margin-left
-className="mr-(--lsd-spacing-base)"       // margin-right
-
-// Multiple directions
-className="mx-(--lsd-spacing-base)"       // margin-x (left & right)
-className="my-(--lsd-spacing-base)"       // margin-y (top & bottom)
-className="m-(--lsd-spacing-large)"       // margin (all directions)
-```
-
-### Padding
-```tsx
-// Single direction
-className="pt-(--lsd-spacing-base)"      // padding-top
-className="pb-(--lsd-spacing-smaller)"   // padding-bottom
-className="pl-(--lsd-spacing-small)"     // padding-left
-className="pr-(--lsd-spacing-base)"      // padding-right
-
-// Multiple directions
-className="px-(--lsd-spacing-base)"      // padding-x
-className="py-(--lsd-spacing-base)"      // padding-y
-className="p-(--lsd-spacing-large)"      // padding (all directions)
-```
-
-### Gap
-```tsx
-// Flexbox gap
-className="flex gap-(--lsd-spacing-base)"
-
-// Grid gap
-className="grid grid-cols-2 gap-(--lsd-spacing-base)"
-
-// Row/column gap
-className="grid gap-x-(--lsd-spacing-base) gap-y-(--lsd-spacing-smaller)"
-```
-
-## Common Patterns
-
-### Icons with Text
 ```tsx
-// Icon + text in button
-<Button>
-  <PlusIcon className="mr-(--lsd-spacing-smaller)" />
-  Add Item
-</Button>
+// Padding
+<p className="p-(--lsd-spacing-base)">
+<p className="px-(--lsd-spacing-large) py-(--lsd-spacing-smaller)">
 
-// Icon + text in list item
-<div className="flex items-center">
-  <CheckIcon className="mr-(--lsd-spacing-smaller)" />
-  <Typography variant="body1">Completed</Typography>
-</div>
-```
-
-### Card Spacing
-```tsx
-// Card header padding
-<CardHeader className="pb-(--lsd-spacing-base)">
-
-// Card content padding
-<CardContent className="pt-(--lsd-spacing-base)">
-```
-
-### Form Field Spacing
-```tsx
-// Label + input gap
-<div className="flex flex-col gap-(--lsd-spacing-smaller)">
-  <Typography variant="label1">Email</Typography>
-  <Input type="email" />
-</div>
+// Margin
+<m className="m-(--lsd-spacing-base)">
+<m className="mt-(--lsd-spacing-large) mb-(--lsd-spacing-smaller)">
 
-// Form field spacing
-<Field name="email" className="mb-(--lsd-spacing-base)" />
+// Gap
+<div className="gap-(--lsd-spacing-base)">
+<div className="flex gap-(--lsd-spacing-large)">
 ```
 
-### Section Spacing
-```tsx
-// Between sections
-<div className="space-y-(--lsd-spacing-larger)">
-
-// Section margins
-<section className="my-(--lsd-spacing-largest)">
-```
-
-### Button Group Spacing
-```tsx
-// Buttons with gap
-<div className="flex gap-(--lsd-spacing-base)">
-  <Button variant="filled">Save</Button>
-  <Button variant="outlined">Cancel</Button>
-</div>
-```
-
-### Table Cell Spacing
-```tsx
-// Table cell padding
-<TableCell className="px-(--lsd-spacing-base) py-(--lsd-spacing-small)">
-```
-
-### Dialog Content Spacing
-```tsx
-// Dialog content padding
-<DialogContent className="p-(--lsd-spacing-large)">
-```
-
-## Responsive Spacing
-
-Tailwind's responsive prefixes work with LSD variables:
-
-```tsx
-// Different spacing on different breakpoints
-<div className="mt-(--lsd-spacing-base) md:mt-(--lsd-spacing-larger)">
-
-// Gap responsive
-<div className="flex gap-(--lsd-spacing-base) md:gap-(--lsd-spacing-large)">
-```
-
-## Negative Spacing
-
-```tsx
-// Pull elements closer
-<div className="-mt-(--lsd-spacing-base)">
-```
-
-## Examples from LSD components
-
-### Alert Component
-```tsx
-// Icon + text gap
-<AlertIcon className="mr-(--lsd-spacing-smaller)" />
-```
-
-### Card Component
-```tsx
-// Header bottom margin
-<CardHeader className="pb-(--lsd-spacing-base)">
-
-// Content zero padding
-<CardContent className="pt-0">
-```
-
-### Badge Component
-```tsx
-// Icon + badge text
-<CheckIcon className="mr-(--lsd-spacing-smallest)" />
-```
-
-## Reference Cards
-
-### Spacing Decision Tree
-```
-Tight spacing (icon + text)  →  --lsd-spacing-smallest (4px)
-Default sibling spacing      →  --lsd-spacing-smaller (8px)
-Medium gaps                  →  --lsd-spacing-small (12px)
-Section margins/padding      →  --lsd-spacing-base (16px)
-Large gaps                   →  --lsd-spacing-large (20px)
-Section spacing              →  --lsd-spacing-larger (24px)
-Maximum spacing              →  --lsd-spacing-largest (28px)
-```
+### Common Patterns
 
-### Quick Reference
 ```
-Tightest: --lsd-spacing-smallest (4px)  [icon with text]
-Tighter:  --lsd-spacing-smaller (8px)   [default sibling]
-Small:    --lsd-spacing-small (12px)    [medium gaps]
-Base:     --lsd-spacing-base (16px)     [section padding]
-Large:    --lsd-spacing-large (20px)    [large gaps]
-Larger:   --lsd-spacing-larger (24px)   [section spacing]
-Largest:  --lsd-spacing-largest (28px)  [maximum spacing]
+Component padding:          p-(--lsd-spacing-base)
+Section spacing:            gap-(--lsd-spacing-large)
+Header padding:             px-(--lsd-spacing-large) py-(--lsd-spacing-smaller)
+List item spacing:          py-(--lsd-spacing-smaller)
+Critical rule:              ALWAYS use LSD variables, NEVER Tailwind numbers
 ```
 
-## Important Notes
+### Critical Rule
 
-- **ALWAYS** use `var()` syntax in className: `className="mt-(--lsd-spacing-base)"`
-- **NEVER** use Tailwind numbers: `className="mt-4"`
-- The scale is intentionally small (7 values) to maintain consistency
-- Spacing variables are defined in CSS custom properties
-- All LSD components use these spacing variables internally
-- Use responsive prefixes when needed for different screen sizes
+**Always use LSD spacing variables. Never use Tailwind arbitrary values (like p-4, gap-8).**
diff --git a/skills/nipsys-lsd/references/theme-variables.md b/skills/nipsys-lsd/references/theme-variables.md
new file mode 100644
index 00000000..412437dd
--- /dev/null
+++ b/skills/nipsys-lsd/references/theme-variables.md
@@ -0,0 +1,118 @@
+# LSD Theme Variables Reference
+
+## Theme Mechanism
+
+LSD uses a two-layer theme system combining **color modes** (light/dark) with **accent themes**. Both work simultaneously—elements have both a mode and an accent theme.
+
+## Mode Control
+
+Color modes are controlled via CSS classes on the `<html>` or `<body>` element:
+
+```tsx
+// Light mode (default)
+<html className="light">
+
+// Dark mode
+<html className="dark">
+
+// Toggle between modes
+<html className={isDark ? 'dark' : 'light'}>
+```
+
+## Accent Theme Control
+
+Accent themes are set via the `data-theme` attribute on any HTML element. Child elements inherit their parent's accent theme.
+
+```tsx
+// Set global accent theme
+<html data-theme="teal">
+
+// Set section-specific accent theme
+<section data-theme="nord">
+  <button>Uses nord theme</button>
+</section>
+
+// Override for a specific component
+<button data-theme="catppuccin">Custom accent</button>
+```
+
+## Built-in Accent Themes
+
+| Theme | Style |
+|-------|-------|
+| `monochrome` | Black/white accent (default) |
+| `teal` | Teal-based accent |
+| `nord` | Cool blue-gray Nordic palette |
+| `terracotta` | Warm earth tones |
+| `catppuccin` | Pastel Catppuccin palette |
+
+## CSS Variable Categories
+
+### Structural Variables
+- `--radius`: Base border radius (0.625rem / 10px)
+- Radius variants: `--radius-sm`, `--radius-md`, `--radius-lg`, `--radius-xl`
+
+### Typography Variables
+- `--lsd-font-family`: Active font family (mono/sans-serif/serif)
+- Font utility classes: `font-mono`, `font-sans`, `font-serif` (aliases as `font-sans-serif`)
+
+### Color Variables
+Full color token list available in [colors.md](./colors.md):
+- Primary: `--lsd-primary`, `--lsd-primary-foreground`
+- Text: `--lsd-text-primary`, `--lsd-text-secondary`
+- Surface/Border: `--lsd-surface`, `--lsd-border`
+- Icon: `--lsd-icon-primary`, `--lsd-icon-secondary`
+- Semantic: `--lsd-destructive`, `--lsd-success`, `--lsd-warning`, `--lsd-info`
+
+### Spacing Variables
+- `--lsd-spacing-smallest` to `--lsd-spacing-largest`: 0.25rem to 1.75rem
+
+## Custom Theme Creation
+
+Create a custom accent theme by defining CSS variables scoped to a specific `data-theme` value:
+
+```css
+:root[data-theme="mytheme"] {
+  --lsd-primary: #6366f1;
+  --lsd-primary-foreground: #ffffff;
+  --lsd-border: #818cf8;
+}
+
+[data-theme="mytheme"] .dark {
+  --lsd-primary: #818cf8;
+  --lsd-primary-foreground: #000000;
+  --lsd-border: #6366f1;
+}
+```
+
+Then apply it to any element:
+
+```tsx
+<div data-theme="mytheme">
+  <button className="bg-(--lsd-primary)">
+    Custom Theme Button
+  </button>
+</div>
+```
+
+## Theme Inheritance
+
+Themes cascade hierarchically:
+- Parent elements set the mode via CSS class
+- Parent elements set accent theme via `data-theme`
+- Child elements inherit both unless overridden
+
+```tsx
+// Parent sets dark mode + teal theme
+<section className="dark" data-theme="teal">
+  {/* Inherits dark + teal by default */}
+  <p>Dark teal text</p>
+  
+  {/* Keeps dark mode, switches to catppuccin accent */}
+  <div data-theme="catppuccin">
+    <p>Dark catppuccin text</p>
+  </div>
+</section>
+```
+
+ accents apply at any scope—use broadly for page-level theming or narrowly for component-specific customization.
diff --git a/skills/nipsys-lsd/references/typography.md b/skills/nipsys-lsd/references/typography.md
deleted file mode 100644
index 570b0224..00000000
--- a/skills/nipsys-lsd/references/typography.md
+++ /dev/null
@@ -1,251 +0,0 @@
-# LSD Typography System
-
-Complete typography system for @nipsys/lsd with variants, sizing, and responsive behavior.
-
-## Concept
-
-Use the Typography component for all text elements in LSD components. The Typography component provides consistent variants for headings, subtitles, body text, and labels.
-
-## Typography Variants
-
-### Headings
-```tsx
-<Typography variant="h1">    // Page titles (largest)
-<Typography variant="h2">    // Section titles
-<Typography variant="h3">    // Subsection titles
-<Typography variant="h4">    // Card titles
-<Typography variant="h5">    // Small headings
-```
-
-### Subtitles
-```tsx
-<Typography variant="subtitle1">  // Primary subtitle
-<Typography variant="subtitle2">  // Secondary subtitle
-```
-
-### Body Text
-```tsx
-<Typography variant="body1">  // Main content text (default)
-<Typography variant="body2">  // Smaller text, metadata, captions
-```
-
-### Labels
-```tsx
-<Typography variant="label1">  // Form labels, inline labels
-<Typography variant="label2">  // Small labels, helper text
-```
-
-## Usage Patterns
-
-### Page Structure
-```tsx
-// Page title
-<PageHeader title="Dashboard" description="Overview" />
-// Internally uses h1 and subtitle1
-
-// Section heading
-<PageSection title="Recent Activity">
-  <Typography variant="body1">Content here...</Typography>
-</PageSection>
-// Internally uses h2
-```
-
-### Card Content
-```tsx
-<Card>
-  <CardHeader>
-    <CardTitle>  // Uses h4 internally
-      <Typography variant="h4">Card Title</Typography>
-    </CardTitle>
-    <CardDescription>  // Uses body2 internally
-      <Typography variant="body2">Card description</Typography>
-    </CardDescription>
-  </CardHeader>
-  <CardContent>
-    <Typography variant="body1">Main content</Typography>
-  </CardContent>
-</Card>
-```
-
-### Form Labels
-```tsx
-<Field name="email">
-  <Typography variant="label1">Email Address</Typography>
-  <Input type="email" />
-</Field>
-```
-
-### Alert Messages
-```tsx
-<Alert>
-  <InfoIcon />
-  <AlertDescription>
-    <Typography variant="body2">
-      Your changes have been saved successfully
-    </Typography>
-  </AlertDescription>
-</Alert>
-```
-
-### Metadata and Captions
-```tsx
-<div className="flex items-center gap-(--lsd-spacing-smaller)">
-  <Avatar />
-  <div>
-    <Typography variant="body1">John Doe</Typography>
-    <Typography variant="body2">john@example.com</Typography>
-  </div>
-</div>
-```
-
-## Typography Hierarchy
-
-### Document Structure
-```
-h1       → Page titles (PageHeader)
-h2       → Section titles (PageSection)
-h3       → Subsection titles
-h4       → Card titles (CardTitle)
-h5       → Small headings, group titles
-subtitle1 → Subtitles, descriptions
-body1    → Main content (default)
-body2    → Secondary text, metadata
-label1   → Form labels, inline labels
-label2   → Small labels, helper text
-```
-
-### Visual Hierarchy Example
-```tsx
-<div className="flex flex-col gap-(--lsd-spacing-base)">
-  <Typography variant="h3">Recent Activity</Typography>
-  <Typography variant="body1">
-    Here's what's been happening in your workspace.
-  </Typography>
-
-  <div className="space-y-(--lsd-spacing-base)">
-    <div>
-      <Typography variant="h5">Document A</Typography>
-      <Typography variant="body2">Updated 2 hours ago</Typography>
-    </div>
-
-    <div>
-      <Typography variant="h5">Document B</Typography>
-      <Typography variant="body2">Updated yesterday</Typography>
-    </div>
-  </div>
-</div>
-```
-
-## Common Patterns
-
-### Button with Text
-```tsx
-<Button>
-  <PlusIcon className="mr-(--lsd-spacing-smaller)" />
-  <Typography variant="body1">Add Item</Typography>
-</Button>
-```
-
-### Tooltip Content
-```tsx
-<Tooltip content={<Typography variant="body2">Learn more</Typography>}>
-  <Button><InfoIcon /></Button>
-</Tooltip>
-```
-
-### Table Cell Content
-```tsx
-<TableCell>
-  <Typography variant="body1">John Doe</Typography>
-</TableCell>
-<TableCell>
-  <Typography variant="body2">john@example.com</Typography>
-</TableCell>
-```
-
-### Dialog Content
-```tsx
-<Dialog>
-  <DialogContent>
-    <DialogTitle>
-      <Typography variant="h4">Confirm Action</Typography>
-    </DialogTitle>
-    <DialogDescription>
-      <Typography variant="body2">
-        Are you sure you want to proceed?
-      </Typography>
-    </DialogDescription>
-  </DialogContent>
-</Dialog>
-```
-
-### Empty State
-```tsx
-<div className="flex flex-col items-center gap-(--lsd-spacing-base)">
-  <FolderOpenIcon className="text-primary" size={48} />
-  <Typography variant="h4">No items found</Typography>
-  <Typography variant="body2">
-    Try adjusting your search or filters
-  </Typography>
-</div>
-```
-
-## Typography with Modifiers
-
-### Inline Text
-```tsx
-<Typography variant="body1">
-  This is <strong>bold</strong> and <em>italic</em> text.
-</Typography>
-```
-
-### Truncation
-```tsx
-<Typography variant="body1" className="truncate">
-  This text will be truncated if it's too long...
-</Typography>
-```
-
-### Line Numbers
-```tsx
-<Typography variant="body2" className="line-clamp-2">
-  This text will be limited to 2 lines with ellipsis.
-</Typography>
-```
-
-## Typography Reference Cards
-
-### Heading Variants
-```
-h1       → Page titles (PageHeader)
-h2       → Section titles (PageSection)
-h3       → Subsection titles
-h4       → Card titles
-h5       → Small headings
-```
-
-### Body Variants
-```
-subtitle1 → Primary subtitle
-subtitle2 → Secondary subtitle
-body1     → Main content (default)
-body2     → Smaller text, metadata
-```
-
-### Label Variants
-```
-label1    → Form labels, inline labels
-label2    → Small labels, helper text
-```
-
-## Important Notes
-
-- **ALWAYS** use the Typography component for text (don't use raw `h1`, `p`, `span` tags directly)
-- PageHeader and PageSection components internally use h1/h2
-- CardTitle and CardDescription internally use h4/body2
-- body1 is the default for main content text
-- body2 is for metadata, captions, and secondary information
-- label1 and label2 are for form labels and helper text
-- Typography variants automatically scale with the LSD design system
-- Headings include semantic HTML elements (`h1`-`h5`)
-- All text uses `text-primary` color by default (see colors.md)

From 431aeec57783bb4e821aa258274f50e7c0bb6c40 Mon Sep 17 00:00:00 2001
From: Xavier Saliniere <bonjour@xaviers.sh>
Date: Wed, 29 Apr 2026 06:40:28 -0400
Subject: [PATCH 2/2] fix(lsd-skill): address minor issues

---
 skills/nipsys-lsd/SKILL.md                         | 2 +-
 skills/nipsys-lsd/references/component-patterns.md | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/skills/nipsys-lsd/SKILL.md b/skills/nipsys-lsd/SKILL.md
index 6c4f0115..ad9f9beb 100644
--- a/skills/nipsys-lsd/SKILL.md
+++ b/skills/nipsys-lsd/SKILL.md
@@ -11,7 +11,7 @@ metadata:
 
 # LSD Component Library (@nipsys/lsd)
 
-LSD is a monochromatic, content-first component library built on Radix UI primitives with 41 components. High contrast, fully accessible, keyboard-navigable.
+LSD is a monochromatic, content-first component library built on Radix UI primitives with 39 components. High contrast, fully accessible, keyboard-navigable.
 
 ## Requirements
 - **Node.js:** 24+
diff --git a/skills/nipsys-lsd/references/component-patterns.md b/skills/nipsys-lsd/references/component-patterns.md
index 2bb0414d..0f8d6a86 100644
--- a/skills/nipsys-lsd/references/component-patterns.md
+++ b/skills/nipsys-lsd/references/component-patterns.md
@@ -114,11 +114,11 @@ import { Button } from '@nipsys/lsd'
 
 ### ButtonGroup
 ```tsx
-import { ButtonGroup, ButtonGroupButton } from '@nipsys/lsd'
+import { ButtonGroup, Button } from '@nipsys/lsd'
 
 <ButtonGroup>
-  <ButtonGroupButton variant="filled">Previous</ButtonGroupButton>
-  <ButtonGroupButton variant="outlined">Next</ButtonGroupButton>
+  <Button variant="filled">Previous</Button>
+  <Button variant="outlined">Next</Button>
 </ButtonGroup>
 ```