@empathyds/skills 1.0.2

package/README.md

@@ -0,0 +1,51 @@
+# @empathyds/skills
+
+Install the Empathy DS skill for Claude — build beautiful Vue 3 apps with AI.
+
+## Quick Start
+
+```bash
+npx @empathyds/skills
+```
+
+This launches an interactive installer that lets you:
+
+1. **Install skill files locally** — for Claude Code or local development
+2. **Export a .skill package** — for uploading to claude.ai
+3. **Setup MCP server config** — for live component docs access
+
+## Commands
+
+```bash
+# Interactive mode
+npx @empathyds/skills
+
+# Install skill files to a directory (default: .agent/skills/empathy-ds)
+npx @empathyds/skills install
+npx @empathyds/skills install ./my-skills/empathy
+
+# Generate MCP config
+npx @empathyds/skills mcp
+
+# Help
+npx @empathyds/skills help
+```
+
+## What's Included
+
+The skill teaches Claude to build beautiful Vue 3 applications using the Empathy DS component library:
+
+- **Design thinking** — Claude picks an aesthetic direction before coding
+- **60+ components** — Full API reference for all Empathy DS components
+- **Page patterns** — Pre-built blocks for login, dashboard, settings, landing pages, and more
+- **Visual polish** — Font pairings, spacing systems, hover states, transitions
+
+## Skills vs MCP
+
+| | Skill | MCP |
+|---|---|---|
+| **What** | Static knowledge & patterns | Live data & tools |
+| **Use for** | Design principles, templates, aesthetic guidance | Fetching latest docs, validating usage, searching components |
+| **Updates** | Re-install skill file | Automatic (server-side) |
+
+For the best experience, use both together.

package/bin/cli.js

