updates

9 files changed, 1369 insertions, 0 deletions

diff --git a/ui/shadcn/.claude/commands/add-component.md b/ui/shadcn/.claude/commands/add-component.md
new file mode 100644
index 0000000..64652fd
--- /dev/null
+++ b/ui/shadcn/.claude/commands/add-component.md
@@ -0,0 +1,53 @@
+---
+description: Add shadcn/ui components to your project
+argument-hint: "[component-names...]"
+allowed-tools: Bash, Read, Write
+---
+
+Add one or more shadcn/ui components to your project.
+
+## Instructions
+
+1. Check if shadcn/ui is initialized in the project
+2. If not initialized, suggest running `npx shadcn@latest init` first
+3. For each component requested:
+   - Run `npx shadcn@latest add [component]`
+   - Verify component was added successfully
+   - Check for any peer dependencies
+4. If components have dependencies on each other, install in correct order
+5. Provide usage examples for the installed components
+
+## Component Dependencies
+
+Some components depend on others:
+- `form` requires `button`, `label`, `input`
+- `data-table` requires `table`, `button`, `dropdown-menu`, `input`
+- `date-picker` requires `button`, `calendar`, `popover`
+- `combobox` requires `command`, `popover`, `button`
+
+## Common Components
+
+**Layout**: card, separator, aspect-ratio, scroll-area
+**Forms**: input, label, button, select, checkbox, radio-group, switch, textarea, form
+**Overlays**: dialog, alert-dialog, sheet, popover, tooltip, hover-card
+**Navigation**: navigation-menu, tabs, breadcrumb, pagination
+**Data**: table, data-table, badge, avatar, progress
+**Feedback**: alert, toast, skeleton, sonner
+
+## Arguments
+
+- Component names separated by spaces: `button card dialog`
+- Or use `--all` to add all available components
+
+## Example
+
+If the user says: `/add-component form select date-picker`
+
+Execute:
+```bash
+npx shadcn@latest add form
+npx shadcn@latest add select  
+npx shadcn@latest add date-picker
+```
+
+Then provide usage examples for each component added.
\ No newline at end of file
diff --git a/ui/shadcn/.claude/commands/add.md b/ui/shadcn/.claude/commands/add.md
new file mode 100644
index 0000000..353b229
--- /dev/null
+++ b/ui/shadcn/.claude/commands/add.md
@@ -0,0 +1,17 @@
+---
+description: Add shadcn/ui component to project
+argument-hint: "[component-name] [variant]"
+allowed-tools: Bash, Read, Write, Edit
+---
+
+Add shadcn/ui component: $ARGUMENTS
+
+Steps:
+1. Check if components.json exists
+2. Install the specified component using shadcn CLI
+3. Update imports and dependencies if needed
+4. Show component usage examples
+
+Available components: button, card, dialog, form, input, label, select, table, toast, etc.
+
+Example: `/add button` or `/add dialog form`
diff --git a/ui/shadcn/.claude/commands/analyze-accessibility.md b/ui/shadcn/.claude/commands/analyze-accessibility.md
new file mode 100644
index 0000000..1faadf9
--- /dev/null
+++ b/ui/shadcn/.claude/commands/analyze-accessibility.md
@@ -0,0 +1,172 @@
+---
+description: Run accessibility audit on components
+argument-hint: "[component-path]"
+allowed-tools: Read, Bash, WebFetch
+---
+
+Analyze components for accessibility issues and provide recommendations.
+
+## Instructions
+
+1. If no path specified, analyze all components in `components/ui/`
+2. Check for common accessibility issues
+3. Verify WCAG 2.1 AA compliance
+4. Provide specific recommendations for fixes
+5. Generate accessibility report
+
+## Checks to Perform
+
+### HTML Semantics
+- [ ] Proper heading hierarchy (h1 → h2 → h3)
+- [ ] Semantic HTML elements used appropriately
+- [ ] Lists use ul/ol with li elements
+- [ ] Buttons vs links used correctly
+
+### ARIA Implementation
+- [ ] Required ARIA attributes present
+- [ ] ARIA roles used appropriately
+- [ ] aria-label or aria-labelledby for interactive elements
+- [ ] aria-describedby for additional context
+- [ ] Live regions for dynamic content
+
+### Keyboard Navigation
+- [ ] All interactive elements keyboard accessible
+- [ ] Tab order is logical
+- [ ] Focus indicators visible
+- [ ] Escape key closes modals/popups
+- [ ] Arrow keys work in menus/lists
+
+### Forms
+- [ ] All inputs have associated labels
+- [ ] Required fields marked with aria-required
+- [ ] Error messages associated with inputs
+- [ ] Form validation accessible
+
+### Images & Media
+- [ ] Images have alt text
+- [ ] Decorative images have empty alt=""
+- [ ] Videos have captions/transcripts
+- [ ] Audio has transcripts
+
+### Color & Contrast
+- [ ] Text contrast ratio ≥ 4.5:1 (normal text)
+- [ ] Text contrast ratio ≥ 3:1 (large text)
+- [ ] Focus indicators have sufficient contrast
+- [ ] Information not conveyed by color alone
+
+### Motion & Animation
+- [ ] Respects prefers-reduced-motion
+- [ ] Animations can be paused/stopped
+- [ ] No flashing content (seizure risk)
+
+## Automated Testing
+
+Install and run automated tools:
+```bash
+# Install testing dependencies
+npm install -D @axe-core/react jest-axe
+
+# Run axe-core tests
+npx axe <url>
+
+# Use React Testing Library
+npm test -- --coverage
+```
+
+## Manual Testing Checklist
+
+1. **Keyboard Only Navigation**
+   - Disconnect mouse
+   - Navigate using Tab, Shift+Tab, Enter, Space, Arrows, Escape
+   - Verify all features accessible
+
+2. **Screen Reader Testing**
+   - NVDA (Windows)
+   - JAWS (Windows)
+   - VoiceOver (macOS: Cmd+F5)
+   - Verify content makes sense when read aloud
+
+3. **Browser Extensions**
+   - axe DevTools
+   - WAVE (WebAIM)
+   - Lighthouse (Chrome DevTools)
+
+4. **Visual Testing**
+   - 200% zoom level
+   - High contrast mode
+   - Grayscale mode
+   - Disable CSS
+
+## Report Format
+
+```markdown
+# Accessibility Audit Report
+
+## Summary
+- Components analyzed: X
+- Critical issues: X
+- Warnings: X
+- Passed checks: X
+
+## Critical Issues
+1. **[Component]**: [Issue description]
+   - Impact: [High/Medium/Low]
+   - Fix: [Specific recommendation]
+
+## Warnings
+1. **[Component]**: [Warning description]
+   - Recommendation: [Improvement suggestion]
+
+## Passed Checks
+- ✓ Keyboard navigation working
+- ✓ ARIA attributes present
+- ✓ Color contrast sufficient
+
+## Recommendations
+1. Immediate fixes needed for...
+2. Consider improving...
+3. Best practices to adopt...
+```
+
+## Common Fixes
+
+### Missing Labels
+```tsx
+// ❌ Bad
+<input type="text" />
+
+// ✅ Good
+<label htmlFor="email">Email</label>
+<input id="email" type="text" />
+```
+
+### Focus Management
+```tsx
+// Add focus trap for modals
+import { FocusTrap } from '@radix-ui/react-focus-trap'
+
+<FocusTrap>
+  <DialogContent>...</DialogContent>
+</FocusTrap>
+```
+
+### Screen Reader Announcements
+```tsx
+// Live region for dynamic content
+<div role="status" aria-live="polite" aria-atomic="true">
+  {message}
+</div>
+```
+
+## Example
+
+If the user says: `/analyze-accessibility`
+
+1. Scan all components in components/ui/
+2. Check each component against accessibility checklist
+3. Run automated tests if available
+4. Generate detailed report with:
+   - Issues found
+   - Specific fixes needed
+   - Code examples
+   - Priority levels
\ No newline at end of file
diff --git a/ui/shadcn/.claude/commands/create-data-table.md b/ui/shadcn/.claude/commands/create-data-table.md
new file mode 100644
index 0000000..cd1273b
--- /dev/null
+++ b/ui/shadcn/.claude/commands/create-data-table.md
@@ -0,0 +1,231 @@
+---
+description: Create an advanced data table with sorting, filtering, and pagination
+argument-hint: <table-name>
+allowed-tools: Read, Write, Bash
+---
+
+Create a fully-featured data table using TanStack Table and shadcn/ui components.
+
+## Instructions
+
+1. Install required dependencies:
+   - `@tanstack/react-table`
+   - Required shadcn components: `table`, `button`, `input`, `dropdown-menu`
+
+2. Create data table with features:
+   - Column definitions with proper types
+   - Sorting functionality
+   - Filtering (global and column)
+   - Pagination
+   - Row selection
+   - Column visibility toggle
+   - Export functionality (optional)
+
+## Template Structure
+
+```tsx
+// components/[table-name]/columns.tsx
+import { ColumnDef } from "@tanstack/react-table"
+import { Button } from "@/components/ui/button"
+import { ArrowUpDown, MoreHorizontal } from "lucide-react"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Checkbox } from "@/components/ui/checkbox"
+
+export type [DataType] = {
+  id: string
+  // Define data structure
+}
+
+export const columns: ColumnDef<[DataType]>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={table.getIsAllPageRowsSelected()}
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "field",
+    header: ({ column }) => (
+      <Button
+        variant="ghost"
+        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+      >
+        Field Name
+        <ArrowUpDown className="ml-2 h-4 w-4" />
+      </Button>
+    ),
+    cell: ({ row }) => <div>{row.getValue("field")}</div>,
+  },
+  {
+    id: "actions",
+    cell: ({ row }) => {
+      const item = row.original
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="h-8 w-8 p-0">
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+            <DropdownMenuItem>Edit</DropdownMenuItem>
+            <DropdownMenuItem>Delete</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    },
+  },
+]
+
+// components/[table-name]/data-table.tsx
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { DataTableViewOptions } from "./data-table-view-options"
+import { DataTablePagination } from "./data-table-pagination"
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[]
+  data: TData[]
+  searchKey?: string
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  searchKey,
+}: DataTableProps<TData, TValue>) {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+  })
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        {searchKey && (
+          <Input
+            placeholder={`Filter by ${searchKey}...`}
+            value={(table.getColumn(searchKey)?.getFilterValue() as string) ?? ""}
+            onChange={(event) =>
+              table.getColumn(searchKey)?.setFilterValue(event.target.value)
+            }
+            className="max-w-sm"
+          />
+        )}
+        <DataTableViewOptions table={table} />
+      </div>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <DataTablePagination table={table} />
+    </div>
+  )
+}
+```
+
+## Features to Include
+
+- **Sorting**: Click column headers to sort
+- **Filtering**: Global search and column filters
+- **Pagination**: Navigate through pages
+- **Selection**: Select individual or all rows
+- **Column Visibility**: Show/hide columns
+- **Row Actions**: Edit, delete, view details
+- **Export**: CSV/Excel export
+- **Responsive**: Mobile-friendly view
+
+## Example
+
+If the user says: `/create-data-table users`
+
+1. Install dependencies:
+```bash
+npm install @tanstack/react-table
+npx shadcn@latest add table button input dropdown-menu checkbox
+```
+
+2. Create column definitions for users table
+3. Create data table component
+4. Add pagination component
+5. Add column visibility toggle
+6. Provide usage example
\ No newline at end of file
diff --git a/ui/shadcn/.claude/commands/create-variant.md b/ui/shadcn/.claude/commands/create-variant.md
new file mode 100644
index 0000000..03279b7
--- /dev/null
+++ b/ui/shadcn/.claude/commands/create-variant.md
@@ -0,0 +1,68 @@
+---
+description: Add a new variant to an existing shadcn/ui component
+argument-hint: <component-name> <variant-type>=<variant-name>
+allowed-tools: Read, Edit, MultiEdit
+---
+
+Add a new variant to an existing shadcn/ui component using CVA (class-variance-authority).
+
+## Instructions
+
+1. Locate the component file in `components/ui/[component].tsx`
+2. Find the existing CVA variants configuration
+3. Add the new variant to the appropriate variant type
+4. Update TypeScript types if needed
+5. Provide usage example of the new variant
+
+## Arguments
+
+- `component-name`: The component to modify (e.g., `button`, `card`)
+- `variant-type`: The type of variant (`variant`, `size`, or custom)
+- `variant-name`: The name of the new variant
+
+## Example
+
+If the user says: `/create-variant button size=xl`
+
+1. Open `components/ui/button.tsx`
+2. Find the `buttonVariants` CVA configuration
+3. Add to the `size` variants:
+
+```tsx
+const buttonVariants = cva(
+  "...",
+  {
+    variants: {
+      variant: { ... },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+        // NEW VARIANT
+        xl: "h-12 rounded-md px-10 text-lg",
+      },
+    },
+  }
+)
+```
+
+4. Show usage:
+```tsx
+<Button size="xl">Extra Large Button</Button>
+```
+
+## Common Variant Types
+
+- **variant**: Visual style (default, destructive, outline, secondary, ghost, link)
+- **size**: Component size (sm, default, lg, xl)
+- **state**: Interactive state (active, disabled, loading)
+- **theme**: Theme-specific (brand, success, warning, info)
+
+## Best Practices
+
+1. Keep variant names consistent across components
+2. Update TypeScript types when adding variants
+3. Test the variant with all other variant combinations
+4. Ensure accessibility is maintained
+5. Document the new variant in comments
\ No newline at end of file
diff --git a/ui/shadcn/.claude/commands/migrate-component.md b/ui/shadcn/.claude/commands/migrate-component.md
new file mode 100644
index 0000000..30f763f
--- /dev/null
+++ b/ui/shadcn/.claude/commands/migrate-component.md
@@ -0,0 +1,239 @@
+---
+description: Migrate existing component to shadcn/ui patterns
+argument-hint: <component-file>
+allowed-tools: Read, Write, Edit, MultiEdit, Bash
+---
+
+Convert an existing component to follow shadcn/ui patterns and best practices.
+
+## Instructions
+
+1. Analyze the existing component
+2. Identify required shadcn/ui dependencies
+3. Refactor to use:
+   - CVA for variants
+   - cn() for class merging
+   - Radix UI primitives (if applicable)
+   - Proper TypeScript types
+   - forwardRef pattern
+   - Accessibility attributes
+4. Maintain backward compatibility where possible
+5. Create migration guide
+
+## Migration Patterns
+
+### From Styled Components/Emotion
+```tsx
+// ❌ Before - Styled Components
+const StyledButton = styled.button`
+  background: ${props => props.primary ? 'blue' : 'gray'};
+  color: white;
+  padding: 10px 20px;
+  &:hover {
+    opacity: 0.8;
+  }
+`
+
+// ✅ After - shadcn/ui pattern
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2",
+  {
+    variants: {
+      variant: {
+        primary: "bg-blue-600 text-white hover:bg-blue-700",
+        secondary: "bg-gray-600 text-white hover:bg-gray-700",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+    },
+  }
+)
+
+const Button = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement> &
+    VariantProps<typeof buttonVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <button
+      ref={ref}
+      className={cn(buttonVariants({ variant, className }))}
+      {...props}
+    />
+  )
+})
+Button.displayName = "Button"
+```
+
+### From Material-UI/Ant Design
+```tsx
+// ❌ Before - MUI
+import { Button, TextField, Dialog } from '@mui/material'
+
+<Dialog open={open} onClose={handleClose}>
+  <DialogTitle>Title</DialogTitle>
+  <DialogContent>
+    <TextField label="Name" />
+  </DialogContent>
+  <DialogActions>
+    <Button onClick={handleClose}>Cancel</Button>
+  </DialogActions>
+</Dialog>
+
+// ✅ After - shadcn/ui
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Button } from "@/components/ui/button"
+
+<Dialog open={open} onOpenChange={setOpen}>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Title</DialogTitle>
+    </DialogHeader>
+    <div className="grid gap-4 py-4">
+      <div className="grid gap-2">
+        <Label htmlFor="name">Name</Label>
+        <Input id="name" />
+      </div>
+    </div>
+    <DialogFooter>
+      <Button variant="outline" onClick={() => setOpen(false)}>
+        Cancel
+      </Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+```
+
+### From Bootstrap/Traditional CSS
+```tsx
+// ❌ Before - Bootstrap classes
+<div className="card">
+  <div className="card-header">
+    <h5 className="card-title">Title</h5>
+  </div>
+  <div className="card-body">
+    <p className="card-text">Content</p>
+    <button className="btn btn-primary">Action</button>
+  </div>
+</div>
+
+// ✅ After - shadcn/ui
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+
+<Card>
+  <CardHeader>
+    <CardTitle>Title</CardTitle>
+  </CardHeader>
+  <CardContent>
+    <p>Content</p>
+  </CardContent>
+  <CardFooter>
+    <Button>Action</Button>
+  </CardFooter>
+</Card>
+```
+
+## Migration Checklist
+
+### Structure
+- [ ] Convert to functional component
+- [ ] Add forwardRef if needed
+- [ ] Add displayName
+- [ ] Export component and variants
+
+### Styling
+- [ ] Replace CSS-in-JS with Tailwind classes
+- [ ] Implement CVA for variants
+- [ ] Use cn() for class merging
+- [ ] Convert theme tokens to CSS variables
+
+### Types
+- [ ] Add proper TypeScript interfaces
+- [ ] Extend HTML element props
+- [ ] Add VariantProps type
+- [ ] Export types separately
+
+### Behavior
+- [ ] Replace UI library with Radix primitives
+- [ ] Add asChild support if applicable
+- [ ] Implement controlled/uncontrolled patterns
+- [ ] Add proper event handlers
+
+### Accessibility
+- [ ] Add ARIA attributes
+- [ ] Ensure keyboard navigation
+- [ ] Add focus management
+- [ ] Include screen reader support
+
+## Common Replacements
+
+| Old Library | shadcn/ui Replacement |
+|------------|----------------------|
+| MUI Button | Button with variants |
+| Ant Select | Select with Radix |
+| Bootstrap Modal | Dialog component |
+| Chakra Menu | DropdownMenu |
+| Semantic UI Form | Form with React Hook Form |
+
+## Migration Guide Template
+
+```markdown
+# Migration Guide: [ComponentName]
+
+## Breaking Changes
+- Changed prop: `color` → `variant`
+- Removed prop: `size="medium"` (now default)
+- New required prop: `asChild` for composition
+
+## API Changes
+```tsx
+// Before
+<OldComponent color="primary" size="large" />
+
+// After
+<NewComponent variant="default" size="lg" />
+```
+
+## Styling Changes
+- Uses Tailwind classes instead of CSS modules
+- Theme variables now use CSS custom properties
+- Dark mode handled automatically
+
+## Usage Examples
+[Provide before/after examples]
+```
+
+## Example
+
+If the user says: `/migrate-component components/CustomButton.jsx`
+
+1. Read and analyze CustomButton.jsx
+2. Identify styling system used
+3. Create new button following shadcn patterns:
+   - Add CVA variants
+   - Convert styles to Tailwind
+   - Add proper TypeScript types
+   - Include forwardRef
+4. Test compatibility
+5. Provide migration guide
\ No newline at end of file
diff --git a/ui/shadcn/.claude/commands/optimize-bundle.md b/ui/shadcn/.claude/commands/optimize-bundle.md
new file mode 100644
index 0000000..3a820f3
--- /dev/null
+++ b/ui/shadcn/.claude/commands/optimize-bundle.md
@@ -0,0 +1,220 @@
+---
+description: Analyze and optimize bundle size
+argument-hint: 
+allowed-tools: Bash, Read, Edit, MultiEdit
+---
+
+Analyze bundle size and optimize for production.
+
+## Instructions
+
+1. Run bundle analysis
+2. Identify large dependencies
+3. Find unused code
+4. Implement optimization strategies
+5. Generate optimization report
+
+## Analysis Tools
+
+### Next.js
+```bash
+# Install bundle analyzer
+npm install -D @next/bundle-analyzer
+
+# Configure next.config.js
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+})
+
+module.exports = withBundleAnalyzer({
+  // your config
+})
+
+# Run analysis
+ANALYZE=true npm run build
+```
+
+### Vite
+```bash
+# Install rollup plugin
+npm install -D rollup-plugin-visualizer
+
+# Add to vite.config.ts
+import { visualizer } from 'rollup-plugin-visualizer'
+
+plugins: [
+  visualizer({
+    open: true,
+    gzipSize: true,
+    brotliSize: true,
+  })
+]
+
+# Run build
+npm run build
+```
+
+### General
+```bash
+# webpack-bundle-analyzer
+npm install -D webpack-bundle-analyzer
+
+# source-map-explorer
+npm install -D source-map-explorer
+npm run build
+npx source-map-explorer 'build/static/js/*.js'
+```
+
+## Optimization Strategies
+
+### 1. Code Splitting
+```tsx
+// Dynamic imports
+const HeavyComponent = lazy(() => import('./HeavyComponent'))
+
+// Route-based splitting (Next.js)
+export default function Page() {
+  return <div>Auto code-split by route</div>
+}
+
+// Conditional loading
+if (userNeedsFeature) {
+  const module = await import('./feature')
+  module.initialize()
+}
+```
+
+### 2. Tree Shaking
+```tsx
+// ❌ Bad - imports entire library
+import _ from 'lodash'
+
+// ✅ Good - imports only what's needed
+import debounce from 'lodash/debounce'
+
+// For shadcn/ui - already optimized!
+// Components are copied, not imported from package
+```
+
+### 3. Component Optimization
+```tsx
+// Memoize expensive components
+const MemoizedComponent = memo(ExpensiveComponent)
+
+// Lazy load heavy components
+const Chart = lazy(() => import('./Chart'))
+
+<Suspense fallback={<Skeleton />}>
+  <Chart />
+</Suspense>
+```
+
+### 4. Asset Optimization
+```tsx
+// Next.js Image optimization
+import Image from 'next/image'
+
+<Image
+  src="/hero.jpg"
+  width={1200}
+  height={600}
+  priority
+  alt="Hero"
+/>
+
+// Font optimization
+import { Inter } from 'next/font/google'
+
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+})
+```
+
+### 5. Dependency Optimization
+```json
+// Use lighter alternatives
+{
+  "dependencies": {
+    // "moment": "^2.29.0", // 67kb
+    "date-fns": "^2.29.0", // 13kb (tree-shakeable)
+    
+    // "lodash": "^4.17.0", // 71kb
+    "lodash-es": "^4.17.0", // Tree-shakeable
+  }
+}
+```
+
+### 6. Tailwind CSS Optimization
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    // Be specific to avoid scanning unnecessary files
+    './app/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+  ],
+  // Remove unused styles in production
+  purge: process.env.NODE_ENV === 'production' ? [
+    './app/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+  ] : [],
+}
+```
+
+## Optimization Checklist
+
+- [ ] Enable production mode
+- [ ] Remove console.logs and debug code
+- [ ] Minify JavaScript and CSS
+- [ ] Enable gzip/brotli compression
+- [ ] Optimize images (WebP, AVIF)
+- [ ] Lazy load non-critical resources
+- [ ] Use CDN for static assets
+- [ ] Implement caching strategies
+- [ ] Remove unused dependencies
+- [ ] Tree shake imports
+
+## Report Format
+
+```markdown
+# Bundle Optimization Report
+
+## Current Stats
+- Total bundle size: XXXkb
+- Gzipped size: XXXkb
+- Largest chunks: [...]
+
+## Issues Found
+1. Large dependency: [package] (XXXkb)
+2. Duplicate code in: [files]
+3. Unused exports in: [modules]
+
+## Optimizations Applied
+1. ✅ Code split [component]
+2. ✅ Lazy loaded [routes]
+3. ✅ Replaced [heavy-lib] with [light-lib]
+
+## Results
+- Bundle size reduced by: XX%
+- Initial load improved by: XXms
+- Lighthouse score: XX → XX
+
+## Recommendations
+1. Consider replacing...
+2. Lazy load...
+3. Split chunk for...
+```
+
+## Example
+
+If the user says: `/optimize-bundle`
+
+1. Analyze current bundle size
+2. Identify optimization opportunities:
+   - Large dependencies to replace
+   - Components to lazy load
+   - Unused code to remove
+3. Implement optimizations
+4. Re-analyze and compare results
+5. Generate detailed report
\ No newline at end of file
diff --git a/ui/shadcn/.claude/commands/setup-dark-mode.md b/ui/shadcn/.claude/commands/setup-dark-mode.md
new file mode 100644
index 0000000..c9867b6
--- /dev/null
+++ b/ui/shadcn/.claude/commands/setup-dark-mode.md
@@ -0,0 +1,243 @@
+---
+description: Configure dark mode for your framework
+argument-hint: "[framework]"
+allowed-tools: Read, Write, Edit, Bash
+---
+
+Set up dark mode with theme switching for your specific framework.
+
+## Instructions
+
+Based on the framework detected or specified:
+1. Install required dependencies
+2. Set up theme provider
+3. Configure CSS variables
+4. Create theme toggle component
+5. Set up persistence (cookies/localStorage)
+
+## Framework Configurations
+
+### Next.js (App Router)
+```bash
+npm install next-themes
+```
+
+Create `components/theme-provider.tsx`:
+```tsx
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import { type ThemeProviderProps } from "next-themes/dist/types"
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
+```
+
+Wrap in `app/layout.tsx`:
+```tsx
+<ThemeProvider
+  attribute="class"
+  defaultTheme="system"
+  enableSystem
+  disableTransitionOnChange
+>
+  {children}
+</ThemeProvider>
+```
+
+### Vite
+Create `components/theme-provider.tsx`:
+```tsx
+import { createContext, useContext, useEffect, useState } from "react"
+
+type Theme = "dark" | "light" | "system"
+
+const ThemeProviderContext = createContext<{
+  theme: Theme
+  setTheme: (theme: Theme) => void
+}>({
+  theme: "system",
+  setTheme: () => null,
+})
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem("theme") as Theme) || "system"
+  )
+
+  useEffect(() => {
+    const root = window.document.documentElement
+    root.classList.remove("light", "dark")
+
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light"
+      root.classList.add(systemTheme)
+      return
+    }
+
+    root.classList.add(theme)
+  }, [theme])
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem("theme", theme)
+      setTheme(theme)
+    },
+  }
+
+  return (
+    <ThemeProviderContext.Provider value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  )
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext)
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider")
+  return context
+}
+```
+
+### Remix
+```bash
+npm install remix-themes
+```
+
+In `app/root.tsx`:
+```tsx
+import { themeSessionResolver } from "remix-themes"
+import {
+  PreventFlashOnWrongTheme,
+  ThemeProvider,
+  useTheme,
+} from "remix-themes"
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  const { getTheme } = await themeSessionResolver(request)
+  return { theme: getTheme() }
+}
+
+export default function App() {
+  const data = useLoaderData<typeof loader>()
+  const [theme] = useTheme()
+  
+  return (
+    <html lang="en" className={theme ?? ""}>
+      <head>
+        <PreventFlashOnWrongTheme ssrTheme={Boolean(data.theme)} />
+      </head>
+      <body>
+        <ThemeProvider
+          specifiedTheme={data.theme}
+          themeAction="/action/set-theme"
+        >
+          <Outlet />
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}
+```
+
+### Astro
+In layout file:
+```astro
+<script is:inline>
+  const theme = (() => {
+    if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+      return localStorage.getItem('theme')
+    }
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return 'dark'
+    }
+    return 'light'
+  })()
+
+  if (theme === 'light') {
+    document.documentElement.classList.remove('dark')
+  } else {
+    document.documentElement.classList.add('dark')
+  }
+  window.localStorage.setItem('theme', theme)
+</script>
+```
+
+## Theme Toggle Component
+
+Create `components/theme-toggle.tsx`:
+```tsx
+import { Moon, Sun } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { useTheme } from "@/components/theme-provider" // or "next-themes"
+
+export function ThemeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+```
+
+## CSS Configuration
+
+Ensure `globals.css` has:
+```css
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    /* ... other variables ... */
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    /* ... other variables ... */
+  }
+}
+```
+
+## Example
+
+If the user says: `/setup-dark-mode next`
+
+1. Install next-themes
+2. Create ThemeProvider component
+3. Wrap app in ThemeProvider
+4. Create ThemeToggle component
+5. Add to navigation/header
+6. Test theme switching
\ No newline at end of file
diff --git a/ui/shadcn/.claude/commands/setup-form.md b/ui/shadcn/.claude/commands/setup-form.md
new file mode 100644
index 0000000..068a80f
--- /dev/null
+++ b/ui/shadcn/.claude/commands/setup-form.md
@@ -0,0 +1,126 @@
+---
+description: Set up a form with React Hook Form and Zod validation
+argument-hint: <form-name>
+allowed-tools: Read, Write, Edit, Bash
+---
+
+Create a complete form setup with React Hook Form, Zod validation, and shadcn/ui form components.
+
+## Instructions
+
+1. Install required dependencies if not present:
+   - `react-hook-form`
+   - `@hookform/resolvers`
+   - `zod`
+   - Required shadcn components: `form`, `input`, `button`, etc.
+
+2. Create the form with:
+   - Zod schema for validation
+   - Form component with React Hook Form
+   - Proper error handling
+   - Loading states
+   - Success feedback
+
+## Template Structure
+
+```tsx
+// lib/validations/[form-name].ts
+import * as z from "zod"
+
+export const [formName]Schema = z.object({
+  // Define fields
+})
+
+export type [FormName]Values = z.infer<typeof [formName]Schema>
+
+// components/forms/[form-name]-form.tsx
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { [formName]Schema, type [FormName]Values } from "@/lib/validations/[form-name]"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { toast } from "@/components/ui/use-toast"
+
+export function [FormName]Form() {
+  const form = useForm<[FormName]Values>({
+    resolver: zodResolver([formName]Schema),
+    defaultValues: {
+      // Set defaults
+    },
+  })
+
+  async function onSubmit(data: [FormName]Values) {
+    try {
+      // Handle submission
+      toast({
+        title: "Success",
+        description: "Form submitted successfully",
+      })
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "Something went wrong",
+        variant: "destructive",
+      })
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        {/* Form fields */}
+        <Button 
+          type="submit" 
+          disabled={form.formState.isSubmitting}
+        >
+          {form.formState.isSubmitting ? "Submitting..." : "Submit"}
+        </Button>
+      </form>
+    </Form>
+  )
+}
+```
+
+## Common Form Types
+
+- **contact-form**: Name, email, message
+- **login-form**: Email/username, password
+- **register-form**: Name, email, password, confirm password
+- **profile-form**: Avatar, bio, social links
+- **settings-form**: Preferences, notifications
+- **checkout-form**: Billing, shipping, payment
+
+## Field Types to Consider
+
+- Text inputs (email, url, tel, password)
+- Textareas for long text
+- Select dropdowns
+- Radio groups
+- Checkboxes
+- Date pickers
+- File uploads
+- Number inputs with validation
+
+## Example
+
+If the user says: `/setup-form contact`
+
+1. Install dependencies:
+```bash
+npm install react-hook-form @hookform/resolvers zod
+npx shadcn@latest add form input textarea button
+```
+
+2. Create validation schema
+3. Create form component with name, email, message fields
+4. Add proper validation rules
+5. Include submit handler with loading state
\ No newline at end of file