@@ -0,0 +1,267 @@
+#!/usr/bin/env node
+
+import { existsSync, mkdirSync, copyFileSync, readFileSync, writeFileSync, readdirSync } from "fs";
+import { resolve, join, dirname } from "path";
+import { fileURLToPath } from "url";
+import { createInterface } from "readline";
+import { execSync } from "child_process";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const SKILL_DIR = resolve(__dirname, "..", "skill");
+
+// ── Colors ──────────────────────────────────────────
+const c = {
+  reset: "\x1b[0m",
+  bold: "\x1b[1m",
+  dim: "\x1b[2m",
+  green: "\x1b[32m",
+  cyan: "\x1b[36m",
+  yellow: "\x1b[33m",
+  magenta: "\x1b[35m",
+  red: "\x1b[31m",
+  white: "\x1b[37m",
+  bgCyan: "\x1b[46m",
+};
+
+function log(msg = "") { console.log(msg); }
+function success(msg) { log(`${c.green}✔${c.reset} ${msg}`); }
+function info(msg) { log(`${c.cyan}ℹ${c.reset} ${msg}`); }
+function warn(msg) { log(`${c.yellow}⚠${c.reset} ${msg}`); }
+function error(msg) { log(`${c.red}✖${c.reset} ${msg}`); }
+
+// ── Readline helper ─────────────────────────────────
+function ask(question) {
+  const rl = createInterface({ input: process.stdin, output: process.stdout });
+  return new Promise((res) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      res(answer.trim());
+    });
+  });
+}
+
+// ── Copy directory recursively ──────────────────────
+function copyDirSync(src, dest) {
+  if (!existsSync(dest)) mkdirSync(dest, { recursive: true });
+  for (const entry of readdirSync(src, { withFileTypes: true })) {
+    const srcPath = join(src, entry.name);
+    const destPath = join(dest, entry.name);
+    if (entry.isDirectory()) {
+      copyDirSync(srcPath, destPath);
+    } else {
+      copyFileSync(srcPath, destPath);
+      success(`  ${destPath}`);
+    }
+  }
+}
+
+// ── Create .skill zip ───────────────────────────────
+function createSkillPackage(outputDir) {
+  const outputPath = join(outputDir, "empathy-ds.skill");
+  try {
+    execSync(`cd "${resolve(SKILL_DIR, "..")}" && zip -r "${resolve(outputPath)}" skill/ -x "*.DS_Store"`, {
+      stdio: "pipe",
+    });
+    // Rename internal folder structure
+  } catch {
+    // Fallback: just copy the directory
+    warn("zip not available, copying raw skill files instead");
+    copyDirSync(SKILL_DIR, join(outputDir, "empathy-ds"));
+    return join(outputDir, "empathy-ds");
+  }
+  return outputPath;
+}
+
+// ── MCP Server config ───────────────────────────────
+function generateMCPConfig(skillPath) {
+  return {
+    mcpServers: {
+      "empathy-ds-docs": {
+        command: "npx",
+        args: ["-y", "@anthropic-ai/mcp-server-filesystem", skillPath],
+        description: "Serves Empathy DS component docs and skill files to Claude"
+      }
+    }
+  };
+}
+
+// ── Main ────────────────────────────────────────────
+async function main() {
+  const args = process.argv.slice(2);
+  const command = args[0];
+
+  log();
+  log(`${c.bold}${c.magenta}  ✦ Empathy DS — Claude Skill Installer${c.reset}`);
+  log(`${c.dim}  Build beautiful Vue 3 apps with AI${c.reset}`);
+  log();
+
+  // Direct command mode
+  if (command === "install" || command === "i") {
+    await installSkill(args[1]);
+    return;
+  }
+  if (command === "mcp") {
+    await setupMCP(args[1]);
+    return;
+  }
+  if (command === "help" || command === "--help" || command === "-h") {
+    showHelp();
+    return;
+  }
+
+  // Interactive mode
+  log(`  ${c.bold}What would you like to do?${c.reset}`);
+  log();
+  log(`  ${c.cyan}1${c.reset}  Install skill files locally ${c.dim}(for Claude Code / local dev)${c.reset}`);
+  log(`  ${c.cyan}2${c.reset}  Export .skill package ${c.dim}(for uploading to claude.ai)${c.reset}`);
+  log(`  ${c.cyan}3${c.reset}  Setup MCP server config ${c.dim}(for live component docs)${c.reset}`);
+  log(`  ${c.cyan}4${c.reset}  All of the above`);
+  log();
+
+  const choice = await ask(`  ${c.bold}Choose [1-4]:${c.reset} `);
+  log();
+
+  switch (choice) {
+    case "1":
+      await installSkill();
+      break;
+    case "2":
+      await exportPackage();
+      break;
+    case "3":
+      await setupMCP();
+      break;
+    case "4":
+      await installSkill();
+      log();
+      await exportPackage();
+      log();
+      await setupMCP();
+      break;
+    default:
+      error("Invalid choice. Run again and pick 1-4.");
+      process.exit(1);
+  }
+
+  log();
+  log(`${c.dim}  ─────────────────────────────────────────${c.reset}`);
+  log(`  ${c.green}${c.bold}Done!${c.reset} Happy building ✦`);
+  log();
+}
+
+// ── Install skill files to a directory ──────────────
+async function installSkill(targetDir) {
+  if (!targetDir) {
+    targetDir = await ask(`  ${c.bold}Install to directory${c.reset} ${c.dim}[.agent/skills/empathy-ds]:${c.reset} `);
+    if (!targetDir) targetDir = ".agent/skills/empathy-ds";
+  }
+
+  const dest = resolve(process.cwd(), targetDir);
+
+  if (existsSync(dest)) {
+    const overwrite = await ask(`  ${c.yellow}Directory exists. Overwrite? [y/N]:${c.reset} `);
+    if (overwrite.toLowerCase() !== "y") {
+      info("Skipped installation.");
+      return;
+    }
+  }
+
+  log(`  ${c.bold}Installing skill files...${c.reset}`);
+  copyDirSync(SKILL_DIR, dest);
+  log();
+  success(`Skill installed to ${c.cyan}${dest}${c.reset}`);
+  log();
+  info(`To use with Claude Code, point your skill config to this directory.`);
+  info(`SKILL.md + references/ are ready to go.`);
+}
+
+// ── Export .skill package ───────────────────────────
+async function exportPackage() {
+  let outputDir = await ask(`  ${c.bold}Export .skill file to${c.reset} ${c.dim}[.]:${c.reset} `);
+  if (!outputDir) outputDir = ".";
+
+  const dest = resolve(process.cwd(), outputDir);
+  if (!existsSync(dest)) mkdirSync(dest, { recursive: true });
+
+  log(`  ${c.bold}Creating .skill package...${c.reset}`);
+  const outputPath = createSkillPackage(dest);
+  log();
+  success(`Package created: ${c.cyan}${outputPath}${c.reset}`);
+  log();
+  info(`Upload this file to ${c.bold}claude.ai → Settings → Skills${c.reset}`);
+}
+
+// ── Setup MCP ───────────────────────────────────────
+async function setupMCP(skillPath) {
+  log(`  ${c.bold}MCP Server Setup${c.reset}`);
+  log();
+  info("An MCP server can serve live component docs to Claude,");
+  info("so it always has access to the latest API reference.");
+  log();
+
+  if (!skillPath) {
+    skillPath = await ask(`  ${c.bold}Path to skill directory${c.reset} ${c.dim}[.agent/skills/empathy-ds]:${c.reset} `);
+    if (!skillPath) skillPath = ".agent/skills/empathy-ds";
+  }
+
+  const resolvedPath = resolve(process.cwd(), skillPath);
+  const config = generateMCPConfig(resolvedPath);
+
+  log();
+  log(`  ${c.bold}Add this to your Claude MCP config:${c.reset}`);
+  log();
+  log(c.dim + "  ┌──────────────────────────────────────────────────");
+  const configStr = JSON.stringify(config, null, 2);
+  for (const line of configStr.split("\n")) {
+    log(`${c.dim}  │${c.reset} ${c.cyan}${line}${c.reset}`);
+  }
+  log(c.dim + "  └──────────────────────────────────────────────────" + c.reset);
+  log();
+
+  const save = await ask(`  ${c.bold}Save config to file? [y/N]:${c.reset} `);
+  if (save.toLowerCase() === "y") {
+    const configPath = resolve(process.cwd(), "mcp-config.json");
+    writeFileSync(configPath, configStr + "\n");
+    success(`Config saved to ${c.cyan}${configPath}${c.reset}`);
+    log();
+    info(`Merge this into your Claude Desktop / Claude Code MCP config file.`);
+    info(`Typically at: ${c.dim}~/.claude/mcp_servers.json${c.reset} or ${c.dim}claude_desktop_config.json${c.reset}`);
+  }
+
+  log();
+  info(`${c.bold}For a richer MCP setup${c.reset}, consider building a custom MCP server that:`);
+  log(`${c.dim}    • Searches components by name, category, or prop${c.reset}`);
+  log(`${c.dim}    • Fetches live docs from empathyds.com${c.reset}`);
+  log(`${c.dim}    • Validates component usage in Vue templates${c.reset}`);
+  log(`${c.dim}    • Serves design tokens dynamically${c.reset}`);
+}
+
+// ── Help ────────────────────────────────────────────
+function showHelp() {
+  log(`  ${c.bold}Usage:${c.reset}`);
+  log();
+  log(`    ${c.cyan}npx @empathyds/skills${c.reset}           ${c.dim}Interactive mode${c.reset}`);
+  log(`    ${c.cyan}npx @empathyds/skills install${c.reset}   ${c.dim}Install skill files locally${c.reset}`);
+  log(`    ${c.cyan}npx @empathyds/skills mcp${c.reset}       ${c.dim}Setup MCP server config${c.reset}`);
+  log(`    ${c.cyan}npx @empathyds/skills help${c.reset}      ${c.dim}Show this help${c.reset}`);
+  log();
+  log(`  ${c.bold}Options:${c.reset}`);
+  log();
+  log(`    ${c.cyan}install [dir]${c.reset}   Install skill files to a directory (default: .agent/skills/empathy-ds)`);
+  log(`    ${c.cyan}mcp [dir]${c.reset}       Generate MCP config pointing to skill directory`);
+  log();
+  log(`  ${c.bold}Examples:${c.reset}`);
+  log();
+  log(`    ${c.dim}# Interactive — choose what to do${c.reset}`);
+  log(`    ${c.cyan}npx @empathyds/skills${c.reset}`);
+  log();
+  log(`    ${c.dim}# Quick install to custom path${c.reset}`);
+  log(`    ${c.cyan}npx @empathyds/skills install ./my-skills/empathy${c.reset}`);
+  log();
+}
+
+main().catch((err) => {
+  error(err.message);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@empathyds/skills",
+  "version": "1.0.2",
+  "description": "Install the Empathy DS skill for Claude — build beautiful Vue 3 apps with AI",
+  "type": "module",
+  "bin": {
+    "empathyds-skills": "./bin/cli.js"
+  },
+  "files": [
+    "bin/",
+    "skill/",
+    "README.md"
+  ],
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "keywords": [
+    "empathy-ds",
+    "claude",
+    "skill",
+    "design-system",
+    "vue3",
+    "mcp"
+  ],
+  "license": "MIT"
+}

package/skill/SKILL.md

@@ -0,0 +1,184 @@
+---
+name: empathy-ds
+description: Build beautiful, accessible Vue 3 web applications using the Empathy DS design system. Use this skill when users want to create websites, web apps, UI components, or interfaces using Vue 3 with the Empathy DS component library. Triggers include requests to build Vue apps, create modern UIs, design web pages, build dashboards, landing pages, forms, admin panels, or use the organization's design system. Also triggers when styling, beautifying, or improving the look of any Vue 3 web UI using Empathy DS components. Do NOT use for React, plain HTML, or non-Vue projects unless specifically asked to use Empathy DS.
+---
+
+# Empathy DS Skill
+
+Build professional, visually striking Vue 3 applications using the Empathy DS design system — an opinionated, accessible component library with 60+ production-ready components.
+
+## Design Thinking (Do This First)
+
+Before writing any code, commit to a clear aesthetic direction. Empathy DS provides the components — **you provide the creative vision**.
+
+### 1. Understand the Context
+- **Purpose**: What problem does this interface solve? Who is the audience?
+- **Tone**: Professional/corporate, playful/creative, minimal/editorial, warm/organic, bold/modern?
+- **Density**: Data-heavy dashboard or spacious marketing page?
+
+### 2. Choose an Aesthetic Direction
+Pick a cohesive visual identity and execute it with intention:
+- **Color strategy**: Use 1 dominant color + 1-2 accents. Empathy DS tokens (`bg-primary`, `text-muted-foreground`) are available as Tailwind utilities.
+- **Typography**: Pair fonts thoughtfully — a distinctive display font with a clean body font. Import from Google Fonts via `<link>` or `@import`.
+- **Spacing**: Generous whitespace for marketing/editorial; tighter spacing for data-heavy UIs. Use consistent rhythm (multiples of 4px or 8px).
+- **Layout**: Choose asymmetric, grid-breaking, or structured grid layouts depending on context. CSS Grid and Flexbox are your primary tools.
+
+### 3. Avoid Generic "AI Slop"
+- Never default to the same fonts, colors, or layouts for every project
+- Avoid: purple-gradient-on-white, Inter/Roboto everywhere, identical card grids
+- Do: Match aesthetic to context, vary between light/dark themes, surprise with layout choices
+
+## Setup
+
+```ts
+// main.ts
+import { createApp } from "vue";
+import App from "./App.vue";
+import "@empathyds/vue/style.css"; // Required — always import first
+
+createApp(App).mount("#app");
+```
+
+For monorepo setups with bundler resolution issues, add Vite alias:
+```ts
+// vite.config.ts
+import { defineConfig } from "vite";
+import path from "path";
+export default defineConfig({
+  resolve: {
+    alias: {
+      "@empathyds/vue": path.resolve(__dirname, "node_modules/@empathyds/vue/dist/empathy-ds.es.js"),
+    },
+  },
+});
+```
+
+## Component Library Overview
+
+All imports come from `@empathyds/vue`. The library provides:
+
+| Category | Components |
+|---|---|
+| **Forms** | Input, Select, Checkbox, RadioGroup, Switch, Textarea, Form, Field, Label, NumberField, PinInput, TagsInput, InputOtp, InputGroup |
+| **Layout** | Card (+ CardHeader, CardTitle, CardDescription, CardContent, CardFooter), Separator, Sidebar, AspectRatio, Resizable, ScrollArea, Sheet |
+| **Navigation** | Breadcrumb, NavigationMenu, Menubar, Tabs, Stepper, Pagination |
+| **Feedback** | Alert, AlertDialog, Dialog, Drawer, Toast (Sonner), Spinner, Progress, Skeleton, Empty |
+| **Data Display** | Table (+ TableHeader, TableBody, TableRow, TableHead, TableCell), Avatar, Badge, Chart, Carousel, Calendar, RangeCalendar |
+| **Overlay** | Popover, Tooltip, HoverCard, ContextMenu, DropdownMenu, Command |
+| **Interactive** | Button, ButtonGroup, Toggle, ToggleGroup, Slider, Collapsible, Accordion |
+
+For detailed component props, slots, and variants: see `references/component-api.md`
+For pre-built page patterns and blocks: see `references/blocks.md`
+
+## Critical Rules
+
+1. **Import `@empathyds/vue/style.css`** in main entry file — without it, nothing is styled.
+
+2. **Use `<script setup>`** syntax (Vue 3 Composition API).
+
+3. **Import every component explicitly** — no global registration:
+   ```vue
+   <script setup>
+   import { Button, Card, CardContent, CardHeader, CardTitle } from "@empathyds/vue";
+   </script>
+   ```
+
+4. **Use Tailwind classes for all styling** — never use inline `style=""` attributes. Empathy DS design tokens are available as Tailwind utilities (`bg-primary`, `text-muted-foreground`, `border-input`, etc.).
+
+## Layout & Styling Patterns
+
+### Page Shell Pattern
+Every page needs a shell:
+
+```vue
+<template>
+  <div class="min-h-screen bg-background text-foreground font-sans">
+    <header class="px-8 py-4 border-b border-border">
+      <slot name="header" />
+    </header>
+    <main class="max-w-7xl mx-auto p-8">
+      <slot />
+    </main>
+  </div>
+</template>
+```
+
+### Card Grid Pattern
+Responsive columns with Tailwind grid:
+```vue
+<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+  <Card v-for="item in items" :key="item.id">...</Card>
+</div>
+```
+
+### Dashboard Layout Pattern
+Sidebar + content area:
+```vue
+<div class="grid grid-cols-[260px_1fr] min-h-screen">
+  <aside class="border-r border-border p-6">
+    <!-- Navigation -->
+  </aside>
+  <div class="p-8 overflow-y-auto">
+    <!-- Content -->
+  </div>
+</div>
+```
+
+### Spacing System
+Use Tailwind's spacing scale consistently: `gap-1` (0.25rem), `gap-2` (0.5rem), `gap-3` (0.75rem), `gap-4` (1rem), `gap-6` (1.5rem), `gap-8` (2rem), `gap-12` (3rem), `gap-16` (4rem). Apply via Tailwind utility classes (`p-`, `m-`, `gap-`, `space-y-`, etc.).
+
+### Font Loading
+Import distinctive fonts to avoid generic output:
+```html
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=DM+Serif+Display&display=swap" rel="stylesheet">
+```
+Then apply via CSS:
+```css
+:root {
+  --font-heading: 'DM Serif Display', serif;
+  --font-body: 'DM Sans', sans-serif;
+}
+```
+
+**Vary fonts per project.** Good pairings to rotate between:
+- DM Serif Display + DM Sans (warm editorial)
+- Playfair Display + Source Sans 3 (classic elegance)
+- Space Grotesk + Inter (modern tech)
+- Fraunces + Work Sans (friendly organic)
+- Instrument Serif + Instrument Sans (refined minimal)
+- Sora + Nunito (soft modern)
+- Bebas Neue + Lato (bold impact)
+
+## Visual Polish Checklist
+
+Before delivering any output, verify:
+
+- [ ] Custom fonts loaded (not just system defaults)
+- [ ] Consistent color palette (2-4 colors max, using Tailwind + DS tokens)
+- [ ] All styling uses Tailwind classes (no inline `style=""` attributes)
+- [ ] Spacing is consistent and rhythmic
+- [ ] Hover states on interactive elements (`hover:` utilities)
+- [ ] Transitions on state changes (`transition-all duration-200 ease-in-out`)
+- [ ] Visual hierarchy clear (headings > subheadings > body > muted text)
+- [ ] Empty states handled gracefully (use `Empty` component)
+- [ ] Responsive — works on mobile widths too
+
+## Tailwind Integration
+
+Tailwind is the default styling approach. Always use Tailwind utility classes instead of inline styles or scoped CSS.
+
+```ts
+// main.ts — import order matters
+import "@empathyds/vue/style.css"; // First
+import "./assets/main.css";        // Tailwind second
+```
+
+Empathy DS design tokens (`bg-primary`, `text-muted-foreground`, `border-input`, etc.) are available as Tailwind utilities. Use them for consistent theming.
+
+## Additional Resources
+
+- Full docs: https://empathyds.com/getting-started
+- Components: https://empathyds.com/components/button
+- Pre-built blocks: https://empathyds.com/blocks/login-form
+- Design tokens: https://empathyds.com/tokens/colors
+- LLM context: https://empathyds.com/llms.txt

package/skill/references/blocks.md

@@ -0,0 +1,451 @@
+# Pre-Built Blocks & Page Patterns
+
+Copy and adapt these patterns as starting points. Always customize colors, fonts, and spacing to match the project's aesthetic direction. Use Tailwind utility classes for all styling.
+
+## Table of Contents
+- [Login / Auth Form](#login--auth-form)
+- [Dashboard Layout](#dashboard-layout)
+- [Data Table Page](#data-table-page)
+- [Settings Page](#settings-page)
+- [Landing / Marketing Page](#landing--marketing-page)
+- [Profile / Account Page](#profile--account-page)
+
+---
+
+## Login / Auth Form
+
+Centered card with logo, form fields, and social auth options.
+
+```vue
+<script setup>
+import { ref } from "vue";
+import {
+  Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter,
+  Button, Input, Label, Field, Form, Separator, Checkbox
+} from "@empathyds/vue";
+
+const email = ref("");
+const password = ref("");
+const remember = ref(false);
+</script>
+
+<template>
+  <div class="min-h-screen flex items-center justify-center bg-muted p-4">
+    <Card class="w-full max-w-[420px]">
+      <CardHeader class="text-center">
+        <!-- Replace with your logo/brand -->
+        <div class="text-2xl font-bold mb-2">✦ Brand</div>
+        <CardTitle class="text-xl">Welcome back</CardTitle>
+        <CardDescription>Enter your credentials to continue</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Form @submit.prevent="handleLogin" class="flex flex-col gap-4">
+          <Field>
+            <Label for="email">Email</Label>
+            <Input id="email" v-model="email" type="email" placeholder="you@company.com" />
+          </Field>
+          <Field>
+            <div class="flex justify-between items-center">
+              <Label for="password">Password</Label>
+              <a href="#" class="text-xs text-primary hover:underline">Forgot?</a>
+            </div>
+            <Input id="password" v-model="password" type="password" />
+          </Field>
+          <Field class="flex items-center gap-2">
+            <Checkbox id="remember" v-model:checked="remember" />
+            <Label for="remember" class="text-sm">Remember me</Label>
+          </Field>
+          <Button type="submit" class="w-full">Sign in</Button>
+        </Form>
+
+        <div class="flex items-center gap-4 my-6">
+          <Separator class="flex-1" />
+          <span class="text-xs text-muted-foreground">OR</span>
+          <Separator class="flex-1" />
+        </div>
+
+        <Button variant="outline" class="w-full">Continue with Google</Button>
+      </CardContent>
+      <CardFooter class="justify-center">
+        <p class="text-xs text-muted-foreground">
+          Don't have an account? <a href="#" class="text-primary font-medium hover:underline">Sign up</a>
+        </p>
+      </CardFooter>
+    </Card>
+  </div>
+</template>
+```
+
+---
+
+## Dashboard Layout
+
+Sidebar navigation + header + content area with stat cards and data table.
+
+```vue
+<script setup>
+import { ref } from "vue";
+import {
+  Card, CardContent,
+  Button, Avatar, AvatarFallback, Badge,
+  Table, TableHeader, TableBody, TableRow, TableHead, TableCell,
+  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem,
+  Tabs, TabsList, TabsTrigger, TabsContent,
+} from "@empathyds/vue";
+
+const navItems = [
+  { label: "Dashboard", icon: "📊", active: true },
+  { label: "Projects", icon: "📁", active: false },
+  { label: "Team", icon: "👥", active: false },
+  { label: "Settings", icon: "⚙️", active: false },
+];
+</script>
+
+<template>
+  <div class="grid grid-cols-[260px_1fr] min-h-screen font-sans">
+    <!-- Sidebar -->
+    <aside class="border-r border-border p-6 flex flex-col gap-1">
+      <div class="font-bold text-lg px-2 mb-4">✦ AppName</div>
+      <button
+        v-for="item in navItems"
+        :key="item.label"
+        class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-left w-full transition-colors"
+        :class="item.active ? 'bg-primary text-primary-foreground' : 'text-foreground hover:bg-muted'"
+      >
+        <span>{{ item.icon }}</span>
+        {{ item.label }}
+      </button>
+    </aside>
+
+    <!-- Main Content -->
+    <div>
+      <!-- Top Header -->
+      <header class="flex justify-between items-center px-8 py-4 border-b border-border">
+        <h1 class="text-xl font-semibold">Dashboard</h1>
+        <Avatar>
+          <AvatarFallback>JD</AvatarFallback>
+        </Avatar>
+      </header>
+
+      <!-- Dashboard Content -->
+      <div class="p-8">
+        <!-- Stat Cards Row -->
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+          <Card v-for="stat in stats" :key="stat.label">
+            <CardContent>
+              <div class="text-xs text-muted-foreground mb-1">{{ stat.label }}</div>
+              <div class="text-3xl font-bold">{{ stat.value }}</div>
+              <div
+                class="text-xs mt-1"
+                :class="stat.trend > 0 ? 'text-green-600' : 'text-red-600'"
+              >
+                {{ stat.trend > 0 ? '↑' : '↓' }} {{ Math.abs(stat.trend) }}% from last month
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        <!-- Tabs with Table -->
+        <Tabs default-value="recent">
+          <TabsList>
+            <TabsTrigger value="recent">Recent</TabsTrigger>
+            <TabsTrigger value="popular">Popular</TabsTrigger>
+          </TabsList>
+          <TabsContent value="recent">
+            <!-- Insert Table component here -->
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+---
+
+## Data Table Page
+
+Full-featured data table with search, filters, and pagination.
+
+```vue
+<script setup>
+import { ref, computed } from "vue";
+import {
+  Card, CardContent,
+  Button, Input, Badge,
+  Table, TableHeader, TableBody, TableRow, TableHead, TableCell,
+  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem,
+  Select, SelectTrigger, SelectValue, SelectContent, SelectItem,
+} from "@empathyds/vue";
+
+const search = ref("");
+const statusFilter = ref("all");
+</script>
+
+<template>
+  <div class="p-8 max-w-7xl mx-auto">
+    <div class="flex justify-between items-center mb-6">
+      <h1 class="text-2xl font-bold">Orders</h1>
+      <Button>+ New Order</Button>
+    </div>
+
+    <!-- Filters Row -->
+    <div class="flex gap-3 mb-4">
+      <Input v-model="search" placeholder="Search orders..." class="max-w-xs" />
+      <Select v-model="statusFilter">
+        <SelectTrigger class="w-40">
+          <SelectValue placeholder="Status" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">All Status</SelectItem>
+          <SelectItem value="active">Active</SelectItem>
+          <SelectItem value="completed">Completed</SelectItem>
+          <SelectItem value="cancelled">Cancelled</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+
+    <!-- Table -->
+    <Card>
+      <CardContent class="p-0">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Order</TableHead>
+              <TableHead>Customer</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead class="text-right">Amount</TableHead>
+              <TableHead class="w-12"></TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow v-for="order in filteredOrders" :key="order.id">
+              <TableCell class="font-medium">#{{ order.id }}</TableCell>
+              <TableCell>{{ order.customer }}</TableCell>
+              <TableCell>
+                <Badge :variant="order.status === 'active' ? 'default' : order.status === 'completed' ? 'secondary' : 'destructive'">
+                  {{ order.status }}
+                </Badge>
+              </TableCell>
+              <TableCell class="text-right">{{ order.amount }}</TableCell>
+              <TableCell>
+                <DropdownMenu>
+                  <DropdownMenuTrigger as-child>
+                    <Button variant="ghost" size="icon">⋯</Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent>
+                    <DropdownMenuItem>View</DropdownMenuItem>
+                    <DropdownMenuItem>Edit</DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  </div>
+</template>
+```
+
+---
+
+## Settings Page
+
+Sectioned form layout with cards for each settings group.
+
+```vue
+<script setup>
+import { ref } from "vue";
+import {
+  Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter,
+  Button, Input, Textarea, Label, Field, Form, Separator, Switch,
+} from "@empathyds/vue";
+
+const name = ref("");
+const bio = ref("");
+const emailNotifs = ref(true);
+const pushNotifs = ref(false);
+</script>
+
+<template>
+  <div class="max-w-2xl mx-auto p-8">
+    <h1 class="text-2xl font-bold mb-2">Settings</h1>
+    <p class="text-muted-foreground mb-8">Manage your account preferences.</p>
+
+    <div class="flex flex-col gap-6">
+      <!-- Profile Section -->
+      <Card>
+        <CardHeader>
+          <CardTitle class="text-base">Profile</CardTitle>
+          <CardDescription>Your public-facing information.</CardDescription>
+        </CardHeader>
+        <CardContent class="flex flex-col gap-4">
+          <Field>
+            <Label for="name">Display name</Label>
+            <Input id="name" v-model="name" />
+          </Field>
+          <Field>
+            <Label for="bio">Bio</Label>
+            <Textarea id="bio" v-model="bio" rows="3" />
+          </Field>
+        </CardContent>
+        <CardFooter class="border-t border-border justify-end">
+          <Button>Save changes</Button>
+        </CardFooter>
+      </Card>
+
+      <!-- Notifications Section -->
+      <Card>
+        <CardHeader>
+          <CardTitle class="text-base">Notifications</CardTitle>
+        </CardHeader>
+        <CardContent class="flex flex-col gap-3">
+          <div class="flex justify-between items-center">
+            <div>
+              <div class="text-sm font-medium">Email notifications</div>
+              <div class="text-xs text-muted-foreground">Receive updates via email</div>
+            </div>
+            <Switch v-model:checked="emailNotifs" />
+          </div>
+          <Separator />
+          <div class="flex justify-between items-center">
+            <div>
+              <div class="text-sm font-medium">Push notifications</div>
+              <div class="text-xs text-muted-foreground">Browser push alerts</div>
+            </div>
+            <Switch v-model:checked="pushNotifs" />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  </div>
+</template>
+```
+
+---
+
+## Landing / Marketing Page
+
+Hero section + feature grid + CTA. Use bold typography and generous spacing.
+
+```vue
+<script setup>
+import {
+  Card, CardContent, Button, Badge, Separator,
+} from "@empathyds/vue";
+
+const features = [
+  { icon: "⚡", title: "Lightning Fast", description: "Built for speed with optimized rendering and lazy loading." },
+  { icon: "🎨", title: "Beautiful by Default", description: "Opinionated design tokens ensure consistency across your app." },
+  { icon: "♿", title: "Accessible", description: "WCAG compliant components that work for everyone." },
+];
+</script>
+
+<template>
+  <div class="font-sans">
+    <!-- Hero -->
+    <section class="text-center py-24 px-8 max-w-3xl mx-auto">
+      <Badge variant="secondary" class="mb-6">Now in Beta</Badge>
+      <h1 class="font-heading text-5xl lg:text-7xl leading-tight font-bold mb-6">
+        Build something<br>people remember
+      </h1>
+      <p class="text-lg text-muted-foreground max-w-xl mx-auto mb-8 leading-relaxed">
+        A short, compelling description of what the product does and why it matters.
+      </p>
+      <div class="flex gap-3 justify-center">
+        <Button size="lg">Get Started</Button>
+        <Button size="lg" variant="outline">Learn More</Button>
+      </div>
+    </section>
+
+    <Separator />
+
+    <!-- Features Grid -->
+    <section class="py-16 px-8 max-w-5xl mx-auto">
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        <Card v-for="feature in features" :key="feature.title">
+          <CardContent>
+            <div class="text-3xl mb-3">{{ feature.icon }}</div>
+            <h3 class="font-semibold mb-2">{{ feature.title }}</h3>
+            <p class="text-muted-foreground text-sm leading-relaxed">
+              {{ feature.description }}
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    </section>
+  </div>
+</template>
+```
+
+---
+
+## Profile / Account Page
+
+Header with avatar + tabs for different sections.
+
+```vue
+<script setup>
+import { ref } from "vue";
+import {
+  Avatar, AvatarImage, AvatarFallback, Button,
+  Tabs, TabsList, TabsTrigger, TabsContent,
+} from "@empathyds/vue";
+
+const user = ref({
+  name: "Jane Doe",
+  email: "jane@company.com",
+  initials: "JD",
+  avatar: "",
+});
+</script>
+
+<template>
+  <div class="max-w-3xl mx-auto p-8">
+    <!-- Profile Header -->
+    <div class="flex items-center gap-6 mb-8">
+      <Avatar class="w-20 h-20 text-2xl">
+        <AvatarImage :src="user.avatar" />
+        <AvatarFallback>{{ user.initials }}</AvatarFallback>
+      </Avatar>
+      <div>
+        <h1 class="text-2xl font-bold">{{ user.name }}</h1>
+        <p class="text-muted-foreground">{{ user.email }}</p>
+      </div>
+      <Button variant="outline" class="ml-auto">Edit Profile</Button>
+    </div>
+
+    <!-- Tabbed Content -->
+    <Tabs default-value="overview">
+      <TabsList>
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="activity">Activity</TabsTrigger>
+        <TabsTrigger value="billing">Billing</TabsTrigger>
+      </TabsList>
+      <TabsContent value="overview" class="mt-6">
+        <!-- Overview cards -->
+      </TabsContent>
+      <TabsContent value="activity" class="mt-6">
+        <!-- Activity feed -->
+      </TabsContent>
+      <TabsContent value="billing" class="mt-6">
+        <!-- Billing info -->
+      </TabsContent>
+    </Tabs>
+  </div>
+</template>
+```
+
+---
+
+## Tips for Beautiful Output
+
+1. **Custom fonts matter.** Load a distinctive font pair via Google Fonts and apply with Tailwind's `font-heading` / `font-sans` classes.
+2. **Color consistency.** Use Empathy DS design tokens (`bg-primary`, `text-muted-foreground`, `border-border`) throughout.
+3. **Whitespace is design.** When in doubt, add more `p-`, `m-`, and `gap-` values.
+4. **Transitions everywhere.** Add `transition-all duration-150 ease-in-out` to interactive elements.
+5. **Hover states.** Every clickable element needs `hover:` utilities for visual feedback.
+6. **Border radius consistency.** Pick one and use it (`rounded-lg` or `rounded-xl`).
+7. **Muted text for secondary info.** Use `text-muted-foreground` liberally.
+8. **Never use inline styles.** Always use Tailwind utility classes.

package/skill/references/component-api.md

@@ -0,0 +1,374 @@
+# Component API Reference
+
+Quick-reference for Empathy DS component props, slots, and usage. All imports from `@empathyds/vue`.
+
+## Table of Contents
+- [Button](#button)
+- [Card](#card)
+- [Input & Forms](#input--forms)
+- [Select](#select)
+- [Table](#table)
+- [Dialog & Drawer](#dialog--drawer)
+- [Tabs](#tabs)
+- [Alert](#alert)
+- [Badge](#badge)
+- [Avatar](#avatar)
+- [Navigation Menu](#navigation-menu)
+- [Sidebar](#sidebar)
+- [Accordion](#accordion)
+- [Toast (Sonner)](#toast-sonner)
+- [Tooltip & Popover](#tooltip--popover)
+- [Progress & Skeleton](#progress--skeleton)
+- [Chart](#chart)
+
+---
+
+## Button
+
+```vue
+<script setup>
+import { Button } from "@empathyds/vue";
+</script>
+<template>
+  <Button variant="default" size="default">Click me</Button>
+</template>
+```
+
+| Prop | Values | Default |
+|------|--------|---------|
+| `variant` | `default`, `destructive`, `outline`, `secondary`, `ghost`, `link` | `default` |
+| `size` | `default`, `sm`, `lg`, `icon` | `default` |
+| `disabled` | `boolean` | `false` |
+| `as-child` | `boolean` | `false` |
+
+**ButtonGroup**: Wrap multiple Buttons in `<ButtonGroup>` for connected button sets.
+
+## Card
+
+```vue
+<script setup>
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@empathyds/vue";
+</script>
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle>Title</CardTitle>
+      <CardDescription>Optional description text</CardDescription>
+    </CardHeader>
+    <CardContent>
+      Content goes here
+    </CardContent>
+    <CardFooter>
+      <Button>Action</Button>
+    </CardFooter>
+  </Card>
+</template>
+```
+
+Sub-components: `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`.
+
+## Input & Forms
+
+```vue
+<script setup>
+import { ref } from "vue";
+import { Form, Field, Label, Input, Textarea, Checkbox, Switch, RadioGroup, RadioGroupItem } from "@empathyds/vue";
+
+const email = ref("");
+const agreed = ref(false);
+</script>
+<template>
+  <Form @submit.prevent="handleSubmit">
+    <Field>
+      <Label for="email">Email</Label>
+      <Input id="email" v-model="email" type="email" placeholder="you@example.com" />
+    </Field>
+
+    <Field class="flex items-center gap-2">
+      <Checkbox id="terms" v-model:checked="agreed" />
+      <Label for="terms">I agree to terms</Label>
+    </Field>
+
+    <Button type="submit">Submit</Button>
+  </Form>
+</template>
+```
+
+**Input props**: `type`, `placeholder`, `disabled`, `modelValue` (use `v-model`)
+**Textarea props**: `placeholder`, `rows`, `disabled`, `modelValue`
+**NumberField**: Numeric input with increment/decrement controls
+**PinInput**: OTP-style segmented input
+**TagsInput**: Multi-value tag entry
+**InputGroup**: Group an Input with prefix/suffix elements
+
+## Select
+
+```vue
+<script setup>
+import { ref } from "vue";
+import {
+  Select, SelectTrigger, SelectValue, SelectContent, SelectGroup,
+  SelectLabel, SelectItem, SelectSeparator
+} from "@empathyds/vue";
+
+const fruit = ref("");
+</script>
+<template>
+  <Select v-model="fruit">
+    <SelectTrigger class="w-[200px]">
+      <SelectValue placeholder="Pick a fruit" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectGroup>
+        <SelectLabel>Fruits</SelectLabel>
+        <SelectItem value="apple">Apple</SelectItem>
+        <SelectItem value="banana">Banana</SelectItem>
+        <SelectItem value="cherry">Cherry</SelectItem>
+      </SelectGroup>
+    </SelectContent>
+  </Select>
+</template>
+```
+
+## Table
+
+```vue
+<script setup>
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@empathyds/vue";
+</script>
+<template>
+  <Table>
+    <TableHeader>
+      <TableRow>
+        <TableHead>Name</TableHead>
+        <TableHead>Status</TableHead>
+        <TableHead class="text-right">Amount</TableHead>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      <TableRow v-for="item in items" :key="item.id">
+        <TableCell class="font-medium">{{ item.name }}</TableCell>
+        <TableCell>{{ item.status }}</TableCell>
+        <TableCell class="text-right">{{ item.amount }}</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+</template>
+```
+
+## Dialog & Drawer
+
+```vue
+<script setup>
+import {
+  Dialog, DialogTrigger, DialogContent, DialogHeader,
+  DialogTitle, DialogDescription, DialogFooter, DialogClose
+} from "@empathyds/vue";
+</script>
+<template>
+  <Dialog>
+    <DialogTrigger as-child>
+      <Button>Open Dialog</Button>
+    </DialogTrigger>
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>Are you sure?</DialogTitle>
+        <DialogDescription>This action cannot be undone.</DialogDescription>
+      </DialogHeader>
+      <DialogFooter>
+        <DialogClose as-child>
+          <Button variant="outline">Cancel</Button>
+        </DialogClose>
+        <Button>Confirm</Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
+```
+
+**Drawer** follows same pattern: `Drawer`, `DrawerTrigger`, `DrawerContent`, `DrawerHeader`, `DrawerTitle`, `DrawerDescription`, `DrawerFooter`, `DrawerClose`. Slides in from bottom/side.
+
+**Sheet** is similar to Drawer: `Sheet`, `SheetTrigger`, `SheetContent`, `SheetHeader`, `SheetTitle`, `SheetDescription`, `SheetFooter`, `SheetClose`. Use `side` prop on SheetContent: `"top"`, `"right"`, `"bottom"`, `"left"`.
+
+## Tabs
+
+```vue
+<script setup>
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@empathyds/vue";
+</script>
+<template>
+  <Tabs default-value="overview">
+    <TabsList>
+      <TabsTrigger value="overview">Overview</TabsTrigger>
+      <TabsTrigger value="analytics">Analytics</TabsTrigger>
+      <TabsTrigger value="settings">Settings</TabsTrigger>
+    </TabsList>
+    <TabsContent value="overview">Overview content</TabsContent>
+    <TabsContent value="analytics">Analytics content</TabsContent>
+    <TabsContent value="settings">Settings content</TabsContent>
+  </Tabs>
+</template>
+```
+
+## Alert
+
+```vue
+<script setup>
+import { Alert, AlertTitle, AlertDescription } from "@empathyds/vue";
+</script>
+<template>
+  <Alert variant="destructive">
+    <AlertTitle>Error</AlertTitle>
+    <AlertDescription>Something went wrong.</AlertDescription>
+  </Alert>
+</template>
+```
+
+| Prop | Values |
+|------|--------|
+| `variant` | `default`, `destructive` |
+
+**AlertDialog**: Modal confirmation dialog. Uses `AlertDialog`, `AlertDialogTrigger`, `AlertDialogContent`, `AlertDialogHeader`, `AlertDialogTitle`, `AlertDialogDescription`, `AlertDialogFooter`, `AlertDialogAction`, `AlertDialogCancel`.
+
+## Badge
+
+```vue
+<script setup>
+import { Badge } from "@empathyds/vue";
+</script>
+<template>
+  <Badge variant="default">Active</Badge>
+  <Badge variant="secondary">Pending</Badge>
+  <Badge variant="destructive">Failed</Badge>
+  <Badge variant="outline">Draft</Badge>
+</template>
+```
+
+## Avatar
+
+```vue
+<script setup>
+import { Avatar, AvatarImage, AvatarFallback } from "@empathyds/vue";
+</script>
+<template>
+  <Avatar>
+    <AvatarImage src="https://example.com/photo.jpg" alt="User" />
+    <AvatarFallback>JD</AvatarFallback>
+  </Avatar>
+</template>
+```
+
+## Navigation Menu
+
+```vue
+<script setup>
+import {
+  NavigationMenu, NavigationMenuList, NavigationMenuItem,
+  NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink
+} from "@empathyds/vue";
+</script>
+<template>
+  <NavigationMenu>
+    <NavigationMenuList>
+      <NavigationMenuItem>
+        <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
+        <NavigationMenuContent>
+          <NavigationMenuLink href="/docs">Documentation</NavigationMenuLink>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+    </NavigationMenuList>
+  </NavigationMenu>
+</template>
+```
+
+## Sidebar
+
+Use `Sidebar`, `SidebarHeader`, `SidebarContent`, `SidebarFooter`, `SidebarGroup`, `SidebarGroupLabel`, `SidebarGroupContent`, `SidebarMenu`, `SidebarMenuItem`, `SidebarMenuButton`.
+
+## Accordion
+
+```vue
+<script setup>
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@empathyds/vue";
+</script>
+<template>
+  <Accordion type="single" collapsible>
+    <AccordionItem value="item-1">
+      <AccordionTrigger>Section 1</AccordionTrigger>
+      <AccordionContent>Content for section 1</AccordionContent>
+    </AccordionItem>
+  </Accordion>
+</template>
+```
+
+## Toast (Sonner)
+
+```vue
+<script setup>
+import { Toaster } from "@empathyds/vue";
+import { toast } from "sonner";
+
+function showToast() {
+  toast.success("Changes saved!");
+}
+</script>
+<template>
+  <Toaster />
+  <Button @click="showToast">Save</Button>
+</template>
+```
+
+Place `<Toaster />` once at root level. Use `toast()`, `toast.success()`, `toast.error()`, `toast.warning()`, `toast.info()`.
+
+## Tooltip & Popover
+
+```vue
+<script setup>
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@empathyds/vue";
+</script>
+<template>
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <Button variant="ghost">Hover me</Button>
+      </TooltipTrigger>
+      <TooltipContent>Helpful tooltip text</TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+</template>
+```
+
+**Popover**: Same pattern with `Popover`, `PopoverTrigger`, `PopoverContent`. Stays open on click.
+**HoverCard**: `HoverCard`, `HoverCardTrigger`, `HoverCardContent`. Shows on hover with richer content.
+
+## Progress & Skeleton
+
+```vue
+<Progress :model-value="66" />
+
+<Skeleton class="w-[200px] h-4" />
+<Skeleton class="w-full h-16 rounded-lg" />
+```
+
+## Chart
+
+Chart component wraps a charting library. Import `Chart` and pass data/config props. Refer to https://empathyds.com/components/chart for detailed configuration options.
+
+---
+
+## Other Components
+
+- **Breadcrumb**: `Breadcrumb`, `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbSeparator`, `BreadcrumbPage`
+- **Carousel**: `Carousel`, `CarouselContent`, `CarouselItem`, `CarouselPrevious`, `CarouselNext`
+- **Calendar**: `Calendar`, `RangeCalendar` — date picking components
+- **Collapsible**: `Collapsible`, `CollapsibleTrigger`, `CollapsibleContent`
+- **Command**: `Command`, `CommandInput`, `CommandList`, `CommandEmpty`, `CommandGroup`, `CommandItem` — command palette / search
+- **ContextMenu**: `ContextMenu`, `ContextMenuTrigger`, `ContextMenuContent`, `ContextMenuItem`
+- **DropdownMenu**: `DropdownMenu`, `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuItem`, `DropdownMenuSeparator`, `DropdownMenuLabel`
+- **Menubar**: Full menu bar component system
+- **Pagination**: `Pagination`, `PaginationList`, `PaginationPrev`, `PaginationNext`
+- **Resizable**: `ResizablePanelGroup`, `ResizablePanel`, `ResizableHandle`
+- **ScrollArea**: `ScrollArea`, `ScrollBar` — custom scrollbars
+- **Slider**: Range slider input
+- **Stepper**: Multi-step wizard component
+- **Toggle / ToggleGroup**: On/off toggle buttons