diff --git a/.cursor/mcp.json b/.cursor/mcp.json
new file mode 100644
index 0000000..705d734
--- /dev/null
+++ b/.cursor/mcp.json
@@ -0,0 +1,10 @@
+{
+  "mcpServers": {
+    "shadcn": {
+      "command": "shadcn",
+      "args": [
+        "mcp"
+      ]
+    }
+  }
+}
\ No newline at end of file
diff --git a/.cursor/rules/architecture.mdc b/.cursor/rules/architecture.mdc
new file mode 100644
index 0000000..6566476
--- /dev/null
+++ b/.cursor/rules/architecture.mdc
@@ -0,0 +1,59 @@
+---
+description: Every time a new feature, file or folder has to be created
+alwaysApply: false
+---
+# Architecture Rules
+
+## Folder Structure
+
+Follow this exact structure for consistency:
+
+```
+src/
+├── app/                    # Next.js App Router (routes only)
+│   └── [locale]/           # Locale-based routing
+│       ├── (auth)/         # Route groups with parentheses
+│       ├── (dashboard)/
+│       └── layout.tsx      # Locale-specific layout
+├── components/             # Shared UI components (not route-specific)
+│   ├── ui/                 # Shadcn components
+│   ├── layout/             # Layout components (Header, Footer, Sidebar)
+│   ├── forms/              # Reusable form components
+├── features/               # Feature modules (feature-sliced architecture)
+│   └── {feature-name}/
+│       ├── api/            # API client functions
+│       ├── components/     # Feature-specific UI components
+│       ├── hooks/          # Feature-specific hooks
+│       ├── lib/            # Feature-specific utilities
+│       └── types/          # Feature-specific types
+├── lib/                    # Core utilities and infrastructure
+│   ├── api/                # API client (centralized)
+│   ├── i18n/               # Internationalization config
+│   ├── react-query/        # React Query provider
+│   ├── validation/         # Zod schemas and form helpers
+│   └── pwa/                # PWA utilities
+├── hooks/                  # Shared React hooks (not feature-specific)
+├── store/                  # Zustand stores (global state)
+├── types/                  # Global TypeScript types
+└── locales/                # Translation files (next-intl)
+```
+
+## Naming Conventions
+
+- **Folders**: camelCase for features/lib (`auth`, `apiClient`), kebab-case for routes
+- **Components**: PascalCase (`UserProfile.tsx`)
+- **Files**: camelCase for utilities/hooks (`useAuth.ts`), PascalCase for components
+- **Route groups**: Use parentheses `(auth)`, `(dashboard)` to organize without affecting URLs
+- **NO underscore prefixes** - Next.js App Router distinguishes routes via `(folderName)` syntax
+
+## Feature-Sliced Architecture
+
+Each feature in `features/` must be self-contained:
+
+- `api/` - API client functions for this feature
+- `components/` - Feature-specific UI components
+- `hooks/` - Feature-specific React hooks
+- `lib/` - Feature-specific utilities/logic
+- `types/` - Feature-specific TypeScript types
+
+**Principle**: Features should be independent and reusable. Import shared utilities from `lib/`, not from other features.
diff --git a/.cursor/rules/data-fetching.mdc b/.cursor/rules/data-fetching.mdc
new file mode 100644
index 0000000..0b41a06
--- /dev/null
+++ b/.cursor/rules/data-fetching.mdc
@@ -0,0 +1,129 @@
+---
+description: When working on anything related to API calls / data fetching
+alwaysApply: false
+---
+# Data Fetching & API Rules
+
+## Centralized API Client
+
+**ALWAYS use the centralized API client** from `@/lib/api/client`:
+
+```typescript
+// ✅ CORRECT: Use centralized client
+import { apiClient } from "@/lib/api";
+
+const response = await apiClient.post<RequestType, ResponseType>("/endpoint", data);
+```
+
+### API Client Features
+
+The `apiClient` automatically handles:
+- Authentication tokens (from Zustand auth store)
+- Error handling and 401 redirects
+- Request/response interceptors
+- Timeout handling
+- Base URL configuration
+
+### API Functions Location
+
+- **Feature-specific API functions**: `features/{feature}/api/`
+- **Use centralized client**: Import `apiClient` in feature API files
+- **Type safety**: Use TypeScript generics for request/response types
+
+```typescript
+// ✅ CORRECT: Feature API function
+// features/users/api/users.ts
+import { apiClient } from "@/lib/api";
+import type { User, CreateUserRequest } from "../types";
+
+export async function createUser(data: CreateUserRequest) {
+  return apiClient.post<CreateUserRequest, User>("/users", data);
+}
+```
+
+### Environment Variables
+
+- Use `NEXT_PUBLIC_API_BASE_URL` for API base URL
+- Defaults to `http://localhost:3001/api` if not set
+- API client reads from `API_BASE_URL` constant in `lib/constants/`
+
+## Type Generation
+
+- **Auto-generate types** from OpenAPI/GraphQL schema when available
+- Generated types go in `lib/api/generated/`
+- See `scripts/generate-api-types.md` for setup
+- **DO NOT manually write API types** if schema is available - generate them
+
+## Data Fetching Strategy
+
+Use a **hybrid approach** based on context:
+
+### Server Components (Default)
+
+**Use Server Components for:**
+- Initial page data
+- SEO-critical content
+- Public data that doesn't change frequently
+- Data that benefits from SSR
+
+```typescript
+// ✅ CORRECT: Fetch in Server Components for initial data
+export default async function Page() {
+  const posts = await apiClient.get("/posts");
+  return <PostsList posts={posts.data} />;
+}
+```
+
+### TanStack Query (Client Components)
+
+**Use TanStack Query for:**
+- User-specific data after hydration
+- Real-time updates
+- Optimistic updates
+- Data that needs caching/refetching
+- Interactive features
+
+```typescript
+// ✅ CORRECT: Use TanStack Query for dynamic/interactive data
+"use client";
+import { useQuery } from "@tanstack/react-query";
+import { apiClient } from "@/lib/api";
+
+export function UserProfile({ userId }: { userId: string }) {
+  const { data: user } = useQuery({
+    queryKey: ["user", userId],
+    queryFn: () => apiClient.get(`/users/${userId}`),
+  });
+  return <div>{user?.data?.name}</div>;
+}
+```
+
+**Decision Tree:**
+```
+Need data?
+├─ Initial page load? → Server Component
+├─ User-specific after login? → TanStack Query
+├─ Real-time updates? → TanStack Query
+├─ SEO-critical? → Server Component
+└─ Needs caching/refetching? → TanStack Query
+```
+
+**Implementation guides:**
+- Server Components: See `nextjs` skill
+- TanStack Query: See `tanstack-query` skill
+
+## Error Handling
+
+- **API functions**: Return structured `APIResponse<T>` with `success` and `error` fields
+- **Components/hooks**: Display errors, retry logic, fallback UI
+- Always check `response.success` before using `response.data`
+
+```typescript
+// ✅ CORRECT: Error handling pattern
+const response = await apiClient.get<User>("/user/me");
+if (response.success && response.data) {
+  // Use response.data
+} else {
+  // Handle response.error
+}
+```
\ No newline at end of file
diff --git a/.cursor/rules/general.mdc b/.cursor/rules/general.mdc
new file mode 100644
index 0000000..5d41587
--- /dev/null
+++ b/.cursor/rules/general.mdc
@@ -0,0 +1,53 @@
+---
+alwaysApply: true
+---
+
+# General Rules & Best Practices
+
+## Simplicity First
+
+Before implementing any solution, ask yourself:
+
+1. **Is there a simpler way?** - Can this be done with less code, fewer components, or fewer dependencies?
+2. **Can this be server-side?** - Server Components are simpler, faster, and better for SEO
+3. **Do I really need this?** - Is the complexity justified, or is there a built-in solution?
+
+**For complete problem-solving methodology**, see `problem-solving` skill.
+
+## Tech Stack
+
+- **Framework**: Next.js 16 with App Router
+- **Language**: TypeScript (strict mode), see `coding-standards` skill for best practices
+- **Package Manager**: pnpm
+- **UI Library**: Shadcn/ui components
+- **Styling**: Tailwind CSS v4
+
+## Core Libraries
+
+- **i18n**: next-intl
+- **Server State**: TanStack Query v5
+- **Client State**: Zustand
+- **Forms & Validation**: React Hook Form with Zod
+
+## File Organization
+
+- **Avoid barrel files** - Don't use `index.ts` that re-exports from multiple files
+- **Feature ownership** - Each feature in `features/` is self-contained
+
+### Manual Types
+
+- Global types in `src/types/` folder
+- Feature-specific types in `features/{feature}/types/`
+
+## Error Handling
+
+- Handle errors gracefully
+- Provide fallback UI for errors
+- Use error boundaries where appropriate
+- Log errors for debugging (use consistent logging strategy)
+
+## Testing
+
+- Use jest for unit and integration tests
+- Use React Testing Library for component tests
+- Use MSW for API mocking in tests
diff --git a/.cursor/rules/i18n.mdc b/.cursor/rules/i18n.mdc
new file mode 100644
index 0000000..6574668
--- /dev/null
+++ b/.cursor/rules/i18n.mdc
@@ -0,0 +1,66 @@
+---
+description: When adding or changing visible texts in the UI
+alwaysApply: false
+---
+# Internationalization Rules
+
+## i18n Library
+
+Use **next-intl** for all internationalization:
+
+## Locale Structure
+
+- **Locales folder**: `src/locales/{locale}/`
+- **Share common texts** Texts used across features live in `src/locales/{locale}/common.json`
+- **Organized by feature**: One translation file per language per feature, e.g. `src/locales/{locale}/{feature}.json`
+- **Supported locales**: defined in `lib/i18n/routing.ts`
+- **Route structure**: All routes under `app/[locale]/`
+
+## Usage Patterns
+
+### Server Components (Preferred)
+
+```typescript
+// ✅ CORRECT: Use getTranslations in Server Components
+import { getTranslations } from "next-intl/server";
+
+export default async function Page() {
+  const t = await getTranslations();
+  return <h1>{t("common.welcome")}</h1>;
+}
+```
+
+### Client Components
+
+```typescript
+// ✅ CORRECT: Use useTranslations in Client Components
+"use client";
+import { useTranslations } from "next-intl";
+
+export function Component() {
+  const t = useTranslations();
+  return <button>{t("common.save")}</button>;
+}
+```
+
+### Navigation
+
+```typescript
+// ✅ CORRECT: Use next-intl Link for locale-aware navigation
+import { Link } from "@/lib/i18n/routing";
+
+<Link href="/dashboard">Dashboard</Link>
+```
+
+## Middleware
+
+- Middleware handles locale detection and routing
+- Located at project root: `middleware.ts`
+- Automatically redirects to appropriate locale
+
+## Rules
+
+- **NEVER use Next.js `Link` directly** - use `@/lib/i18n/routing` Link
+- **Always use translation functions** - don't hardcode strings
+- **Add translations** - for all supported locales
+- **Use nested keys** - organize translations logically (`common.*`, `navigation.*`)
diff --git a/.cursor/rules/state-management.mdc b/.cursor/rules/state-management.mdc
new file mode 100644
index 0000000..07ffba4
--- /dev/null
+++ b/.cursor/rules/state-management.mdc
@@ -0,0 +1,60 @@
+---
+description: When working on components or otherwise dealing with state
+alwaysApply: false
+---
+# State Management Rules
+
+## State Management Strategy
+
+Use this hybrid approach for all state:
+
+### 1. TanStack Query (React Query) - Server State
+- Use for server/API data
+- Automatic caching, refetching, synchronization
+- Use in Client Components only
+- Preferred for user-specific data after hydration
+
+```typescript
+// ✅ CORRECT: Use TanStack Query for API data
+import { useQuery, useMutation } from "@tanstack/react-query";
+
+const { data } = useQuery({
+  queryKey: ["users", userId],
+  queryFn: () => fetchUser(userId),
+});
+```
+
+### 2. Zustand - Global Client State
+- Use for auth state, UI preferences, real-time features
+- Persist state when needed (use `persist` middleware)
+
+```typescript
+// ✅ CORRECT: Use Zustand for global client state
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+export const useAuthStore = create<AuthState>()(
+  persist((set) => ({ /* ... */ }), { name: "auth-storage" })
+);
+```
+
+### 3. React Context - App-Wide Providers Only
+- Use ONLY for truly app-wide providers (theme, i18n context)
+- Avoid for feature-specific state - use Zustand instead
+
+### 4. useState - Component-Scoped State
+- Use for component-only state that doesn't need sharing
+- Simple form state, UI toggles, etc.
+
+## Rules
+
+- **Server state goes in TanStack Query** - don't duplicate in Zustand
+- **Zustand stores must be in `src/store/` folder** - named as `{name}Store.ts`
+- **Use TanStack Query for optimistic updates** - not Zustand
+- **Persist auth state** - use Zustand's `persist` middleware
+- **Clear TanStack Query cache on logout** - use `queryClient.clear()`
+
+## Implementation Guides
+
+- **TanStack Query**: See `tanstack-query` skill for setup, patterns, and best practices
+- **Zustand**: See `zustand-state-management` skill for store creation, middleware, and Next.js SSR handling
\ No newline at end of file
diff --git a/.cursor/rules/testing.mdc b/.cursor/rules/testing.mdc
new file mode 100644
index 0000000..6e9f014
--- /dev/null
+++ b/.cursor/rules/testing.mdc
@@ -0,0 +1,37 @@
+---
+globs: **/*.test.*
+alwaysApply: false
+---
+# Testing Guidelines
+
+## Test Best Practices
+- Write clear, focused tests that verify one behavior at a time
+- Tests should fail for the right reason - verify they catch the bugs they're meant to catch
+- Avoid testing implementation details such as the presence of a CSS class or DOM structure; focus on behavior and outcomes.
+- Trivial test cases such as the component being rendered should be avoided.
+
+## Test Structure
+- Follow Arrange-Act-Assert pattern: set up test data, execute the code under test, verify results
+- Keep tests independent - each test should run in isolation without depending on other tests
+- Use a `describe` block to group related tests for a module or component.
+- Use an `it` block for each individual test case, clearly describing the expected behavior.
+
+## Test Data and Environment
+- Mock external dependencies to isolate the unit under test.
+- Use setup and teardown functions (`beforeEach`, `afterEach`) to prepare test environments.
+- Write tests that are deterministic and do not rely on external state or timing.
+
+## DOM Queries & Interactions
+- Elements should be queried like the user would see them on screen (e.g., use `getByRole`, `getByLabelText` from Testing Library).
+- If querying like a user is not possible, the default solution should be to improve the accessibility of the element (e.g., adding ARIA attributes).
+- Querying by test-id attribute should be a last resort. Avoid completely if possible.
+- `userEvent` should be used to simulate user interactions instead of `fireEvent` for more realistic behavior.
+
+## Test-Driven Development
+
+For TDD methodology and process, see `test-driven-development` skill.
+
+**Relationship:**
+- This rule covers **how** to write tests (tools, patterns, quality)
+- The TDD skill covers **when** to write tests (before code, always)
+- Both apply: Use TDD process with testing rule patterns
\ No newline at end of file
diff --git a/.cursor/skills/accessibility/.claude-plugin/plugin.json b/.cursor/skills/accessibility/.claude-plugin/plugin.json
new file mode 100644
index 0000000..7fc3045
--- /dev/null
+++ b/.cursor/skills/accessibility/.claude-plugin/plugin.json
@@ -0,0 +1,12 @@
+{
+  "name": "accessibility",
+  "description": "Build WCAG 2.1 AA compliant websites with semantic HTML, proper ARIA, focus management, and screen reader support. Includes color contrast (4.5:1 text), keyboard navigation, form labels, and live regions. Use when implementing accessible interfaces, fixing screen reader issues, keyboard navigation, or troubleshooting focus outline missing, aria-label required, insufficient contrast.",
+  "version": "1.0.0",
+  "author": {
+    "name": "Jeremy Dawes",
+    "email": "jeremy@jezweb.net"
+  },
+  "license": "MIT",
+  "repository": "https://github.com/jezweb/claude-skills",
+  "keywords": []
+}
diff --git a/.cursor/skills/accessibility/SKILL.md b/.cursor/skills/accessibility/SKILL.md
new file mode 100644
index 0000000..f7db070
--- /dev/null
+++ b/.cursor/skills/accessibility/SKILL.md
@@ -0,0 +1,882 @@
+---
+name: accessibility
+description: |
+  Build WCAG 2.1 AA compliant websites with semantic HTML, proper ARIA, focus management, and screen reader support. Includes color contrast (4.5:1 text), keyboard navigation, form labels, and live regions.
+
+  Use when implementing accessible interfaces, fixing screen reader issues, keyboard navigation, or troubleshooting "focus outline missing", "aria-label required", "insufficient contrast".
+---
+
+# Web Accessibility (WCAG 2.1 AA)
+
+**Status**: Production Ready ✅
+**Last Updated**: 2026-01-14
+**Dependencies**: None (framework-agnostic)
+**Standards**: WCAG 2.1 Level AA
+
+---
+
+## Quick Start (5 Minutes)
+
+### 1. Semantic HTML Foundation
+
+Choose the right element - don't use `div` for everything:
+
+```html
+<!-- ❌ WRONG - divs with onClick -->
+<div onclick="submit()">Submit</div>
+<div onclick="navigate()">Next page</div>
+
+<!-- ✅ CORRECT - semantic elements -->
+<button type="submit">Submit</button>
+<a href="/next">Next page</a>
+```
+
+**Why this matters:**
+- Semantic elements have built-in keyboard support
+- Screen readers announce role automatically
+- Browser provides default accessible behaviors
+
+### 2. Focus Management
+
+Make interactive elements keyboard-accessible:
+
+```css
+/* ❌ WRONG - removes focus outline */
+button:focus { outline: none; }
+
+/* ✅ CORRECT - custom accessible outline */
+button:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+```
+
+**CRITICAL:**
+- Never remove focus outlines without replacement
+- Use `:focus-visible` to show only on keyboard focus
+- Ensure 3:1 contrast ratio for focus indicators
+
+### 3. Text Alternatives
+
+Every non-text element needs a text alternative:
+
+```html
+<!-- ❌ WRONG - no alt text -->
+<img src="logo.png">
+<button><svg>...</svg></button>
+
+<!-- ✅ CORRECT - proper alternatives -->
+<img src="logo.png" alt="Company Name">
+<button aria-label="Close dialog"><svg>...</svg></button>
+```
+
+---
+
+## The 5-Step Accessibility Process
+
+### Step 1: Choose Semantic HTML
+
+**Decision tree for element selection:**
+
+```
+Need clickable element?
+├─ Navigates to another page? → <a href="...">
+├─ Submits form? → <button type="submit">
+├─ Opens dialog? → <button aria-haspopup="dialog">
+└─ Other action? → <button type="button">
+
+Grouping content?
+├─ Self-contained article? → <article>
+├─ Thematic section? → <section>
+├─ Navigation links? → <nav>
+└─ Supplementary info? → <aside>
+
+Form element?
+├─ Text input? → <input type="text">
+├─ Multiple choice? → <select> or <input type="radio">
+├─ Toggle? → <input type="checkbox"> or <button aria-pressed>
+└─ Long text? → <textarea>
+```
+
+**See `references/semantic-html.md` for complete guide.**
+
+### Step 2: Add ARIA When Needed
+
+**Golden rule: Use ARIA only when HTML can't express the pattern.**
+
+```html
+<!-- ❌ WRONG - unnecessary ARIA -->
+<button role="button">Click me</button>  <!-- Button already has role -->
+
+<!-- ✅ CORRECT - ARIA fills semantic gap -->
+<div role="dialog" aria-labelledby="title" aria-modal="true">
+  <h2 id="title">Confirm action</h2>
+  <!-- No HTML dialog yet, so role needed -->
+</div>
+
+<!-- ✅ BETTER - Use native HTML when available -->
+<dialog aria-labelledby="title">
+  <h2 id="title">Confirm action</h2>
+</dialog>
+```
+
+**Common ARIA patterns:**
+- `aria-label` - When visible label doesn't exist
+- `aria-labelledby` - Reference existing text as label
+- `aria-describedby` - Additional description
+- `aria-live` - Announce dynamic updates
+- `aria-expanded` - Collapsible/expandable state
+
+**See `references/aria-patterns.md` for complete patterns.**
+
+### Step 3: Implement Keyboard Navigation
+
+**All interactive elements must be keyboard-accessible:**
+
+```typescript
+// Tab order management
+function Dialog({ onClose }) {
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const previousFocus = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    // Save previous focus
+    previousFocus.current = document.activeElement as HTMLElement;
+
+    // Focus first element in dialog
+    const firstFocusable = dialogRef.current?.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+    (firstFocusable as HTMLElement)?.focus();
+
+    // Trap focus within dialog
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+      if (e.key === 'Tab') {
+        // Focus trap logic here
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      // Restore focus on close
+      previousFocus.current?.focus();
+    };
+  }, [onClose]);
+
+  return <div ref={dialogRef} role="dialog">...</div>;
+}
+```
+
+**Essential keyboard patterns:**
+- Tab/Shift+Tab: Navigate between focusable elements
+- Enter/Space: Activate buttons/links
+- Arrow keys: Navigate within components (tabs, menus)
+- Escape: Close dialogs/menus
+- Home/End: Jump to first/last item
+
+**See `references/focus-management.md` for complete patterns.**
+
+### Step 4: Ensure Color Contrast
+
+**WCAG AA requirements:**
+- Normal text (under 18pt): 4.5:1 contrast ratio
+- Large text (18pt+ or 14pt+ bold): 3:1 contrast ratio
+- UI components (buttons, borders): 3:1 contrast ratio
+
+```css
+/* ❌ WRONG - insufficient contrast */
+:root {
+  --background: #ffffff;
+  --text: #999999;  /* 2.8:1 - fails WCAG AA */
+}
+
+/* ✅ CORRECT - sufficient contrast */
+:root {
+  --background: #ffffff;
+  --text: #595959;  /* 4.6:1 - passes WCAG AA */
+}
+```
+
+**Testing tools:**
+- Browser DevTools (Chrome/Firefox have built-in checkers)
+- Contrast checker extensions
+- axe DevTools extension
+
+**See `references/color-contrast.md` for complete guide.**
+
+### Step 5: Make Forms Accessible
+
+**Every form input needs a visible label:**
+
+```html
+<!-- ❌ WRONG - placeholder is not a label -->
+<input type="email" placeholder="Email address">
+
+<!-- ✅ CORRECT - proper label -->
+<label for="email">Email address</label>
+<input type="email" id="email" name="email" required aria-required="true">
+```
+
+**Error handling:**
+
+```html
+<label for="email">Email address</label>
+<input
+  type="email"
+  id="email"
+  name="email"
+  aria-invalid="true"
+  aria-describedby="email-error"
+>
+<span id="email-error" role="alert">
+  Please enter a valid email address
+</span>
+```
+
+**Live regions for dynamic errors:**
+
+```html
+<div role="alert" aria-live="assertive" aria-atomic="true">
+  Form submission failed. Please fix the errors above.
+</div>
+```
+
+**See `references/forms-validation.md` for complete patterns.**
+
+---
+
+## Critical Rules
+
+### Always Do
+
+✅ Use semantic HTML elements first (button, a, nav, article, etc.)
+✅ Provide text alternatives for all non-text content
+✅ Ensure 4.5:1 contrast for normal text, 3:1 for large text/UI
+✅ Make all functionality keyboard accessible
+✅ Test with keyboard only (unplug mouse)
+✅ Test with screen reader (NVDA on Windows, VoiceOver on Mac)
+✅ Use proper heading hierarchy (h1 → h2 → h3, no skipping)
+✅ Label all form inputs with visible labels
+✅ Provide focus indicators (never just `outline: none`)
+✅ Use `aria-live` for dynamic content updates
+
+### Never Do
+
+❌ Use `div` with `onClick` instead of `button`
+❌ Remove focus outlines without replacement
+❌ Use color alone to convey information
+❌ Use placeholders as labels
+❌ Skip heading levels (h1 → h3)
+❌ Use `tabindex` > 0 (messes with natural order)
+❌ Add ARIA when semantic HTML exists
+❌ Forget to restore focus after closing dialogs
+❌ Use `role="presentation"` on focusable elements
+❌ Create keyboard traps (no way to escape)
+
+---
+
+## Known Issues Prevention
+
+This skill prevents **12** documented accessibility issues:
+
+### Issue #1: Missing Focus Indicators
+
+**Error**: Interactive elements have no visible focus indicator
+**Source**: WCAG 2.4.7 (Focus Visible)
+**Why It Happens**: CSS reset removes default outline
+**Prevention**: Always provide custom focus-visible styles
+
+### Issue #2: Insufficient Color Contrast
+
+**Error**: Text has less than 4.5:1 contrast ratio
+**Source**: WCAG 1.4.3 (Contrast Minimum)
+**Why It Happens**: Using light gray text on white background
+**Prevention**: Test all text colors with contrast checker
+
+### Issue #3: Missing Alt Text
+
+**Error**: Images missing alt attributes
+**Source**: WCAG 1.1.1 (Non-text Content)
+**Why It Happens**: Forgot to add or thought it was optional
+**Prevention**: Add alt="" for decorative, descriptive alt for meaningful images
+
+### Issue #4: Keyboard Navigation Broken
+
+**Error**: Interactive elements not reachable by keyboard
+**Source**: WCAG 2.1.1 (Keyboard)
+**Why It Happens**: Using div onClick instead of button
+**Prevention**: Use semantic interactive elements (button, a)
+
+### Issue #5: Form Inputs Without Labels
+
+**Error**: Input fields missing associated labels
+**Source**: WCAG 3.3.2 (Labels or Instructions)
+**Why It Happens**: Using placeholder as label
+**Prevention**: Always use `<label>` element with for/id association
+
+### Issue #6: Skipped Heading Levels
+
+**Error**: Heading hierarchy jumps from h1 to h3
+**Source**: WCAG 1.3.1 (Info and Relationships)
+**Why It Happens**: Using headings for visual styling instead of semantics
+**Prevention**: Use headings in order, style with CSS
+
+### Issue #7: No Focus Trap in Dialogs
+
+**Error**: Tab key exits dialog to background content
+**Source**: WCAG 2.4.3 (Focus Order)
+**Why It Happens**: No focus trap implementation
+**Prevention**: Implement focus trap for modal dialogs
+
+### Issue #8: Missing aria-live for Dynamic Content
+
+**Error**: Screen reader doesn't announce updates
+**Source**: WCAG 4.1.3 (Status Messages)
+**Why It Happens**: Dynamic content added without announcement
+**Prevention**: Use aria-live="polite" or "assertive"
+
+### Issue #9: Color-Only Information
+
+**Error**: Using only color to convey status
+**Source**: WCAG 1.4.1 (Use of Color)
+**Why It Happens**: Red text for errors without icon/text
+**Prevention**: Add icon + text label, not just color
+
+### Issue #10: Non-descriptive Link Text
+
+**Error**: Links with "click here" or "read more"
+**Source**: WCAG 2.4.4 (Link Purpose)
+**Why It Happens**: Generic link text without context
+**Prevention**: Use descriptive link text or aria-label
+
+### Issue #11: Auto-playing Media
+
+**Error**: Video/audio auto-plays without user control
+**Source**: WCAG 1.4.2 (Audio Control)
+**Why It Happens**: Autoplay attribute without controls
+**Prevention**: Require user interaction to start media
+
+### Issue #12: Inaccessible Custom Controls
+
+**Error**: Custom select/checkbox without keyboard support
+**Source**: WCAG 4.1.2 (Name, Role, Value)
+**Why It Happens**: Building from divs without ARIA
+**Prevention**: Use native elements or implement full ARIA pattern
+
+---
+
+## WCAG 2.1 AA Quick Checklist
+
+### Perceivable
+
+- [ ] All images have alt text (or alt="" if decorative)
+- [ ] Text contrast ≥ 4.5:1 (normal), ≥ 3:1 (large)
+- [ ] Color not used alone to convey information
+- [ ] Text can be resized to 200% without loss of content
+- [ ] No auto-playing audio >3 seconds
+
+### Operable
+
+- [ ] All functionality keyboard accessible
+- [ ] No keyboard traps
+- [ ] Visible focus indicators
+- [ ] Users can pause/stop/hide moving content
+- [ ] Page titles describe purpose
+- [ ] Focus order is logical
+- [ ] Link purpose clear from text or context
+- [ ] Multiple ways to find pages (menu, search, sitemap)
+- [ ] Headings and labels describe purpose
+
+### Understandable
+
+- [ ] Page language specified (`<html lang="en">`)
+- [ ] Language changes marked (`<span lang="es">`)
+- [ ] No unexpected context changes on focus/input
+- [ ] Consistent navigation across site
+- [ ] Form labels/instructions provided
+- [ ] Input errors identified and described
+- [ ] Error prevention for legal/financial/data changes
+
+### Robust
+
+- [ ] Valid HTML (no parsing errors)
+- [ ] Name, role, value available for all UI components
+- [ ] Status messages identified (aria-live)
+
+---
+
+## Testing Workflow
+
+### 1. Keyboard-Only Testing (5 minutes)
+
+```
+1. Unplug mouse or hide cursor
+2. Tab through entire page
+   - Can you reach all interactive elements?
+   - Can you activate all buttons/links?
+   - Is focus order logical?
+3. Use Enter/Space to activate
+4. Use Escape to close dialogs
+5. Use arrow keys in menus/tabs
+```
+
+### 2. Screen Reader Testing (10 minutes)
+
+**NVDA (Windows - Free)**:
+- Download: https://www.nvaccess.org/download/
+- Start: Ctrl+Alt+N
+- Navigate: Arrow keys or Tab
+- Read: NVDA+Down arrow
+- Stop: NVDA+Q
+
+**VoiceOver (Mac - Built-in)**:
+- Start: Cmd+F5
+- Navigate: VO+Right/Left arrow (VO = Ctrl+Option)
+- Read: VO+A (read all)
+- Stop: Cmd+F5
+
+**What to test:**
+- Are all interactive elements announced?
+- Are images described properly?
+- Are form labels read with inputs?
+- Are dynamic updates announced?
+- Is heading structure clear?
+
+### 3. Automated Testing
+
+**axe DevTools** (Browser extension - highly recommended):
+- Install: Chrome/Firefox extension
+- Run: F12 → axe DevTools tab → Scan
+- Fix: Review violations, follow remediation
+- Retest: Scan again after fixes
+
+**Lighthouse** (Built into Chrome):
+- Open DevTools (F12)
+- Lighthouse tab
+- Select "Accessibility" category
+- Generate report
+- Score 90+ is good, 100 is ideal
+
+---
+
+## Common Patterns
+
+### Pattern 1: Accessible Dialog/Modal
+
+```typescript
+interface DialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+}
+
+function Dialog({ isOpen, onClose, title, children }: DialogProps) {
+  const dialogRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const previousFocus = document.activeElement as HTMLElement;
+
+    // Focus first focusable element
+    const firstFocusable = dialogRef.current?.querySelector(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    ) as HTMLElement;
+    firstFocusable?.focus();
+
+    // Focus trap
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+      if (e.key === 'Tab') {
+        const focusableElements = dialogRef.current?.querySelectorAll(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        if (!focusableElements?.length) return;
+
+        const first = focusableElements[0] as HTMLElement;
+        const last = focusableElements[focusableElements.length - 1] as HTMLElement;
+
+        if (e.shiftKey && document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        } else if (!e.shiftKey && document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      previousFocus?.focus();
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className="dialog-backdrop"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+
+      {/* Dialog */}
+      <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="dialog-title"
+        className="dialog"
+      >
+        <h2 id="dialog-title">{title}</h2>
+        <div className="dialog-content">{children}</div>
+        <button onClick={onClose} aria-label="Close dialog">×</button>
+      </div>
+    </>
+  );
+}
+```
+
+**When to use**: Any modal dialog or overlay that blocks interaction with background content.
+
+### Pattern 2: Accessible Tabs
+
+```typescript
+function Tabs({ tabs }: { tabs: Array<{ label: string; content: React.ReactNode }> }) {
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const handleKeyDown = (e: React.KeyboardEvent, index: number) => {
+    if (e.key === 'ArrowLeft') {
+      e.preventDefault();
+      const newIndex = index === 0 ? tabs.length - 1 : index - 1;
+      setActiveIndex(newIndex);
+    } else if (e.key === 'ArrowRight') {
+      e.preventDefault();
+      const newIndex = index === tabs.length - 1 ? 0 : index + 1;
+      setActiveIndex(newIndex);
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      setActiveIndex(0);
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      setActiveIndex(tabs.length - 1);
+    }
+  };
+
+  return (
+    <div>
+      <div role="tablist" aria-label="Content tabs">
+        {tabs.map((tab, index) => (
+          <button
+            key={index}
+            role="tab"
+            aria-selected={activeIndex === index}
+            aria-controls={`panel-${index}`}
+            id={`tab-${index}`}
+            tabIndex={activeIndex === index ? 0 : -1}
+            onClick={() => setActiveIndex(index)}
+            onKeyDown={(e) => handleKeyDown(e, index)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+      {tabs.map((tab, index) => (
+        <div
+          key={index}
+          role="tabpanel"
+          id={`panel-${index}`}
+          aria-labelledby={`tab-${index}`}
+          hidden={activeIndex !== index}
+          tabIndex={0}
+        >
+          {tab.content}
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+**When to use**: Tabbed interface with multiple panels.
+
+### Pattern 3: Skip Links
+
+```html
+<!-- Place at very top of body -->
+<a href="#main-content" class="skip-link">
+  Skip to main content
+</a>
+
+<style>
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: var(--primary);
+  color: white;
+  padding: 8px 16px;
+  z-index: 9999;
+}
+
+.skip-link:focus {
+  top: 0;
+}
+</style>
+
+<!-- Then in your layout -->
+<main id="main-content" tabindex="-1">
+  <!-- Page content -->
+</main>
+```
+
+**When to use**: All multi-page websites with navigation/header before main content.
+
+### Pattern 4: Accessible Form with Validation
+
+```typescript
+function ContactForm() {
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [touched, setTouched] = useState<Record<string, boolean>>({});
+
+  const validateEmail = (email: string) => {
+    if (!email) return 'Email is required';
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) return 'Email is invalid';
+    return '';
+  };
+
+  const handleBlur = (field: string, value: string) => {
+    setTouched(prev => ({ ...prev, [field]: true }));
+    const error = validateEmail(value);
+    setErrors(prev => ({ ...prev, [field]: error }));
+  };
+
+  return (
+    <form>
+      <div>
+        <label htmlFor="email">Email address *</label>
+        <input
+          type="email"
+          id="email"
+          name="email"
+          required
+          aria-required="true"
+          aria-invalid={touched.email && !!errors.email}
+          aria-describedby={errors.email ? 'email-error' : undefined}
+          onBlur={(e) => handleBlur('email', e.target.value)}
+        />
+        {touched.email && errors.email && (
+          <span id="email-error" role="alert" className="error">
+            {errors.email}
+          </span>
+        )}
+      </div>
+
+      <button type="submit">Submit</button>
+
+      {/* Global form error */}
+      <div role="alert" aria-live="assertive" aria-atomic="true">
+        {/* Dynamic error message appears here */}
+      </div>
+    </form>
+  );
+}
+```
+
+**When to use**: All forms with validation.
+
+---
+
+## Using Bundled Resources
+
+### References (references/)
+
+Detailed documentation for deep dives:
+
+- **wcag-checklist.md** - Complete WCAG 2.1 Level A & AA requirements with examples
+- **semantic-html.md** - Element selection guide, when to use which tag
+- **aria-patterns.md** - ARIA roles, states, properties, and when to use them
+- **focus-management.md** - Focus order, focus traps, focus restoration patterns
+- **color-contrast.md** - Contrast requirements, testing tools, color palette tips
+- **forms-validation.md** - Accessible form patterns, error handling, announcements
+
+**When Claude should load these**:
+- User asks for complete WCAG checklist
+- Deep dive into specific pattern (tabs, accordions, etc.)
+- Color contrast issues or palette design
+- Complex form validation scenarios
+
+### Agents (agents/)
+
+- **a11y-auditor.md** - Automated accessibility auditor that checks pages for violations
+
+**When to use**: Request accessibility audit of existing page/component.
+
+---
+
+## Advanced Topics
+
+### ARIA Live Regions
+
+Three politeness levels:
+
+```html
+<!-- Polite: Wait for screen reader to finish current announcement -->
+<div aria-live="polite">New messages: 3</div>
+
+<!-- Assertive: Interrupt immediately -->
+<div aria-live="assertive" role="alert">
+  Error: Form submission failed
+</div>
+
+<!-- Off: Don't announce (default) -->
+<div aria-live="off">Loading...</div>
+```
+
+**Best practices:**
+- Use `polite` for non-critical updates (notifications, counters)
+- Use `assertive` for errors and critical alerts
+- Use `aria-atomic="true"` to read entire region on change
+- Keep messages concise and meaningful
+
+### Focus Management in SPAs
+
+React Router doesn't reset focus on navigation - you need to handle it:
+
+```typescript
+function App() {
+  const location = useLocation();
+  const mainRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    // Focus main content on route change
+    mainRef.current?.focus();
+    // Announce page title to screen readers
+    const title = document.title;
+    const announcement = document.createElement('div');
+    announcement.setAttribute('role', 'status');
+    announcement.setAttribute('aria-live', 'polite');
+    announcement.textContent = `Navigated to ${title}`;
+    document.body.appendChild(announcement);
+    setTimeout(() => announcement.remove(), 1000);
+  }, [location.pathname]);
+
+  return <main ref={mainRef} tabIndex={-1} id="main-content">...</main>;
+}
+```
+
+### Accessible Data Tables
+
+```html
+<table>
+  <caption>Monthly sales by region</caption>
+  <thead>
+    <tr>
+      <th scope="col">Region</th>
+      <th scope="col">Q1</th>
+      <th scope="col">Q2</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">North</th>
+      <td>$10,000</td>
+      <td>$12,000</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+**Key attributes:**
+- `<caption>` - Describes table purpose
+- `scope="col"` - Identifies column headers
+- `scope="row"` - Identifies row headers
+- Associates data cells with headers for screen readers
+
+---
+
+## Official Documentation
+
+- **WCAG 2.1**: https://www.w3.org/WAI/WCAG21/quickref/
+- **MDN Accessibility**: https://developer.mozilla.org/en-US/docs/Web/Accessibility
+- **ARIA Authoring Practices**: https://www.w3.org/WAI/ARIA/apg/
+- **WebAIM**: https://webaim.org/articles/
+- **axe DevTools**: https://www.deque.com/axe/devtools/
+
+---
+
+## Troubleshooting
+
+### Problem: Focus indicators not visible
+
+**Symptoms**: Can tab through page but don't see where focus is
+**Cause**: CSS removed outlines or insufficient contrast
+**Solution**:
+```css
+*:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+```
+
+### Problem: Screen reader not announcing updates
+
+**Symptoms**: Dynamic content changes but no announcement
+**Cause**: No aria-live region
+**Solution**: Wrap dynamic content in `<div aria-live="polite">` or use role="alert"
+
+### Problem: Dialog focus escapes to background
+
+**Symptoms**: Tab key navigates to elements behind dialog
+**Cause**: No focus trap
+**Solution**: Implement focus trap (see Pattern 1 above)
+
+### Problem: Form errors not announced
+
+**Symptoms**: Visual errors appear but screen reader doesn't notice
+**Cause**: No aria-invalid or role="alert"
+**Solution**: Use aria-invalid + aria-describedby pointing to error message with role="alert"
+
+---
+
+## Complete Setup Checklist
+
+Use this for every page/component:
+
+- [ ] All interactive elements are keyboard accessible
+- [ ] Visible focus indicators on all focusable elements
+- [ ] Images have alt text (or alt="" if decorative)
+- [ ] Text contrast ≥ 4.5:1 (test with axe or Lighthouse)
+- [ ] Form inputs have associated labels (not just placeholders)
+- [ ] Heading hierarchy is logical (no skipped levels)
+- [ ] Page has `<html lang="en">` or appropriate language
+- [ ] Dialogs have focus trap and restore focus on close
+- [ ] Dynamic content uses aria-live or role="alert"
+- [ ] Color not used alone to convey information
+- [ ] Tested with keyboard only (no mouse)
+- [ ] Tested with screen reader (NVDA or VoiceOver)
+- [ ] Ran axe DevTools scan (0 violations)
+- [ ] Lighthouse accessibility score ≥ 90
+
+---
+
+**Questions? Issues?**
+
+1. Check `references/wcag-checklist.md` for complete requirements
+2. Use `/a11y-auditor` agent to scan your page
+3. Run axe DevTools for automated testing
+4. Test with actual keyboard + screen reader
+
+---
+
+**Standards**: WCAG 2.1 Level AA
+**Testing Tools**: axe DevTools, Lighthouse, NVDA, VoiceOver
+**Success Criteria**: 90+ Lighthouse score, 0 critical violations
diff --git a/.cursor/skills/accessibility/agents/a11y-auditor.md b/.cursor/skills/accessibility/agents/a11y-auditor.md
new file mode 100644
index 0000000..9410d77
--- /dev/null
+++ b/.cursor/skills/accessibility/agents/a11y-auditor.md
@@ -0,0 +1,421 @@
+---
+name: a11y-auditor
+description: |
+  Accessibility auditor specialist. MUST BE USED when analyzing pages for WCAG compliance. Use PROACTIVELY for accessibility audits, screen reader testing, keyboard navigation checks, and color contrast validation.
+tools: Read, Glob, Grep
+model: sonnet
+---
+
+# Accessibility Auditor Agent
+
+You are an expert accessibility auditor specializing in WCAG 2.1 Level AA compliance.
+
+---
+
+## Your Role
+
+Audit web pages, components, and code for accessibility issues and provide detailed remediation guidance.
+
+---
+
+## Audit Process
+
+When asked to audit a page or component:
+
+### 1. Identify Scope
+
+Determine what to audit:
+- Specific component (e.g., "audit the login form")
+- Entire page (e.g., "audit the homepage")
+- Code files (e.g., "audit src/components/Dialog.tsx")
+
+### 2. Read Relevant Files
+
+Use Read tool to examine:
+- HTML/JSX/TSX component files
+- CSS files for focus indicators and contrast
+- TypeScript/JavaScript for keyboard handlers
+
+Search for patterns with Grep:
+- Interactive elements: `<div.*onclick`, `<span.*onclick`
+- Images: `<img`, check for alt attributes
+- Form inputs: `<input`, `<textarea`, `<select`
+- Buttons: `<button`, check for type attribute
+- Focus styles: `outline.*none`, `:focus`
+- ARIA attributes: `aria-`, `role=`
+
+### 3. Check Against WCAG Criteria
+
+Evaluate for:
+
+**Perceivable**:
+- All images have alt text (or alt="" if decorative)
+- Color contrast ≥ 4.5:1 for normal text, ≥ 3:1 for large text/UI
+- Color not used alone to convey information
+
+**Operable**:
+- All interactive elements keyboard accessible (no div onclick without keyboard support)
+- Focus indicators visible (no outline: none without replacement)
+- No keyboard traps
+- Logical tab order
+- Skip links present
+
+**Understandable**:
+- Form labels present and associated
+- Error messages clear and programmatically linked
+- Instructions provided where needed
+- Language specified (`<html lang="en">`)
+- Heading hierarchy logical (no skipped levels)
+
+**Robust**:
+- Semantic HTML used (button, a, nav, main, etc.)
+- ARIA used correctly (not on native elements, not hiding focusable elements)
+- Valid HTML structure
+
+### 4. Generate Report
+
+Format your findings as:
+
+```markdown
+# Accessibility Audit Report
+
+**File**: [filename or page]
+**Date**: [current date]
+**Standard**: WCAG 2.1 Level AA
+
+---
+
+## Summary
+
+- ❌ **X Critical Issues** - Block keyboard/screen reader users
+- ⚠️ **Y Warnings** - Reduce usability
+- ✅ **Z Passes** - Correct implementations
+
+**Overall Score**: [0-100]
+
+---
+
+## Critical Issues (Must Fix)
+
+### Issue #1: [Brief description]
+
+**Severity**: Critical
+**WCAG**: [Criterion number and name]
+**Location**: [File:line or element description]
+
+**Problem**:
+[Detailed explanation of what's wrong]
+
+**Code**:
+```html
+<!-- Current (wrong) -->
+[Show problematic code]
+```
+
+**Fix**:
+```html
+<!-- Fixed (correct) -->
+[Show corrected code]
+```
+
+**Why it matters**: [User impact]
+
+---
+
+[Repeat for each issue]
+
+---
+
+## Warnings (Should Fix)
+
+[Same format as critical issues]
+
+---
+
+## Good Practices (Passes)
+
+✅ **[Feature]**: [Brief description of what's done well]
+
+---
+
+## Testing Recommendations
+
+1. **Keyboard Testing** (5 min):
+   - Tab through entire page
+   - Verify all interactive elements reachable
+   - Test Enter/Space on buttons
+   - Test Escape to close dialogs
+
+2. **Screen Reader Testing** (10 min):
+   - Use NVDA (Windows) or VoiceOver (Mac)
+   - Navigate by headings (H key in NVDA)
+   - Navigate by landmarks (D key in NVDA)
+   - Verify all images described
+   - Verify form labels read
+
+3. **Automated Testing** (2 min):
+   - Run axe DevTools browser extension
+   - Fix any violations found
+
+4. **Color Contrast** (3 min):
+   - Use browser DevTools contrast checker
+   - Verify all text meets 4.5:1 ratio
+
+---
+
+## Priority Order
+
+Fix in this order:
+1. [Highest priority issue]
+2. [Second priority]
+3. [Third priority]
+...
+
+---
+
+## Estimated Fix Time
+
+- Critical fixes: ~[X] minutes
+- Warnings: ~[Y] minutes
+- Total: ~[Z] minutes
+
+---
+
+## Next Steps
+
+1. Fix critical issues first (blocking for users)
+2. Run automated scan to catch any missed issues
+3. Test with keyboard only
+4. Test with screen reader
+5. Request re-audit after fixes
+```
+
+---
+
+## Common Patterns to Check
+
+### Interactive Divs
+
+```bash
+# Search for problematic patterns
+grep -r "div.*onclick" src/
+grep -r "span.*onclick" src/
+```
+
+If found:
+- **Issue**: Divs/spans not keyboard accessible
+- **Fix**: Use `<button>` or `<a>` instead
+
+### Missing Alt Text
+
+```bash
+# Find images
+grep -r "<img" src/
+```
+
+Check each `<img>` has `alt` attribute.
+
+### Focus Outline Removal
+
+```bash
+# Find outline removal
+grep -r "outline.*none" src/
+grep -r "outline: 0" src/
+```
+
+If found without `:focus-visible` replacement:
+- **Issue**: Focus indicators missing
+- **Fix**: Add custom `:focus-visible` styles
+
+### Form Labels
+
+```bash
+# Find inputs
+grep -r "<input" src/
+grep -r "<textarea" src/
+grep -r "<select" src/
+```
+
+Verify each has associated `<label>` with matching for/id.
+
+### Heading Hierarchy
+
+```bash
+# Find headings
+grep -r "<h[1-6]" src/
+```
+
+Verify logical order (h1 → h2 → h3, no skipping).
+
+### Color Contrast
+
+Search CSS for:
+- Light gray colors (`#999`, `#ccc`, etc.)
+- Custom text colors
+- Button backgrounds
+
+Flag any that may not meet 4.5:1 ratio.
+
+#### Contrast Ratio Calculation
+
+To calculate contrast ratio manually, use this formula:
+
+**Step 1: Convert hex to relative luminance**
+```
+For each R, G, B value (0-255):
+1. Divide by 255 to get 0-1 range
+2. If value ≤ 0.03928: L = value / 12.92
+   If value > 0.03928: L = ((value + 0.055) / 1.055) ^ 2.4
+3. Luminance = 0.2126 × R + 0.7152 × G + 0.0722 × B
+```
+
+**Step 2: Calculate ratio**
+```
+Ratio = (L1 + 0.05) / (L2 + 0.05)
+Where L1 is the lighter color's luminance and L2 is the darker
+```
+
+**Quick Reference - Common Colors:**
+
+| Color | Hex | Luminance | vs White (#fff) | vs Black (#000) |
+|-------|-----|-----------|-----------------|-----------------|
+| White | #ffffff | 1.000 | 1:1 | 21:1 ✅ |
+| Black | #000000 | 0.000 | 21:1 ✅ | 1:1 |
+| Gray 500 | #6b7280 | 0.183 | 4.6:1 ✅ | 4.6:1 ✅ |
+| Gray 400 | #9ca3af | 0.352 | 2.9:1 ❌ | 7.4:1 ✅ |
+| Gray 600 | #4b5563 | 0.104 | 7.5:1 ✅ | 2.8:1 ❌ |
+| Slate 500 | #64748b | 0.176 | 4.7:1 ✅ | 4.5:1 ✅ |
+| Teal 500 | #14b8a6 | 0.356 | 2.8:1 ❌ | 7.6:1 ✅ |
+| Blue 600 | #2563eb | 0.137 | 5.7:1 ✅ | 3.7:1 ❌ |
+| Red 500 | #ef4444 | 0.213 | 4.0:1 ❌ | 5.3:1 ✅ |
+
+**WCAG Requirements:**
+- **4.5:1** - Normal text (< 18pt regular or < 14pt bold)
+- **3:1** - Large text (≥ 18pt regular or ≥ 14pt bold) and UI components
+- **3:1** - Focus indicators
+
+**Common Failing Combinations:**
+- Light gray text (#9ca3af) on white ❌
+- Teal (#14b8a6) text on white ❌
+- White text on light backgrounds ❌
+- Yellow (#fbbf24) text on white ❌
+
+**Safe Dark Text on Light Background:**
+- Use #374151 (gray-700) or darker
+- Use #1e293b (slate-800) for high contrast
+
+**Safe Light Text on Dark Background:**
+- Use #f9fafb (gray-50) or lighter
+- Use #ffffff for maximum contrast
+
+### ARIA Misuse
+
+```bash
+# Find ARIA attributes
+grep -r "aria-" src/
+grep -r "role=" src/
+```
+
+Check:
+- Not used on native elements unnecessarily
+- `aria-hidden="true"` not on focusable elements
+- `aria-labelledby`/`aria-describedby` point to valid IDs
+
+---
+
+## Scoring Guidelines
+
+**100 points possible:**
+
+- **Interactive elements** (20 pts):
+  - All using semantic HTML (button, a)
+  - All keyboard accessible
+  - No div/span onclick
+
+- **Focus management** (15 pts):
+  - Visible focus indicators
+  - Logical tab order
+  - No keyboard traps
+  - Focus restoration in dialogs
+
+- **Images** (10 pts):
+  - All have alt text or alt=""
+  - Alt text descriptive
+
+- **Forms** (15 pts):
+  - All inputs have labels
+  - Errors linked with aria-describedby
+  - Required fields marked
+
+- **Color contrast** (15 pts):
+  - All text ≥ 4.5:1
+  - UI components ≥ 3:1
+  - Focus indicators ≥ 3:1
+
+- **Structure** (10 pts):
+  - Heading hierarchy logical
+  - Landmarks present (nav, main, etc.)
+  - Skip links for multi-section pages
+
+- **ARIA** (10 pts):
+  - Used only when needed
+  - Used correctly
+  - States/properties accurate
+
+- **Keyboard navigation** (5 pts):
+  - All functionality keyboard accessible
+  - Arrow keys for menus/tabs (if applicable)
+
+**Deduct points for each violation based on severity.**
+
+---
+
+## Example Commands
+
+```bash
+# Audit entire src directory
+grep -r "onclick" src/
+grep -r "<img" src/
+grep -r "outline.*none" src/
+grep -r "<input" src/
+grep -r "<h[1-6]" src/
+
+# Check specific component
+grep -n "onclick\|<img\|<input\|<button" src/components/Dialog.tsx
+
+# Find focus styles
+grep -r ":focus" src/styles/
+
+# Find ARIA usage
+grep -r "aria-\|role=" src/
+```
+
+---
+
+## Output Format
+
+Always output complete markdown report with:
+- Executive summary
+- Categorized issues (Critical/Warning/Pass)
+- Code examples (before/after)
+- Testing checklist
+- Priority order
+- Time estimates
+
+---
+
+## Quality Checklist
+
+Before submitting report, verify:
+- [ ] All critical issues identified
+- [ ] Each issue has WCAG criterion reference
+- [ ] Code examples provided (before/after)
+- [ ] User impact explained
+- [ ] Fixes are actionable
+- [ ] Severity/priority assigned
+- [ ] Testing steps included
+- [ ] Score calculated
+
+---
+
+**Remember**: Be thorough but concise. Focus on actionable fixes with clear before/after code examples.
diff --git a/.cursor/skills/accessibility/references/aria-patterns.md b/.cursor/skills/accessibility/references/aria-patterns.md
new file mode 100644
index 0000000..0e99d7c
--- /dev/null
+++ b/.cursor/skills/accessibility/references/aria-patterns.md
@@ -0,0 +1,596 @@
+# ARIA Patterns and Best Practices
+
+**Golden Rule**: No ARIA is better than bad ARIA. Use semantic HTML first, ARIA only when HTML can't express the pattern.
+
+---
+
+## Five Rules of ARIA
+
+1. **Use semantic HTML when possible** - `<button>` not `<div role="button">`
+2. **Don't change native semantics** - Don't add role to elements that already have it
+3. **All interactive elements must be keyboard accessible** - ARIA doesn't add keyboard support
+4. **Don't hide focusable elements with aria-hidden="true"** - Creates inaccessible content
+5. **All interactive elements must have an accessible name** - Use label, aria-label, or aria-labelledby
+
+---
+
+## ARIA Attribute Categories
+
+### Roles
+
+Define what an element is (button, dialog, tab, etc.)
+
+### States
+
+Define current condition (aria-expanded, aria-pressed, aria-checked)
+
+### Properties
+
+Define characteristics (aria-label, aria-labelledby, aria-describedby)
+
+---
+
+## Common ARIA Roles
+
+### Landmark Roles
+
+**Use when**: HTML5 semantic elements aren't available (legacy support).
+
+```html
+<!-- Prefer HTML5 -->
+<main>Content</main>
+<nav>Links</nav>
+<aside>Sidebar</aside>
+<footer>Footer</footer>
+
+<!-- ARIA fallback for older browsers -->
+<div role="main">Content</div>
+<div role="navigation">Links</div>
+<div role="complementary">Sidebar</div>
+<div role="contentinfo">Footer</div>
+```
+
+**Modern approach**: Use HTML5 elements, they have implied roles.
+
+### Widget Roles
+
+#### Button
+
+```html
+<!-- ✅ Prefer native -->
+<button>Click me</button>
+
+<!-- ⚠️ Only if you must use div -->
+<div role="button" tabindex="0" onclick="..." onkeydown="handleEnterSpace">
+  Click me
+</div>
+```
+
+**Critical**: Role alone doesn't add keyboard support - you must handle Enter/Space keys.
+
+#### Checkbox
+
+```html
+<!-- ✅ Prefer native -->
+<input type="checkbox" id="agree">
+
+<!-- ⚠️ Custom (requires full implementation) -->
+<div
+  role="checkbox"
+  aria-checked="false"
+  tabindex="0"
+  onkeydown="handleSpace"
+>
+  <svg><!-- Check icon --></svg>
+  Label
+</div>
+```
+
+#### Tab, Tablist, Tabpanel
+
+```html
+<div role="tablist" aria-label="Content tabs">
+  <button
+    role="tab"
+    aria-selected="true"
+    aria-controls="panel-1"
+    id="tab-1"
+    tabindex="0"
+  >
+    Tab 1
+  </button>
+  <button
+    role="tab"
+    aria-selected="false"
+    aria-controls="panel-2"
+    id="tab-2"
+    tabindex="-1"
+  >
+    Tab 2
+  </button>
+</div>
+
+<div role="tabpanel" id="panel-1" aria-labelledby="tab-1" tabindex="0">
+  Content 1
+</div>
+<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" tabindex="0" hidden>
+  Content 2
+</div>
+```
+
+**Keyboard**: Arrow keys navigate tabs, Home/End jump to first/last.
+
+#### Dialog/Modal
+
+```html
+<div
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby="dialog-title"
+  aria-describedby="dialog-desc"
+>
+  <h2 id="dialog-title">Confirm action</h2>
+  <p id="dialog-desc">Are you sure you want to delete this item?</p>
+  <button>Cancel</button>
+  <button>Delete</button>
+</div>
+```
+
+**Critical**: Must trap focus, prevent background interaction.
+
+#### Menu/Menubar
+
+```html
+<ul role="menu" aria-label="Actions">
+  <li role="none">
+    <button role="menuitem">Edit</button>
+  </li>
+  <li role="none">
+    <button role="menuitem">Delete</button>
+  </li>
+</ul>
+```
+
+**Keyboard**: Arrow keys navigate, Enter activates, Escape closes.
+
+---
+
+## Common ARIA Properties
+
+### aria-label
+
+**Use when**: No visible label exists.
+
+```html
+<!-- Icon button without visible text -->
+<button aria-label="Close dialog">
+  ×
+</button>
+
+<!-- Search input with no visible label -->
+<input type="search" aria-label="Search products" placeholder="Search...">
+
+<!-- Multiple nav elements -->
+<nav aria-label="Primary">...</nav>
+<nav aria-label="Footer">...</nav>
+```
+
+**Caution**: Overrides visible text - don't use when visible label exists.
+
+### aria-labelledby
+
+**Use when**: Label text exists elsewhere in DOM.
+
+```html
+<h2 id="dialog-title">Delete item</h2>
+<div role="dialog" aria-labelledby="dialog-title">
+  <!-- Dialog content -->
+</div>
+
+<!-- Multiple IDs for compound label -->
+<h3 id="section-title">Payment details</h3>
+<p id="section-desc">Enter your credit card information</p>
+<form aria-labelledby="section-title section-desc">
+  <!-- Form fields -->
+</form>
+```
+
+### aria-describedby
+
+**Use for**: Additional description beyond label.
+
+```html
+<label for="password">Password</label>
+<input
+  type="password"
+  id="password"
+  aria-describedby="password-req"
+>
+<span id="password-req">Minimum 8 characters, one uppercase, one number</span>
+
+<!-- Error message -->
+<input
+  type="email"
+  aria-invalid="true"
+  aria-describedby="email-error"
+>
+<span id="email-error" role="alert">
+  Please enter a valid email address
+</span>
+```
+
+### aria-hidden
+
+**Use for**: Hiding decorative elements from screen readers.
+
+```html
+<!-- Decorative icon next to text -->
+<button>
+  <svg aria-hidden="true"><!-- Icon --></svg>
+  Save
+</button>
+
+<!-- Font icon -->
+<span class="icon-check" aria-hidden="true"></span>
+<span>Complete</span>
+```
+
+**Critical**: Never use on focusable elements - makes them inaccessible.
+
+---
+
+## Common ARIA States
+
+### aria-expanded
+
+**Use for**: Collapsible elements (accordions, dropdowns).
+
+```html
+<!-- Collapsed -->
+<button aria-expanded="false" aria-controls="content-1">
+  Show more
+</button>
+<div id="content-1" hidden>
+  Additional content
+</div>
+
+<!-- Expanded -->
+<button aria-expanded="true" aria-controls="content-1">
+  Show less
+</button>
+<div id="content-1">
+  Additional content
+</div>
+```
+
+### aria-pressed
+
+**Use for**: Toggle buttons.
+
+```html
+<!-- Off -->
+<button aria-pressed="false">
+  <svg><!-- Mute icon --></svg>
+  Mute
+</button>
+
+<!-- On -->
+<button aria-pressed="true">
+  <svg><!-- Unmute icon --></svg>
+  Unmute
+</button>
+```
+
+### aria-checked
+
+**Use for**: Custom checkboxes/radio buttons.
+
+```html
+<div role="checkbox" aria-checked="false" tabindex="0">
+  <svg><!-- Checkbox icon --></svg>
+  I agree to terms
+</div>
+
+<!-- Tri-state (indeterminate) -->
+<div role="checkbox" aria-checked="mixed" tabindex="0">
+  Select all
+</div>
+```
+
+### aria-invalid
+
+**Use for**: Form validation errors.
+
+```html
+<label for="email">Email</label>
+<input
+  type="email"
+  id="email"
+  aria-invalid="true"
+  aria-describedby="email-error"
+>
+<span id="email-error" role="alert">
+  Email format is incorrect
+</span>
+```
+
+### aria-selected
+
+**Use for**: Selected items in lists, tabs.
+
+```html
+<div role="tablist">
+  <button role="tab" aria-selected="true">Active tab</button>
+  <button role="tab" aria-selected="false">Inactive tab</button>
+</div>
+```
+
+### aria-current
+
+**Use for**: Current item in navigation, pagination, breadcrumbs.
+
+```html
+<!-- Navigation -->
+<nav>
+  <a href="/">Home</a>
+  <a href="/about">About</a>
+  <a href="/products" aria-current="page">Products</a>
+</nav>
+
+<!-- Steps -->
+<ol>
+  <li><a href="/step1">Complete</a></li>
+  <li><a href="/step2" aria-current="step">In progress</a></li>
+  <li><a href="/step3">Pending</a></li>
+</ol>
+```
+
+**Values**: `page`, `step`, `location`, `date`, `time`, `true`
+
+---
+
+## Live Regions
+
+### aria-live
+
+**Use for**: Dynamic content updates that should be announced.
+
+```html
+<!-- Polite: Wait for pause in speech -->
+<div aria-live="polite">
+  3 new messages
+</div>
+
+<!-- Assertive: Interrupt immediately -->
+<div aria-live="assertive">
+  Error: Connection lost
+</div>
+```
+
+**Politeness levels**:
+- `off` - Don't announce (default)
+- `polite` - Wait for pause (most updates)
+- `assertive` - Interrupt (errors, critical alerts only)
+
+### role="status"
+
+**Shorthand for aria-live="polite"**.
+
+```html
+<div role="status">
+  Form submitted successfully
+</div>
+```
+
+### role="alert"
+
+**Shorthand for aria-live="assertive"**.
+
+```html
+<div role="alert">
+  Error: Please fix the errors above
+</div>
+```
+
+### aria-atomic
+
+**Use with live regions** to read entire region vs. only changes.
+
+```html
+<!-- Read only changes -->
+<div aria-live="polite" aria-atomic="false">
+  <span id="count">5</span> unread messages
+</div>
+<!-- Announces: "6" when count changes -->
+
+<!-- Read entire region -->
+<div aria-live="polite" aria-atomic="true">
+  <span id="count">5</span> unread messages
+</div>
+<!-- Announces: "6 unread messages" -->
+```
+
+---
+
+## Complex Widget Patterns
+
+### Accordion
+
+```html
+<div class="accordion">
+  <h3>
+    <button
+      aria-expanded="false"
+      aria-controls="panel-1"
+      id="accordion-1"
+    >
+      Section 1
+    </button>
+  </h3>
+  <div id="panel-1" role="region" aria-labelledby="accordion-1" hidden>
+    Content for section 1
+  </div>
+</div>
+```
+
+**Keyboard**: Enter/Space toggles, Arrow keys move between headers (optional).
+
+### Combobox (Autocomplete)
+
+```html
+<label for="country">Country</label>
+<input
+  type="text"
+  id="country"
+  role="combobox"
+  aria-expanded="false"
+  aria-controls="countries-list"
+  aria-autocomplete="list"
+  aria-activedescendant=""
+>
+<ul id="countries-list" role="listbox" hidden>
+  <li role="option" id="option-1">United States</li>
+  <li role="option" id="option-2">United Kingdom</li>
+</ul>
+```
+
+**Keyboard**: Arrow keys navigate options, Enter selects, Escape closes.
+
+### Tooltip
+
+```html
+<button aria-describedby="tooltip">
+  <svg><!-- Info icon --></svg>
+</button>
+<div id="tooltip" role="tooltip" hidden>
+  Additional information about this feature
+</div>
+```
+
+**Show on hover/focus, hide on Escape**.
+
+---
+
+## ARIA Authoring Practices (APG) Patterns
+
+Full reference: https://www.w3.org/WAI/ARIA/apg/patterns/
+
+### Most Common Patterns
+
+- **Accordion** - Collapsible sections
+- **Alert** - Important messages
+- **Breadcrumb** - Navigation path
+- **Button** - Clickable action
+- **Combobox** - Autocomplete input
+- **Dialog (Modal)** - Overlay requiring interaction
+- **Disclosure** - Show/hide content
+- **Listbox** - Selectable list
+- **Menu/Menubar** - Application menu
+- **Tabs** - Tabbed interface
+- **Tooltip** - Contextual help
+
+**Each pattern has**:
+- Required ARIA roles/properties
+- Keyboard interaction spec
+- Example implementations
+
+---
+
+## Testing ARIA Implementation
+
+### Screen Reader Testing
+
+**NVDA (Windows)**:
+```
+NVDA+Down Arrow - Read element
+NVDA+T - Read title
+Insert+F7 - List all landmarks
+Insert+Ctrl+B - Read from beginning
+```
+
+**VoiceOver (Mac)**:
+```
+VO+A - Read from beginning
+VO+Right Arrow - Next item
+VO+U - Rotor (navigate by headings, landmarks)
+VO+HH - Help
+```
+
+### Automated Testing
+
+```bash
+# axe-core (via browser extension or CLI)
+npm install -g @axe-core/cli
+axe https://example.com
+```
+
+**Check for**:
+- ARIA roles used correctly
+- ARIA states toggle properly
+- aria-labelledby/describedby point to valid IDs
+- Focusable elements have accessible names
+- Live regions announce updates
+
+---
+
+## Common ARIA Mistakes
+
+### ❌ ARIA on native elements
+
+```html
+<!-- ❌ WRONG - button already has role -->
+<button role="button">Click</button>
+
+<!-- ✅ CORRECT -->
+<button>Click</button>
+```
+
+### ❌ ARIA without keyboard support
+
+```html
+<!-- ❌ WRONG - role doesn't add keyboard -->
+<div role="button" onclick="doThing()">Click</div>
+
+<!-- ✅ CORRECT - must handle keyboard -->
+<div
+  role="button"
+  tabindex="0"
+  onclick="doThing()"
+  onkeydown="handleEnterSpace(event)"
+>
+  Click
+</div>
+
+<!-- ✅ BETTER - use native element -->
+<button onclick="doThing()">Click</button>
+```
+
+### ❌ aria-hidden on focusable elements
+
+```html
+<!-- ❌ WRONG - hidden but focusable -->
+<button aria-hidden="true">Click</button>
+
+<!-- ✅ CORRECT - use hidden attribute -->
+<button hidden>Click</button>
+```
+
+### ❌ Empty aria-label
+
+```html
+<!-- ❌ WRONG - removes accessible name -->
+<button aria-label="">
+  <svg><!-- Icon --></svg>
+  Save
+</button>
+
+<!-- ✅ CORRECT - omit aria-label to use visible text -->
+<button>
+  <svg aria-hidden="true"><!-- Icon --></svg>
+  Save
+</button>
+```
+
+---
+
+**Remember**: First Rule of ARIA - Don't use ARIA. Use semantic HTML first, ARIA only when HTML doesn't support the pattern.
diff --git a/.cursor/skills/accessibility/references/color-contrast.md b/.cursor/skills/accessibility/references/color-contrast.md
new file mode 100644
index 0000000..5b82e37
--- /dev/null
+++ b/.cursor/skills/accessibility/references/color-contrast.md
@@ -0,0 +1,388 @@
+# Color Contrast Requirements
+
+WCAG 2.1 requires specific contrast ratios to ensure text and UI components are readable for users with low vision or color blindness.
+
+---
+
+## WCAG AA Contrast Requirements
+
+### Text Contrast (WCAG 1.4.3)
+
+| Text Type | Minimum Ratio | Example |
+|-----------|---------------|---------|
+| **Normal text** (under 18pt or under 14pt bold) | **4.5:1** | Body copy, paragraphs, small headings |
+| **Large text** (18pt+ or 14pt+ bold) | **3:1** | Large headings, hero text |
+
+### UI Component Contrast (WCAG 1.4.11)
+
+| Component | Minimum Ratio | Example |
+|-----------|---------------|---------|
+| **UI components** | **3:1** | Buttons, form borders, focus indicators |
+| **Graphical objects** | **3:1** | Icons, chart elements, required info graphics |
+
+---
+
+## Testing Tools
+
+### Browser DevTools
+
+**Chrome DevTools**:
+1. Inspect element
+2. Look for contrast ratio in Styles panel next to color
+3. Icons show AA/AAA pass/fail
+4. Click color swatch → contrast ratio details
+
+**Firefox DevTools**:
+1. Inspect element
+2. Color picker shows contrast ratio
+3. Accessibility panel highlights issues
+
+### Browser Extensions
+
+- **axe DevTools** - Comprehensive scanner
+- **WAVE** - Visual feedback overlay
+- **Color Contrast Analyzer** - Manual checking
+
+### Online Tools
+
+- **WebAIM Contrast Checker**: https://webaim.org/resources/contrastchecker/
+- **Coolors Contrast Checker**: https://coolors.co/contrast-checker
+- **Color Review**: https://color.review/
+
+---
+
+## Common Color Combinations
+
+### Passing Combinations (4.5:1+)
+
+```css
+/* Black on white */
+color: #000000;
+background: #ffffff;
+/* Ratio: 21:1 ✅ AAA */
+
+/* Dark gray on white */
+color: #595959;
+background: #ffffff;
+/* Ratio: 4.6:1 ✅ AA */
+
+/* White on dark blue */
+color: #ffffff;
+background: #0066cc;
+/* Ratio: 5.7:1 ✅ AA */
+
+/* White on black */
+color: #ffffff;
+background: #000000;
+/* Ratio: 21:1 ✅ AAA */
+
+/* Dark text on light gray */
+color: #1a1a1a;
+background: #f5f5f5;
+/* Ratio: 14.8:1 ✅ AAA */
+```
+
+### Failing Combinations (under 4.5:1)
+
+```css
+/* Light gray on white */
+color: #999999;
+background: #ffffff;
+/* Ratio: 2.8:1 ❌ FAIL */
+
+/* Medium gray on light gray */
+color: #666666;
+background: #f0f0f0;
+/* Ratio: 3.4:1 ❌ FAIL (AA normal text) */
+/* ✅ PASS for large text (3:1+) */
+
+/* Blue on white */
+color: #4d90fe;
+background: #ffffff;
+/* Ratio: 2.9:1 ❌ FAIL */
+```
+
+---
+
+## Building Accessible Color Palettes
+
+### Strategy 1: Start with Extremes
+
+```css
+:root {
+  /* Define extremes first */
+  --background: #ffffff;  /* Lightest */
+  --foreground: #000000;  /* Darkest */
+
+  /* Fill in between */
+  --text-primary: #1a1a1a;    /* 16.1:1 on white */
+  --text-secondary: #4d4d4d;  /* 7.5:1 on white */
+  --text-muted: #737373;      /* 4.7:1 on white */
+  --text-disabled: #a3a3a3;   /* 2.9:1 - use only on large text */
+}
+
+.dark {
+  --background: #0a0a0a;
+  --foreground: #ffffff;
+
+  --text-primary: #f5f5f5;    /* 17.6:1 on black */
+  --text-secondary: #d4d4d4;  /* 11.2:1 on black */
+  --text-muted: #a3a3a3;      /* 5.9:1 on black */
+}
+```
+
+### Strategy 2: Semantic Colors with Variants
+
+```css
+:root {
+  /* Primary (brand) */
+  --primary: #0066cc;         /* Base (might not pass on white) */
+  --primary-dark: #004080;    /* 6.5:1 on white ✅ */
+  --primary-light: #3399ff;   /* Use only on dark backgrounds */
+
+  /* Success */
+  --success: #10b981;         /* 2.7:1 on white ❌ */
+  --success-dark: #059669;    /* 4.6:1 on white ✅ */
+
+  /* Warning */
+  --warning: #f59e0b;         /* 2.2:1 on white ❌ */
+  --warning-dark: #d97706;    /* 3.9:1 on white - use large only */
+
+  /* Error */
+  --error: #ef4444;           /* 3.3:1 on white ❌ */
+  --error-dark: #b91c1c;      /* 6.2:1 on white ✅ */
+}
+
+/* Usage */
+.button-primary {
+  background: var(--primary);
+  color: white;  /* White on #0066cc = 5.7:1 ✅ */
+}
+
+.text-success {
+  color: var(--success-dark);  /* Use dark variant for text */
+}
+```
+
+### Strategy 3: Contrast-Safe Defaults
+
+```css
+:root {
+  /* Always-safe text colors */
+  --text-on-light: #1a1a1a;   /* 16.1:1 on white */
+  --text-on-dark: #f5f5f5;    /* 17.6:1 on black */
+
+  /* Always-safe backgrounds */
+  --bg-primary: #ffffff;
+  --bg-secondary: #f5f5f5;
+  --bg-tertiary: #e5e5e5;
+
+  /* Brand colors (decorative/large text only) */
+  --brand-blue: #0066cc;
+  --brand-green: #10b981;
+}
+
+/* Apply text colors automatically */
+.bg-light {
+  background: var(--bg-primary);
+  color: var(--text-on-light);
+}
+
+.bg-dark {
+  background: #1a1a1a;
+  color: var(--text-on-dark);
+}
+```
+
+---
+
+## Component-Specific Patterns
+
+### Buttons
+
+```css
+/* Primary button */
+.button-primary {
+  background: #0066cc;
+  color: #ffffff;       /* 5.7:1 ✅ */
+  border: 2px solid #0066cc;
+}
+
+.button-primary:hover {
+  background: #004080;  /* Darker on hover */
+}
+
+.button-primary:focus-visible {
+  outline: 2px solid #0066cc;
+  outline-offset: 2px;  /* 3:1 against page background ✅ */
+}
+
+/* Secondary button */
+.button-secondary {
+  background: transparent;
+  color: #004080;       /* 6.5:1 on white ✅ */
+  border: 2px solid #737373;  /* 4.7:1 on white ✅ */
+}
+```
+
+### Form Inputs
+
+```css
+input, textarea, select {
+  background: #ffffff;
+  color: #1a1a1a;       /* 16.1:1 ✅ */
+  border: 1px solid #737373;  /* 4.7:1 ✅ */
+}
+
+input:focus {
+  border-color: #0066cc;
+  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.25);
+  /* Visible focus indicator ✅ */
+}
+
+input::placeholder {
+  color: #737373;       /* 4.7:1 - borderline ⚠️ */
+  /* Consider darker for AA compliance */
+}
+```
+
+### Error States
+
+```css
+.error {
+  color: #b91c1c;       /* 6.2:1 on white ✅ */
+}
+
+.input-error {
+  border-color: #dc2626;  /* 4.5:1 on white ✅ */
+}
+
+.error-message {
+  color: #991b1b;       /* 7.5:1 on white ✅ */
+  background: #fef2f2;
+}
+```
+
+### Links
+
+```css
+a {
+  color: #0066cc;       /* 5.7:1 on white ✅ */
+  text-decoration: underline;  /* Not just color */
+}
+
+a:visited {
+  color: #551a8b;       /* 7.7:1 on white ✅ */
+}
+
+a:hover, a:focus {
+  color: #004080;       /* 6.5:1 on white ✅ */
+  text-decoration: none;
+}
+```
+
+---
+
+## Dark Mode Considerations
+
+### Avoid Pure Black (#000000)
+
+Pure black can cause eye strain on OLED screens. Use near-black instead:
+
+```css
+.dark {
+  --background: #0a0a0a;      /* Not #000000 */
+  --background-elevated: #1a1a1a;
+}
+```
+
+### Reduce Contrast Slightly
+
+Very high contrast (white on black) can be harsh. Slightly reduce:
+
+```css
+.dark {
+  --text-primary: #f5f5f5;    /* Not #ffffff */
+  --text-secondary: #d4d4d4;
+}
+```
+
+### Test Both Modes
+
+```css
+:root {
+  --background: #ffffff;
+  --text: #1a1a1a;
+}
+
+.dark {
+  --background: #0a0a0a;
+  --text: #f5f5f5;
+}
+
+/* Both pass 4.5:1 ✅ */
+```
+
+---
+
+## Color Blindness Considerations
+
+### Don't Rely on Color Alone
+
+```html
+<!-- ❌ WRONG - red text only -->
+<span style="color: red;">Error</span>
+
+<!-- ✅ CORRECT - icon + text -->
+<span class="error">
+  <svg aria-hidden="true"><!-- Error icon --></svg>
+  Error: Invalid email
+</span>
+```
+
+### Use Patterns/Textures
+
+```css
+/* Chart bars */
+.bar-1 { background: #0066cc url('pattern-1.svg'); }
+.bar-2 { background: #10b981 url('pattern-2.svg'); }
+.bar-3 { background: #f59e0b url('pattern-3.svg'); }
+```
+
+### Test with Simulators
+
+- **Chrome DevTools**: Rendering → Emulate vision deficiencies
+- **Colorblind Web Page Filter**: https://www.toptal.com/designers/colorfilter/
+- **Coblis Color Blindness Simulator**: https://www.color-blindness.com/coblis-color-blindness-simulator/
+
+---
+
+## Quick Testing Workflow
+
+1. **Pick foreground color**
+2. **Pick background color**
+3. **Test in contrast checker**:
+   - Is ratio ≥ 4.5:1 for normal text? ✅
+   - Is ratio ≥ 3:1 for large text/UI? ✅
+4. **Adjust if needed**:
+   - Darken foreground OR lighten background
+   - Test again
+5. **Verify in browser**:
+   - Check with axe DevTools
+   - View with simulated color blindness
+
+---
+
+## Common Failures and Fixes
+
+| Failure | Ratio | Fix |
+|---------|-------|-----|
+| Light gray (#999) on white | 2.8:1 ❌ | Darken to #595959 (4.6:1 ✅) |
+| Blue (#4d90fe) on white | 2.9:1 ❌ | Darken to #0066cc (5.7:1 ✅) |
+| Green (#10b981) on white | 2.7:1 ❌ | Darken to #059669 (4.6:1 ✅) |
+| Orange (#f59e0b) on white | 2.2:1 ❌ | Darken to #d97706 (3.9:1, large only) or #b45309 (5.0:1 ✅) |
+| White on yellow (#fbbf24) | 1.4:1 ❌ | Use black text instead (13.6:1 ✅) |
+
+---
+
+**Key Takeaway**: Always test color contrast. Use browser DevTools or online checkers before committing to a color palette.
diff --git a/.cursor/skills/accessibility/references/focus-management.md b/.cursor/skills/accessibility/references/focus-management.md
new file mode 100644
index 0000000..997db58
--- /dev/null
+++ b/.cursor/skills/accessibility/references/focus-management.md
@@ -0,0 +1,493 @@
+# Focus Management Patterns
+
+Proper focus management ensures keyboard-only users can navigate and operate your interface efficiently.
+
+---
+
+## Core Principles
+
+1. **All interactive elements must be focusable** - Button, links, form inputs
+2. **Focus order must be logical** - Follows visual/reading order
+3. **Focus must be visible** - Never `outline: none` without replacement
+4. **Focus can't get trapped** - Must be able to escape every component
+5. **Focus should be managed** - Restore focus after dialogs, handle SPA navigation
+
+---
+
+## Focus Visibility
+
+### The Focus-Visible Pattern
+
+```css
+/* ❌ WRONG - removes all focus indicators */
+*:focus {
+  outline: none;
+}
+
+/* ✅ CORRECT - custom indicator on keyboard focus only */
+*:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+/* Optional: Remove indicator on mouse click */
+*:focus:not(:focus-visible) {
+  outline: none;
+}
+```
+
+**`:focus-visible`** shows outline only when keyboard is used, not on mouse click.
+
+### Contrast Requirements
+
+Focus indicators must have **3:1 contrast** against background (WCAG 2.4.11).
+
+```css
+/* ✅ PASS - Blue #0066cc on white has 8:1 */
+*:focus-visible {
+  outline: 2px solid #0066cc;
+}
+
+/* ❌ FAIL - Light gray #ccc on white has 1.7:1 */
+*:focus-visible {
+  outline: 2px solid #cccccc;
+}
+```
+
+---
+
+## Tab Order
+
+### Natural Tab Order
+
+Follows DOM order - don't use `tabindex` > 0.
+
+```html
+<!-- ✅ Natural order: 1 → 2 → 3 -->
+<input type="text" name="name">
+<input type="email" name="email">
+<button type="submit">Submit</button>
+```
+
+### Managing Focus with tabindex
+
+```html
+<!-- tabindex="0" - Adds to natural tab order -->
+<div role="button" tabindex="0">Custom button</div>
+
+<!-- tabindex="-1" - Programmatically focusable only -->
+<main id="main-content" tabindex="-1">
+  <!-- Can receive focus via JS but not Tab key -->
+</main>
+
+<!-- ❌ tabindex="1+" - DON'T USE - breaks natural order -->
+<button tabindex="5">Don't do this</button>
+```
+
+**Rule**: Only use `tabindex="0"` or `tabindex="-1"`. Never use positive integers.
+
+---
+
+## Skip Links
+
+Allow keyboard users to skip repeated content.
+
+### Implementation
+
+```html
+<!-- Place at very top of <body> -->
+<a href="#main-content" class="skip-link">
+  Skip to main content
+</a>
+
+<style>
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: var(--primary);
+  color: white;
+  padding: 8px 16px;
+  text-decoration: none;
+  z-index: 9999;
+}
+
+.skip-link:focus {
+  top: 0;
+}
+</style>
+
+<!-- Target element -->
+<main id="main-content" tabindex="-1">
+  <!-- Page content -->
+</main>
+```
+
+### Multiple Skip Links
+
+```html
+<div class="skip-links">
+  <a href="#main-content">Skip to content</a>
+  <a href="#nav">Skip to navigation</a>
+  <a href="#search">Skip to search</a>
+</div>
+```
+
+---
+
+## Focus Traps
+
+Trap focus within modal dialogs to prevent background interaction.
+
+### Dialog Focus Trap Pattern
+
+```typescript
+function FocusTrap({ children, isActive }: { children: React.ReactNode; isActive: boolean }) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isActive) return;
+
+    const container = containerRef.current;
+    if (!container) return;
+
+    // Get all focusable elements
+    const focusableElements = container.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+
+    if (focusableElements.length === 0) return;
+
+    const first = focusableElements[0] as HTMLElement;
+    const last = focusableElements[focusableElements.length - 1] as HTMLElement;
+
+    // Focus first element
+    first.focus();
+
+    const handleTab = (e: KeyboardEvent) => {
+      if (e.key !== 'Tab') return;
+
+      if (e.shiftKey) {
+        // Shift+Tab on first element → focus last
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        // Tab on last element → focus first
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleTab);
+    return () => document.removeEventListener('keydown', handleTab);
+  }, [isActive]);
+
+  return <div ref={containerRef}>{children}</div>;
+}
+
+// Usage
+function Dialog({ isOpen, onClose }) {
+  return isOpen ? (
+    <FocusTrap isActive={isOpen}>
+      <div role="dialog" aria-modal="true">
+        <h2>Dialog title</h2>
+        <button onClick={onClose}>Close</button>
+      </div>
+    </FocusTrap>
+  ) : null;
+}
+```
+
+### Escape Key Handler
+
+```typescript
+useEffect(() => {
+  if (!isOpen) return;
+
+  const handleEscape = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      onClose();
+    }
+  };
+
+  document.addEventListener('keydown', handleEscape);
+  return () => document.removeEventListener('keydown', handleEscape);
+}, [isOpen, onClose]);
+```
+
+---
+
+## Focus Restoration
+
+Restore focus after closing dialogs, menus, or navigating.
+
+### Dialog Focus Restoration
+
+```typescript
+function Dialog({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
+  const previousFocus = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      // Save currently focused element
+      previousFocus.current = document.activeElement as HTMLElement;
+    } else if (previousFocus.current) {
+      // Restore focus when closing
+      previousFocus.current.focus();
+      previousFocus.current = null;
+    }
+  }, [isOpen]);
+
+  return isOpen ? (
+    <div role="dialog">
+      {/* Dialog content */}
+    </div>
+  ) : null;
+}
+```
+
+### SPA Focus Management
+
+Reset focus on route change:
+
+```typescript
+// React Router example
+function App() {
+  const location = useLocation();
+  const mainRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    // Focus main content on route change
+    mainRef.current?.focus();
+  }, [location.pathname]);
+
+  return (
+    <main ref={mainRef} id="main-content" tabindex={-1}>
+      <Outlet />
+    </main>
+  );
+}
+```
+
+---
+
+## Keyboard Navigation Patterns
+
+### Arrow Key Navigation
+
+For menus, tabs, radio groups:
+
+```typescript
+function Tabs({ tabs }: { tabs: string[] }) {
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const handleKeyDown = (e: React.KeyboardEvent, index: number) => {
+    if (e.key === 'ArrowLeft') {
+      e.preventDefault();
+      const newIndex = index === 0 ? tabs.length - 1 : index - 1;
+      setActiveIndex(newIndex);
+    } else if (e.key === 'ArrowRight') {
+      e.preventDefault();
+      const newIndex = index === tabs.length - 1 ? 0 : index + 1;
+      setActiveIndex(newIndex);
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      setActiveIndex(0);
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      setActiveIndex(tabs.length - 1);
+    }
+  };
+
+  return (
+    <div role="tablist">
+      {tabs.map((tab, index) => (
+        <button
+          key={index}
+          role="tab"
+          tabIndex={activeIndex === index ? 0 : -1}
+          aria-selected={activeIndex === index}
+          onClick={() => setActiveIndex(index)}
+          onKeyDown={(e) => handleKeyDown(e, index)}
+        >
+          {tab}
+        </button>
+      ))}
+    </div>
+  );
+}
+```
+
+**Pattern**:
+- Active element has `tabindex="0"`
+- Inactive elements have `tabindex="-1"`
+- Arrow keys change active element and move focus
+- Home/End jump to first/last
+
+### Dropdown Menu
+
+```typescript
+function DropdownMenu({ trigger, items }: { trigger: string; items: Array<{ label: string; onClick: () => void }> }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [focusedIndex, setFocusedIndex] = useState(0);
+
+  const handleTriggerKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      setIsOpen(true);
+      setFocusedIndex(0);
+    }
+  };
+
+  const handleMenuKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setFocusedIndex((prev) => (prev + 1) % items.length);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setFocusedIndex((prev) => (prev - 1 + items.length) % items.length);
+    } else if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      items[focusedIndex]?.onClick();
+      setIsOpen(false);
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      setIsOpen(false);
+    }
+  };
+
+  return (
+    <div>
+      <button
+        aria-haspopup="true"
+        aria-expanded={isOpen}
+        onClick={() => setIsOpen(!isOpen)}
+        onKeyDown={handleTriggerKeyDown}
+      >
+        {trigger}
+      </button>
+
+      {isOpen && (
+        <ul role="menu" onKeyDown={handleMenuKeyDown}>
+          {items.map((item, index) => (
+            <li key={index} role="none">
+              <button
+                role="menuitem"
+                tabIndex={focusedIndex === index ? 0 : -1}
+                onClick={() => {
+                  item.onClick();
+                  setIsOpen(false);
+                }}
+              >
+                {item.label}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+```
+
+---
+
+## Focus Indicators for Components
+
+### Cards/Links
+
+```css
+.card:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 4px;
+}
+```
+
+### Form Inputs
+
+```css
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.25);
+}
+```
+
+### Buttons
+
+```css
+button:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+```
+
+---
+
+## Testing Focus Management
+
+### Manual Testing
+
+1. **Unplug mouse** or hide cursor
+2. **Tab through page**:
+   - Can you reach all interactive elements?
+   - Is focus visible at all times?
+   - Is tab order logical?
+3. **Test dialogs**:
+   - Does focus move into dialog?
+   - Can you Tab within dialog?
+   - Can you Escape to close?
+   - Does focus restore after closing?
+4. **Test menus**:
+   - Can you open with keyboard?
+   - Can you navigate with arrows?
+   - Can you activate with Enter?
+   - Can you close with Escape?
+
+### Automated Testing
+
+```javascript
+// Check for focus trap issues
+const dialog = document.querySelector('[role="dialog"]');
+const focusable = dialog.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+console.log(`Focusable elements in dialog: ${focusable.length}`);
+
+// Check for visible focus
+const activeElement = document.activeElement;
+const styles = window.getComputedStyle(activeElement);
+console.log('Outline:', styles.outline);
+console.log('Box-shadow:', styles.boxShadow);
+```
+
+---
+
+## Common Issues
+
+### Problem: Focus disappears in SPA
+
+**Cause**: Navigation doesn't reset focus
+**Solution**: Focus main content on route change
+
+### Problem: Can't Tab out of component
+
+**Cause**: Focus trap without Escape key handler
+**Solution**: Add Escape listener to close/exit
+
+### Problem: Tab order illogical
+
+**Cause**: DOM order doesn't match visual order (CSS positioning)
+**Solution**: Reorder DOM to match visual layout
+
+### Problem: Focus indicator missing
+
+**Cause**: CSS removed outline without replacement
+**Solution**: Add `:focus-visible` styles
+
+---
+
+**Key Takeaway**: Focus management is essential for keyboard accessibility. Test every interactive component with keyboard only.
diff --git a/.cursor/skills/accessibility/references/forms-validation.md b/.cursor/skills/accessibility/references/forms-validation.md
new file mode 100644
index 0000000..d15293e
--- /dev/null
+++ b/.cursor/skills/accessibility/references/forms-validation.md
@@ -0,0 +1,557 @@
+# Accessible Forms and Validation
+
+Forms are critical for web interaction. This guide covers accessible form patterns, validation, and error handling.
+
+---
+
+## Form Label Requirements
+
+### Every Input Needs a Label
+
+```html
+<!-- ✅ CORRECT - explicit label -->
+<label for="email">Email address</label>
+<input type="email" id="email" name="email">
+
+<!-- ✅ CORRECT - implicit label -->
+<label>
+  Email address
+  <input type="email" name="email">
+</label>
+
+<!-- ❌ WRONG - no label -->
+<input type="email" placeholder="Email address">
+
+<!-- ❌ WRONG - aria-label when visible label should exist -->
+<input type="email" aria-label="Email address">
+<!-- Screen reader gets it, but visual users don't -->
+```
+
+**Rule**: Use visible `<label>` elements. Placeholders are not labels.
+
+---
+
+## Required Fields
+
+### Mark Required Fields
+
+```html
+<!-- ✅ Visual + programmatic -->
+<label for="name">
+  Full name <span aria-label="required">*</span>
+</label>
+<input
+  type="text"
+  id="name"
+  name="name"
+  required
+  aria-required="true"
+>
+
+<!-- ✅ Text indicator -->
+<label for="email">
+  Email address (required)
+</label>
+<input type="email" id="email" required>
+
+<!-- ❌ WRONG - visual only -->
+<label for="phone">Phone *</label>
+<input type="tel" id="phone">
+<!-- Missing required attribute -->
+```
+
+### Group Required Indicator
+
+```html
+<form>
+  <p><span aria-label="required">*</span> indicates required field</p>
+
+  <label for="name">Name *</label>
+  <input type="text" id="name" required>
+</form>
+```
+
+---
+
+## Input Types and Autocomplete
+
+### Use Correct Input Types
+
+```html
+<!-- Text -->
+<input type="text" autocomplete="name">
+<input type="email" autocomplete="email">
+<input type="tel" autocomplete="tel">
+<input type="url">
+
+<!-- Password -->
+<input type="password" autocomplete="current-password">
+<input type="password" autocomplete="new-password">
+
+<!-- Numbers and Dates -->
+<input type="number" min="1" max="10">
+<input type="date" autocomplete="bday">
+
+<!-- Choices -->
+<input type="checkbox">
+<input type="radio">
+<select>...</select>
+```
+
+**Benefit**: Correct keyboard on mobile, better autofill.
+
+---
+
+## Field Instructions
+
+### Use aria-describedby for Hints
+
+```html
+<label for="password">Password</label>
+<input
+  type="password"
+  id="password"
+  aria-describedby="password-requirements"
+>
+<div id="password-requirements">
+  Must be at least 8 characters with one uppercase letter and one number.
+</div>
+```
+
+### Complex Instructions
+
+```html
+<fieldset>
+  <legend>Create your password</legend>
+
+  <label for="new-password">New password</label>
+  <input
+    type="password"
+    id="new-password"
+    aria-describedby="password-reqs password-strength"
+  >
+
+  <div id="password-reqs">
+    <ul>
+      <li>At least 8 characters</li>
+      <li>One uppercase letter</li>
+      <li>One number</li>
+    </ul>
+  </div>
+
+  <div id="password-strength" role="status" aria-live="polite">
+    <!-- Dynamically updated: "Weak", "Medium", "Strong" -->
+  </div>
+</fieldset>
+```
+
+---
+
+## Error Handling
+
+### Identify Errors (WCAG 3.3.1)
+
+```html
+<label for="email">Email address</label>
+<input
+  type="email"
+  id="email"
+  aria-invalid="true"
+  aria-describedby="email-error"
+>
+<span id="email-error" role="alert">
+  Error: Please enter a valid email address
+</span>
+```
+
+**Critical**:
+- `aria-invalid="true"` on input
+- `aria-describedby` points to error message
+- Error message has `role="alert"` for announcement
+
+### Error Summary
+
+```html
+<div role="alert" aria-labelledby="error-heading">
+  <h2 id="error-heading">There are 2 errors in this form</h2>
+  <ul>
+    <li><a href="#email">Email format is incorrect</a></li>
+    <li><a href="#password">Password is too short</a></li>
+  </ul>
+</div>
+
+<!-- Links jump to fields -->
+<label for="email">Email</label>
+<input type="email" id="email" aria-invalid="true">
+```
+
+### Inline Validation
+
+```typescript
+function EmailInput() {
+  const [email, setEmail] = useState('');
+  const [error, setError] = useState('');
+  const [touched, setTouched] = useState(false);
+
+  const validate = (value: string) => {
+    if (!value) return 'Email is required';
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+      return 'Email format is incorrect. Example: name@example.com';
+    }
+    return '';
+  };
+
+  const handleBlur = () => {
+    setTouched(true);
+    setError(validate(email));
+  };
+
+  return (
+    <div>
+      <label htmlFor="email">Email address</label>
+      <input
+        type="email"
+        id="email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        onBlur={handleBlur}
+        aria-invalid={touched && !!error}
+        aria-describedby={error ? 'email-error' : undefined}
+      />
+      {touched && error && (
+        <span id="email-error" role="alert" className="error">
+          {error}
+        </span>
+      )}
+    </div>
+  );
+}
+```
+
+---
+
+## Live Regions for Dynamic Updates
+
+### Success Messages
+
+```html
+<div role="status" aria-live="polite">
+  Form submitted successfully
+</div>
+```
+
+### Error Announcements
+
+```html
+<div role="alert" aria-live="assertive" aria-atomic="true">
+  Error: Please fix the 3 errors above before submitting
+</div>
+```
+
+### Character Counter
+
+```html
+<label for="bio">Bio</label>
+<textarea
+  id="bio"
+  maxlength="500"
+  aria-describedby="bio-counter"
+></textarea>
+<div id="bio-counter" role="status" aria-live="polite">
+  450 characters remaining
+</div>
+```
+
+---
+
+## Fieldsets and Radio Groups
+
+### Radio Button Groups
+
+```html
+<fieldset>
+  <legend>How did you hear about us?</legend>
+
+  <label>
+    <input type="radio" name="source" value="search">
+    Search engine
+  </label>
+
+  <label>
+    <input type="radio" name="source" value="social">
+    Social media
+  </label>
+
+  <label>
+    <input type="radio" name="source" value="friend">
+    Friend referral
+  </label>
+</fieldset>
+```
+
+**Screen reader**: Reads legend before each option.
+
+### Checkbox Groups
+
+```html
+<fieldset>
+  <legend>Select your interests</legend>
+
+  <label>
+    <input type="checkbox" name="interests" value="design">
+    Design
+  </label>
+
+  <label>
+    <input type="checkbox" name="interests" value="development">
+    Development
+  </label>
+</fieldset>
+```
+
+---
+
+## Custom Form Controls
+
+### Custom Checkbox
+
+```html
+<label class="custom-checkbox">
+  <input type="checkbox" class="visually-hidden">
+  <span class="checkbox-visual" aria-hidden="true">
+    <!-- Custom visual -->
+  </span>
+  I agree to the terms
+</label>
+
+<style>
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.custom-checkbox input:focus + .checkbox-visual {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+</style>
+```
+
+**Pattern**: Hide native input visually, not from screen readers. Style custom visual.
+
+### Custom Select (Combobox)
+
+```html
+<label for="country-select">Country</label>
+<div class="custom-select">
+  <input
+    type="text"
+    id="country-select"
+    role="combobox"
+    aria-expanded="false"
+    aria-controls="country-list"
+    aria-autocomplete="list"
+    aria-activedescendant=""
+  >
+  <ul id="country-list" role="listbox" hidden>
+    <li role="option" id="option-us">United States</li>
+    <li role="option" id="option-uk">United Kingdom</li>
+  </ul>
+</div>
+```
+
+**Complex**: Requires full keyboard support, ARIA state management. Prefer native `<select>` when possible.
+
+---
+
+## Form Submission
+
+### Prevent Accidental Submission
+
+```html
+<form>
+  <!-- Inputs -->
+
+  <!-- Explicit submit button -->
+  <button type="submit">Submit form</button>
+
+  <!-- Other buttons must specify type="button" -->
+  <button type="button" onclick="clearForm()">Clear</button>
+</form>
+```
+
+### Confirmation for Destructive Actions
+
+```html
+<form onsubmit="return confirm('Are you sure you want to delete your account? This cannot be undone.')">
+  <!-- Form fields -->
+  <button type="submit" class="destructive">Delete account</button>
+</form>
+```
+
+### Loading States
+
+```html
+<button type="submit" disabled aria-live="polite">
+  <span aria-hidden="true"><!-- Spinner --></span>
+  Submitting...
+</button>
+```
+
+---
+
+## Multi-Step Forms
+
+### Progress Indicator
+
+```html
+<nav aria-label="Form progress">
+  <ol>
+    <li><a href="#step1" aria-current="step">Personal info</a></li>
+    <li><a href="#step2">Address</a></li>
+    <li><a href="#step3">Payment</a></li>
+  </ol>
+</nav>
+```
+
+### Step Navigation
+
+```html
+<form>
+  <fieldset id="step1">
+    <legend>Step 1: Personal information</legend>
+    <!-- Fields -->
+    <button type="button" onclick="goToStep(2)">Next</button>
+  </fieldset>
+
+  <fieldset id="step2" hidden>
+    <legend>Step 2: Address</legend>
+    <!-- Fields -->
+    <button type="button" onclick="goToStep(1)">Previous</button>
+    <button type="button" onclick="goToStep(3)">Next</button>
+  </fieldset>
+
+  <fieldset id="step3" hidden>
+    <legend>Step 3: Payment</legend>
+    <!-- Fields -->
+    <button type="button" onclick="goToStep(2)">Previous</button>
+    <button type="submit">Submit</button>
+  </fieldset>
+</form>
+```
+
+---
+
+## File Uploads
+
+### Accessible File Input
+
+```html
+<label for="resume">Upload resume (PDF, DOC, max 5MB)</label>
+<input
+  type="file"
+  id="resume"
+  name="resume"
+  accept=".pdf,.doc,.docx"
+  aria-describedby="file-requirements"
+>
+<div id="file-requirements">
+  Accepted formats: PDF, Word Document. Maximum size: 5MB.
+</div>
+```
+
+### Upload Status
+
+```html
+<div role="status" aria-live="polite" aria-atomic="true">
+  Uploading file... 45% complete
+</div>
+```
+
+---
+
+## Common Patterns
+
+### Login Form
+
+```html
+<form>
+  <h2>Sign in to your account</h2>
+
+  <label for="username">Username or email</label>
+  <input
+    type="text"
+    id="username"
+    name="username"
+    autocomplete="username"
+    required
+  >
+
+  <label for="password">Password</label>
+  <input
+    type="password"
+    id="password"
+    name="password"
+    autocomplete="current-password"
+    required
+  >
+
+  <label>
+    <input type="checkbox" name="remember">
+    Remember me
+  </label>
+
+  <button type="submit">Sign in</button>
+  <a href="/forgot-password">Forgot password?</a>
+</form>
+```
+
+### Contact Form
+
+```html
+<form>
+  <h2>Contact us</h2>
+
+  <label for="name">Name *</label>
+  <input type="text" id="name" required autocomplete="name">
+
+  <label for="email">Email *</label>
+  <input type="email" id="email" required autocomplete="email">
+
+  <label for="message">Message *</label>
+  <textarea id="message" required rows="5"></textarea>
+
+  <button type="submit">Send message</button>
+
+  <div role="alert" aria-live="assertive" aria-atomic="true">
+    <!-- Error/success message appears here -->
+  </div>
+</form>
+```
+
+---
+
+## Testing Checklist
+
+- [ ] All inputs have associated labels
+- [ ] Required fields marked (visual + programmatic)
+- [ ] Error messages linked with aria-describedby
+- [ ] aria-invalid set on fields with errors
+- [ ] Error summary at top of form with role="alert"
+- [ ] Success/error messages use live regions
+- [ ] Correct input types and autocomplete
+- [ ] Tab order is logical
+- [ ] Can submit with keyboard (Enter key)
+- [ ] Focus visible on all form controls
+- [ ] Tested with screen reader
+
+---
+
+**Key Takeaway**: Accessible forms require visible labels, clear error messages, and proper ARIA attributes. Test with keyboard and screen reader.
diff --git a/.cursor/skills/accessibility/references/semantic-html.md b/.cursor/skills/accessibility/references/semantic-html.md
new file mode 100644
index 0000000..116c0dd
--- /dev/null
+++ b/.cursor/skills/accessibility/references/semantic-html.md
@@ -0,0 +1,686 @@
+# Semantic HTML Element Selection Guide
+
+Choosing the right HTML element is the foundation of web accessibility. This guide helps you select the correct semantic element for every use case.
+
+---
+
+## Decision Trees
+
+### Interactive Elements
+
+```
+Need user interaction?
+│
+├─ Navigates to another page/section?
+│  └─ <a href="...">Link text</a>
+│
+├─ Performs action (submit, open, toggle)?
+│  ├─ Submits form?
+│  │  └─ <button type="submit">Submit</button>
+│  │
+│  ├─ Resets form?
+│  │  └─ <button type="reset">Reset</button>
+│  │
+│  └─ Other action?
+│     └─ <button type="button">Action</button>
+│
+└─ Do nothing (not interactive)?
+   └─ <span> or <div> (no onclick!)
+```
+
+### Content Structure
+
+```
+Grouping content?
+│
+├─ Self-contained, reusable content?
+│  └─ <article>
+│     Examples: Blog post, news article, product card, comment
+│
+├─ Thematic grouping?
+│  └─ <section>
+│     Examples: Chapter, tab panel, part of page
+│
+├─ Navigation links?
+│  └─ <nav>
+│     Examples: Site nav, breadcrumbs, pagination, TOC
+│
+├─ Supplementary content?
+│  └─ <aside>
+│     Examples: Sidebar, callout, related links
+│
+├─ Main content area?
+│  └─ <main> (only one per page)
+│
+├─ Page header?
+│  └─ <header>
+│
+├─ Page footer?
+│  └─ <footer>
+│
+└─ Generic container (no semantic meaning)?
+   └─ <div>
+```
+
+### Form Elements
+
+```
+Collecting user input?
+│
+├─ Short text (name, email, search)?
+│  └─ <input type="text/email/search">
+│
+├─ Password?
+│  └─ <input type="password">
+│
+├─ Number?
+│  └─ <input type="number">
+│
+├─ Date/Time?
+│  └─ <input type="date/time/datetime-local">
+│
+├─ File upload?
+│  └─ <input type="file">
+│
+├─ Single choice from list?
+│  ├─ Few options (2-5)?
+│  │  └─ <input type="radio"> (with same name)
+│  │
+│  └─ Many options (5+)?
+│     └─ <select><option>...</option></select>
+│
+├─ Multiple choices?
+│  ├─ Few options (2-5)?
+│  │  └─ <input type="checkbox">
+│  │
+│  └─ Many options?
+│     └─ <select multiple><option>...</option></select>
+│
+├─ Long text (comments, descriptions)?
+│  └─ <textarea>
+│
+├─ Boolean toggle?
+│  ├─ Binary (on/off)?
+│  │  └─ <input type="checkbox">
+│  │
+│  └─ Tri-state (off/mixed/on)?
+│     └─ <button aria-pressed="false/mixed/true">
+│
+└─ Hidden value?
+   └─ <input type="hidden">
+```
+
+---
+
+## Element Reference
+
+### Sectioning Elements
+
+#### `<article>`
+
+**Use for**: Self-contained, independently distributable content.
+
+```html
+<!-- ✅ Blog post -->
+<article>
+  <h2>Article Title</h2>
+  <p>Content...</p>
+  <footer>By Author, Jan 1, 2026</footer>
+</article>
+
+<!-- ✅ Product card -->
+<article>
+  <h3>Product Name</h3>
+  <img src="product.jpg" alt="Product photo">
+  <p>$19.99</p>
+  <button>Add to cart</button>
+</article>
+
+<!-- ✅ Comment -->
+<article>
+  <header>
+    <h4>John Doe</h4>
+    <time datetime="2026-01-14">Jan 14, 2026</time>
+  </header>
+  <p>Great article!</p>
+</article>
+```
+
+**Screen reader**: Announces "article" landmark, helps users jump between articles.
+
+#### `<section>`
+
+**Use for**: Thematic grouping of content, usually with a heading.
+
+```html
+<!-- ✅ Chapter or topic -->
+<section>
+  <h2>Getting Started</h2>
+  <p>Content about getting started...</p>
+</section>
+
+<!-- ✅ Tab panel -->
+<div role="tabpanel">
+  <section>
+    <h3>Overview</h3>
+    <p>Overview content...</p>
+  </section>
+</div>
+
+<!-- ❌ WRONG - no heading -->
+<section>
+  <p>Random content</p>  <!-- Use div instead -->
+</section>
+```
+
+**Rule**: Every `<section>` should have a heading (h1-h6).
+
+#### `<nav>`
+
+**Use for**: Navigation links.
+
+```html
+<!-- ✅ Primary navigation -->
+<nav aria-label="Primary">
+  <ul>
+    <li><a href="/">Home</a></li>
+    <li><a href="/about">About</a></li>
+  </ul>
+</nav>
+
+<!-- ✅ Breadcrumbs -->
+<nav aria-label="Breadcrumb">
+  <ol>
+    <li><a href="/">Home</a></li>
+    <li><a href="/products">Products</a></li>
+    <li aria-current="page">Widget</li>
+  </ol>
+</nav>
+
+<!-- ✅ Pagination -->
+<nav aria-label="Pagination">
+  <a href="?page=1">Previous</a>
+  <a href="?page=3">Next</a>
+</nav>
+
+<!-- ❌ WRONG - not navigation -->
+<nav>
+  <button onclick="doThing()">Action</button>  <!-- Use div -->
+</nav>
+```
+
+**Tip**: Use `aria-label` when multiple `<nav>` on same page.
+
+#### `<aside>`
+
+**Use for**: Content tangentially related to main content.
+
+```html
+<!-- ✅ Sidebar -->
+<aside>
+  <h3>Related Articles</h3>
+  <ul>...</ul>
+</aside>
+
+<!-- ✅ Callout box -->
+<aside class="note">
+  <h4>Note</h4>
+  <p>This feature requires subscription.</p>
+</aside>
+
+<!-- ✅ Pull quote -->
+<aside>
+  <blockquote>"Accessibility is essential"</blockquote>
+</aside>
+```
+
+#### `<main>`
+
+**Use for**: Main content area. Only one per page.
+
+```html
+<body>
+  <header>Site header</header>
+  <nav>Navigation</nav>
+
+  <main id="main-content" tabindex="-1">
+    <!-- Primary content here -->
+  </main>
+
+  <footer>Site footer</footer>
+</body>
+```
+
+**Critical**: Use `tabindex="-1"` and `id` for skip link target.
+
+#### `<header>` and `<footer>`
+
+**Use for**: Introductory content or group of navigation (header), or closing content (footer).
+
+```html
+<!-- ✅ Site header -->
+<header>
+  <img src="logo.png" alt="Company">
+  <nav>...</nav>
+</header>
+
+<!-- ✅ Article header -->
+<article>
+  <header>
+    <h2>Article Title</h2>
+    <p>By Author, Jan 14</p>
+  </header>
+  <p>Content...</p>
+</article>
+
+<!-- ✅ Site footer -->
+<footer>
+  <p>&copy; 2026 Company</p>
+  <nav aria-label="Footer">...</nav>
+</footer>
+```
+
+---
+
+### Text Content
+
+#### Headings `<h1>` through `<h6>`
+
+**Critical rule**: Never skip levels.
+
+```html
+<!-- ✅ CORRECT - logical hierarchy -->
+<h1>Page Title</h1>
+  <h2>Section</h2>
+    <h3>Subsection</h3>
+    <h3>Another Subsection</h3>
+  <h2>Another Section</h2>
+
+<!-- ❌ WRONG - skipped h2 -->
+<h1>Page Title</h1>
+  <h3>Subsection</h3>  <!-- Skipped h2! -->
+
+<!-- ❌ WRONG - using for styling -->
+<h1>Title</h1>
+<h3 class="looks-like-h2">Not a heading, just want it big</h3>
+<!-- Use h2 and style it with CSS -->
+```
+
+**Why**: Screen readers use heading hierarchy for navigation.
+
+#### `<p>`, `<span>`, `<div>`
+
+```html
+<!-- <p> for paragraphs of text -->
+<p>This is a paragraph of text content.</p>
+
+<!-- <span> for inline styling/grouping -->
+<p>This is <span class="highlight">important</span> text.</p>
+
+<!-- <div> for block-level grouping with no semantic meaning -->
+<div class="card">
+  <h2>Title</h2>
+  <p>Content</p>
+</div>
+```
+
+**Rule**: If there's a more semantic element, use it instead of `<div>` or `<span>`.
+
+#### Lists `<ul>`, `<ol>`, `<dl>`
+
+```html
+<!-- <ul> for unordered lists -->
+<ul>
+  <li>Item 1</li>
+  <li>Item 2</li>
+</ul>
+
+<!-- <ol> for ordered lists -->
+<ol>
+  <li>First step</li>
+  <li>Second step</li>
+</ol>
+
+<!-- <dl> for description lists (key-value pairs) -->
+<dl>
+  <dt>Name</dt>
+  <dd>John Doe</dd>
+
+  <dt>Email</dt>
+  <dd>john@example.com</dd>
+</dl>
+```
+
+**Screen reader**: Announces list type and item count.
+
+---
+
+### Interactive Elements
+
+#### `<button>` vs `<a>`
+
+**Decision**: Does it navigate or perform an action?
+
+```html
+<!-- ✅ Navigates → use <a> -->
+<a href="/products">View products</a>
+<a href="#section">Jump to section</a>
+
+<!-- ✅ Performs action → use <button> -->
+<button type="submit">Submit form</button>
+<button type="button" onclick="openModal()">Open modal</button>
+<button type="button" aria-pressed="false">Toggle</button>
+
+<!-- ❌ WRONG - action with <a> -->
+<a href="#" onclick="openModal()">Open modal</a>
+<!-- Use <button> instead -->
+
+<!-- ❌ WRONG - navigation with <button> -->
+<button onclick="location.href='/products'">View products</button>
+<!-- Use <a> instead -->
+```
+
+**Why**:
+- `<a>` has "link" role, expected to navigate
+- `<button>` has "button" role, expected to perform action
+- Screen readers announce role to set user expectations
+
+#### Button Types
+
+```html
+<!-- Submit form -->
+<button type="submit">Submit</button>
+
+<!-- Reset form to defaults -->
+<button type="reset">Reset</button>
+
+<!-- Generic action (default if type omitted) -->
+<button type="button" onclick="doThing()">Do thing</button>
+```
+
+**Critical**: Always specify `type="button"` for non-submit buttons in forms to prevent accidental submission.
+
+---
+
+### Form Elements
+
+#### `<label>`
+
+**Critical**: Every form input must have an associated label.
+
+```html
+<!-- ✅ Explicit association (preferred) -->
+<label for="email">Email address</label>
+<input type="email" id="email" name="email">
+
+<!-- ✅ Implicit association -->
+<label>
+  Email address
+  <input type="email" name="email">
+</label>
+
+<!-- ❌ WRONG - no label -->
+<input type="email" placeholder="Email">  <!-- Placeholder is NOT a label -->
+
+<!-- ✅ CORRECT - label + placeholder -->
+<label for="email">Email address</label>
+<input type="email" id="email" placeholder="name@example.com">
+```
+
+#### `<input>` Types
+
+```html
+<!-- Text inputs -->
+<input type="text" name="name">
+<input type="email" name="email" autocomplete="email">
+<input type="tel" name="phone" autocomplete="tel">
+<input type="url" name="website">
+<input type="search" name="q">
+<input type="password" name="password" autocomplete="current-password">
+
+<!-- Numbers and dates -->
+<input type="number" name="quantity" min="1" max="10">
+<input type="range" name="volume" min="0" max="100">
+<input type="date" name="birthday">
+<input type="time" name="appointment">
+<input type="datetime-local" name="meeting">
+
+<!-- Choices -->
+<input type="checkbox" name="agree" id="agree">
+<input type="radio" name="size" value="small" id="size-small">
+<input type="file" name="upload" accept="image/*">
+
+<!-- Hidden (no label needed) -->
+<input type="hidden" name="csrf" value="token">
+```
+
+**Tip**: Use correct `type` for mobile keyboard optimization.
+
+#### `<select>`
+
+```html
+<!-- Single selection -->
+<label for="country">Country</label>
+<select id="country" name="country">
+  <option value="">Choose a country</option>
+  <option value="us">United States</option>
+  <option value="uk">United Kingdom</option>
+</select>
+
+<!-- Multiple selection -->
+<label for="interests">Interests</label>
+<select id="interests" name="interests" multiple>
+  <option value="design">Design</option>
+  <option value="dev">Development</option>
+</select>
+
+<!-- Grouped options -->
+<label for="pet">Pet</label>
+<select id="pet" name="pet">
+  <optgroup label="4-legged">
+    <option value="dog">Dog</option>
+    <option value="cat">Cat</option>
+  </optgroup>
+  <optgroup label="Flying">
+    <option value="bird">Bird</option>
+  </optgroup>
+</select>
+```
+
+#### `<textarea>`
+
+```html
+<label for="comments">Comments</label>
+<textarea
+  id="comments"
+  name="comments"
+  rows="5"
+  maxlength="500"
+></textarea>
+```
+
+#### Fieldsets and Legends
+
+**Use for**: Grouping related form controls.
+
+```html
+<fieldset>
+  <legend>Shipping address</legend>
+
+  <label for="street">Street</label>
+  <input type="text" id="street" name="street">
+
+  <label for="city">City</label>
+  <input type="text" id="city" name="city">
+</fieldset>
+
+<fieldset>
+  <legend>Payment method</legend>
+
+  <label>
+    <input type="radio" name="payment" value="card">
+    Credit card
+  </label>
+
+  <label>
+    <input type="radio" name="payment" value="paypal">
+    PayPal
+  </label>
+</fieldset>
+```
+
+**Screen reader**: Reads legend before each field in the group.
+
+---
+
+### Media Elements
+
+#### `<img>`
+
+```html
+<!-- Informative image -->
+<img src="diagram.png" alt="Workflow diagram showing 3 steps: Plan, Build, Deploy">
+
+<!-- Decorative image -->
+<img src="decoration.png" alt="">
+
+<!-- Image that is a link -->
+<a href="/products">
+  <img src="products.jpg" alt="View our products">
+</a>
+
+<!-- Complex image -->
+<figure>
+  <img src="chart.png" alt="Bar chart showing sales data">
+  <figcaption>
+    Monthly sales increased from $10k in Jan to $15k in Jun.
+  </figcaption>
+</figure>
+```
+
+**Alt text rules**:
+- Describe what the image conveys, not what it looks like
+- Don't start with "Image of" or "Picture of"
+- Use `alt=""` for purely decorative images
+- Include text if image contains text
+
+#### `<figure>` and `<figcaption>`
+
+```html
+<!-- Image with caption -->
+<figure>
+  <img src="photo.jpg" alt="Sunset over ocean">
+  <figcaption>Sunset at Santa Monica Beach, 2026</figcaption>
+</figure>
+
+<!-- Code snippet with caption -->
+<figure>
+  <pre><code>function hello() { ... }</code></pre>
+  <figcaption>Example of a JavaScript function</figcaption>
+</figure>
+```
+
+#### `<audio>` and `<video>`
+
+```html
+<!-- Audio -->
+<audio controls>
+  <source src="podcast.mp3" type="audio/mpeg">
+  <source src="podcast.ogg" type="audio/ogg">
+  <a href="podcast.mp3">Download audio</a>
+</audio>
+
+<!-- Video with captions -->
+<video controls>
+  <source src="video.mp4" type="video/mp4">
+  <track kind="captions" src="captions.vtt" srclang="en" label="English">
+  <track kind="descriptions" src="descriptions.vtt" srclang="en">
+</video>
+```
+
+---
+
+## Common Anti-Patterns
+
+### ❌ Clickable Divs
+
+```html
+<!-- ❌ WRONG -->
+<div onclick="doThing()" class="button">
+  Click me
+</div>
+
+<!-- ✅ CORRECT -->
+<button type="button" onclick="doThing()">
+  Click me
+</button>
+```
+
+**Why wrong**: Div is not focusable, not keyboard accessible, no semantic role.
+
+### ❌ Divs for Everything
+
+```html
+<!-- ❌ WRONG -->
+<div class="header">
+  <div class="nav">
+    <div class="link" onclick="navigate()">Home</div>
+  </div>
+</div>
+
+<!-- ✅ CORRECT -->
+<header>
+  <nav>
+    <a href="/">Home</a>
+  </nav>
+</header>
+```
+
+### ❌ Headings for Styling
+
+```html
+<!-- ❌ WRONG - h3 used just for size -->
+<h1>Title</h1>
+<h3>This should be h2 but h3 looks better</h3>
+
+<!-- ✅ CORRECT - use correct heading + CSS -->
+<h1>Title</h1>
+<h2 class="smaller">This is correctly h2, styled smaller</h2>
+
+<style>
+.smaller { font-size: 1.2rem; }
+</style>
+```
+
+### ❌ Links Without href
+
+```html
+<!-- ❌ WRONG -->
+<a class="button">Click me</a>
+<a href="javascript:void(0)" onclick="doThing()">Action</a>
+
+<!-- ✅ CORRECT -->
+<button type="button">Click me</button>
+<button type="button" onclick="doThing()">Action</button>
+```
+
+---
+
+## Quick Reference Table
+
+| Purpose | Correct Element | Wrong Element |
+|---------|----------------|---------------|
+| Navigate to page | `<a href>` | `<button>`, `<div onclick>` |
+| Perform action | `<button>` | `<a href="#">`, `<div onclick>` |
+| Submit form | `<button type="submit">` | `<a>`, `<input type="button">` |
+| Text input | `<input>`, `<textarea>` | `<div contenteditable>` |
+| Group content | `<article>`, `<section>` | `<div class="article">` |
+| Navigation | `<nav>` | `<div class="nav">` |
+| List | `<ul>`, `<ol>` | `<div>` with `<div>` children |
+| Heading | `<h1>`-`<h6>` | `<div class="heading">`, `<strong>` |
+| Image | `<img>` with `alt` | `<div>` with background-image |
+| Toggle | `<button aria-pressed>` or `<input type="checkbox">` | `<div onclick>` |
+
+---
+
+**Golden Rule**: Use the most semantic element that fits the purpose. If you're using `<div>` or `<span>` for anything interactive, you're probably doing it wrong.
diff --git a/.cursor/skills/accessibility/references/wcag-checklist.md b/.cursor/skills/accessibility/references/wcag-checklist.md
new file mode 100644
index 0000000..0b13d1d
--- /dev/null
+++ b/.cursor/skills/accessibility/references/wcag-checklist.md
@@ -0,0 +1,670 @@
+# WCAG 2.1 Level AA Checklist
+
+Complete checklist of all 50 WCAG 2.1 Level A and AA success criteria with practical examples.
+
+---
+
+## 1. Perceivable
+
+Information and user interface components must be presentable to users in ways they can perceive.
+
+### 1.1 Text Alternatives
+
+#### 1.1.1 Non-text Content (Level A)
+
+All non-text content has a text alternative.
+
+```html
+<!-- Images -->
+<img src="logo.png" alt="Company Name">
+<img src="decoration.png" alt="">  <!-- Decorative -->
+
+<!-- Icons in buttons -->
+<button aria-label="Close">×</button>
+<button><span class="sr-only">Search</span><SearchIcon /></button>
+
+<!-- Charts/graphs -->
+<img src="chart.png" alt="Bar chart showing 25% increase in sales from Q1 to Q2">
+
+<!-- Form controls -->
+<input type="text" aria-label="Search" placeholder="Search...">
+```
+
+**Pass**: Every image, icon, and control has appropriate text alternative
+**Fail**: Images missing alt, icon buttons with no label
+
+---
+
+### 1.2 Time-based Media
+
+#### 1.2.1 Audio-only and Video-only (Level A)
+
+Provide transcript for audio-only or video-only content.
+
+```html
+<audio src="podcast.mp3" controls></audio>
+<a href="transcript.html">Read transcript</a>
+```
+
+#### 1.2.2 Captions (Level A)
+
+Provide captions for all video with audio.
+
+```html
+<video controls>
+  <source src="video.mp4" type="video/mp4">
+  <track kind="captions" src="captions.vtt" srclang="en" label="English">
+</video>
+```
+
+#### 1.2.3 Audio Description or Media Alternative (Level A)
+
+Provide audio description or transcript for video.
+
+#### 1.2.4 Captions (Live) (Level AA)
+
+Captions provided for live audio content.
+
+#### 1.2.5 Audio Description (Level AA)
+
+Audio description for all video content.
+
+---
+
+### 1.3 Adaptable
+
+#### 1.3.1 Info and Relationships (Level A)
+
+Information, structure, and relationships can be programmatically determined.
+
+```html
+<!-- ✅ Proper heading hierarchy -->
+<h1>Main Page Title</h1>
+  <h2>Section Title</h2>
+    <h3>Subsection</h3>
+
+<!-- ✅ Proper form labels -->
+<label for="email">Email</label>
+<input type="email" id="email">
+
+<!-- ✅ Proper table headers -->
+<table>
+  <thead>
+    <tr>
+      <th scope="col">Name</th>
+      <th scope="col">Email</th>
+    </tr>
+  </thead>
+</table>
+
+<!-- ❌ WRONG - skipped heading -->
+<h1>Title</h1>
+<h3>Subsection</h3>  <!-- Skipped h2 -->
+```
+
+#### 1.3.2 Meaningful Sequence (Level A)
+
+Reading and navigation order is logical.
+
+```html
+<!-- Source order matches visual order -->
+<nav>Navigation</nav>
+<main>Content</main>
+<aside>Sidebar</aside>
+<footer>Footer</footer>
+```
+
+#### 1.3.3 Sensory Characteristics (Level A)
+
+Instructions don't rely solely on sensory characteristics.
+
+```html
+<!-- ❌ WRONG -->
+<p>Click the round button on the right</p>
+
+<!-- ✅ CORRECT -->
+<p>Click the Submit button</p>
+<button>Submit</button>
+```
+
+#### 1.3.4 Orientation (Level AA)
+
+Content doesn't restrict to single orientation unless essential.
+
+```css
+/* Don't lock orientation */
+/* Allow both portrait and landscape */
+```
+
+#### 1.3.5 Identify Input Purpose (Level AA)
+
+Input purpose can be programmatically determined.
+
+```html
+<input type="email" autocomplete="email" name="email">
+<input type="tel" autocomplete="tel" name="phone">
+<input type="text" autocomplete="given-name" name="first-name">
+```
+
+---
+
+### 1.4 Distinguishable
+
+#### 1.4.1 Use of Color (Level A)
+
+Color is not the only visual means of conveying information.
+
+```html
+<!-- ❌ WRONG - red text only -->
+<span style="color: red;">Error</span>
+
+<!-- ✅ CORRECT - icon + text -->
+<span class="error">
+  <svg><!-- Error icon --></svg>
+  Error: Invalid email
+</span>
+```
+
+#### 1.4.2 Audio Control (Level A)
+
+Mechanism to pause/stop/control audio that plays >3 seconds.
+
+```html
+<audio controls>
+  <source src="background-music.mp3">
+</audio>
+```
+
+#### 1.4.3 Contrast (Minimum) (Level AA)
+
+**Contrast ratios:**
+- Normal text: 4.5:1
+- Large text (18pt+ or 14pt+ bold): 3:1
+- UI components: 3:1
+
+```css
+/* ✅ PASS - 4.6:1 contrast */
+.text {
+  color: #595959;
+  background: #ffffff;
+}
+
+/* ❌ FAIL - 2.8:1 contrast */
+.text {
+  color: #999999;
+  background: #ffffff;
+}
+```
+
+**Testing**: Use axe DevTools or browser contrast checker.
+
+#### 1.4.4 Resize Text (Level AA)
+
+Text can be resized to 200% without loss of content or functionality.
+
+```css
+/* Use relative units */
+font-size: 1rem;  /* Not px */
+max-width: 60ch;  /* Not fixed px */
+```
+
+#### 1.4.5 Images of Text (Level AA)
+
+Use real text instead of images of text (unless essential).
+
+```html
+<!-- ❌ Avoid -->
+<img src="heading.png" alt="Welcome">
+
+<!-- ✅ Use real text -->
+<h1>Welcome</h1>
+```
+
+#### 1.4.10 Reflow (Level AA)
+
+Content reflows without horizontal scrolling at 320px width.
+
+```css
+/* Responsive design */
+@media (max-width: 768px) {
+  /* Stack instead of overflow */
+}
+```
+
+#### 1.4.11 Non-text Contrast (Level AA)
+
+UI components and graphics have 3:1 contrast.
+
+```css
+/* Button border contrast */
+button {
+  border: 1px solid #757575;  /* 3:1 on white */
+  background: #f0f0f0;
+}
+```
+
+#### 1.4.12 Text Spacing (Level AA)
+
+Content doesn't break when text spacing is increased.
+
+```css
+/* Support user text spacing overrides */
+* {
+  line-height: 1.5 !important;
+  letter-spacing: 0.12em !important;
+  word-spacing: 0.16em !important;
+  /* Content should still work */
+}
+```
+
+#### 1.4.13 Content on Hover or Focus (Level AA)
+
+Additional content on hover/focus is dismissible, hoverable, and persistent.
+
+```html
+<!-- Tooltip that can be dismissed with Escape -->
+<button aria-describedby="tooltip">Info</button>
+<div id="tooltip" role="tooltip" hidden>
+  Additional information
+</div>
+```
+
+---
+
+## 2. Operable
+
+User interface components and navigation must be operable.
+
+### 2.1 Keyboard Accessible
+
+#### 2.1.1 Keyboard (Level A)
+
+All functionality available via keyboard.
+
+```html
+<!-- ✅ CORRECT -->
+<button onclick="doThing()">Click me</button>
+<a href="/page">Link</a>
+
+<!-- ❌ WRONG -->
+<div onclick="doThing()">Click me</div>  <!-- Not keyboard accessible -->
+```
+
+#### 2.1.2 No Keyboard Trap (Level A)
+
+Keyboard focus can move away from any component.
+
+```javascript
+// ✅ Dialog with Escape key to close
+function Dialog() {
+  useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === 'Escape') closeDialog();
+    };
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, []);
+}
+```
+
+#### 2.1.4 Character Key Shortcuts (Level A)
+
+If single-character shortcuts exist, they can be turned off or remapped.
+
+---
+
+### 2.2 Enough Time
+
+#### 2.2.1 Timing Adjustable (Level A)
+
+Time limits can be turned off, adjusted, or extended.
+
+```html
+<!-- Session timeout warning -->
+<div role="alert">
+  <p>Your session will expire in 2 minutes.</p>
+  <button>Extend session</button>
+</div>
+```
+
+#### 2.2.2 Pause, Stop, Hide (Level A)
+
+Moving, blinking, or scrolling content can be paused.
+
+```html
+<div class="carousel">
+  <button aria-label="Pause carousel">⏸</button>
+  <!-- Carousel content -->
+</div>
+```
+
+---
+
+### 2.3 Seizures and Physical Reactions
+
+#### 2.3.1 Three Flashes or Below Threshold (Level A)
+
+No content flashes more than 3 times per second.
+
+---
+
+### 2.4 Navigable
+
+#### 2.4.1 Bypass Blocks (Level A)
+
+Mechanism to skip repeated content (skip links).
+
+```html
+<a href="#main-content" class="skip-link">Skip to main content</a>
+<nav><!-- Navigation --></nav>
+<main id="main-content" tabindex="-1">
+  <!-- Content -->
+</main>
+```
+
+#### 2.4.2 Page Titled (Level A)
+
+Pages have descriptive titles.
+
+```html
+<title>Contact Us - Company Name</title>
+```
+
+#### 2.4.3 Focus Order (Level A)
+
+Focusable components receive focus in logical order.
+
+```html
+<!-- Tab order: 1 → 2 → 3 (natural order) -->
+<input type="text" name="name">
+<input type="email" name="email">
+<button type="submit">Submit</button>
+```
+
+#### 2.4.4 Link Purpose (In Context) (Level A)
+
+Purpose of each link can be determined from link text or context.
+
+```html
+<!-- ❌ WRONG -->
+<a href="/article">Click here</a>
+
+<!-- ✅ CORRECT -->
+<a href="/article">Read our accessibility guide</a>
+
+<!-- ✅ CORRECT - aria-label adds context -->
+<a href="/article" aria-label="Read our accessibility guide">Read more</a>
+```
+
+#### 2.4.5 Multiple Ways (Level AA)
+
+More than one way to locate pages (menu, search, sitemap).
+
+#### 2.4.6 Headings and Labels (Level AA)
+
+Headings and labels describe topic or purpose.
+
+```html
+<h2>Contact Form</h2>
+<label for="name">Full Name</label>
+<input type="text" id="name">
+```
+
+#### 2.4.7 Focus Visible (Level AA)
+
+Keyboard focus indicator is visible.
+
+```css
+*:focus-visible {
+  outline: 2px solid #0066cc;
+  outline-offset: 2px;
+}
+
+/* ❌ WRONG */
+*:focus {
+  outline: none;  /* Never do this without replacement */
+}
+```
+
+---
+
+### 2.5 Input Modalities
+
+#### 2.5.1 Pointer Gestures (Level A)
+
+Functionality that uses multipoint or path-based gestures has single-pointer alternative.
+
+#### 2.5.2 Pointer Cancellation (Level A)
+
+For single-pointer functionality, activation happens on up-event.
+
+#### 2.5.3 Label in Name (Level A)
+
+For components with labels, the accessible name contains the visible text.
+
+```html
+<!-- Visible label: "Submit" -->
+<button>Submit</button>  <!-- Accessible name: "Submit" ✅ -->
+
+<!-- ❌ WRONG -->
+<button aria-label="Send form">Submit</button>  <!-- Accessible name doesn't match -->
+```
+
+#### 2.5.4 Motion Actuation (Level A)
+
+Functionality operated by device motion can also be operated by UI components.
+
+---
+
+## 3. Understandable
+
+Information and operation of user interface must be understandable.
+
+### 3.1 Readable
+
+#### 3.1.1 Language of Page (Level A)
+
+Default language of page is programmatically determined.
+
+```html
+<html lang="en">
+```
+
+#### 3.1.2 Language of Parts (Level AA)
+
+Language of each passage is programmatically determined.
+
+```html
+<p>The French word for hello is <span lang="fr">bonjour</span>.</p>
+```
+
+---
+
+### 3.2 Predictable
+
+#### 3.2.1 On Focus (Level A)
+
+Receiving focus doesn't initiate change of context.
+
+```html
+<!-- ❌ WRONG - opens new page on focus -->
+<input onfocus="window.location='/new-page'">
+
+<!-- ✅ CORRECT - user must activate -->
+<button onclick="window.location='/new-page'">Go to page</button>
+```
+
+#### 3.2.2 On Input (Level A)
+
+Changing setting doesn't automatically cause change of context.
+
+```html
+<!-- ❌ WRONG - auto-submit on change -->
+<select onchange="this.form.submit()">
+
+<!-- ✅ CORRECT - explicit submit -->
+<select name="category"></select>
+<button type="submit">Apply filter</button>
+```
+
+#### 3.2.3 Consistent Navigation (Level AA)
+
+Navigation mechanisms that are repeated appear in same relative order.
+
+#### 3.2.4 Consistent Identification (Level AA)
+
+Components with same functionality are identified consistently.
+
+```html
+<!-- Same icon/label for same action across pages -->
+<button aria-label="Close">×</button>  <!-- Consistent everywhere -->
+```
+
+---
+
+### 3.3 Input Assistance
+
+#### 3.3.1 Error Identification (Level A)
+
+Errors are identified and described in text.
+
+```html
+<input type="email" aria-invalid="true" aria-describedby="email-error">
+<span id="email-error" role="alert">
+  Error: Please enter a valid email address
+</span>
+```
+
+#### 3.3.2 Labels or Instructions (Level A)
+
+Labels or instructions provided when content requires user input.
+
+```html
+<label for="password">
+  Password (minimum 8 characters)
+</label>
+<input type="password" id="password" minlength="8">
+```
+
+#### 3.3.3 Error Suggestion (Level AA)
+
+If error is detected, suggestions for correction are provided.
+
+```html
+<span id="email-error" role="alert">
+  Error: Email format is incorrect. Example: name@example.com
+</span>
+```
+
+#### 3.3.4 Error Prevention (Legal, Financial, Data) (Level AA)
+
+For legal/financial/data submissions, one of the following is true:
+- Reversible
+- Checked
+- Confirmed
+
+```html
+<form>
+  <!-- Step 1: Enter data -->
+  <input type="text" name="account">
+
+  <!-- Step 2: Review -->
+  <div class="review">
+    <p>Please review: Account number 12345</p>
+    <button type="button" onclick="goBack()">Edit</button>
+    <button type="submit">Confirm</button>
+  </div>
+</form>
+```
+
+---
+
+## 4. Robust
+
+Content must be robust enough to be interpreted by a wide variety of user agents, including assistive technologies.
+
+### 4.1 Compatible
+
+#### 4.1.1 Parsing (Level A)
+
+HTML is valid (no duplicate IDs, proper nesting).
+
+```html
+<!-- ✅ Valid HTML -->
+<ul>
+  <li>Item 1</li>
+  <li>Item 2</li>
+</ul>
+
+<!-- ❌ WRONG - invalid nesting -->
+<ul>
+  <div>Not allowed here</div>
+</ul>
+```
+
+#### 4.1.2 Name, Role, Value (Level A)
+
+For all UI components, name, role, and value can be programmatically determined.
+
+```html
+<!-- Native elements have this built-in -->
+<button>Click me</button>  <!-- Role: button, Name: "Click me" -->
+
+<!-- Custom elements need ARIA -->
+<div role="button" tabindex="0" aria-pressed="false">
+  Toggle
+</div>
+```
+
+#### 4.1.3 Status Messages (Level AA)
+
+Status messages can be programmatically determined through role or properties.
+
+```html
+<!-- Success message -->
+<div role="status" aria-live="polite">
+  Form submitted successfully
+</div>
+
+<!-- Error message -->
+<div role="alert" aria-live="assertive">
+  Error: Please fix the errors above
+</div>
+```
+
+---
+
+## Quick Testing Checklist
+
+Use this for rapid audits:
+
+### Automated (5 minutes)
+- [ ] Run axe DevTools scan
+- [ ] Run Lighthouse accessibility audit
+- [ ] Fix all critical violations
+
+### Keyboard (10 minutes)
+- [ ] Tab through entire page
+- [ ] Activate all interactive elements with Enter/Space
+- [ ] Close dialogs with Escape
+- [ ] Navigate menus with arrows
+- [ ] Verify focus visible at all times
+
+### Screen Reader (15 minutes)
+- [ ] Turn on NVDA or VoiceOver
+- [ ] Navigate page with arrow keys
+- [ ] Verify all images described
+- [ ] Verify form labels read
+- [ ] Verify dynamic updates announced
+- [ ] Check heading structure makes sense
+
+### Visual (5 minutes)
+- [ ] Check color contrast with picker
+- [ ] Zoom to 200% - content still works
+- [ ] Resize window to 320px - no horizontal scroll
+- [ ] Verify focus indicators visible
+
+---
+
+**Total audit time**: ~35 minutes per page
+**Result**: WCAG 2.1 AA compliance verification
diff --git a/.cursor/skills/accessibility/rules/accessibility.md b/.cursor/skills/accessibility/rules/accessibility.md
new file mode 100644
index 0000000..32c11ca
--- /dev/null
+++ b/.cursor/skills/accessibility/rules/accessibility.md
@@ -0,0 +1,221 @@
+# Accessibility Correction Rules
+
+Common accessibility mistakes and their corrections for Claude Code to apply automatically.
+
+---
+
+## Interactive Elements
+
+| If Claude suggests... | Use instead... |
+|----------------------|----------------|
+| `<div onclick="doThing()">Click</div>` | `<button type="button" onclick="doThing()">Click</button>` |
+| `<span onclick="submit()">Submit</span>` | `<button type="submit">Submit</button>` |
+| `<a href="#" onclick="doThing()">Action</a>` | `<button type="button" onclick="doThing()">Action</button>` |
+| `<a href="javascript:void(0)">Action</a>` | `<button type="button">Action</button>` |
+| `<div class="button">Click</div>` | `<button>Click</button>` |
+
+**Why**: Divs and spans are not keyboard accessible and have no semantic role. Use `<button>` for actions, `<a>` only for navigation.
+
+---
+
+## Focus Indicators
+
+| If Claude suggests... | Use instead... |
+|----------------------|----------------|
+| `*:focus { outline: none; }` | `*:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }` |
+| `button:focus { outline: 0; }` | `button:focus-visible { outline: 2px solid var(--primary); }` |
+| Removing outline without replacement | Always provide custom focus indicator |
+
+**Why**: Focus indicators are required for keyboard navigation. Use `:focus-visible` to show only on keyboard focus.
+
+---
+
+## Images
+
+| If Claude suggests... | Use instead... |
+|----------------------|----------------|
+| `<img src="logo.png">` | `<img src="logo.png" alt="Company Name">` |
+| `<img src="icon.png" alt="">` in button | `<button aria-label="Close"><img src="icon.png" alt=""></button>` |
+| `<div style="background-image: url(...)">` for content image | `<img src="..." alt="Description">` |
+| Alt text starting with "Image of" | Describe what image conveys, not that it's an image |
+
+**Why**: All images need alt text. Use `alt=""` only for purely decorative images.
+
+---
+
+## Form Labels
+
+| If Claude suggests... | Use instead... |
+|----------------------|----------------|
+| `<input placeholder="Email">` | `<label for="email">Email</label><input type="email" id="email" placeholder="name@example.com">` |
+| `<input aria-label="Email">` | `<label for="email">Email</label><input type="email" id="email">` (prefer visible label) |
+| Label without for/id connection | `<label for="email">Email</label><input id="email">` |
+
+**Why**: Placeholders are not labels. Every input needs a visible, associated label.
+
+---
+
+## Headings
+
+| If Claude suggests... | Use instead... |
+|----------------------|----------------|
+| `<h1>Title</h1><h3>Subtitle</h3>` | `<h1>Title</h1><h2>Subtitle</h2>` (don't skip levels) |
+| `<h3 class="big">Title</h3>` for styling | `<h2 class="smaller">Title</h2>` (use correct level + CSS) |
+| Multiple `<h1>` on same page | One `<h1>` per page (page title) |
+
+**Why**: Screen readers use heading hierarchy for navigation. Never skip levels.
+
+---
+
+## Color Contrast
+
+| If Claude suggests... | Use instead... |
+|----------------------|----------------|
+| Light gray `#999` on white background | Darker `#595959` (4.6:1 contrast) or `#737373` (4.7:1) |
+| Blue `#4d90fe` on white (2.9:1) | Darker blue `#0066cc` (5.7:1) or `#004080` (6.5:1) |
+| Red `#ef4444` on white (3.3:1) | Darker red `#b91c1c` (6.2:1) |
+| Color alone for errors | Icon + text + color |
+
+**Why**: WCAG requires 4.5:1 contrast for normal text, 3:1 for large text and UI components.
+
+---
+
+## ARIA Usage
+
+| If Claude suggests... | Use instead... |
+|----------------------|----------------|
+| `<button role="button">Click</button>` | `<button>Click</button>` (native element already has role) |
+| `<div role="button">Click</div>` | `<button>Click</button>` (use native element) |
+| aria-label when visible text exists | Use visible text, omit aria-label |
+| `<button aria-hidden="true">Click</button>` | Remove aria-hidden (makes button inaccessible) |
+
+**Why**: No ARIA is better than bad ARIA. Use semantic HTML first.
+
+---
+
+## Keyboard Navigation
+
+| If Claude suggests... | Use instead... |
+|----------------------|----------------|
+| `tabindex="1"` or other positive numbers | `tabindex="0"` or natural order |
+| Interactive div without tabindex | `<button>` (natively keyboard accessible) |
+| No Escape key handler for dialogs | Add Escape listener to close dialog |
+| No focus trap in modals | Implement focus trap pattern |
+
+**Why**: Positive tabindex breaks natural tab order. All interactive elements must be keyboard accessible.
+
+---
+
+## Semantic HTML
+
+| If Claude suggests... | Use instead... |
+|----------------------|----------------|
+| `<div class="header">` | `<header>` |
+| `<div class="nav">` | `<nav>` |
+| `<div class="article">` | `<article>` |
+| `<div class="section">` | `<section>` (with heading) |
+| `<span onclick="...">` for interactive | `<button>` |
+
+**Why**: Semantic elements provide built-in accessibility and structure.
+
+---
+
+## Link Purpose
+
+| If Claude suggests... | Use instead... |
+|----------------------|----------------|
+| `<a href="/article">Click here</a>` | `<a href="/article">Read our accessibility guide</a>` |
+| `<a href="/more">Read more</a>` | `<a href="/article" aria-label="Read more about accessibility">Read more</a>` |
+| Generic "Learn more" links | Descriptive link text or aria-label with context |
+
+**Why**: Link text should describe destination. Screen reader users often navigate by links list.
+
+---
+
+## Form Validation
+
+| If Claude suggests... | Use instead... |
+|----------------------|----------------|
+| Visual error without aria-invalid | `<input aria-invalid="true" aria-describedby="error">` |
+| Error message without role="alert" | `<span id="error" role="alert">Error message</span>` |
+| No aria-describedby connection | Link input to error via aria-describedby |
+| Required field without indicator | `<input required aria-required="true">` + visual indicator |
+
+**Why**: Screen readers need programmatic error indication and connection to error messages.
+
+---
+
+## Live Regions
+
+| If Claude suggests... | Use instead... |
+|----------------------|----------------|
+| Dynamic content without announcement | `<div aria-live="polite">New content</div>` |
+| Critical error without announcement | `<div role="alert">Error message</div>` |
+| Status update not announced | `<div role="status">Update</div>` |
+
+**Why**: Screen readers don't automatically announce dynamic content changes.
+
+---
+
+## Tables
+
+| If Claude suggests... | Use instead... |
+|----------------------|----------------|
+| `<table>` without headers | `<table><thead><tr><th scope="col">Header</th></tr></thead>` |
+| Headers without scope attribute | `<th scope="col">` for columns, `<th scope="row">` for rows |
+| Table without caption | `<table><caption>Table description</caption>` |
+
+**Why**: Screen readers use headers to associate data cells with their labels.
+
+---
+
+## Skip Links
+
+| If Claude suggests... | Use instead... |
+|----------------------|----------------|
+| No skip link | `<a href="#main" class="skip-link">Skip to main content</a>` at top of body |
+| Skip link always visible | Hide offscreen, show on focus |
+| Skip target not focusable | `<main id="main" tabindex="-1">` |
+
+**Why**: Keyboard users need to skip repeated navigation on every page.
+
+---
+
+## Auto-playing Media
+
+| If Claude suggests... | Use instead... |
+|----------------------|----------------|
+| `<video autoplay>` | `<video controls>` (require user interaction) |
+| `<audio autoplay>` | `<audio controls>` |
+| Autoplay without pause | Add controls or pause button |
+
+**Why**: Auto-playing media is disruptive for screen reader users.
+
+---
+
+## Language
+
+| If Claude suggests... | Use instead... |
+|----------------------|----------------|
+| `<html>` without lang | `<html lang="en">` |
+| Foreign language phrase without marking | `<span lang="fr">bonjour</span>` |
+
+**Why**: Screen readers need language to pronounce text correctly.
+
+---
+
+## Testing Prompts
+
+When Claude completes accessibility work, always prompt:
+
+```
+✅ Completed. Please test:
+1. Tab through with keyboard only
+2. Run axe DevTools scan
+3. Test with screen reader (NVDA or VoiceOver)
+4. Verify 4.5:1 contrast on all text
+```
+
+---
+
+**Remember**: Accessibility is not optional. These corrections ensure WCAG 2.1 AA compliance and usable interfaces for everyone.
diff --git a/.cursor/skills/coding-standards/SKILL.md b/.cursor/skills/coding-standards/SKILL.md
new file mode 100644
index 0000000..03841e3
--- /dev/null
+++ b/.cursor/skills/coding-standards/SKILL.md
@@ -0,0 +1,522 @@
+---
+name: coding-standards
+description: Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.
+author: affaan-m
+version: "1.0"
+---
+
+# Coding Standards & Best Practices
+
+Universal coding standards applicable across all projects.
+
+## Code Quality Principles
+
+### 1. Readability First
+- Code is read more than written
+- Clear variable and function names
+- Self-documenting code preferred over comments
+- Consistent formatting
+
+### 2. KISS (Keep It Simple, Stupid)
+- Simplest solution that works
+- Avoid over-engineering
+- No premature optimization
+- Easy to understand > clever code
+
+### 3. DRY (Don't Repeat Yourself)
+- Extract common logic into functions
+- Create reusable components
+- Share utilities across modules
+- Avoid copy-paste programming
+
+### 4. YAGNI (You Aren't Gonna Need It)
+- Don't build features before they're needed
+- Avoid speculative generality
+- Add complexity only when required
+- Start simple, refactor when needed
+
+## TypeScript/JavaScript Standards
+
+### Variable Naming
+
+```typescript
+// ✅ GOOD: Descriptive names
+const marketSearchQuery = 'election'
+const isUserAuthenticated = true
+const totalRevenue = 1000
+
+// ❌ BAD: Unclear names
+const q = 'election'
+const flag = true
+const x = 1000
+```
+
+### Function Naming
+
+```typescript
+// ✅ GOOD: Verb-noun pattern
+async function fetchMarketData(marketId: string) { }
+function calculateSimilarity(a: number[], b: number[]) { }
+function isValidEmail(email: string): boolean { }
+
+// ❌ BAD: Unclear or noun-only
+async function market(id: string) { }
+function similarity(a, b) { }
+function email(e) { }
+```
+
+### Immutability Pattern (CRITICAL)
+
+```typescript
+// ✅ ALWAYS use spread operator
+const updatedUser = {
+  ...user,
+  name: 'New Name'
+}
+
+const updatedArray = [...items, newItem]
+
+// ❌ NEVER mutate directly
+user.name = 'New Name'  // BAD
+items.push(newItem)     // BAD
+```
+
+### Error Handling
+
+```typescript
+// ✅ GOOD: Comprehensive error handling
+async function fetchData(url: string) {
+  try {
+    const response = await fetch(url)
+
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+    }
+
+    return await response.json()
+  } catch (error) {
+    console.error('Fetch failed:', error)
+    throw new Error('Failed to fetch data')
+  }
+}
+
+// ❌ BAD: No error handling
+async function fetchData(url) {
+  const response = await fetch(url)
+  return response.json()
+}
+```
+
+### Async/Await Best Practices
+
+```typescript
+// ✅ GOOD: Parallel execution when possible
+const [users, markets, stats] = await Promise.all([
+  fetchUsers(),
+  fetchMarkets(),
+  fetchStats()
+])
+
+// ❌ BAD: Sequential when unnecessary
+const users = await fetchUsers()
+const markets = await fetchMarkets()
+const stats = await fetchStats()
+```
+
+### Type Safety
+
+```typescript
+// ✅ GOOD: Proper types
+interface Market {
+  id: string
+  name: string
+  status: 'active' | 'resolved' | 'closed'
+  created_at: Date
+}
+
+function getMarket(id: string): Promise<Market> {
+  // Implementation
+}
+
+// ❌ BAD: Using 'any'
+function getMarket(id: any): Promise<any> {
+  // Implementation
+}
+```
+
+## React Best Practices
+
+### Component Structure
+
+```typescript
+// ✅ GOOD: Functional component with types
+interface ButtonProps {
+  children: React.ReactNode
+  onClick: () => void
+  disabled?: boolean
+  variant?: 'primary' | 'secondary'
+}
+
+export function Button({
+  children,
+  onClick,
+  disabled = false,
+  variant = 'primary'
+}: ButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={`btn btn-${variant}`}
+    >
+      {children}
+    </button>
+  )
+}
+
+// ❌ BAD: No types, unclear structure
+export function Button(props) {
+  return <button onClick={props.onClick}>{props.children}</button>
+}
+```
+
+### Custom Hooks
+
+```typescript
+// ✅ GOOD: Reusable custom hook
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value)
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value)
+    }, delay)
+
+    return () => clearTimeout(handler)
+  }, [value, delay])
+
+  return debouncedValue
+}
+
+// Usage
+const debouncedQuery = useDebounce(searchQuery, 500)
+```
+
+### State Management
+
+```typescript
+// ✅ GOOD: Proper state updates
+const [count, setCount] = useState(0)
+
+// Functional update for state based on previous state
+setCount(prev => prev + 1)
+
+// ❌ BAD: Direct state reference
+setCount(count + 1)  // Can be stale in async scenarios
+```
+
+### Conditional Rendering
+
+```typescript
+// ✅ GOOD: Clear conditional rendering
+{isLoading && <Spinner />}
+{error && <ErrorMessage error={error} />}
+{data && <DataDisplay data={data} />}
+
+// ❌ BAD: Ternary hell
+{isLoading ? <Spinner /> : error ? <ErrorMessage error={error} /> : data ? <DataDisplay data={data} /> : null}
+```
+
+## API Design Standards
+
+### REST API Conventions
+
+```
+GET    /api/markets              # List all markets
+GET    /api/markets/:id          # Get specific market
+POST   /api/markets              # Create new market
+PUT    /api/markets/:id          # Update market (full)
+PATCH  /api/markets/:id          # Update market (partial)
+DELETE /api/markets/:id          # Delete market
+
+# Query parameters for filtering
+GET /api/markets?status=active&limit=10&offset=0
+```
+
+### Response Format
+
+```typescript
+// ✅ GOOD: Consistent response structure
+interface ApiResponse<T> {
+  success: boolean
+  data?: T
+  error?: string
+  meta?: {
+    total: number
+    page: number
+    limit: number
+  }
+}
+
+// Success response
+return NextResponse.json({
+  success: true,
+  data: markets,
+  meta: { total: 100, page: 1, limit: 10 }
+})
+
+// Error response
+return NextResponse.json({
+  success: false,
+  error: 'Invalid request'
+}, { status: 400 })
+```
+
+### Input Validation
+
+```typescript
+import { z } from 'zod'
+
+// ✅ GOOD: Schema validation
+const CreateMarketSchema = z.object({
+  name: z.string().min(1).max(200),
+  description: z.string().min(1).max(2000),
+  endDate: z.string().datetime(),
+  categories: z.array(z.string()).min(1)
+})
+
+export async function POST(request: Request) {
+  const body = await request.json()
+
+  try {
+    const validated = CreateMarketSchema.parse(body)
+    // Proceed with validated data
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return NextResponse.json({
+        success: false,
+        error: 'Validation failed',
+        details: error.errors
+      }, { status: 400 })
+    }
+  }
+}
+```
+
+## File Organization
+
+### Project Structure
+
+```
+src/
+├── app/                    # Next.js App Router
+│   ├── api/               # API routes
+│   ├── markets/           # Market pages
+│   └── (auth)/           # Auth pages (route groups)
+├── components/            # React components
+│   ├── ui/               # Generic UI components
+│   ├── forms/            # Form components
+│   └── layouts/          # Layout components
+├── hooks/                # Custom React hooks
+├── lib/                  # Utilities and configs
+│   ├── api/             # API clients
+│   ├── utils/           # Helper functions
+│   └── constants/       # Constants
+├── types/                # TypeScript types
+└── styles/              # Global styles
+```
+
+### File Naming
+
+```
+components/Button.tsx          # PascalCase for components
+hooks/useAuth.ts              # camelCase with 'use' prefix
+lib/formatDate.ts             # camelCase for utilities
+types/market.types.ts         # camelCase with .types suffix
+```
+
+## Comments & Documentation
+
+### When to Comment
+
+```typescript
+// ✅ GOOD: Explain WHY, not WHAT
+// Use exponential backoff to avoid overwhelming the API during outages
+const delay = Math.min(1000 * Math.pow(2, retryCount), 30000)
+
+// Deliberately using mutation here for performance with large arrays
+items.push(newItem)
+
+// ❌ BAD: Stating the obvious
+// Increment counter by 1
+count++
+
+// Set name to user's name
+name = user.name
+```
+
+### JSDoc for Public APIs
+
+```typescript
+/**
+ * Searches markets using semantic similarity.
+ *
+ * @param query - Natural language search query
+ * @param limit - Maximum number of results (default: 10)
+ * @returns Array of markets sorted by similarity score
+ * @throws {Error} If OpenAI API fails or Redis unavailable
+ *
+ * @example
+ * ```typescript
+ * const results = await searchMarkets('election', 5)
+ * console.log(results[0].name) // "Trump vs Biden"
+ * ```
+ */
+export async function searchMarkets(
+  query: string,
+  limit: number = 10
+): Promise<Market[]> {
+  // Implementation
+}
+```
+
+## Performance Best Practices
+
+### Memoization
+
+```typescript
+import { useMemo, useCallback } from 'react'
+
+// ✅ GOOD: Memoize expensive computations
+const sortedMarkets = useMemo(() => {
+  return markets.sort((a, b) => b.volume - a.volume)
+}, [markets])
+
+// ✅ GOOD: Memoize callbacks
+const handleSearch = useCallback((query: string) => {
+  setSearchQuery(query)
+}, [])
+```
+
+### Lazy Loading
+
+```typescript
+import { lazy, Suspense } from 'react'
+
+// ✅ GOOD: Lazy load heavy components
+const HeavyChart = lazy(() => import('./HeavyChart'))
+
+export function Dashboard() {
+  return (
+    <Suspense fallback={<Spinner />}>
+      <HeavyChart />
+    </Suspense>
+  )
+}
+```
+
+### Database Queries
+
+```typescript
+// ✅ GOOD: Select only needed columns
+const { data } = await supabase
+  .from('markets')
+  .select('id, name, status')
+  .limit(10)
+
+// ❌ BAD: Select everything
+const { data } = await supabase
+  .from('markets')
+  .select('*')
+```
+
+## Testing Standards
+
+### Test Structure (AAA Pattern)
+
+```typescript
+test('calculates similarity correctly', () => {
+  // Arrange
+  const vector1 = [1, 0, 0]
+  const vector2 = [0, 1, 0]
+
+  // Act
+  const similarity = calculateCosineSimilarity(vector1, vector2)
+
+  // Assert
+  expect(similarity).toBe(0)
+})
+```
+
+### Test Naming
+
+```typescript
+// ✅ GOOD: Descriptive test names
+test('returns empty array when no markets match query', () => { })
+test('throws error when OpenAI API key is missing', () => { })
+test('falls back to substring search when Redis unavailable', () => { })
+
+// ❌ BAD: Vague test names
+test('works', () => { })
+test('test search', () => { })
+```
+
+## Code Smell Detection
+
+Watch for these anti-patterns:
+
+### 1. Long Functions
+```typescript
+// ❌ BAD: Function > 50 lines
+function processMarketData() {
+  // 100 lines of code
+}
+
+// ✅ GOOD: Split into smaller functions
+function processMarketData() {
+  const validated = validateData()
+  const transformed = transformData(validated)
+  return saveData(transformed)
+}
+```
+
+### 2. Deep Nesting
+```typescript
+// ❌ BAD: 5+ levels of nesting
+if (user) {
+  if (user.isAdmin) {
+    if (market) {
+      if (market.isActive) {
+        if (hasPermission) {
+          // Do something
+        }
+      }
+    }
+  }
+}
+
+// ✅ GOOD: Early returns
+if (!user) return
+if (!user.isAdmin) return
+if (!market) return
+if (!market.isActive) return
+if (!hasPermission) return
+
+// Do something
+```
+
+### 3. Magic Numbers
+```typescript
+// ❌ BAD: Unexplained numbers
+if (retryCount > 3) { }
+setTimeout(callback, 500)
+
+// ✅ GOOD: Named constants
+const MAX_RETRIES = 3
+const DEBOUNCE_DELAY_MS = 500
+
+if (retryCount > MAX_RETRIES) { }
+setTimeout(callback, DEBOUNCE_DELAY_MS)
+```
+
+**Remember**: Code quality is not negotiable. Clear, maintainable code enables rapid development and confident refactoring.
\ No newline at end of file
diff --git a/.cursor/skills/nextjs/.claude-plugin/plugin.json b/.cursor/skills/nextjs/.claude-plugin/plugin.json
new file mode 100644
index 0000000..2cb79c9
--- /dev/null
+++ b/.cursor/skills/nextjs/.claude-plugin/plugin.json
@@ -0,0 +1,12 @@
+{
+  "name": "nextjs",
+  "description": "Build Next.js 16 apps with App Router, Server Components/Actions, Cache Components (use cache), and async route params. Includes proxy.ts and React 19.2. Use when: building Next.js 16 projects, or troubleshooting async params (Promise types), use cache directives, parallel route 404s.",
+  "version": "1.0.0",
+  "author": {
+    "name": "Jeremy Dawes",
+    "email": "jeremy@jezweb.net"
+  },
+  "license": "MIT",
+  "repository": "https://github.com/jezweb/claude-skills",
+  "keywords": []
+}
diff --git a/.cursor/skills/nextjs/SKILL.md b/.cursor/skills/nextjs/SKILL.md
new file mode 100644
index 0000000..becad63
--- /dev/null
+++ b/.cursor/skills/nextjs/SKILL.md
@@ -0,0 +1,1745 @@
+---
+name: nextjs
+description: |
+  Build Next.js 16 apps with App Router, Server Components/Actions, Cache Components ("use cache"), and async route params. Includes proxy.ts and React 19.2. Prevents 25 documented errors.
+
+  Use when: building Next.js 16 projects, or troubleshooting async params (Promise types), "use cache" directives, parallel route 404s, Turbopack issues, i18n caching, navigation throttling.
+user-invocable: true
+allowed-tools: ["Read", "Write", "Edit", "Bash", "Glob", "Grep"]
+---
+
+# Next.js App Router - Production Patterns
+
+**Version**: Next.js 16.1.1
+**React Version**: 19.2.3
+**Node.js**: 20.9+
+**Last Verified**: 2026-01-09
+
+---
+
+## Table of Contents
+
+1. [When to Use This Skill](#when-to-use-this-skill)
+2. [When NOT to Use This Skill](#when-not-to-use-this-skill)
+3. [Security Advisories (December 2025)](#security-advisories-december-2025)
+4. [Next.js 16.1 Updates](#nextjs-161-updates-december-2025)
+5. [Next.js 16 Breaking Changes](#nextjs-16-breaking-changes)
+6. [Cache Components & Caching APIs](#cache-components--caching-apis)
+7. [Route Handlers (Next.js 16 Updates)](#route-handlers-nextjs-16-updates)
+8. [Proxy vs Middleware](#proxy-vs-middleware)
+9. [Parallel Routes - default.js Required](#parallel-routes---defaultjs-required-breaking)
+10. [React 19.2 Features](#react-192-features)
+11. [Turbopack (Stable in Next.js 16)](#turbopack-stable-in-nextjs-16)
+12. [Common Errors & Solutions](#common-errors--solutions)
+13. [Templates & Resources](#templates--resources)
+
+---
+
+## When to Use This Skill
+
+**Focus**: Next.js 16 breaking changes and knowledge gaps (December 2024+).
+
+Use this skill when you need:
+
+- **Next.js 16 breaking changes** (async params, proxy.ts, parallel routes default.js, removed features)
+- **Cache Components** with `"use cache"` directive (NEW in Next.js 16)
+- **New caching APIs**: `revalidateTag()`, `updateTag()`, `refresh()` (Updated in Next.js 16)
+- **Migration from Next.js 15 to 16** (avoid breaking change errors)
+- **Async route params** (`params`, `searchParams`, `cookies()`, `headers()` now async)
+- **Parallel routes with default.js** (REQUIRED in Next.js 16)
+- **React 19.2 features** (View Transitions, `useEffectEvent()`, React Compiler)
+- **Turbopack** (stable and default in Next.js 16)
+- **Image defaults changed** (TTL, sizes, qualities in Next.js 16)
+- **Error prevention** (25 documented Next.js 16 errors with solutions)
+
+---
+
+## When NOT to Use This Skill
+
+Do NOT use this skill for:
+
+- **Cloudflare Workers deployment** → Use `cloudflare-nextjs` skill instead
+- **Pages Router patterns** → This skill covers App Router ONLY (Pages Router is legacy)
+- **Authentication libraries** → Use `clerk-auth`, `better-auth`, or other auth-specific skills
+- **Database integration** → Use `cloudflare-d1`, `drizzle-orm-d1`, or database-specific skills
+- **UI component libraries** → Use `tailwind-v4-shadcn` skill for Tailwind + shadcn/ui
+- **State management** → Use `zustand-state-management`, `tanstack-query` skills
+- **Form libraries** → Use `react-hook-form-zod` skill
+- **Vercel-specific features** → Refer to Vercel platform documentation
+- **Next.js Enterprise features** (ISR, DPR) → Refer to Next.js Enterprise docs
+- **Deployment configuration** → Use platform-specific deployment skills
+
+**Relationship with Other Skills**:
+- **cloudflare-nextjs**: For deploying Next.js to Cloudflare Workers (use BOTH skills together if deploying to Cloudflare)
+- **tailwind-v4-shadcn**: For Tailwind v4 + shadcn/ui setup (composable with this skill)
+- **clerk-auth**: For Clerk authentication in Next.js (composable with this skill)
+- **better-auth**: For Better Auth integration (composable with this skill)
+
+---
+
+## Security Advisories (December 2025)
+
+**CRITICAL**: Three security vulnerabilities were disclosed in December 2025 affecting Next.js with React Server Components:
+
+| CVE | Severity | Affected | Description |
+|-----|----------|----------|-------------|
+| **CVE-2025-66478** | CRITICAL (10.0) | 15.x, 16.x | Server Component arbitrary code execution |
+| **CVE-2025-55184** | HIGH | 13.x-16.x | Denial of Service via malformed request |
+| **CVE-2025-55183** | MEDIUM | 13.x-16.x | Source code exposure in error responses |
+
+**Action Required**: Upgrade to Next.js 16.1.1 or later immediately.
+
+```bash
+npm update next
+# Verify: npm list next should show 16.1.1+
+```
+
+**References**:
+- https://nextjs.org/security
+- https://github.com/vercel/next.js/security/advisories
+
+---
+
+## Next.js 16.1 Updates (December 2025)
+
+**New in 16.1**:
+- **Turbopack File System Caching (STABLE)**: Now enabled by default in development
+- **Next.js Bundle Analyzer**: New experimental feature for bundle analysis
+- **Improved Debugging**: Enhanced `next dev --inspect` support
+- **Security Fixes**: Addresses CVE-2025-66478, CVE-2025-55184, CVE-2025-55183
+
+---
+
+## Next.js 16 Breaking Changes
+
+**IMPORTANT**: Next.js 16 introduces multiple breaking changes. Read this section carefully if migrating from Next.js 15 or earlier.
+
+### 1. Async Route Parameters (BREAKING)
+
+**Breaking Change**: `params`, `searchParams`, `cookies()`, `headers()`, `draftMode()` are now **async** and must be awaited.
+
+**Before (Next.js 15)**:
+```typescript
+// ❌ This no longer works in Next.js 16
+export default function Page({ params, searchParams }: {
+  params: { slug: string }
+  searchParams: { query: string }
+}) {
+  const slug = params.slug // ❌ Error: params is a Promise
+  const query = searchParams.query // ❌ Error: searchParams is a Promise
+  return <div>{slug}</div>
+}
+```
+
+**After (Next.js 16)**:
+```typescript
+// ✅ Correct: await params and searchParams
+export default async function Page({ params, searchParams }: {
+  params: Promise<{ slug: string }>
+  searchParams: Promise<{ query: string }>
+}) {
+  const { slug } = await params // ✅ Await the promise
+  const { query } = await searchParams // ✅ Await the promise
+  return <div>{slug}</div>
+}
+```
+
+**Applies to**:
+- `params` in pages, layouts, route handlers
+- `searchParams` in pages
+- `cookies()` from `next/headers`
+- `headers()` from `next/headers`
+- `draftMode()` from `next/headers`
+
+**Migration**:
+```typescript
+// ❌ Before
+import { cookies, headers } from 'next/headers'
+
+export function MyComponent() {
+  const cookieStore = cookies() // ❌ Sync access
+  const headersList = headers() // ❌ Sync access
+}
+
+// ✅ After
+import { cookies, headers } from 'next/headers'
+
+export async function MyComponent() {
+  const cookieStore = await cookies() // ✅ Async access
+  const headersList = await headers() // ✅ Async access
+}
+```
+
+**Codemod**: Run `npx @next/codemod@canary upgrade latest` to automatically migrate.
+
+**Codemod Limitations** (Community-sourced):
+The official codemod handles ~80% of async API migrations but misses edge cases:
+- Async APIs accessed in custom hooks
+- Conditional logic accessing params
+- Components imported from external packages
+- Complex server actions with multiple async calls
+
+After running the codemod, search for `@next-codemod-error` comments marking places it couldn't auto-fix.
+
+**Manual Migration for Client Components**:
+```typescript
+// For client components, use React.use() to unwrap promises
+'use client';
+
+import { use } from 'react';
+
+export default function ClientComponent({
+  params
+}: {
+  params: Promise<{ id: string }>
+}) {
+  const { id } = use(params); // Unwrap Promise in client
+  return <div>{id}</div>;
+}
+```
+
+**See Template**: `templates/app-router-async-params.tsx`
+
+---
+
+### 2. Middleware → Proxy Migration (BREAKING)
+
+**Breaking Change**: `middleware.ts` is **deprecated** in Next.js 16. Use `proxy.ts` instead.
+
+**Why the Change**: `proxy.ts` makes the network boundary explicit by running on Node.js runtime (not Edge runtime). This provides better clarity between edge middleware and server-side proxies.
+
+**Migration Steps**:
+
+1. **Rename file**: `middleware.ts` → `proxy.ts`
+2. **Rename function**: `middleware` → `proxy`
+3. **Update config**: `matcher` → `config.matcher` (same syntax)
+
+**Before (Next.js 15)**:
+```typescript
+// middleware.ts ❌ Deprecated in Next.js 16
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  const response = NextResponse.next()
+  response.headers.set('x-custom-header', 'value')
+  return response
+}
+
+export const config = {
+  matcher: '/api/:path*',
+}
+```
+
+**After (Next.js 16)**:
+```typescript
+// proxy.ts ✅ New in Next.js 16
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+export function proxy(request: NextRequest) {
+  const response = NextResponse.next()
+  response.headers.set('x-custom-header', 'value')
+  return response
+}
+
+export const config = {
+  matcher: '/api/:path*',
+}
+```
+
+**Note**: `middleware.ts` still works in Next.js 16 but is deprecated. Migrate to `proxy.ts` for future compatibility.
+
+**See Template**: `templates/proxy-migration.ts`
+**See Reference**: `references/proxy-vs-middleware.md`
+
+---
+
+### 3. Parallel Routes Require `default.js` (BREAKING)
+
+**Breaking Change**: Parallel routes now **require** explicit `default.js` files. Without them, routes will fail during soft navigation.
+
+**Structure**:
+```
+app/
+├── @auth/
+│   ├── login/
+│   │   └── page.tsx
+│   └── default.tsx    ← REQUIRED in Next.js 16
+├── @dashboard/
+│   ├── overview/
+│   │   └── page.tsx
+│   └── default.tsx    ← REQUIRED in Next.js 16
+└── layout.tsx
+```
+
+**Layout**:
+```typescript
+// app/layout.tsx
+export default function Layout({
+  children,
+  auth,
+  dashboard,
+}: {
+  children: React.ReactNode
+  auth: React.ReactNode
+  dashboard: React.ReactNode
+}) {
+  return (
+    <html>
+      <body>
+        {auth}
+        {dashboard}
+        {children}
+      </body>
+    </html>
+  )
+}
+```
+
+**Default Fallback** (REQUIRED):
+```typescript
+// app/@auth/default.tsx
+export default function AuthDefault() {
+  return null // or <Skeleton /> or redirect
+}
+
+// app/@dashboard/default.tsx
+export default function DashboardDefault() {
+  return null
+}
+```
+
+**Why Required**: Next.js 16 changed how parallel routes handle soft navigation. Without `default.js`, unmatched slots will error during client-side navigation.
+
+**See Template**: `templates/parallel-routes-with-default.tsx`
+
+---
+
+### 4. Removed Features (BREAKING)
+
+**The following features are REMOVED in Next.js 16**:
+
+1. **AMP Support** - Entirely removed. Migrate to standard pages.
+2. **`next lint` command** - Use ESLint or Biome directly.
+3. **`serverRuntimeConfig` and `publicRuntimeConfig`** - Use environment variables instead.
+4. **`experimental.ppr` flag** - Evolved into Cache Components. Use `"use cache"` directive.
+5. **Automatic `scroll-behavior: smooth`** - Add manually if needed.
+6. **Node.js 18 support** - Minimum version is now **20.9+**.
+
+**Migration**:
+- **AMP**: Convert AMP pages to standard pages or use separate AMP implementation.
+- **Linting**: Run `npx eslint .` or `npx biome lint .` directly.
+- **Config**: Replace `serverRuntimeConfig` with `process.env.VARIABLE`.
+- **PPR**: Migrate from `experimental.ppr` to `"use cache"` directive (see Cache Components section).
+
+---
+
+### 5. Version Requirements (BREAKING)
+
+**Next.js 16 requires**:
+
+- **Node.js**: 20.9+ (Node.js 18 no longer supported)
+- **TypeScript**: 5.1+ (if using TypeScript)
+- **React**: 19.2+ (automatically installed with Next.js 16)
+- **Browsers**: Chrome 111+, Safari 16.4+, Firefox 109+, Edge 111+
+
+**Check Versions**:
+```bash
+node --version    # Should be 20.9+
+npm --version     # Should be 10+
+npx next --version # Should be 16.0.0+
+```
+
+**Upgrade Node.js**:
+```bash
+# Using nvm
+nvm install 20
+nvm use 20
+nvm alias default 20
+
+# Using Homebrew (macOS)
+brew install node@20
+
+# Using apt (Ubuntu/Debian)
+sudo apt update
+sudo apt install nodejs npm
+```
+
+---
+
+### 6. Image Defaults Changed (BREAKING)
+
+**Next.js 16 changed `next/image` defaults**:
+
+| Setting | Next.js 15 | Next.js 16 |
+|---------|------------|------------|
+| **TTL** (cache duration) | 60 seconds | 4 hours |
+| **imageSizes** | `[16, 32, 48, 64, 96, 128, 256, 384]` | `[640, 750, 828, 1080, 1200]` (reduced) |
+| **qualities** | `[75, 90, 100]` | `[75]` (single quality) |
+
+**Impact**:
+- Images cache longer (4 hours vs 60 seconds)
+- Fewer image sizes generated (smaller builds, but less granular)
+- Single quality (75) generated instead of multiple
+
+**Override Defaults** (if needed):
+```typescript
+// next.config.ts
+import type { NextConfig } from 'next'
+
+const config: NextConfig = {
+  images: {
+    minimumCacheTTL: 60, // Revert to 60 seconds
+    deviceSizes: [640, 750, 828, 1080, 1200, 1920], // Add larger sizes
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384], // Restore old sizes
+    formats: ['image/webp'], // Default
+  },
+}
+
+export default config
+```
+
+**See Template**: `templates/image-optimization.tsx`
+
+---
+
+## Cache Components & Caching APIs
+
+**NEW in Next.js 16**: Cache Components introduce **opt-in caching** with the `"use cache"` directive, replacing implicit caching from Next.js 15.
+
+### 1. Overview
+
+**What Changed**:
+- **Next.js 15**: Implicit caching (all Server Components cached by default)
+- **Next.js 16**: Opt-in caching with `"use cache"` directive
+
+**Why the Change**: Explicit caching gives developers more control and makes caching behavior predictable.
+
+**Important Caching Defaults** (Community-sourced):
+
+| Feature | Next.js 14 | Next.js 15/16 |
+|---------|-----------|---------------|
+| **fetch() requests** | Cached by default | NOT cached by default |
+| **Router Cache (dynamic pages)** | Cached on client | NOT cached by default |
+| **Router Cache (static pages)** | Cached | Still cached |
+| **Route Handlers (GET)** | Cached | Dynamic by default |
+
+**Best Practice**: Default to dynamic in Next.js 16. Start with no caching and add it where beneficial, rather than debugging unexpected cache hits. Always test with production builds - the development server behaves differently.
+
+**Cache Components enable**:
+- Component-level caching (cache specific components, not entire pages)
+- Function-level caching (cache expensive computations)
+- Page-level caching (cache entire pages selectively)
+- **Partial Prerendering (PPR)** - Cache static parts, render dynamic parts on-demand
+
+---
+
+### 2. `"use cache"` Directive
+
+**Syntax**: Add `"use cache"` at the top of a Server Component, function, or route handler.
+
+**Component-level caching**:
+```typescript
+// app/components/expensive-component.tsx
+'use cache'
+
+export async function ExpensiveComponent() {
+  const data = await fetch('https://api.example.com/data')
+  const json = await data.json()
+
+  return (
+    <div>
+      <h1>{json.title}</h1>
+      <p>{json.description}</p>
+    </div>
+  )
+}
+```
+
+**Function-level caching**:
+```typescript
+// lib/data.ts
+'use cache'
+
+export async function getExpensiveData(id: string) {
+  const response = await fetch(`https://api.example.com/items/${id}`)
+  return response.json()
+}
+
+// Usage in component
+import { getExpensiveData } from '@/lib/data'
+
+export async function ProductPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params
+  const product = await getExpensiveData(id) // Cached
+
+  return <div>{product.name}</div>
+}
+```
+
+**Page-level caching**:
+```typescript
+// app/blog/[slug]/page.tsx
+'use cache'
+
+export async function generateStaticParams() {
+  const posts = await fetch('https://api.example.com/posts').then(r => r.json())
+  return posts.map((post: { slug: string }) => ({ slug: post.slug }))
+}
+
+export default async function BlogPost({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params
+  const post = await fetch(`https://api.example.com/posts/${slug}`).then(r => r.json())
+
+  return (
+    <article>
+      <h1>{post.title}</h1>
+      <div>{post.content}</div>
+    </article>
+  )
+}
+```
+
+**See Template**: `templates/cache-component-use-cache.tsx`
+
+---
+
+### 3. Partial Prerendering (PPR)
+
+**PPR** allows caching static parts of a page while rendering dynamic parts on-demand.
+
+**Pattern**:
+```typescript
+// app/dashboard/page.tsx
+
+// Static header (cached)
+'use cache'
+async function StaticHeader() {
+  return <header>My App</header>
+}
+
+// Dynamic user info (not cached)
+async function DynamicUserInfo() {
+  const cookieStore = await cookies()
+  const userId = cookieStore.get('userId')?.value
+  const user = await fetch(`/api/users/${userId}`).then(r => r.json())
+
+  return <div>Welcome, {user.name}</div>
+}
+
+// Page combines both
+export default function Dashboard() {
+  return (
+    <div>
+      <StaticHeader /> {/* Cached */}
+      <DynamicUserInfo /> {/* Dynamic */}
+    </div>
+  )
+}
+```
+
+**When to Use PPR**:
+- Page has both static and dynamic content
+- Want to cache layout/header/footer but render user-specific content
+- Need fast initial load (static parts) + personalization (dynamic parts)
+
+**See Reference**: `references/cache-components-guide.md`
+
+---
+
+### 4. `revalidateTag()` - Updated API
+
+**BREAKING CHANGE**: `revalidateTag()` now requires a **second argument** (`cacheLife` profile) for stale-while-revalidate behavior.
+
+**Before (Next.js 15)**:
+```typescript
+import { revalidateTag } from 'next/cache'
+
+export async function updatePost(id: string) {
+  await fetch(`/api/posts/${id}`, { method: 'PATCH' })
+  revalidateTag('posts') // ❌ Only one argument in Next.js 15
+}
+```
+
+**After (Next.js 16)**:
+```typescript
+import { revalidateTag } from 'next/cache'
+
+export async function updatePost(id: string) {
+  await fetch(`/api/posts/${id}`, { method: 'PATCH' })
+  revalidateTag('posts', 'max') // ✅ Second argument required in Next.js 16
+}
+```
+
+**Built-in Cache Life Profiles**:
+- `'max'` - Maximum staleness (recommended for most use cases)
+- `'hours'` - Stale after hours
+- `'days'` - Stale after days
+- `'weeks'` - Stale after weeks
+- `'default'` - Default cache behavior
+
+**Custom Cache Life Profile**:
+```typescript
+revalidateTag('posts', {
+  stale: 3600, // Stale after 1 hour (seconds)
+  revalidate: 86400, // Revalidate every 24 hours (seconds)
+  expire: false, // Never expire (optional)
+})
+```
+
+**Pattern in Server Actions**:
+```typescript
+'use server'
+
+import { revalidateTag } from 'next/cache'
+
+export async function createPost(formData: FormData) {
+  const title = formData.get('title') as string
+  const content = formData.get('content') as string
+
+  await fetch('/api/posts', {
+    method: 'POST',
+    body: JSON.stringify({ title, content }),
+  })
+
+  revalidateTag('posts', 'max') // ✅ Revalidate with max staleness
+}
+```
+
+**See Template**: `templates/revalidate-tag-cache-life.ts`
+
+---
+
+### 5. `updateTag()` - NEW API (Server Actions Only)
+
+**NEW in Next.js 16**: `updateTag()` provides **read-your-writes semantics** for Server Actions.
+
+**What it does**:
+- Expires cache immediately
+- Refreshes data within the same request
+- Shows updated data right after mutation (no stale data)
+
+**Difference from `revalidateTag()`**:
+- `revalidateTag()`: **Stale-while-revalidate** (shows stale data, revalidates in background)
+- `updateTag()`: **Immediate refresh** (expires cache, fetches fresh data in same request)
+
+**Use Case**: Forms, user settings, or any mutation where user expects immediate feedback.
+
+**Pattern**:
+```typescript
+'use server'
+
+import { updateTag } from 'next/cache'
+
+export async function updateUserProfile(formData: FormData) {
+  const name = formData.get('name') as string
+  const email = formData.get('email') as string
+
+  // Update database
+  await db.users.update({ name, email })
+
+  // Immediately refresh cache (read-your-writes)
+  updateTag('user-profile')
+
+  // User sees updated data immediately (no stale data)
+}
+```
+
+**When to Use**:
+- **`updateTag()`**: User settings, profile updates, critical mutations (immediate feedback)
+- **`revalidateTag()`**: Blog posts, product listings, non-critical updates (background revalidation)
+
+**See Template**: `templates/server-action-update-tag.ts`
+
+---
+
+### 6. `refresh()` - NEW API (Server Actions Only)
+
+**NEW in Next.js 16**: `refresh()` refreshes **uncached data only** (complements client-side `router.refresh()`).
+
+**When to Use**:
+- Refresh dynamic data without affecting cached data
+- Complement `router.refresh()` on server side
+
+**Pattern**:
+```typescript
+'use server'
+
+import { refresh } from 'next/cache'
+
+export async function refreshDashboard() {
+  // Refresh uncached data (e.g., real-time metrics)
+  refresh()
+
+  // Cached data (e.g., static header) remains cached
+}
+```
+
+**Difference from `revalidateTag()` and `updateTag()`**:
+- `refresh()`: Only refreshes **uncached** data
+- `revalidateTag()`: Revalidates **specific tagged** data (stale-while-revalidate)
+- `updateTag()`: Immediately expires and refreshes **specific tagged** data
+
+**See Reference**: `references/cache-components-guide.md`
+
+---
+
+---
+
+## Route Handlers (Next.js 16 Updates)
+
+### Async Params in Route Handlers (BREAKING)
+
+**IMPORTANT**: `params` and `headers()` are now async in Next.js 16 route handlers.
+
+**Example**:
+```typescript
+// app/api/posts/[id]/route.ts
+import { NextResponse } from 'next/server'
+import { headers } from 'next/headers'
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params // ✅ Await params in Next.js 16
+  const headersList = await headers() // ✅ Await headers in Next.js 16
+
+  const post = await db.posts.findUnique({ where: { id } })
+
+  return NextResponse.json(post)
+}
+```
+
+**See Template**: `templates/route-handler-api.ts`
+
+---
+
+## Proxy vs Middleware
+
+**Next.js 16 introduces `proxy.ts`** to replace `middleware.ts`.
+
+### Why the Change?
+
+- **`middleware.ts`**: Runs on Edge runtime (limited Node.js APIs)
+- **`proxy.ts`**: Runs on Node.js runtime (full Node.js APIs)
+
+The new `proxy.ts` makes the network boundary explicit and provides more flexibility.
+
+### Migration
+
+**Before (middleware.ts)**:
+```typescript
+// middleware.ts
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  // Check auth
+  const token = request.cookies.get('token')
+
+  if (!token) {
+    return NextResponse.redirect(new URL('/login', request.url))
+  }
+
+  return NextResponse.next()
+}
+
+export const config = {
+  matcher: '/dashboard/:path*',
+}
+```
+
+**After (proxy.ts)**:
+```typescript
+// proxy.ts
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+export function proxy(request: NextRequest) {
+  // Check auth
+  const token = request.cookies.get('token')
+
+  if (!token) {
+    return NextResponse.redirect(new URL('/login', request.url))
+  }
+
+  return NextResponse.next()
+}
+
+export const config = {
+  matcher: '/dashboard/:path*',
+}
+```
+
+**See Template**: `templates/proxy-migration.ts`
+**See Reference**: `references/proxy-vs-middleware.md`
+
+---
+
+## Parallel Routes - default.js Required (BREAKING)
+
+**Breaking Change in Next.js 16**: Parallel routes now **require** explicit `default.js` files.
+
+**Structure**:
+```
+app/
+├── @modal/
+│   ├── login/page.tsx
+│   └── default.tsx  ← REQUIRED in Next.js 16
+├── @feed/
+│   ├── trending/page.tsx
+│   └── default.tsx  ← REQUIRED in Next.js 16
+└── layout.tsx
+```
+
+**Default Files (REQUIRED)**:
+```typescript
+// app/@modal/default.tsx
+export default function ModalDefault() {
+  return null // or <Skeleton /> or redirect
+}
+```
+
+**Why Required**: Next.js 16 changed soft navigation handling. Without `default.js`, unmatched slots error during client-side navigation.
+
+**Advanced Edge Case** (Community-sourced):
+Even WITH `default.js` files, hard navigating or refreshing routes with parallel routes can return 404 errors. The workaround is adding a catch-all route.
+
+**Source**: [GitHub Issue #48090](https://github.com/vercel/next.js/issues/48090), [#73939](https://github.com/vercel/next.js/issues/73939)
+
+**Workaround**:
+```typescript
+// app/@modal/[...catchAll]/page.tsx
+export default function CatchAll() {
+  return null;
+}
+
+// OR use catch-all in default.tsx
+// app/@modal/default.tsx
+export default function ModalDefault({ params }: { params: { catchAll?: string[] } }) {
+  return null; // Handles all unmatched routes
+}
+```
+
+**See Template**: `templates/parallel-routes-with-default.tsx`
+
+---
+
+## React 19.2 Features
+
+Next.js 16 integrates React 19.2, which includes new features from React Canary.
+
+### 1. View Transitions
+
+**Use Case**: Smooth animations between page transitions.
+
+```typescript
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { startTransition } from 'react'
+
+export function NavigationLink({ href, children }: { href: string; children: React.ReactNode }) {
+  const router = useRouter()
+
+  function handleClick(e: React.MouseEvent) {
+    e.preventDefault()
+
+    // Wrap navigation in startTransition for View Transitions
+    startTransition(() => {
+      router.push(href)
+    })
+  }
+
+  return <a href={href} onClick={handleClick}>{children}</a>
+}
+```
+
+**With CSS View Transitions API**:
+```css
+/* app/globals.css */
+@view-transition {
+  navigation: auto;
+}
+
+/* Animate elements with view-transition-name */
+.page-title {
+  view-transition-name: page-title;
+}
+```
+
+**See Template**: `templates/view-transitions-react-19.tsx`
+
+---
+
+### 2. `useEffectEvent()` (Experimental)
+
+**Use Case**: Extract non-reactive logic from `useEffect`.
+
+```typescript
+'use client'
+
+import { useEffect, experimental_useEffectEvent as useEffectEvent } from 'react'
+
+export function ChatRoom({ roomId }: { roomId: string }) {
+  const onConnected = useEffectEvent(() => {
+    console.log('Connected to room:', roomId)
+  })
+
+  useEffect(() => {
+    const connection = connectToRoom(roomId)
+    onConnected() // Non-reactive callback
+
+    return () => connection.disconnect()
+  }, [roomId]) // Only re-run when roomId changes
+
+  return <div>Chat Room {roomId}</div>
+}
+```
+
+**Why Use It**: Prevents unnecessary `useEffect` re-runs when callback dependencies change.
+
+---
+
+### 3. React Compiler (Stable)
+
+**Use Case**: Automatic memoization without `useMemo`, `useCallback`.
+
+**Enable in next.config.ts**:
+```typescript
+import type { NextConfig } from 'next'
+
+const config: NextConfig = {
+  experimental: {
+    reactCompiler: true,
+  },
+}
+
+export default config
+```
+
+**Install Plugin**:
+```bash
+npm install babel-plugin-react-compiler
+```
+
+**Example** (no manual memoization needed):
+```typescript
+'use client'
+
+export function ExpensiveList({ items }: { items: string[] }) {
+  // React Compiler automatically memoizes this
+  const filteredItems = items.filter(item => item.length > 3)
+
+  return (
+    <ul>
+      {filteredItems.map(item => (
+        <li key={item}>{item}</li>
+      ))}
+    </ul>
+  )
+}
+```
+
+**See Reference**: `references/react-19-integration.md`
+
+---
+
+## Turbopack (Stable in Next.js 16)
+
+**NEW**: Turbopack is now the **default bundler** in Next.js 16.
+
+**Performance Improvements**:
+- 2–5× faster production builds
+- Up to 10× faster Fast Refresh
+
+**Opt-out** (if needed):
+```bash
+npm run build -- --webpack
+```
+
+**Enable File System Caching** (experimental):
+```typescript
+// next.config.ts
+import type { NextConfig } from 'next'
+
+const config: NextConfig = {
+  experimental: {
+    turbopack: {
+      fileSystemCaching: true, // Beta: Persist cache between runs
+    },
+  },
+}
+
+export default config
+```
+
+---
+
+### Turbopack Production Limitations (as of Next.js 16.1)
+
+**Known Issues**:
+
+#### 1. Prisma Incompatibility
+**Source**: [GitHub Discussion #77721](https://github.com/vercel/next.js/discussions/77721)
+
+Turbopack production builds fail with Prisma ORM (v6.5.0+). Error: "The 'path' argument must be of type string."
+
+**Workaround**:
+```bash
+# Use webpack for production builds
+npm run build -- --webpack
+```
+
+Or in `next.config.ts`:
+```typescript
+const config: NextConfig = {
+  experimental: {
+    turbo: false, // Disable Turbopack for production
+  },
+};
+```
+
+---
+
+#### 2. Source Maps Security Risk
+**Source**: [GitHub Discussion #77721](https://github.com/vercel/next.js/discussions/77721)
+
+Turbopack currently **always builds production source maps for the browser**, exposing source code in production deployments.
+
+**Workaround**:
+```typescript
+// next.config.ts
+const config: NextConfig = {
+  productionBrowserSourceMaps: false, // Disable source maps
+};
+```
+
+Or exclude `.map` files in deployment:
+```bash
+# .vercelignore or similar
+*.map
+```
+
+---
+
+#### 3. External Module Hash Mismatches (Monorepos)
+**Source**: [GitHub Issue #87737](https://github.com/vercel/next.js/issues/87737)
+
+Turbopack generates external module references with hashes that don't match when `node_modules` structure differs (pnpm, yarn workspaces, monorepos). This causes "Module not found" errors in production builds.
+
+**Symptoms**:
+- Build succeeds locally but fails in CI/CD
+- Hash mismatches between bundled references and actual module files
+
+**Workaround**:
+```typescript
+// next.config.ts
+const config: NextConfig = {
+  experimental: {
+    serverExternalPackages: ['package-name'], // Explicitly externalize packages
+  },
+};
+```
+
+---
+
+#### 4. Bundle Size Differences (Community-sourced)
+**Source**: [GitHub Discussion #77721](https://github.com/vercel/next.js/discussions/77721)
+
+Bundle sizes built with Turbopack may differ from webpack builds. This is expected and being optimized as Turbopack matures.
+
+---
+
+## Common Errors & Solutions
+
+### 1. Error: `params` is a Promise
+
+**Error**:
+```
+Type 'Promise<{ id: string }>' is not assignable to type '{ id: string }'
+```
+
+**Cause**: Next.js 16 changed `params` to async.
+
+**Solution**: Await `params`:
+```typescript
+// ❌ Before
+export default function Page({ params }: { params: { id: string } }) {
+  const id = params.id
+}
+
+// ✅ After
+export default async function Page({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params
+}
+```
+
+---
+
+### 2. Error: `searchParams` is a Promise
+
+**Error**:
+```
+Property 'query' does not exist on type 'Promise<{ query: string }>'
+```
+
+**Cause**: `searchParams` is now async in Next.js 16.
+
+**Solution**:
+```typescript
+// ❌ Before
+export default function Page({ searchParams }: { searchParams: { query: string } }) {
+  const query = searchParams.query
+}
+
+// ✅ After
+export default async function Page({ searchParams }: { searchParams: Promise<{ query: string }> }) {
+  const { query } = await searchParams
+}
+```
+
+---
+
+### 3. Error: `cookies()` requires await
+
+**Error**:
+```
+'cookies' implicitly has return type 'any'
+```
+
+**Cause**: `cookies()` is now async in Next.js 16.
+
+**Solution**:
+```typescript
+// ❌ Before
+import { cookies } from 'next/headers'
+
+export function MyComponent() {
+  const cookieStore = cookies()
+}
+
+// ✅ After
+import { cookies } from 'next/headers'
+
+export async function MyComponent() {
+  const cookieStore = await cookies()
+}
+```
+
+---
+
+### 4. Error: Parallel route missing `default.js`
+
+**Error**:
+```
+Error: Parallel route @modal/login was matched but no default.js was found
+```
+
+**Cause**: Next.js 16 requires `default.js` for all parallel routes.
+
+**Solution**: Add `default.tsx` files:
+```typescript
+// app/@modal/default.tsx
+export default function ModalDefault() {
+  return null
+}
+```
+
+---
+
+### 5. Error: `revalidateTag()` requires 2 arguments
+
+**Error**:
+```
+Expected 2 arguments, but got 1
+```
+
+**Cause**: `revalidateTag()` now requires a `cacheLife` argument in Next.js 16.
+
+**Solution**:
+```typescript
+// ❌ Before
+revalidateTag('posts')
+
+// ✅ After
+revalidateTag('posts', 'max')
+```
+
+---
+
+### 6. Error: Cannot use React hooks in Server Component
+
+**Error**:
+```
+You're importing a component that needs useState. It only works in a Client Component
+```
+
+**Cause**: Using React hooks in Server Component.
+
+**Solution**: Add `'use client'` directive:
+```typescript
+// ✅ Add 'use client' at the top
+'use client'
+
+import { useState } from 'react'
+
+export function Counter() {
+  const [count, setCount] = useState(0)
+  return <button onClick={() => setCount(count + 1)}>{count}</button>
+}
+```
+
+---
+
+### 7. Error: `middleware.ts` is deprecated
+
+**Warning**:
+```
+Warning: middleware.ts is deprecated. Use proxy.ts instead.
+```
+
+**Solution**: Migrate to `proxy.ts`:
+```typescript
+// Rename: middleware.ts → proxy.ts
+// Rename function: middleware → proxy
+
+export function proxy(request: NextRequest) {
+  // Same logic
+}
+```
+
+---
+
+### 8. Error: Turbopack build failure
+
+**Error**:
+```
+Error: Failed to compile with Turbopack
+```
+
+**Cause**: Turbopack is now default in Next.js 16.
+
+**Solution**: Opt out of Turbopack if incompatible:
+```bash
+npm run build -- --webpack
+```
+
+---
+
+### 9. Error: Invalid `next/image` src
+
+**Error**:
+```
+Invalid src prop (https://example.com/image.jpg) on `next/image`. Hostname "example.com" is not configured under images in your `next.config.js`
+```
+
+**Solution**: Add remote patterns in `next.config.ts`:
+```typescript
+const config: NextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'example.com',
+      },
+    ],
+  },
+}
+```
+
+---
+
+### 10. Error: Cannot import Server Component into Client Component
+
+**Error**:
+```
+You're importing a Server Component into a Client Component
+```
+
+**Solution**: Pass Server Component as children:
+```typescript
+// ❌ Wrong
+'use client'
+import { ServerComponent } from './server-component' // Error
+
+export function ClientComponent() {
+  return <ServerComponent />
+}
+
+// ✅ Correct
+'use client'
+
+export function ClientComponent({ children }: { children: React.ReactNode }) {
+  return <div>{children}</div>
+}
+
+// Usage
+<ClientComponent>
+  <ServerComponent /> {/* Pass as children */}
+</ClientComponent>
+```
+
+---
+
+### 11. Error: `generateStaticParams` not working
+
+**Cause**: `generateStaticParams` only works with static generation (`export const dynamic = 'force-static'`).
+
+**Solution**:
+```typescript
+export const dynamic = 'force-static'
+
+export async function generateStaticParams() {
+  const posts = await fetch('/api/posts').then(r => r.json())
+  return posts.map((post: { id: string }) => ({ id: post.id }))
+}
+```
+
+---
+
+### 12. Error: `fetch()` not caching
+
+**Cause**: Next.js 16 uses opt-in caching with `"use cache"` directive.
+
+**Solution**: Add `"use cache"` to component or function:
+```typescript
+'use cache'
+
+export async function getPosts() {
+  const response = await fetch('/api/posts')
+  return response.json()
+}
+```
+
+---
+
+### 13. Error: Route collision with Route Groups
+
+**Error**:
+```
+Error: Conflicting routes: /about and /(marketing)/about
+```
+
+**Cause**: Route groups create same URL path.
+
+**Solution**: Ensure route groups don't conflict:
+```
+app/
+├── (marketing)/about/page.tsx  → /about
+└── (shop)/about/page.tsx       → ERROR: Duplicate /about
+
+# Fix: Use different routes
+app/
+├── (marketing)/about/page.tsx     → /about
+└── (shop)/store-info/page.tsx     → /store-info
+```
+
+---
+
+### 14. Error: Metadata not updating
+
+**Cause**: Using dynamic metadata without `generateMetadata()`.
+
+**Solution**: Use `generateMetadata()` for dynamic pages:
+```typescript
+export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
+  const { id } = await params
+  const post = await fetch(`/api/posts/${id}`).then(r => r.json())
+
+  return {
+    title: post.title,
+    description: post.excerpt,
+  }
+}
+```
+
+---
+
+### 15. Error: `next/font` font not loading
+
+**Cause**: Font variable not applied to HTML element.
+
+**Solution**: Apply font variable to `<html>` or `<body>`:
+```typescript
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html className={inter.variable}> {/* ✅ Apply variable */}
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+---
+
+### 16. Error: Environment variables not available in browser
+
+**Cause**: Server-only env vars are not exposed to browser.
+
+**Solution**: Prefix with `NEXT_PUBLIC_` for client-side access:
+```bash
+# .env
+SECRET_KEY=abc123                  # Server-only
+NEXT_PUBLIC_API_URL=https://api    # Available in browser
+```
+
+```typescript
+// Server Component (both work)
+const secret = process.env.SECRET_KEY
+const apiUrl = process.env.NEXT_PUBLIC_API_URL
+
+// Client Component (only public vars work)
+const apiUrl = process.env.NEXT_PUBLIC_API_URL
+```
+
+---
+
+### 17. Error: Server Action not found
+
+**Error**:
+```
+Error: Could not find Server Action
+```
+
+**Cause**: Missing `'use server'` directive.
+
+**Solution**: Add `'use server'`:
+```typescript
+// ❌ Before
+export async function createPost(formData: FormData) {
+  await db.posts.create({ ... })
+}
+
+// ✅ After
+'use server'
+
+export async function createPost(formData: FormData) {
+  await db.posts.create({ ... })
+}
+```
+
+---
+
+### 18. Error: TypeScript path alias not working
+
+**Cause**: Incorrect `baseUrl` or `paths` in `tsconfig.json`.
+
+**Solution**: Configure correctly:
+```json
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"],
+      "@/components/*": ["./app/components/*"]
+    }
+  }
+}
+```
+
+**See Reference**: `references/top-errors.md`
+
+---
+
+### 19. Error: Client-side navigation throttled with multiple redirects
+**Error**: `Throttling navigation to prevent the browser from hanging`
+**Source**: [GitHub Issue #87245](https://github.com/vercel/next.js/issues/87245)
+
+**Cause**: When `proxy.ts` (or `middleware.ts`) performs a redirect to add query params AND a Server Component also calls `redirect()` to add different query params, client-side navigation via `<Link>` fails in production builds. This is a regression from Next.js 14 to 16.
+
+**Symptoms**:
+- Works in `next dev` (development mode)
+- Works with direct URL access (full page load)
+- Fails with client-side navigation via `<Link>` in production build
+- Prefetch causes infinite redirect loop
+
+**Solution**: Disable prefetch on links that navigate to pages with redirect logic:
+```typescript
+// ✅ Workaround: Disable prefetch
+<Link href="/my-route" prefetch={false}>
+  Navigate
+</Link>
+```
+
+---
+
+### 20. Error: Cache Components fail with i18n dynamic segments
+**Error**: Route becomes dynamic despite `generateStaticParams`
+**Source**: [GitHub Issue #86870](https://github.com/vercel/next.js/issues/86870)
+
+**Cause**: Cache components (`"use cache"` directive) do NOT work on dynamic segments when using internationalization (i18n) frameworks like `intlayer`, `next-intl`, or `lingui`. Accessing `params` forces the route to be dynamic, even with `generateStaticParams` at the layout level.
+
+**Why It Happens**: Every i18n framework requires accessing `params` to get the locale. Accessing `params` is an async call in Next.js 16, which opts the entire page out of caching.
+
+**Solution**: Add `generateStaticParams` at EACH dynamic segment level:
+```typescript
+// app/[locale]/[id]/page.tsx
+export async function generateStaticParams() {
+  return [
+    { locale: 'en', id: '1' },
+    { locale: 'en', id: '2' },
+    // ... all combinations
+  ];
+}
+
+'use cache'
+
+export default async function Page({ params }: Props) {
+  // Now caching works
+}
+```
+
+**Additional Context**: The `[locale]` dynamic segment receives invalid values like `_next` during compilation, causing `RangeError: Incorrect locale information provided` when initializing i18n providers.
+
+---
+
+### 21. Error: instanceof fails for custom error classes in Server Components
+**Error**: `instanceof CustomError` returns `false` even though it is CustomError
+**Source**: [GitHub Issue #87614](https://github.com/vercel/next.js/issues/87614)
+
+**Cause**: Module duplication in Server Components causes custom error classes to be loaded twice, creating different prototypes.
+
+**Solution**: Use `error.name` or `error.constructor.name` instead of `instanceof`:
+```typescript
+// ❌ Wrong: instanceof doesn't work
+try {
+  throw new CustomError('Test error');
+} catch (error) {
+  if (error instanceof CustomError) { // ❌ false
+    // Never reached
+  }
+}
+
+// ✅ Correct: Use error.name
+try {
+  throw new CustomError('Test error');
+} catch (error) {
+  if (error instanceof Error && error.name === 'CustomError') { // ✅ true
+    // Handle CustomError
+  }
+}
+
+// ✅ Alternative: Use constructor.name
+if (error.constructor.name === 'CustomError') {
+  // Handle CustomError
+}
+```
+
+---
+
+### 22. Error: TypeScript doesn't catch non-serializable props to Client Components
+**Error**: Runtime error when passing functions/class instances to Client Components
+**Source**: [GitHub Issue #86748](https://github.com/vercel/next.js/issues/86748)
+
+**Cause**: The Next.js TypeScript plugin doesn't catch non-serializable props being passed from Server Components to Client Components. This causes runtime errors that are not detected at compile time.
+
+**Why It Happens**: Only serializable data (JSON-compatible) can cross the Server/Client boundary. Functions, class instances, and Symbols cannot be serialized.
+
+**Solution**: Only pass serializable props:
+```typescript
+// ❌ Wrong: Function not serializable
+const user = {
+  name: 'John',
+  getProfile: () => console.log('profile'), // ❌ Not serializable
+};
+<ClientComponent user={user} />
+
+// ✅ Correct: Only serializable props
+interface SerializableUser {
+  name: string;
+  email: string;
+  // No functions, no class instances, no Symbols
+}
+
+// ✅ Alternative: Create functions in Client Component
+'use client';
+
+export default function ClientComponent({ user }: { user: { name: string } }) {
+  const getProfile = () => console.log('profile'); // Define in client
+  return <div onClick={getProfile}>{user.name}</div>;
+}
+```
+
+**Runtime Validation**:
+```typescript
+import { z } from 'zod';
+
+const UserSchema = z.object({
+  name: z.string(),
+  email: z.string(),
+});
+
+type User = z.infer<typeof UserSchema>;
+```
+
+---
+
+### 23. Error: Turbopack production build fails with Prisma
+**Error**: `The 'path' argument must be of type string`
+**Source**: [GitHub Discussion #77721](https://github.com/vercel/next.js/discussions/77721)
+
+**Cause**: Turbopack production builds fail with Prisma ORM (v6.5.0+).
+
+**Solution**: Use webpack for production builds:
+```bash
+npm run build -- --webpack
+```
+
+Or disable Turbopack in config:
+```typescript
+// next.config.ts
+const config: NextConfig = {
+  experimental: {
+    turbo: false,
+  },
+};
+```
+
+---
+
+### 24. Error: Turbopack exposes source code via source maps
+**Error**: Source code visible in production builds
+**Source**: [GitHub Discussion #77721](https://github.com/vercel/next.js/discussions/77721)
+
+**Cause**: Turbopack always builds production source maps for the browser, exposing source code.
+
+**Solution**: Disable production source maps:
+```typescript
+// next.config.ts
+const config: NextConfig = {
+  productionBrowserSourceMaps: false,
+};
+```
+
+Or exclude `.map` files in deployment:
+```bash
+# .vercelignore
+*.map
+```
+
+---
+
+### 25. Error: Module not found in production (Turbopack monorepo)
+**Error**: `Module not found` in production despite successful local build
+**Source**: [GitHub Issue #87737](https://github.com/vercel/next.js/issues/87737)
+
+**Cause**: Turbopack generates external module references with hashes that don't match when `node_modules` structure differs (pnpm, yarn workspaces, monorepos).
+
+**Symptoms**:
+- Build succeeds locally but fails in CI/CD
+- Hash mismatches between bundled references and actual module files
+
+**Solution**: Explicitly externalize packages:
+```typescript
+// next.config.ts
+const config: NextConfig = {
+  experimental: {
+    serverExternalPackages: ['package-name'],
+  },
+};
+```
+
+---
+
+**See Reference**: `references/top-errors.md`
+
+---
+
+## Templates & Resources
+
+**Next.js 16-Specific Templates** (in `templates/`):
+- `app-router-async-params.tsx` - Async params migration patterns
+- `parallel-routes-with-default.tsx` - Required default.js files
+- `cache-component-use-cache.tsx` - Cache Components with `"use cache"`
+- `revalidate-tag-cache-life.ts` - Updated `revalidateTag()` with cacheLife
+- `server-action-update-tag.ts` - `updateTag()` for read-your-writes
+- `proxy-migration.ts` - Migrate from middleware.ts to proxy.ts
+- `view-transitions-react-19.tsx` - React 19.2 View Transitions
+- `next.config.ts` - Next.js 16 configuration
+
+**Bundled References** (in `references/`):
+- `next-16-migration-guide.md` - Complete Next.js 15→16 migration guide
+- `cache-components-guide.md` - Cache Components deep dive
+- `proxy-vs-middleware.md` - Proxy.ts vs middleware.ts
+- `async-route-params.md` - Async params breaking change details
+- `react-19-integration.md` - React 19.2 features in Next.js 16
+- `top-errors.md` - 18+ common errors with solutions
+
+**External Documentation**:
+- **Next.js 16 Blog**: https://nextjs.org/blog/next-16
+- **Next.js Docs**: https://nextjs.org/docs
+- **Context7 MCP**: `/websites/nextjs` for latest reference
+
+---
+
+## Version Compatibility
+
+| Package | Minimum Version | Recommended |
+|---------|----------------|-------------|
+| Next.js | 16.0.0 | 16.1.1+ |
+| React | 19.2.0 | 19.2.3+ |
+| Node.js | 20.9.0 | 20.9.0+ |
+| TypeScript | 5.1.0 | 5.7.0+ |
+| Turbopack | (built-in) | Stable |
+
+**Check Versions**:
+```bash
+./scripts/check-versions.sh
+```
+
+---
+
+## Token Efficiency
+
+**Estimated Token Savings**: 65-70%
+
+**Without Skill** (manual setup from docs):
+- Read Next.js 16 migration guide: ~5k tokens
+- Read App Router docs: ~8k tokens
+- Read Server Actions docs: ~4k tokens
+- Read Metadata API docs: ~3k tokens
+- Trial-and-error fixes: ~8k tokens
+- **Total**: ~28k tokens
+
+**With Skill**:
+- Load skill: ~8k tokens
+- Use templates: ~2k tokens
+- **Total**: ~10k tokens
+- **Savings**: ~18k tokens (~64%)
+
+**Errors Prevented**: 25 documented errors = 100% error prevention
+
+---
+
+## Maintenance
+
+**Last Verified**: 2026-01-21
+**Skill Version**: 3.1.0
+**Changes**: Added 7 new errors (navigation throttling, i18n caching, Turbopack limitations, instanceof failures, non-serializable props). Expanded async params codemod limitations, caching defaults, and parallel routes edge cases.
+
+**Next Review**: 2026-04-21 (Quarterly)
+**Maintainer**: Jezweb | jeremy@jezweb.net
+**Repository**: https://github.com/jezweb/claude-skills
+
+**Update Triggers**:
+- Next.js major/minor releases
+- React major releases
+- Breaking changes in APIs
+- New Turbopack features
+
+**Version Check**:
+```bash
+cd skills/nextjs
+./scripts/check-versions.sh
+```
+
+---
+
+**End of SKILL.md**
diff --git a/.cursor/skills/nextjs/commands/init.md b/.cursor/skills/nextjs/commands/init.md
new file mode 100644
index 0000000..c98f2bd
--- /dev/null
+++ b/.cursor/skills/nextjs/commands/init.md
@@ -0,0 +1,190 @@
+# Init Next.js Project
+
+Scaffold a new Next.js 16 project with App Router, TypeScript, and Tailwind CSS.
+
+---
+
+## Your Task
+
+Follow these steps to create a new Next.js project.
+
+### 1. Gather Project Details
+
+Ask the user for:
+- **Project name**
+- **Features**: Tailwind CSS, shadcn/ui, authentication
+- **Deployment target**: Vercel, Cloudflare, self-hosted
+
+Defaults:
+- Name: "my-nextjs-app"
+- Features: Tailwind CSS + shadcn/ui
+- Deployment: Vercel
+
+### 2. Create Project
+
+```bash
+npx create-next-app@latest <project-name> \
+  --typescript \
+  --tailwind \
+  --eslint \
+  --app \
+  --src-dir \
+  --import-alias "@/*"
+
+cd <project-name>
+```
+
+### 3. Install Additional Dependencies
+
+```bash
+# shadcn/ui (if selected)
+npx shadcn@latest init
+
+# Recommended utilities
+npm install clsx tailwind-merge
+```
+
+### 4. Create Utility Functions
+
+Create `src/lib/utils.ts`:
+
+```typescript
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+```
+
+### 5. Configure for App Router
+
+Ensure `src/app/layout.tsx` has:
+
+```typescript
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: '<Project Name>',
+  description: 'Built with Next.js 16',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}
+```
+
+### 6. Create Example Page
+
+Update `src/app/page.tsx`:
+
+```typescript
+export default function Home() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center p-24">
+      <h1 className="text-4xl font-bold">Welcome to <Project Name></h1>
+      <p className="mt-4 text-muted-foreground">
+        Built with Next.js 16 + App Router
+      </p>
+    </main>
+  );
+}
+```
+
+### 7. Configure for Deployment Target
+
+**For Vercel** (default - no changes needed):
+```bash
+# Deploy
+npx vercel
+```
+
+**For Cloudflare Pages:**
+```bash
+npm install @cloudflare/next-on-pages
+```
+
+Add to `next.config.ts`:
+```typescript
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  // For Cloudflare Pages
+  experimental: {
+    runtime: 'edge',
+  },
+};
+
+export default nextConfig;
+```
+
+### 8. Set Up Environment Variables
+
+Create `.env.local`:
+```bash
+# Add your environment variables here
+NEXT_PUBLIC_APP_URL=http://localhost:3000
+```
+
+Create `.env.example`:
+```bash
+NEXT_PUBLIC_APP_URL=
+```
+
+### 9. Update .gitignore
+
+Ensure these are ignored:
+```
+.env*.local
+.vercel
+.next
+node_modules
+```
+
+### 10. Provide Next Steps
+
+```
+✅ Next.js 16 project "<project-name>" created!
+
+📁 Structure:
+   - src/app/           (App Router pages)
+   - src/components/    (UI components)
+   - src/lib/           (Utilities)
+
+🚀 Next steps:
+   1. npm run dev       (Start development)
+   2. Add pages in src/app/
+   3. Add components with: npx shadcn@latest add <component>
+
+📦 Key Features:
+   - App Router with async params (Next.js 16)
+   - React 19.2 with Server Components
+   - Tailwind CSS v4 (if configured)
+   - TypeScript strict mode
+
+📚 Skill loaded: nextjs
+   - Async route params pattern
+   - "use cache" directive support
+   - Server Actions ready
+```
+
+---
+
+## Next.js 16 Key Patterns
+
+1. **Async route params**: `params` and `searchParams` are now Promises
+2. **Cache Components**: Use `"use cache"` directive for caching
+3. **proxy.ts**: New Clerk middleware filename (from middleware.ts)
+4. **React 19.2**: useActionState, use() hook, Server Components
diff --git a/.cursor/skills/nextjs/references/next-16-migration-guide.md b/.cursor/skills/nextjs/references/next-16-migration-guide.md
new file mode 100644
index 0000000..6454bbf
--- /dev/null
+++ b/.cursor/skills/nextjs/references/next-16-migration-guide.md
@@ -0,0 +1,647 @@
+# Next.js 16 Migration Guide
+
+**From**: Next.js 15.x
+**To**: Next.js 16.0.0
+**Last Updated**: 2025-10-24
+
+---
+
+## Table of Contents
+
+1. [Overview](#overview)
+2. [Breaking Changes](#breaking-changes)
+3. [New Features](#new-features)
+4. [Migration Steps](#migration-steps)
+5. [Automated Migration](#automated-migration)
+6. [Manual Migration](#manual-migration)
+7. [Troubleshooting](#troubleshooting)
+
+---
+
+## Overview
+
+Next.js 16 introduces significant changes:
+
+- **Breaking Changes**: 6 major breaking changes
+- **New Features**: Cache Components, updated caching APIs, React 19.2
+- **Performance**: Turbopack stable, 2–5× faster builds
+- **Migration Time**: ~1-2 hours for medium-sized apps
+
+**Recommendation**: Use automated codemod first, then manually fix remaining issues.
+
+---
+
+## Breaking Changes
+
+### 1. Async Route Parameters ⚠️
+
+**What Changed**: `params`, `searchParams`, `cookies()`, `headers()`, `draftMode()` are now async.
+
+**Before** (Next.js 15):
+```typescript
+export default function Page({ params, searchParams }) {
+  const slug = params.slug
+  const query = searchParams.q
+}
+```
+
+**After** (Next.js 16):
+```typescript
+export default async function Page({ params, searchParams }) {
+  const { slug } = await params
+  const { q: query } = await searchParams
+}
+```
+
+**TypeScript Types**:
+```typescript
+// Before
+type PageProps = {
+  params: { slug: string }
+  searchParams: { q: string }
+}
+
+// After
+type PageProps = {
+  params: Promise<{ slug: string }>
+  searchParams: Promise<{ q: string }>
+}
+```
+
+**Fix**:
+1. Add `async` to function
+2. Add `await` before params/searchParams
+3. Update TypeScript types to `Promise<>`
+
+---
+
+### 2. Middleware → Proxy ⚠️
+
+**What Changed**: `middleware.ts` is deprecated. Use `proxy.ts` instead.
+
+**Migration**:
+```bash
+# 1. Rename file
+mv middleware.ts proxy.ts
+
+# 2. Rename function in file
+# middleware → proxy
+```
+
+**Before** (middleware.ts):
+```typescript
+export function middleware(request: NextRequest) {
+  return NextResponse.next()
+}
+```
+
+**After** (proxy.ts):
+```typescript
+export function proxy(request: NextRequest) {
+  return NextResponse.next()
+}
+```
+
+**Note**: `middleware.ts` still works in Next.js 16 but is deprecated.
+
+---
+
+### 3. Parallel Routes Require `default.js` ⚠️
+
+**What Changed**: All parallel routes now REQUIRE explicit `default.js` files.
+
+**Before** (Next.js 15):
+```
+app/
+├── @modal/
+│   └── login/
+│       └── page.tsx
+```
+
+**After** (Next.js 16):
+```
+app/
+├── @modal/
+│   ├── login/
+│   │   └── page.tsx
+│   └── default.tsx  ← REQUIRED
+```
+
+**default.tsx**:
+```typescript
+export default function ModalDefault() {
+  return null
+}
+```
+
+**Fix**: Add `default.tsx` to every `@folder` in parallel routes.
+
+---
+
+### 4. Removed Features ⚠️
+
+**Removed**:
+- AMP support
+- `next lint` command
+- `serverRuntimeConfig` and `publicRuntimeConfig`
+- `experimental.ppr` flag
+- Automatic `scroll-behavior: smooth`
+- Node.js 18 support
+
+**Migration**:
+
+**AMP**:
+```typescript
+// Before
+export const config = { amp: true }
+
+// After
+// No direct replacement - use separate AMP pages or frameworks
+```
+
+**Linting**:
+```bash
+# Before
+npm run lint
+
+# After
+npx eslint .
+# or
+npx biome lint .
+```
+
+**Runtime Config**:
+```typescript
+// Before
+module.exports = {
+  serverRuntimeConfig: { secret: 'abc' },
+  publicRuntimeConfig: { apiUrl: 'https://api' },
+}
+
+// After
+// Use environment variables
+process.env.SECRET
+process.env.NEXT_PUBLIC_API_URL
+```
+
+---
+
+### 5. Version Requirements ⚠️
+
+**Minimum Versions**:
+- Node.js: 20.9+ (Node 18 removed)
+- TypeScript: 5.1+
+- React: 19.2+
+- Browsers: Chrome 111+, Safari 16.4+, Firefox 109+
+
+**Upgrade Node.js**:
+```bash
+# Check current version
+node --version
+
+# Upgrade (using nvm)
+nvm install 20
+nvm use 20
+nvm alias default 20
+
+# Verify
+node --version  # Should be 20.9+
+```
+
+---
+
+### 6. Image Defaults Changed ⚠️
+
+**What Changed**: `next/image` default settings changed.
+
+| Setting | Next.js 15 | Next.js 16 |
+|---------|------------|------------|
+| TTL | 60s | 4 hours |
+| imageSizes | 8 sizes | 5 sizes |
+| qualities | 3 qualities | 1 quality (75) |
+
+**Impact**: Images cache longer, fewer sizes generated.
+
+**Revert** (if needed):
+```typescript
+// next.config.ts
+const config = {
+  images: {
+    minimumCacheTTL: 60, // Revert to 60 seconds
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384], // Old sizes
+  },
+}
+```
+
+---
+
+## New Features
+
+### 1. Cache Components ✨
+
+**Opt-in caching** with `"use cache"` directive.
+
+**Before** (Next.js 15 - implicit caching):
+```typescript
+// All Server Components cached by default
+export async function MyComponent() {
+  const data = await fetch('/api/data')
+  return <div>{data.value}</div>
+}
+```
+
+**After** (Next.js 16 - opt-in):
+```typescript
+// NOT cached by default
+export async function MyComponent() {
+  const data = await fetch('/api/data')
+  return <div>{data.value}</div>
+}
+
+// Opt-in to caching
+'use cache'
+export async function CachedComponent() {
+  const data = await fetch('/api/data')
+  return <div>{data.value}</div>
+}
+```
+
+**See**: `references/cache-components-guide.md`
+
+---
+
+### 2. Updated Caching APIs ✨
+
+**`revalidateTag()` now requires 2 arguments**:
+
+**Before**:
+```typescript
+revalidateTag('posts')
+```
+
+**After**:
+```typescript
+revalidateTag('posts', 'max') // Second argument required
+```
+
+**New APIs**:
+- `updateTag()` - Immediate refresh (read-your-writes)
+- `refresh()` - Refresh uncached data only
+
+---
+
+### 3. React 19.2 Integration ✨
+
+**New React features**:
+- View Transitions
+- `useEffectEvent()` (experimental)
+- React Compiler (stable)
+
+**See**: `references/react-19-integration.md`
+
+---
+
+### 4. Turbopack Stable ✨
+
+**Default bundler**: Turbopack is now stable and default.
+
+**Metrics**:
+- 2–5× faster production builds
+- Up to 10× faster Fast Refresh
+
+**Opt-out** (if incompatible):
+```bash
+npm run build -- --webpack
+```
+
+---
+
+## Migration Steps
+
+### Step 1: Prerequisites
+
+1. **Backup your project**:
+   ```bash
+   git commit -am "Pre-migration checkpoint"
+   ```
+
+2. **Check Node.js version**:
+   ```bash
+   node --version  # Should be 20.9+
+   ```
+
+3. **Update dependencies**:
+   ```bash
+   npm install next@16 react@19.2 react-dom@19.2
+   ```
+
+---
+
+### Step 2: Run Automated Codemod
+
+```bash
+npx @next/codemod@canary upgrade latest
+```
+
+**What it fixes**:
+- ✅ Async params (adds `await`)
+- ✅ Async searchParams
+- ✅ Async cookies()
+- ✅ Async headers()
+- ✅ Updates TypeScript types
+
+**What it does NOT fix**:
+- ❌ middleware.ts → proxy.ts (manual)
+- ❌ Parallel routes default.js (manual)
+- ❌ Removed features (manual)
+
+---
+
+### Step 3: Manual Fixes
+
+#### Fix 1: Migrate middleware.ts → proxy.ts
+
+```bash
+# Rename file
+mv middleware.ts proxy.ts
+
+# Update function name
+# middleware → proxy
+```
+
+#### Fix 2: Add default.js to Parallel Routes
+
+```bash
+# For each @folder, create default.tsx
+touch app/@modal/default.tsx
+touch app/@feed/default.tsx
+```
+
+```typescript
+// app/@modal/default.tsx
+export default function ModalDefault() {
+  return null
+}
+```
+
+#### Fix 3: Replace Removed Features
+
+**AMP**: Remove AMP config or migrate to separate AMP implementation.
+
+**Linting**: Update scripts in `package.json`:
+```json
+{
+  "scripts": {
+    "lint": "eslint ."
+  }
+}
+```
+
+**Runtime Config**: Use environment variables.
+
+---
+
+### Step 4: Update Caching
+
+**Migrate from implicit to explicit caching**:
+
+1. Find Server Components with expensive operations
+2. Add `"use cache"` directive
+3. Update `revalidateTag()` calls to include `cacheLife`
+
+**Example**:
+```typescript
+// Before
+export async function ExpensiveComponent() {
+  const data = await fetch('/api/data') // Cached implicitly
+  return <div>{data.value}</div>
+}
+
+// After
+'use cache'
+export async function ExpensiveComponent() {
+  const data = await fetch('/api/data') // Cached explicitly
+  return <div>{data.value}</div>
+}
+```
+
+---
+
+### Step 5: Test
+
+```bash
+# Development
+npm run dev
+
+# Production build
+npm run build
+
+# Check for errors
+npm run type-check
+```
+
+---
+
+### Step 6: Update CI/CD
+
+**Update Node.js version** in CI config:
+
+**.github/workflows/ci.yml**:
+```yaml
+- uses: actions/setup-node@v4
+  with:
+    node-version: '20.9'  # Update from 18
+```
+
+**Dockerfile**:
+```dockerfile
+FROM node:20.9-alpine  # Update from node:18
+```
+
+---
+
+## Automated Migration
+
+**Codemod** (recommended):
+```bash
+npx @next/codemod@canary upgrade latest
+```
+
+**Options**:
+- `--dry` - Preview changes without applying
+- `--force` - Skip confirmation prompts
+
+**What it migrates**:
+1. ✅ Async params
+2. ✅ Async searchParams
+3. ✅ Async cookies()
+4. ✅ Async headers()
+5. ✅ TypeScript types
+
+**Manual steps after codemod**:
+1. Rename middleware.ts → proxy.ts
+2. Add default.js to parallel routes
+3. Replace removed features
+4. Update caching patterns
+
+---
+
+## Manual Migration
+
+If codemod fails or you prefer manual migration:
+
+### 1. Async Params
+
+**Find**:
+```bash
+grep -r "params\." app/
+grep -r "searchParams\." app/
+```
+
+**Replace**:
+```typescript
+// Before
+const slug = params.slug
+
+// After
+const { slug } = await params
+```
+
+### 2. Async Cookies/Headers
+
+**Find**:
+```bash
+grep -r "cookies()" app/
+grep -r "headers()" app/
+```
+
+**Replace**:
+```typescript
+// Before
+const cookieStore = cookies()
+
+// After
+const cookieStore = await cookies()
+```
+
+### 3. TypeScript Types
+
+**Find**: All `PageProps` types
+
+**Replace**:
+```typescript
+// Before
+type PageProps = {
+  params: { id: string }
+  searchParams: { q: string }
+}
+
+// After
+type PageProps = {
+  params: Promise<{ id: string }>
+  searchParams: Promise<{ q: string }>
+}
+```
+
+---
+
+## Troubleshooting
+
+### Error: `params` is a Promise
+
+**Cause**: Not awaiting params in Next.js 16.
+
+**Fix**:
+```typescript
+// ❌ Before
+const id = params.id
+
+// ✅ After
+const { id } = await params
+```
+
+---
+
+### Error: Parallel route missing `default.js`
+
+**Cause**: Next.js 16 requires `default.js` for all parallel routes.
+
+**Fix**: Create `default.tsx`:
+```typescript
+// app/@modal/default.tsx
+export default function ModalDefault() {
+  return null
+}
+```
+
+---
+
+### Error: `revalidateTag` requires 2 arguments
+
+**Cause**: `revalidateTag()` API changed in Next.js 16.
+
+**Fix**:
+```typescript
+// ❌ Before
+revalidateTag('posts')
+
+// ✅ After
+revalidateTag('posts', 'max')
+```
+
+---
+
+### Error: Turbopack build failure
+
+**Cause**: Turbopack is now default in Next.js 16.
+
+**Fix**: Opt-out if incompatible:
+```bash
+npm run build -- --webpack
+```
+
+---
+
+### Error: Node.js version too old
+
+**Cause**: Next.js 16 requires Node.js 20.9+.
+
+**Fix**: Upgrade Node.js:
+```bash
+nvm install 20
+nvm use 20
+nvm alias default 20
+```
+
+---
+
+## Migration Checklist
+
+- [ ] Backup project (git commit)
+- [ ] Check Node.js version (20.9+)
+- [ ] Update dependencies (`npm install next@16 react@19.2 react-dom@19.2`)
+- [ ] Run codemod (`npx @next/codemod@canary upgrade latest`)
+- [ ] Rename middleware.ts → proxy.ts
+- [ ] Add default.js to parallel routes
+- [ ] Remove AMP config (if used)
+- [ ] Replace runtime config with env vars
+- [ ] Update `revalidateTag()` calls (add `cacheLife`)
+- [ ] Add `"use cache"` where needed
+- [ ] Test dev server (`npm run dev`)
+- [ ] Test production build (`npm run build`)
+- [ ] Update CI/CD Node.js version
+- [ ] Deploy to staging
+- [ ] Deploy to production
+
+---
+
+## Resources
+
+- **Next.js 16 Blog**: https://nextjs.org/blog/next-16
+- **Codemod**: `npx @next/codemod@canary upgrade latest`
+- **Templates**: See `templates/` directory
+- **Common Errors**: See `references/top-errors.md`
+
+---
+
+**Migration Support**: jeremy@jezweb.net
diff --git a/.cursor/skills/nextjs/references/top-errors.md b/.cursor/skills/nextjs/references/top-errors.md
new file mode 100644
index 0000000..9c310c4
--- /dev/null
+++ b/.cursor/skills/nextjs/references/top-errors.md
@@ -0,0 +1,550 @@
+# Next.js 16 - Top 18 Errors & Solutions
+
+**Last Updated**: 2025-10-24
+**Prevention Rate**: 100% (all documented errors caught)
+
+This guide covers the 18 most common errors when using Next.js 16 and their solutions.
+
+---
+
+## Error #1: `params` is a Promise
+
+**Error Message**:
+```
+Type 'Promise<{ id: string }>' is not assignable to type '{ id: string }'
+```
+
+**Cause**: Next.js 16 changed `params` to async.
+
+**Solution**:
+```typescript
+// ❌ Before (Next.js 15)
+export default function Page({ params }: { params: { id: string } }) {
+  const id = params.id
+}
+
+// ✅ After (Next.js 16)
+export default async function Page({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params
+}
+```
+
+**TypeScript Fix**:
+```typescript
+type Params<T = Record<string, string>> = Promise<T>
+```
+
+---
+
+## Error #2: `searchParams` is a Promise
+
+**Error Message**:
+```
+Property 'query' does not exist on type 'Promise<{ query: string }>'
+```
+
+**Cause**: `searchParams` is now async in Next.js 16.
+
+**Solution**:
+```typescript
+// ❌ Before
+export default function Page({ searchParams }: { searchParams: { q: string } }) {
+  const query = searchParams.q
+}
+
+// ✅ After
+export default async function Page({ searchParams }: { searchParams: Promise<{ q: string }> }) {
+  const { q: query } = await searchParams
+}
+```
+
+---
+
+## Error #3: `cookies()` requires await
+
+**Error Message**:
+```
+'cookies' implicitly has return type 'any'
+```
+
+**Cause**: `cookies()` is async in Next.js 16.
+
+**Solution**:
+```typescript
+// ❌ Before
+import { cookies } from 'next/headers'
+
+export function MyComponent() {
+  const cookieStore = cookies()
+  const token = cookieStore.get('token')
+}
+
+// ✅ After
+import { cookies } from 'next/headers'
+
+export async function MyComponent() {
+  const cookieStore = await cookies()
+  const token = cookieStore.get('token')
+}
+```
+
+---
+
+## Error #4: `headers()` requires await
+
+**Error Message**:
+```
+'headers' implicitly has return type 'any'
+```
+
+**Cause**: `headers()` is async in Next.js 16.
+
+**Solution**:
+```typescript
+// ❌ Before
+import { headers } from 'next/headers'
+
+export function MyComponent() {
+  const headersList = headers()
+}
+
+// ✅ After
+import { headers } from 'next/headers'
+
+export async function MyComponent() {
+  const headersList = await headers()
+}
+```
+
+---
+
+## Error #5: Parallel route missing `default.js`
+
+**Error Message**:
+```
+Error: Parallel route @modal/login was matched but no default.js was found
+```
+
+**Cause**: Next.js 16 requires `default.js` for all parallel routes.
+
+**Solution**:
+```typescript
+// Create app/@modal/default.tsx
+export default function ModalDefault() {
+  return null
+}
+```
+
+**Structure**:
+```
+app/
+├── @modal/
+│   ├── login/
+│   │   └── page.tsx
+│   └── default.tsx  ← REQUIRED
+```
+
+---
+
+## Error #6: `revalidateTag()` requires 2 arguments
+
+**Error Message**:
+```
+Expected 2 arguments, but got 1
+```
+
+**Cause**: `revalidateTag()` API changed in Next.js 16.
+
+**Solution**:
+```typescript
+// ❌ Before (Next.js 15)
+import { revalidateTag } from 'next/cache'
+revalidateTag('posts')
+
+// ✅ After (Next.js 16)
+import { revalidateTag } from 'next/cache'
+revalidateTag('posts', 'max') // Second argument required
+```
+
+**Cache Life Profiles**:
+- `'max'` - Maximum staleness (recommended)
+- `'hours'` - Stale after hours
+- `'days'` - Stale after days
+- Custom: `{ stale: 3600, revalidate: 86400 }`
+
+---
+
+## Error #7: Cannot use React hooks in Server Component
+
+**Error Message**:
+```
+You're importing a component that needs useState. It only works in a Client Component
+```
+
+**Cause**: Using React hooks in Server Component.
+
+**Solution**: Add `'use client'` directive:
+```typescript
+// ✅ Add 'use client' at the top
+'use client'
+
+import { useState } from 'react'
+
+export function Counter() {
+  const [count, setCount] = useState(0)
+  return <button onClick={() => setCount(count + 1)}>{count}</button>
+}
+```
+
+---
+
+## Error #8: `middleware.ts` is deprecated
+
+**Warning Message**:
+```
+Warning: middleware.ts is deprecated. Use proxy.ts instead.
+```
+
+**Solution**: Migrate to `proxy.ts`:
+```bash
+# 1. Rename file
+mv middleware.ts proxy.ts
+
+# 2. Rename function
+# middleware → proxy
+```
+
+**Code**:
+```typescript
+// ✅ proxy.ts
+export function proxy(request: NextRequest) {
+  // Same logic
+}
+```
+
+---
+
+## Error #9: Turbopack build failure
+
+**Error Message**:
+```
+Error: Failed to compile with Turbopack
+```
+
+**Cause**: Turbopack is now default in Next.js 16.
+
+**Solution 1** (opt-out):
+```bash
+npm run build -- --webpack
+```
+
+**Solution 2** (fix compatibility):
+Check for incompatible packages and update them.
+
+---
+
+## Error #10: Invalid `next/image` src
+
+**Error Message**:
+```
+Invalid src prop (https://example.com/image.jpg) on `next/image`. Hostname "example.com" is not configured
+```
+
+**Cause**: Remote images not configured.
+
+**Solution**: Add to `next.config.ts`:
+```typescript
+const config = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'example.com',
+        pathname: '/images/**',
+      },
+    ],
+  },
+}
+```
+
+---
+
+## Error #11: Cannot import Server Component into Client Component
+
+**Error Message**:
+```
+You're importing a Server Component into a Client Component
+```
+
+**Cause**: Direct import of Server Component in Client Component.
+
+**Solution**: Pass as children:
+```typescript
+// ❌ Wrong
+'use client'
+import { ServerComponent } from './server-component'
+
+export function ClientComponent() {
+  return <ServerComponent />
+}
+
+// ✅ Correct
+'use client'
+
+export function ClientComponent({ children }: { children: React.ReactNode }) {
+  return <div>{children}</div>
+}
+
+// Usage
+<ClientComponent>
+  <ServerComponent /> {/* Pass as children */}
+</ClientComponent>
+```
+
+---
+
+## Error #12: `generateStaticParams` not working
+
+**Error Message**:
+```
+generateStaticParams is not generating static pages
+```
+
+**Cause**: Missing `dynamic = 'force-static'`.
+
+**Solution**:
+```typescript
+export const dynamic = 'force-static'
+
+export async function generateStaticParams() {
+  const posts = await fetch('/api/posts').then(r => r.json())
+  return posts.map((post: { id: string }) => ({ id: post.id }))
+}
+```
+
+---
+
+## Error #13: `fetch()` not caching
+
+**Error Message**: Data not cached (performance issue).
+
+**Cause**: Next.js 16 uses opt-in caching.
+
+**Solution**: Add `"use cache"`:
+```typescript
+'use cache'
+
+export async function getPosts() {
+  const response = await fetch('/api/posts')
+  return response.json()
+}
+```
+
+---
+
+## Error #14: Route collision with Route Groups
+
+**Error Message**:
+```
+Error: Conflicting routes: /about and /(marketing)/about
+```
+
+**Cause**: Route groups creating same URL path.
+
+**Solution**: Ensure unique paths:
+```
+app/
+├── (marketing)/about/page.tsx     → /about
+└── (shop)/store-info/page.tsx     → /store-info (NOT /about)
+```
+
+---
+
+## Error #15: Metadata not updating
+
+**Error Message**: SEO metadata not showing correctly.
+
+**Cause**: Using static metadata for dynamic pages.
+
+**Solution**: Use `generateMetadata()`:
+```typescript
+export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
+  const { id } = await params
+  const post = await fetch(`/api/posts/${id}`).then(r => r.json())
+
+  return {
+    title: post.title,
+    description: post.excerpt,
+  }
+}
+```
+
+---
+
+## Error #16: `next/font` font not loading
+
+**Error Message**: Custom fonts not applying.
+
+**Cause**: Font variable not applied to HTML element.
+
+**Solution**:
+```typescript
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html className={inter.variable}> {/* ✅ Apply variable */}
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+---
+
+## Error #17: Environment variables not available in browser
+
+**Error Message**: `process.env.SECRET_KEY` is undefined in client.
+
+**Cause**: Server-only env vars not exposed to browser.
+
+**Solution**: Prefix with `NEXT_PUBLIC_`:
+```bash
+# .env
+SECRET_KEY=abc123                  # Server-only
+NEXT_PUBLIC_API_URL=https://api    # Available in browser
+```
+
+```typescript
+// Server Component (both work)
+const secret = process.env.SECRET_KEY
+const apiUrl = process.env.NEXT_PUBLIC_API_URL
+
+// Client Component (only public vars)
+const apiUrl = process.env.NEXT_PUBLIC_API_URL
+```
+
+---
+
+## Error #18: Server Action not found
+
+**Error Message**:
+```
+Error: Could not find Server Action
+```
+
+**Cause**: Missing `'use server'` directive.
+
+**Solution**:
+```typescript
+// ❌ Before
+export async function createPost(formData: FormData) {
+  await db.posts.create({ ... })
+}
+
+// ✅ After
+'use server'
+
+export async function createPost(formData: FormData) {
+  await db.posts.create({ ... })
+}
+```
+
+---
+
+## Quick Error Lookup
+
+| Error Type | Solution | Link |
+|------------|----------|------|
+| Async params | Add `await params` | [#1](#error-1-params-is-a-promise) |
+| Async searchParams | Add `await searchParams` | [#2](#error-2-searchparams-is-a-promise) |
+| Async cookies() | Add `await cookies()` | [#3](#error-3-cookies-requires-await) |
+| Async headers() | Add `await headers()` | [#4](#error-4-headers-requires-await) |
+| Missing default.js | Create `default.tsx` | [#5](#error-5-parallel-route-missing-defaultjs) |
+| revalidateTag 1 arg | Add `cacheLife` argument | [#6](#error-6-revalidatetag-requires-2-arguments) |
+| Hooks in Server Component | Add `'use client'` | [#7](#error-7-cannot-use-react-hooks-in-server-component) |
+| middleware.ts deprecated | Rename to `proxy.ts` | [#8](#error-8-middlewarets-is-deprecated) |
+| Turbopack failure | Use `--webpack` flag | [#9](#error-9-turbopack-build-failure) |
+| Invalid image src | Add `remotePatterns` | [#10](#error-10-invalid-nextimage-src) |
+| Import Server in Client | Pass as children | [#11](#error-11-cannot-import-server-component-into-client-component) |
+| generateStaticParams | Add `dynamic = 'force-static'` | [#12](#error-12-generatestaticparams-not-working) |
+| fetch not caching | Add `'use cache'` | [#13](#error-13-fetch-not-caching) |
+| Route collision | Use unique paths | [#14](#error-14-route-collision-with-route-groups) |
+| Metadata not updating | Use `generateMetadata()` | [#15](#error-15-metadata-not-updating) |
+| Font not loading | Apply font variable to `<html>` | [#16](#error-16-nextfont-font-not-loading) |
+| Env vars in browser | Prefix with `NEXT_PUBLIC_` | [#17](#error-17-environment-variables-not-available-in-browser) |
+| Server Action not found | Add `'use server'` | [#18](#error-18-server-action-not-found) |
+
+---
+
+## Prevention Checklist
+
+Before deploying, check:
+
+- [ ] All `params` are awaited
+- [ ] All `searchParams` are awaited
+- [ ] All `cookies()` calls are awaited
+- [ ] All `headers()` calls are awaited
+- [ ] All parallel routes have `default.js`
+- [ ] `revalidateTag()` has 2 arguments
+- [ ] Client Components have `'use client'`
+- [ ] `middleware.ts` migrated to `proxy.ts`
+- [ ] Remote images configured in `next.config.ts`
+- [ ] Server Components not imported directly in Client Components
+- [ ] Static pages have `dynamic = 'force-static'`
+- [ ] Cached components have `'use cache'`
+- [ ] No route collisions with Route Groups
+- [ ] Dynamic pages use `generateMetadata()`
+- [ ] Fonts applied to `<html>` or `<body>`
+- [ ] Public env vars prefixed with `NEXT_PUBLIC_`
+- [ ] Server Actions have `'use server'`
+- [ ] Node.js version is 20.9+
+
+---
+
+## Debugging Tips
+
+### Enable TypeScript Strict Mode
+
+```json
+// tsconfig.json
+{
+  "compilerOptions": {
+    "strict": true,
+    "noUncheckedIndexedAccess": true
+  }
+}
+```
+
+### Check Build Output
+
+```bash
+npm run build
+```
+
+Look for warnings and errors in build logs.
+
+### Use Type Checking
+
+```bash
+npx tsc --noEmit
+```
+
+### Check Runtime Logs
+
+```bash
+npm run dev
+```
+
+Watch console for errors and warnings.
+
+---
+
+## Resources
+
+- **Migration Guide**: `references/next-16-migration-guide.md`
+- **Templates**: `templates/` directory
+- **Next.js 16 Blog**: https://nextjs.org/blog/next-16
+- **Support**: jeremy@jezweb.net
diff --git a/.cursor/skills/nextjs/rules/nextjs.md b/.cursor/skills/nextjs/rules/nextjs.md
new file mode 100644
index 0000000..ca0336a
--- /dev/null
+++ b/.cursor/skills/nextjs/rules/nextjs.md
@@ -0,0 +1,118 @@
+---
+paths: "**/*.tsx", "**/*.ts", next.config.*, app/**/page.tsx, app/**/layout.tsx, app/**/route.ts
+---
+
+# Next.js 16 Corrections
+
+Claude's training may reference Next.js 15 patterns. This project uses **Next.js 16**.
+
+## Async Route Parameters (BREAKING)
+
+```typescript
+/* ❌ Next.js 15 (synchronous) */
+export default function Page({ params, searchParams }: {
+  params: { slug: string }
+  searchParams: { query: string }
+}) {
+  const slug = params.slug // Error: params is a Promise
+}
+
+/* ✅ Next.js 16 (asynchronous) */
+export default async function Page({ params, searchParams }: {
+  params: Promise<{ slug: string }>
+  searchParams: Promise<{ query: string }>
+}) {
+  const { slug } = await params
+  const { query } = await searchParams
+}
+```
+
+## cookies() and headers() are Async
+
+```typescript
+/* ❌ Next.js 15 */
+import { cookies, headers } from 'next/headers'
+const cookieStore = cookies()
+const headersList = headers()
+
+/* ✅ Next.js 16 */
+const cookieStore = await cookies()
+const headersList = await headers()
+```
+
+## middleware.ts → proxy.ts
+
+```typescript
+/* ❌ Deprecated in Next.js 16 */
+// middleware.ts
+export function middleware(request: NextRequest) { ... }
+
+/* ✅ Use proxy.ts instead */
+// proxy.ts
+export function proxy(request: NextRequest) { ... }
+```
+
+## Parallel Routes: default.js Required
+
+```
+/* ❌ Will fail during soft navigation */
+app/
+├── @modal/
+│   └── login/page.tsx
+
+/* ✅ Add default.tsx to every parallel route */
+app/
+├── @modal/
+│   ├── login/page.tsx
+│   └── default.tsx  ← Required!
+```
+
+```typescript
+// app/@modal/default.tsx
+export default function ModalDefault() {
+  return null
+}
+```
+
+## revalidateTag() Requires 2 Arguments
+
+```typescript
+/* ❌ Next.js 15 */
+revalidateTag('posts')
+
+/* ✅ Next.js 16 - second argument required */
+revalidateTag('posts', 'max')
+
+// Or with custom cache life:
+revalidateTag('posts', {
+  stale: 3600,
+  revalidate: 86400,
+})
+```
+
+## Cache Components with "use cache"
+
+```typescript
+/* ❌ Next.js 15 - implicit caching */
+export async function getData() {
+  return fetch('/api/data').then(r => r.json())
+}
+
+/* ✅ Next.js 16 - opt-in caching */
+'use cache'
+export async function getData() {
+  return fetch('/api/data').then(r => r.json())
+}
+```
+
+## Quick Fixes
+
+| If Claude suggests... | Use instead... |
+|----------------------|----------------|
+| `params: { id: string }` | `params: Promise<{ id: string }>` + `await params` |
+| `const cookieStore = cookies()` | `const cookieStore = await cookies()` |
+| `middleware.ts` | `proxy.ts` |
+| Missing `default.tsx` in @slots | Add `default.tsx` returning `null` |
+| `revalidateTag('tag')` | `revalidateTag('tag', 'max')` |
+| Implicit fetch caching | Add `'use cache'` directive |
+| `experimental.ppr` | Use `"use cache"` directive instead |
diff --git a/.cursor/skills/nextjs/scripts/check-versions.sh b/.cursor/skills/nextjs/scripts/check-versions.sh
new file mode 100755
index 0000000..6b39d3c
--- /dev/null
+++ b/.cursor/skills/nextjs/scripts/check-versions.sh
@@ -0,0 +1,207 @@
+#!/bin/bash
+
+# Next.js 16 - Version Checker
+# Verifies that all dependencies are compatible with Next.js 16
+
+set -e
+
+echo "🔍 Checking Next.js 16 compatibility..."
+echo ""
+
+# Colors
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+# Check if package.json exists
+if [ ! -f "package.json" ]; then
+  echo -e "${RED}❌ package.json not found${NC}"
+  echo "Run this script from your project root directory."
+  exit 1
+fi
+
+# Check Node.js version
+echo "📦 Node.js Version:"
+NODE_VERSION=$(node --version | cut -d'v' -f2)
+NODE_MAJOR=$(echo $NODE_VERSION | cut -d'.' -f1)
+NODE_MINOR=$(echo $NODE_VERSION | cut -d'.' -f2)
+
+if [ "$NODE_MAJOR" -lt 20 ]; then
+  echo -e "${RED}❌ Node.js $NODE_VERSION (requires 20.9+)${NC}"
+  echo "   Upgrade: nvm install 20 && nvm use 20"
+  exit 1
+elif [ "$NODE_MAJOR" -eq 20 ] && [ "$NODE_MINOR" -lt 9 ]; then
+  echo -e "${RED}❌ Node.js $NODE_VERSION (requires 20.9+)${NC}"
+  echo "   Upgrade: nvm install 20 && nvm use 20"
+  exit 1
+else
+  echo -e "${GREEN}✅ Node.js $NODE_VERSION${NC}"
+fi
+
+echo ""
+
+# Check Next.js version
+echo "🔧 Next.js Version:"
+if [ -f "node_modules/next/package.json" ]; then
+  NEXT_VERSION=$(node -p "require('./node_modules/next/package.json').version")
+  NEXT_MAJOR=$(echo $NEXT_VERSION | cut -d'.' -f1)
+
+  if [ "$NEXT_MAJOR" -lt 16 ]; then
+    echo -e "${RED}❌ Next.js $NEXT_VERSION (requires 16.0.0+)${NC}"
+    echo "   Upgrade: npm install next@16"
+    exit 1
+  else
+    echo -e "${GREEN}✅ Next.js $NEXT_VERSION${NC}"
+  fi
+else
+  echo -e "${YELLOW}⚠️  Next.js not installed (run npm install)${NC}"
+fi
+
+echo ""
+
+# Check React version
+echo "⚛️  React Version:"
+if [ -f "node_modules/react/package.json" ]; then
+  REACT_VERSION=$(node -p "require('./node_modules/react/package.json').version")
+  REACT_MAJOR=$(echo $REACT_VERSION | cut -d'.' -f1)
+  REACT_MINOR=$(echo $REACT_VERSION | cut -d'.' -f2)
+
+  if [ "$REACT_MAJOR" -lt 19 ]; then
+    echo -e "${RED}❌ React $REACT_VERSION (requires 19.2+)${NC}"
+    echo "   Upgrade: npm install react@19.2 react-dom@19.2"
+    exit 1
+  elif [ "$REACT_MAJOR" -eq 19 ] && [ "$REACT_MINOR" -lt 2 ]; then
+    echo -e "${YELLOW}⚠️  React $REACT_VERSION (recommends 19.2+)${NC}"
+    echo "   Upgrade: npm install react@19.2 react-dom@19.2"
+  else
+    echo -e "${GREEN}✅ React $REACT_VERSION${NC}"
+  fi
+else
+  echo -e "${YELLOW}⚠️  React not installed (run npm install)${NC}"
+fi
+
+echo ""
+
+# Check TypeScript version (if using TypeScript)
+if [ -f "tsconfig.json" ]; then
+  echo "📘 TypeScript Version:"
+  if [ -f "node_modules/typescript/package.json" ]; then
+    TS_VERSION=$(node -p "require('./node_modules/typescript/package.json').version")
+    TS_MAJOR=$(echo $TS_VERSION | cut -d'.' -f1)
+    TS_MINOR=$(echo $TS_VERSION | cut -d'.' -f2)
+
+    if [ "$TS_MAJOR" -lt 5 ]; then
+      echo -e "${RED}❌ TypeScript $TS_VERSION (requires 5.1+)${NC}"
+      echo "   Upgrade: npm install -D typescript@latest"
+      exit 1
+    elif [ "$TS_MAJOR" -eq 5 ] && [ "$TS_MINOR" -lt 1 ]; then
+      echo -e "${RED}❌ TypeScript $TS_VERSION (requires 5.1+)${NC}"
+      echo "   Upgrade: npm install -D typescript@latest"
+      exit 1
+    else
+      echo -e "${GREEN}✅ TypeScript $TS_VERSION${NC}"
+    fi
+  else
+    echo -e "${YELLOW}⚠️  TypeScript not installed (run npm install)${NC}"
+  fi
+
+  echo ""
+fi
+
+# Check for deprecated files
+echo "🔎 Checking for deprecated patterns..."
+
+DEPRECATED_FOUND=0
+
+if [ -f "middleware.ts" ]; then
+  echo -e "${YELLOW}⚠️  middleware.ts found (deprecated in Next.js 16)${NC}"
+  echo "   Migrate: Rename to proxy.ts and update function name"
+  DEPRECATED_FOUND=1
+fi
+
+if [ -f "middleware.js" ]; then
+  echo -e "${YELLOW}⚠️  middleware.js found (deprecated in Next.js 16)${NC}"
+  echo "   Migrate: Rename to proxy.js and update function name"
+  DEPRECATED_FOUND=1
+fi
+
+# Check for parallel routes missing default.js
+if [ -d "app" ]; then
+  PARALLEL_ROUTES=$(find app -type d -name '@*' 2>/dev/null)
+
+  if [ ! -z "$PARALLEL_ROUTES" ]; then
+    for route in $PARALLEL_ROUTES; do
+      if [ ! -f "$route/default.tsx" ] && [ ! -f "$route/default.jsx" ] && [ ! -f "$route/default.js" ]; then
+        echo -e "${YELLOW}⚠️  $route missing default.tsx (required in Next.js 16)${NC}"
+        echo "   Create: touch $route/default.tsx"
+        DEPRECATED_FOUND=1
+      fi
+    done
+  fi
+fi
+
+if [ $DEPRECATED_FOUND -eq 0 ]; then
+  echo -e "${GREEN}✅ No deprecated patterns found${NC}"
+fi
+
+echo ""
+
+# Summary
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+echo "📊 Summary:"
+echo ""
+
+ALL_GOOD=1
+
+# Node.js check
+if [ "$NODE_MAJOR" -ge 20 ] && [ "$NODE_MINOR" -ge 9 ]; then
+  echo -e "${GREEN}✅ Node.js compatible${NC}"
+else
+  echo -e "${RED}❌ Node.js incompatible${NC}"
+  ALL_GOOD=0
+fi
+
+# Next.js check
+if [ -f "node_modules/next/package.json" ]; then
+  if [ "$NEXT_MAJOR" -ge 16 ]; then
+    echo -e "${GREEN}✅ Next.js compatible${NC}"
+  else
+    echo -e "${RED}❌ Next.js incompatible${NC}"
+    ALL_GOOD=0
+  fi
+fi
+
+# React check
+if [ -f "node_modules/react/package.json" ]; then
+  if [ "$REACT_MAJOR" -ge 19 ]; then
+    echo -e "${GREEN}✅ React compatible${NC}"
+  else
+    echo -e "${RED}❌ React incompatible${NC}"
+    ALL_GOOD=0
+  fi
+fi
+
+# TypeScript check (if applicable)
+if [ -f "tsconfig.json" ] && [ -f "node_modules/typescript/package.json" ]; then
+  if [ "$TS_MAJOR" -ge 5 ] && [ "$TS_MINOR" -ge 1 ]; then
+    echo -e "${GREEN}✅ TypeScript compatible${NC}"
+  else
+    echo -e "${RED}❌ TypeScript incompatible${NC}"
+    ALL_GOOD=0
+  fi
+fi
+
+echo ""
+
+if [ $ALL_GOOD -eq 1 ] && [ $DEPRECATED_FOUND -eq 0 ]; then
+  echo -e "${GREEN}🎉 All checks passed! Your project is ready for Next.js 16.${NC}"
+  exit 0
+elif [ $ALL_GOOD -eq 1 ]; then
+  echo -e "${YELLOW}⚠️  Dependencies compatible, but deprecated patterns found.${NC}"
+  echo "Fix deprecation warnings before migrating to Next.js 16."
+  exit 1
+else
+  echo -e "${RED}❌ Compatibility issues found. Fix errors above before continuing.${NC}"
+  exit 1
+fi
diff --git a/.cursor/skills/nextjs/templates/app-router-async-params.tsx b/.cursor/skills/nextjs/templates/app-router-async-params.tsx
new file mode 100644
index 0000000..7a60a06
--- /dev/null
+++ b/.cursor/skills/nextjs/templates/app-router-async-params.tsx
@@ -0,0 +1,282 @@
+/**
+ * Next.js 16 - Async Route Parameters
+ *
+ * BREAKING CHANGE: params, searchParams, cookies(), headers(), draftMode()
+ * are now async and must be awaited in Next.js 16.
+ *
+ * This template shows the correct patterns for accessing route parameters,
+ * search parameters, cookies, and headers in Next.js 16.
+ */
+
+import { cookies, headers, draftMode } from 'next/headers'
+import { notFound } from 'next/navigation'
+
+// ============================================================================
+// Example 1: Page with Async Params
+// ============================================================================
+
+interface PageProps {
+  params: Promise<{ slug: string }>
+  searchParams: Promise<{ q?: string; page?: string }>
+}
+
+export default async function BlogPostPage({ params, searchParams }: PageProps) {
+  // ✅ Await params and searchParams in Next.js 16
+  const { slug } = await params
+  const { q, page } = await searchParams
+
+  // Fetch post data
+  const post = await fetch(`https://api.example.com/posts/${slug}`)
+    .then(r => r.json())
+    .catch(() => null)
+
+  if (!post) {
+    notFound()
+  }
+
+  return (
+    <article>
+      <h1>{post.title}</h1>
+      <div dangerouslySetInnerHTML={{ __html: post.content }} />
+
+      {/* Show search query if present */}
+      {q && <p>Search query: {q}</p>}
+
+      {/* Show page number if present */}
+      {page && <p>Page: {page}</p>}
+    </article>
+  )
+}
+
+// ============================================================================
+// Example 2: Layout with Async Params
+// ============================================================================
+
+interface LayoutProps {
+  children: React.ReactNode
+  params: Promise<{ category: string }>
+}
+
+export async function ProductLayout({ children, params }: LayoutProps) {
+  // ✅ Await params in layouts too
+  const { category } = await params
+
+  return (
+    <div>
+      <nav>
+        <h2>Category: {category}</h2>
+      </nav>
+      <main>{children}</main>
+    </div>
+  )
+}
+
+// ============================================================================
+// Example 3: Accessing Cookies (Async in Next.js 16)
+// ============================================================================
+
+export async function UserGreeting() {
+  // ✅ Await cookies() in Next.js 16
+  const cookieStore = await cookies()
+  const userId = cookieStore.get('userId')?.value
+  const theme = cookieStore.get('theme')?.value || 'light'
+
+  if (!userId) {
+    return <p>Welcome, Guest!</p>
+  }
+
+  const user = await fetch(`https://api.example.com/users/${userId}`)
+    .then(r => r.json())
+
+  return (
+    <div data-theme={theme}>
+      <p>Welcome back, {user.name}!</p>
+    </div>
+  )
+}
+
+// ============================================================================
+// Example 4: Accessing Headers (Async in Next.js 16)
+// ============================================================================
+
+export async function RequestInfo() {
+  // ✅ Await headers() in Next.js 16
+  const headersList = await headers()
+  const userAgent = headersList.get('user-agent') || 'Unknown'
+  const referer = headersList.get('referer') || 'Direct'
+  const ip = headersList.get('x-forwarded-for') || 'Unknown'
+
+  return (
+    <div>
+      <p>User Agent: {userAgent}</p>
+      <p>Referrer: {referer}</p>
+      <p>IP: {ip}</p>
+    </div>
+  )
+}
+
+// ============================================================================
+// Example 5: Draft Mode (Async in Next.js 16)
+// ============================================================================
+
+export async function DraftBanner() {
+  // ✅ Await draftMode() in Next.js 16
+  const { isEnabled } = await draftMode()
+
+  if (!isEnabled) {
+    return null
+  }
+
+  return (
+    <div style={{ background: 'yellow', padding: '1rem' }}>
+      <p>🚧 Draft Mode Enabled</p>
+      <a href="/api/disable-draft">Exit Draft Mode</a>
+    </div>
+  )
+}
+
+// ============================================================================
+// Example 6: Generate Metadata with Async Params
+// ============================================================================
+
+import type { Metadata } from 'next'
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  // ✅ Await params in generateMetadata
+  const { slug } = await params
+
+  const post = await fetch(`https://api.example.com/posts/${slug}`)
+    .then(r => r.json())
+
+  return {
+    title: post.title,
+    description: post.excerpt,
+    openGraph: {
+      title: post.title,
+      description: post.excerpt,
+      images: [post.coverImage],
+    },
+  }
+}
+
+// ============================================================================
+// Example 7: Generate Static Params (Async)
+// ============================================================================
+
+export async function generateStaticParams() {
+  const posts = await fetch('https://api.example.com/posts')
+    .then(r => r.json())
+
+  return posts.map((post: { slug: string }) => ({
+    slug: post.slug,
+  }))
+}
+
+// ============================================================================
+// Example 8: Route Handler with Async Params
+// ============================================================================
+
+// File: app/api/posts/[id]/route.ts
+
+import { NextResponse } from 'next/server'
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  // ✅ Await params in route handlers
+  const { id } = await params
+
+  const post = await fetch(`https://api.example.com/posts/${id}`)
+    .then(r => r.json())
+
+  return NextResponse.json(post)
+}
+
+export async function DELETE(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  // ✅ Await params in route handlers
+  const { id } = await params
+
+  await fetch(`https://api.example.com/posts/${id}`, {
+    method: 'DELETE',
+  })
+
+  return NextResponse.json({ message: 'Post deleted' })
+}
+
+// ============================================================================
+// Migration Guide: Next.js 15 → Next.js 16
+// ============================================================================
+
+// ❌ BEFORE (Next.js 15):
+/*
+export default function Page({ params, searchParams }) {
+  const slug = params.slug // ❌ Sync access
+  const query = searchParams.q // ❌ Sync access
+}
+
+export function MyComponent() {
+  const cookieStore = cookies() // ❌ Sync access
+  const headersList = headers() // ❌ Sync access
+}
+*/
+
+// ✅ AFTER (Next.js 16):
+/*
+export default async function Page({ params, searchParams }) {
+  const { slug } = await params // ✅ Async access
+  const { q: query } = await searchParams // ✅ Async access
+}
+
+export async function MyComponent() {
+  const cookieStore = await cookies() // ✅ Async access
+  const headersList = await headers() // ✅ Async access
+}
+*/
+
+// ============================================================================
+// TypeScript Types
+// ============================================================================
+
+// Correct types for Next.js 16:
+type Params<T = Record<string, string>> = Promise<T>
+type SearchParams = Promise<{ [key: string]: string | string[] | undefined }>
+
+// Usage:
+type ProductPageProps = {
+  params: Params<{ id: string }>
+  searchParams: SearchParams
+}
+
+// ============================================================================
+// Codemod (Automatic Migration)
+// ============================================================================
+
+// Run this command to automatically migrate your code:
+// npx @next/codemod@canary upgrade latest
+
+/**
+ * Summary:
+ *
+ * 1. ALL route parameters are now async:
+ *    - params → await params
+ *    - searchParams → await searchParams
+ *
+ * 2. ALL next/headers functions are now async:
+ *    - cookies() → await cookies()
+ *    - headers() → await headers()
+ *    - draftMode() → await draftMode()
+ *
+ * 3. Components using these must be async:
+ *    - export default async function Page({ params }) { ... }
+ *    - export async function Layout({ params }) { ... }
+ *    - export async function generateMetadata({ params }) { ... }
+ *
+ * 4. Route handlers must await params:
+ *    - export async function GET(request, { params }) {
+ *        const { id } = await params
+ *      }
+ */
diff --git a/.cursor/skills/nextjs/templates/cache-component-use-cache.tsx b/.cursor/skills/nextjs/templates/cache-component-use-cache.tsx
new file mode 100644
index 0000000..29ed7e7
--- /dev/null
+++ b/.cursor/skills/nextjs/templates/cache-component-use-cache.tsx
@@ -0,0 +1,343 @@
+/**
+ * Next.js 16 - Cache Components with "use cache" Directive
+ *
+ * NEW in Next.js 16: Explicit opt-in caching with "use cache" directive.
+ * Replaces implicit caching from Next.js 15.
+ *
+ * This template shows component-level, function-level, and page-level caching.
+ */
+
+// ============================================================================
+// Example 1: Component-Level Caching
+// ============================================================================
+
+'use cache'
+
+// This entire component will be cached
+export async function CachedProductList() {
+  const products = await fetch('https://api.example.com/products')
+    .then(r => r.json())
+
+  return (
+    <div>
+      <h2>Products</h2>
+      <ul>
+        {products.map((product: { id: string; name: string; price: number }) => (
+          <li key={product.id}>
+            {product.name} - ${product.price}
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+// ============================================================================
+// Example 2: Function-Level Caching
+// ============================================================================
+
+// File: lib/data.ts
+'use cache'
+
+export async function getExpensiveData(id: string) {
+  console.log('Fetching expensive data...') // Only logs on cache miss
+
+  // Simulate expensive operation
+  await new Promise(resolve => setTimeout(resolve, 1000))
+
+  const data = await fetch(`https://api.example.com/items/${id}`)
+    .then(r => r.json())
+
+  return data
+}
+
+// Usage in component (not cached itself):
+import { getExpensiveData } from '@/lib/data'
+
+export async function ProductPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params
+  const product = await getExpensiveData(id) // Cached by function
+
+  return (
+    <div>
+      <h1>{product.name}</h1>
+      <p>{product.description}</p>
+    </div>
+  )
+}
+
+// ============================================================================
+// Example 3: Page-Level Caching
+// ============================================================================
+
+// File: app/blog/[slug]/page.tsx
+'use cache'
+
+export async function generateStaticParams() {
+  const posts = await fetch('https://api.example.com/posts')
+    .then(r => r.json())
+
+  return posts.map((post: { slug: string }) => ({
+    slug: post.slug,
+  }))
+}
+
+export default async function BlogPost({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params
+
+  const post = await fetch(`https://api.example.com/posts/${slug}`)
+    .then(r => r.json())
+
+  return (
+    <article>
+      <h1>{post.title}</h1>
+      <div dangerouslySetInnerHTML={{ __html: post.content }} />
+    </article>
+  )
+}
+
+// ============================================================================
+// Example 4: Partial Prerendering (PPR) - Mix Static & Dynamic
+// ============================================================================
+
+// File: app/dashboard/page.tsx
+
+// Static component (cached)
+'use cache'
+async function StaticHeader() {
+  return (
+    <header>
+      <h1>My Dashboard</h1>
+      <nav>
+        <a href="/dashboard">Overview</a>
+        <a href="/dashboard/settings">Settings</a>
+      </nav>
+    </header>
+  )
+}
+
+// Dynamic component (NOT cached) - separate file without "use cache"
+// File: components/dynamic-user-info.tsx
+import { cookies } from 'next/headers'
+
+export async function DynamicUserInfo() {
+  const cookieStore = await cookies()
+  const userId = cookieStore.get('userId')?.value
+
+  if (!userId) {
+    return <div>Please log in</div>
+  }
+
+  const user = await fetch(`https://api.example.com/users/${userId}`)
+    .then(r => r.json())
+
+  return (
+    <div>
+      <p>Welcome, {user.name}</p>
+      <p>Balance: ${user.balance}</p>
+    </div>
+  )
+}
+
+// Page combines static + dynamic (Partial Prerendering)
+import { DynamicUserInfo } from '@/components/dynamic-user-info'
+
+export default function DashboardPage() {
+  return (
+    <div>
+      <StaticHeader /> {/* Cached (static) */}
+      <DynamicUserInfo /> {/* Not cached (dynamic) */}
+    </div>
+  )
+}
+
+// ============================================================================
+// Example 5: Selective Caching with Multiple Functions
+// ============================================================================
+
+// Cache expensive operations, skip cheap ones
+
+// Cached function
+'use cache'
+export async function getPopularPosts() {
+  const posts = await fetch('https://api.example.com/posts/popular')
+    .then(r => r.json())
+
+  return posts
+}
+
+// NOT cached (changes frequently)
+export async function getRealtimeMetrics() {
+  const metrics = await fetch('https://api.example.com/metrics/realtime')
+    .then(r => r.json())
+
+  return metrics
+}
+
+// Component uses both
+export async function Dashboard() {
+  const popularPosts = await getPopularPosts() // Cached
+  const metrics = await getRealtimeMetrics() // NOT cached
+
+  return (
+    <div>
+      <div>
+        <h2>Popular Posts</h2>
+        <ul>
+          {popularPosts.map((post: { id: string; title: string }) => (
+            <li key={post.id}>{post.title}</li>
+          ))}
+        </ul>
+      </div>
+
+      <div>
+        <h2>Realtime Metrics</h2>
+        <p>Active users: {metrics.activeUsers}</p>
+        <p>Requests/min: {metrics.requestsPerMinute}</p>
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// Example 6: Cache with Revalidation (using tags)
+// ============================================================================
+
+// File: app/actions.ts
+'use server'
+
+import { revalidateTag } from 'next/cache'
+
+export async function createPost(formData: FormData) {
+  const title = formData.get('title') as string
+  const content = formData.get('content') as string
+
+  await fetch('https://api.example.com/posts', {
+    method: 'POST',
+    body: JSON.stringify({ title, content }),
+  })
+
+  // Revalidate cached posts
+  revalidateTag('posts', 'max')
+}
+
+// File: lib/posts.ts
+'use cache'
+
+export async function getPosts() {
+  const response = await fetch('https://api.example.com/posts', {
+    next: { tags: ['posts'] }, // Tag for revalidation
+  })
+
+  return response.json()
+}
+
+// ============================================================================
+// Example 7: Conditional Caching (Cache Based on User Role)
+// ============================================================================
+
+import { cookies } from 'next/headers'
+
+export async function getContent() {
+  const cookieStore = await cookies()
+  const userRole = cookieStore.get('role')?.value
+
+  if (userRole === 'admin') {
+    // Don't cache admin content (changes frequently)
+    return fetch('https://api.example.com/admin/content').then(r => r.json())
+  }
+
+  // Cache public content
+  return getCachedPublicContent()
+}
+
+'use cache'
+async function getCachedPublicContent() {
+  return fetch('https://api.example.com/public/content').then(r => r.json())
+}
+
+// ============================================================================
+// Example 8: Inline "use cache" (Granular Control)
+// ============================================================================
+
+export async function MixedCachingComponent() {
+  // This function call is cached
+  const cachedData = await (async function() {
+    'use cache'
+    return fetch('https://api.example.com/slow-data').then(r => r.json())
+  })()
+
+  // This function call is NOT cached
+  const freshData = await fetch('https://api.example.com/fresh-data').then(r => r.json())
+
+  return (
+    <div>
+      <div>Cached: {cachedData.value}</div>
+      <div>Fresh: {freshData.value}</div>
+    </div>
+  )
+}
+
+// ============================================================================
+// Migration Guide: Next.js 15 → Next.js 16
+// ============================================================================
+
+// ❌ BEFORE (Next.js 15 - Implicit Caching):
+/*
+// All Server Components were cached by default
+export async function MyComponent() {
+  const data = await fetch('https://api.example.com/data')
+  return <div>{data.value}</div>
+}
+
+// To opt-out of caching:
+export const revalidate = 0 // or export const dynamic = 'force-dynamic'
+*/
+
+// ✅ AFTER (Next.js 16 - Explicit Opt-In Caching):
+/*
+// Components are NOT cached by default
+export async function MyComponent() {
+  const data = await fetch('https://api.example.com/data')
+  return <div>{data.value}</div>
+}
+
+// To opt-IN to caching, add "use cache"
+'use cache'
+export async function MyCachedComponent() {
+  const data = await fetch('https://api.example.com/data')
+  return <div>{data.value}</div>
+}
+*/
+
+// ============================================================================
+// Cache Behavior Summary
+// ============================================================================
+
+/**
+ * "use cache" can be added to:
+ * 1. ✅ Components (entire component cached)
+ * 2. ✅ Functions (function output cached)
+ * 3. ✅ Pages (entire page cached)
+ * 4. ✅ Layouts (layout cached)
+ * 5. ✅ Inline async functions (granular caching)
+ *
+ * Default behavior (without "use cache"):
+ * - Server Components: NOT cached (change from Next.js 15)
+ * - fetch() calls: Cached by default (unchanged)
+ *
+ * Revalidation:
+ * - Use revalidateTag() to invalidate cache by tag
+ * - Use updateTag() for immediate read-your-writes
+ * - Use refresh() for uncached data only
+ *
+ * When to use "use cache":
+ * ✅ Expensive computations (database queries, API calls)
+ * ✅ Stable data (product catalogs, blog posts)
+ * ✅ Partial Prerendering (static header + dynamic user info)
+ *
+ * When NOT to use "use cache":
+ * ❌ Real-time data (metrics, notifications)
+ * ❌ User-specific data (unless using cookies/headers for cache keys)
+ * ❌ Frequently changing data (stock prices, live scores)
+ */
diff --git a/.cursor/skills/nextjs/templates/package.json b/.cursor/skills/nextjs/templates/package.json
new file mode 100644
index 0000000..b254b79
--- /dev/null
+++ b/.cursor/skills/nextjs/templates/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "nextjs-16-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "next": "^16.0.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "^5.7.0"
+  },
+  "optionalDependencies": {
+    "zod": "^3.24.0",
+    "@tailwindcss/vite": "^4.1.0",
+    "tailwindcss": "^4.1.0"
+  },
+  "engines": {
+    "node": ">=20.9.0",
+    "npm": ">=10.0.0"
+  }
+}
diff --git a/.cursor/skills/nextjs/templates/parallel-routes-with-default.tsx b/.cursor/skills/nextjs/templates/parallel-routes-with-default.tsx
new file mode 100644
index 0000000..9aa9db8
--- /dev/null
+++ b/.cursor/skills/nextjs/templates/parallel-routes-with-default.tsx
@@ -0,0 +1,437 @@
+/**
+ * Next.js 16 - Parallel Routes with Required default.js
+ *
+ * BREAKING CHANGE: Parallel routes now REQUIRE explicit default.js files.
+ * Without them, routes will fail during soft navigation.
+ *
+ * Directory structure:
+ * app/
+ * ├── @modal/
+ * │   ├── login/
+ * │   │   └── page.tsx
+ * │   └── default.tsx    ← REQUIRED in Next.js 16
+ * ├── @feed/
+ * │   ├── trending/
+ * │   │   └── page.tsx
+ * │   └── default.tsx    ← REQUIRED in Next.js 16
+ * └── layout.tsx
+ */
+
+// ============================================================================
+// Example 1: Modal + Main Content (Common Pattern)
+// ============================================================================
+
+// File: app/layout.tsx
+export default function RootLayout({
+  children,
+  modal,
+}: {
+  children: React.ReactNode
+  modal: React.ReactNode
+}) {
+  return (
+    <html>
+      <body>
+        {modal}
+        <main>{children}</main>
+      </body>
+    </html>
+  )
+}
+
+// File: app/@modal/login/page.tsx
+export default function LoginModal() {
+  return (
+    <div className="modal-overlay">
+      <div className="modal">
+        <h2>Login</h2>
+        <form>
+          <input type="email" placeholder="Email" />
+          <input type="password" placeholder="Password" />
+          <button type="submit">Login</button>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+// File: app/@modal/default.tsx (REQUIRED)
+export default function ModalDefault() {
+  return null // No modal shown by default
+}
+
+// File: app/page.tsx
+export default function HomePage() {
+  return (
+    <div>
+      <h1>Home Page</h1>
+      <a href="/login">Open Login Modal</a>
+    </div>
+  )
+}
+
+// ============================================================================
+// Example 2: Dashboard with Multiple Panels
+// ============================================================================
+
+// File: app/dashboard/layout.tsx
+export default function DashboardLayout({
+  children,
+  analytics,
+  notifications,
+  activity,
+}: {
+  children: React.ReactNode
+  analytics: React.ReactNode
+  notifications: React.ReactNode
+  activity: React.ReactNode
+}) {
+  return (
+    <div className="dashboard-layout">
+      <aside className="sidebar">
+        {notifications}
+      </aside>
+
+      <main className="main-content">
+        {children}
+        {analytics}
+      </main>
+
+      <aside className="activity-sidebar">
+        {activity}
+      </aside>
+    </div>
+  )
+}
+
+// File: app/dashboard/@analytics/overview/page.tsx
+export default async function AnalyticsOverview() {
+  const stats = await fetch('https://api.example.com/stats').then(r => r.json())
+
+  return (
+    <div className="analytics-panel">
+      <h2>Analytics</h2>
+      <div>
+        <p>Page Views: {stats.pageViews}</p>
+        <p>Unique Visitors: {stats.uniqueVisitors}</p>
+      </div>
+    </div>
+  )
+}
+
+// File: app/dashboard/@analytics/default.tsx (REQUIRED)
+export default function AnalyticsDefault() {
+  return (
+    <div className="analytics-panel">
+      <h2>Analytics</h2>
+      <p>No analytics data available</p>
+    </div>
+  )
+}
+
+// File: app/dashboard/@notifications/default.tsx (REQUIRED)
+export default function NotificationsDefault() {
+  return (
+    <div className="notifications-panel">
+      <h3>Notifications</h3>
+      <p>No new notifications</p>
+    </div>
+  )
+}
+
+// File: app/dashboard/@activity/default.tsx (REQUIRED)
+export default function ActivityDefault() {
+  return (
+    <div className="activity-panel">
+      <h3>Recent Activity</h3>
+      <p>No recent activity</p>
+    </div>
+  )
+}
+
+// ============================================================================
+// Example 3: E-commerce with Product + Reviews
+// ============================================================================
+
+// File: app/products/[id]/layout.tsx
+export default function ProductLayout({
+  children,
+  reviews,
+  recommendations,
+}: {
+  children: React.ReactNode
+  reviews: React.ReactNode
+  recommendations: React.ReactNode
+}) {
+  return (
+    <div className="product-layout">
+      <div className="product-main">
+        {children}
+      </div>
+
+      <div className="product-sidebar">
+        {reviews}
+        {recommendations}
+      </div>
+    </div>
+  )
+}
+
+// File: app/products/[id]/@reviews/page.tsx
+export default async function ProductReviews({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params
+  const reviews = await fetch(`https://api.example.com/products/${id}/reviews`)
+    .then(r => r.json())
+
+  return (
+    <div className="reviews">
+      <h3>Reviews</h3>
+      <ul>
+        {reviews.map((review: { id: string; rating: number; comment: string }) => (
+          <li key={review.id}>
+            <p>⭐ {review.rating}/5</p>
+            <p>{review.comment}</p>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+// File: app/products/[id]/@reviews/default.tsx (REQUIRED)
+export default function ReviewsDefault() {
+  return (
+    <div className="reviews">
+      <h3>Reviews</h3>
+      <p>No reviews yet</p>
+    </div>
+  )
+}
+
+// File: app/products/[id]/@recommendations/default.tsx (REQUIRED)
+export default function RecommendationsDefault() {
+  return (
+    <div className="recommendations">
+      <h3>Recommendations</h3>
+      <p>Loading recommendations...</p>
+    </div>
+  )
+}
+
+// ============================================================================
+// Example 4: Auth-Gated Content
+// ============================================================================
+
+import { cookies } from 'next/headers'
+import { redirect } from 'next/navigation'
+
+// File: app/@auth/default.tsx (REQUIRED)
+export default async function AuthDefault() {
+  const cookieStore = await cookies()
+  const isAuthenticated = cookieStore.get('auth')?.value
+
+  if (!isAuthenticated) {
+    redirect('/login')
+  }
+
+  return null
+}
+
+// File: app/@auth/profile/page.tsx
+export default async function ProfilePage() {
+  const cookieStore = await cookies()
+  const userId = cookieStore.get('userId')?.value
+
+  const user = await fetch(`https://api.example.com/users/${userId}`)
+    .then(r => r.json())
+
+  return (
+    <div>
+      <h2>Profile</h2>
+      <p>Name: {user.name}</p>
+      <p>Email: {user.email}</p>
+    </div>
+  )
+}
+
+// ============================================================================
+// Example 5: Conditional Rendering Based on Slot
+// ============================================================================
+
+// File: app/layout.tsx
+export default function Layout({
+  children,
+  banner,
+}: {
+  children: React.ReactNode
+  banner: React.ReactNode
+}) {
+  // Only show banner on specific pages
+  const showBanner = true // Determine based on route
+
+  return (
+    <html>
+      <body>
+        {showBanner && banner}
+        <main>{children}</main>
+      </body>
+    </html>
+  )
+}
+
+// File: app/@banner/sale/page.tsx
+export default function SaleBanner() {
+  return (
+    <div className="banner sale-banner">
+      🎉 50% OFF SALE! Use code SALE50
+    </div>
+  )
+}
+
+// File: app/@banner/default.tsx (REQUIRED)
+export default function BannerDefault() {
+  return null // No banner by default
+}
+
+// ============================================================================
+// Example 6: Loading States with Parallel Routes
+// ============================================================================
+
+// File: app/dashboard/@analytics/loading.tsx
+export default function AnalyticsLoading() {
+  return (
+    <div className="analytics-panel">
+      <h2>Analytics</h2>
+      <p>Loading analytics...</p>
+      <div className="skeleton-loader" />
+    </div>
+  )
+}
+
+// File: app/dashboard/@notifications/loading.tsx
+export default function NotificationsLoading() {
+  return (
+    <div className="notifications-panel">
+      <h3>Notifications</h3>
+      <div className="skeleton-loader" />
+    </div>
+  )
+}
+
+// ============================================================================
+// Example 7: Error Boundaries with Parallel Routes
+// ============================================================================
+
+// File: app/dashboard/@analytics/error.tsx
+'use client'
+
+export default function AnalyticsError({
+  error,
+  reset,
+}: {
+  error: Error
+  reset: () => void
+}) {
+  return (
+    <div className="analytics-panel error">
+      <h2>Analytics</h2>
+      <p>Failed to load analytics</p>
+      <button onClick={reset}>Try Again</button>
+    </div>
+  )
+}
+
+// ============================================================================
+// Migration Guide: Next.js 15 → Next.js 16
+// ============================================================================
+
+/**
+ * BREAKING CHANGE: default.js is now REQUIRED for all parallel routes
+ *
+ * ❌ BEFORE (Next.js 15):
+ * app/
+ * ├── @modal/
+ * │   └── login/
+ * │       └── page.tsx
+ * └── layout.tsx
+ *
+ * This worked in Next.js 15. If no matching route, Next.js rendered nothing.
+ *
+ * ✅ AFTER (Next.js 16):
+ * app/
+ * ├── @modal/
+ * │   ├── login/
+ * │   │   └── page.tsx
+ * │   └── default.tsx    ← REQUIRED! Will error without this
+ * └── layout.tsx
+ *
+ * Why the change?
+ * Next.js 16 changed how parallel routes handle soft navigation. Without
+ * default.js, unmatched slots will error during client-side navigation.
+ *
+ * What should default.tsx return?
+ * - return null (most common - no UI shown)
+ * - return <Skeleton /> (loading placeholder)
+ * - redirect() to another route
+ * - return fallback UI
+ */
+
+// ============================================================================
+// Common Patterns for default.tsx
+// ============================================================================
+
+// Pattern 1: Null (no UI)
+export function DefaultNull() {
+  return null
+}
+
+// Pattern 2: Loading skeleton
+export function DefaultSkeleton() {
+  return (
+    <div className="skeleton">
+      <div className="skeleton-line" />
+      <div className="skeleton-line" />
+      <div className="skeleton-line" />
+    </div>
+  )
+}
+
+// Pattern 3: Fallback message
+export function DefaultFallback() {
+  return (
+    <div>
+      <p>Content not available</p>
+    </div>
+  )
+}
+
+// Pattern 4: Redirect
+import { redirect } from 'next/navigation'
+
+export function DefaultRedirect() {
+  redirect('/dashboard')
+}
+
+/**
+ * Summary:
+ *
+ * Parallel Routes in Next.js 16:
+ * 1. ✅ Use @folder convention for parallel slots
+ * 2. ✅ MUST include default.tsx for each @folder
+ * 3. ✅ default.tsx handles unmatched routes during navigation
+ * 4. ✅ Can have loading.tsx for loading states
+ * 5. ✅ Can have error.tsx for error boundaries
+ *
+ * Common use cases:
+ * - Modals + main content
+ * - Dashboard panels
+ * - Product + reviews/recommendations
+ * - Conditional banners
+ * - Auth-gated content
+ *
+ * Best practices:
+ * - Keep default.tsx simple (usually return null)
+ * - Use loading.tsx for better UX
+ * - Use error.tsx for error handling
+ * - Test soft navigation (client-side routing)
+ */
diff --git a/.cursor/skills/nextjs/templates/proxy-migration.ts b/.cursor/skills/nextjs/templates/proxy-migration.ts
new file mode 100644
index 0000000..f5f949b
--- /dev/null
+++ b/.cursor/skills/nextjs/templates/proxy-migration.ts
@@ -0,0 +1,274 @@
+/**
+ * Next.js 16 - Proxy Migration (middleware.ts → proxy.ts)
+ *
+ * BREAKING CHANGE: middleware.ts is deprecated in Next.js 16.
+ * Use proxy.ts instead.
+ *
+ * Migration: Rename file and function, keep same logic.
+ */
+
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+// ============================================================================
+// Example 1: Basic Proxy (Auth Check)
+// ============================================================================
+
+export function proxy(request: NextRequest) {
+  const token = request.cookies.get('token')
+
+  // Redirect to login if no token
+  if (!token) {
+    return NextResponse.redirect(new URL('/login', request.url))
+  }
+
+  return NextResponse.next()
+}
+
+export const config = {
+  matcher: '/dashboard/:path*',
+}
+
+// ============================================================================
+// Example 2: Advanced Proxy (Multiple Checks)
+// ============================================================================
+
+export function advancedProxy(request: NextRequest) {
+  const { pathname } = request.nextUrl
+
+  // 1. Auth check
+  const token = request.cookies.get('token')
+  if (pathname.startsWith('/dashboard') && !token) {
+    return NextResponse.redirect(new URL('/login', request.url))
+  }
+
+  // 2. Role-based access
+  const userRole = request.cookies.get('role')?.value
+  if (pathname.startsWith('/admin') && userRole !== 'admin') {
+    return NextResponse.redirect(new URL('/unauthorized', request.url))
+  }
+
+  // 3. Add custom headers
+  const response = NextResponse.next()
+  response.headers.set('x-custom-header', 'value')
+  response.headers.set('x-pathname', pathname)
+
+  return response
+}
+
+export const advancedConfig = {
+  matcher: ['/dashboard/:path*', '/admin/:path*'],
+}
+
+// ============================================================================
+// Example 3: Request Rewriting
+// ============================================================================
+
+export function rewriteProxy(request: NextRequest) {
+  // Rewrite /blog/* to /posts/*
+  if (request.nextUrl.pathname.startsWith('/blog')) {
+    const url = request.nextUrl.clone()
+    url.pathname = url.pathname.replace('/blog', '/posts')
+    return NextResponse.rewrite(url)
+  }
+
+  return NextResponse.next()
+}
+
+export const rewriteConfig = {
+  matcher: '/blog/:path*',
+}
+
+// ============================================================================
+// Example 4: Geolocation-Based Routing
+// ============================================================================
+
+export function geoProxy(request: NextRequest) {
+  const country = request.geo?.country || 'US'
+  const url = request.nextUrl.clone()
+
+  // Redirect to country-specific page
+  if (url.pathname === '/') {
+    url.pathname = `/${country.toLowerCase()}`
+    return NextResponse.rewrite(url)
+  }
+
+  return NextResponse.next()
+}
+
+// ============================================================================
+// Example 5: A/B Testing
+// ============================================================================
+
+export function abTestProxy(request: NextRequest) {
+  const bucket = request.cookies.get('bucket')?.value
+
+  if (!bucket) {
+    // Assign to A or B randomly
+    const newBucket = Math.random() < 0.5 ? 'a' : 'b'
+    const response = NextResponse.next()
+    response.cookies.set('bucket', newBucket, {
+      maxAge: 60 * 60 * 24 * 30, // 30 days
+    })
+
+    // Rewrite to variant page
+    if (newBucket === 'b') {
+      const url = request.nextUrl.clone()
+      url.pathname = `/variant-b${url.pathname}`
+      return NextResponse.rewrite(url)
+    }
+
+    return response
+  }
+
+  // Existing user
+  if (bucket === 'b') {
+    const url = request.nextUrl.clone()
+    url.pathname = `/variant-b${url.pathname}`
+    return NextResponse.rewrite(url)
+  }
+
+  return NextResponse.next()
+}
+
+export const abTestConfig = {
+  matcher: '/',
+}
+
+// ============================================================================
+// Example 6: Rate Limiting
+// ============================================================================
+
+const rateLimitMap = new Map<string, { count: number; resetAt: number }>()
+
+export function rateLimitProxy(request: NextRequest) {
+  const ip = request.headers.get('x-forwarded-for') || 'unknown'
+  const now = Date.now()
+
+  // Check rate limit (100 requests per minute)
+  const rateLimit = rateLimitMap.get(ip)
+
+  if (rateLimit) {
+    if (now < rateLimit.resetAt) {
+      if (rateLimit.count >= 100) {
+        return new NextResponse('Too Many Requests', {
+          status: 429,
+          headers: {
+            'Retry-After': String(Math.ceil((rateLimit.resetAt - now) / 1000)),
+          },
+        })
+      }
+      rateLimit.count++
+    } else {
+      rateLimitMap.set(ip, { count: 1, resetAt: now + 60000 }) // 1 minute
+    }
+  } else {
+    rateLimitMap.set(ip, { count: 1, resetAt: now + 60000 })
+  }
+
+  return NextResponse.next()
+}
+
+export const rateLimitConfig = {
+  matcher: '/api/:path*',
+}
+
+// ============================================================================
+// Example 7: Response Modification
+// ============================================================================
+
+export function modifyResponseProxy(request: NextRequest) {
+  const response = NextResponse.next()
+
+  // Add security headers
+  response.headers.set('X-Frame-Options', 'DENY')
+  response.headers.set('X-Content-Type-Options', 'nosniff')
+  response.headers.set('Referrer-Policy', 'origin-when-cross-origin')
+  response.headers.set(
+    'Permissions-Policy',
+    'camera=(), microphone=(), geolocation=()'
+  )
+
+  return response
+}
+
+// ============================================================================
+// Migration Guide: middleware.ts → proxy.ts
+// ============================================================================
+
+/**
+ * ❌ BEFORE (Next.js 15):
+ *
+ * // File: middleware.ts
+ * import { NextResponse } from 'next/server'
+ * import type { NextRequest } from 'next/server'
+ *
+ * export function middleware(request: NextRequest) {
+ *   const token = request.cookies.get('token')
+ *   if (!token) {
+ *     return NextResponse.redirect(new URL('/login', request.url))
+ *   }
+ *   return NextResponse.next()
+ * }
+ *
+ * export const config = {
+ *   matcher: '/dashboard/:path*',
+ * }
+ */
+
+/**
+ * ✅ AFTER (Next.js 16):
+ *
+ * // File: proxy.ts
+ * import { NextResponse } from 'next/server'
+ * import type { NextRequest } from 'next/server'
+ *
+ * export function proxy(request: NextRequest) {
+ *   const token = request.cookies.get('token')
+ *   if (!token) {
+ *     return NextResponse.redirect(new URL('/login', request.url))
+ *   }
+ *   return NextResponse.next()
+ * }
+ *
+ * export const config = {
+ *   matcher: '/dashboard/:path*',
+ * }
+ */
+
+/**
+ * Migration Steps:
+ * 1. Rename file: middleware.ts → proxy.ts
+ * 2. Rename function: middleware → proxy
+ * 3. Keep config object the same
+ * 4. Logic remains identical
+ *
+ * Why the change?
+ * - proxy.ts runs on Node.js runtime (full Node.js APIs)
+ * - middleware.ts ran on Edge runtime (limited APIs)
+ * - proxy.ts makes the network boundary explicit
+ *
+ * Note: middleware.ts still works in Next.js 16 but is deprecated.
+ * Migrate to proxy.ts for future compatibility.
+ */
+
+/**
+ * Summary:
+ *
+ * Proxy patterns:
+ * 1. ✅ Auth checks and redirects
+ * 2. ✅ Role-based access control
+ * 3. ✅ Custom headers
+ * 4. ✅ Request rewriting (URL rewrites)
+ * 5. ✅ Geolocation-based routing
+ * 6. ✅ A/B testing
+ * 7. ✅ Rate limiting
+ * 8. ✅ Response modification (security headers)
+ *
+ * Best practices:
+ * - Keep proxy logic lightweight (runs on every request)
+ * - Use matcher to limit scope
+ * - Avoid database queries (use cookies/headers instead)
+ * - Cache rate limit data in memory (or Redis for production)
+ * - Return NextResponse.next() if no action needed
+ */
diff --git a/.cursor/skills/nextjs/templates/route-handler-api.ts b/.cursor/skills/nextjs/templates/route-handler-api.ts
new file mode 100644
index 0000000..a5e4fca
--- /dev/null
+++ b/.cursor/skills/nextjs/templates/route-handler-api.ts
@@ -0,0 +1,393 @@
+/**
+ * Next.js 16 - Route Handlers (API Endpoints)
+ *
+ * Route Handlers replace API Routes from Pages Router.
+ * File: app/api/[...]/route.ts
+ */
+
+import { NextResponse } from 'next/server'
+import { cookies, headers } from 'next/headers'
+
+// ============================================================================
+// Example 1: Basic CRUD API
+// ============================================================================
+
+// GET /api/posts
+export async function GET() {
+  const posts = await fetch('https://api.example.com/posts').then(r => r.json())
+
+  return NextResponse.json(posts)
+}
+
+// POST /api/posts
+export async function POST(request: Request) {
+  const body = await request.json()
+
+  const post = await fetch('https://api.example.com/posts', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  }).then(r => r.json())
+
+  return NextResponse.json(post, { status: 201 })
+}
+
+// ============================================================================
+// Example 2: Dynamic Routes
+// ============================================================================
+
+// File: app/api/posts/[id]/route.ts
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params // ✅ Await params in Next.js 16
+
+  const post = await fetch(`https://api.example.com/posts/${id}`)
+    .then(r => r.json())
+    .catch(() => null)
+
+  if (!post) {
+    return NextResponse.json(
+      { error: 'Post not found' },
+      { status: 404 }
+    )
+  }
+
+  return NextResponse.json(post)
+}
+
+export async function PATCH(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params
+  const body = await request.json()
+
+  const updated = await fetch(`https://api.example.com/posts/${id}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  }).then(r => r.json())
+
+  return NextResponse.json(updated)
+}
+
+export async function DELETE(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params
+
+  await fetch(`https://api.example.com/posts/${id}`, {
+    method: 'DELETE',
+  })
+
+  return NextResponse.json({ message: 'Post deleted' }, { status: 200 })
+}
+
+// ============================================================================
+// Example 3: Search with Query Parameters
+// ============================================================================
+
+// GET /api/search?q=nextjs&limit=10&page=1
+export async function SEARCH(request: Request) {
+  const { searchParams } = new URL(request.url)
+  const query = searchParams.get('q') || ''
+  const limit = parseInt(searchParams.get('limit') || '10')
+  const page = parseInt(searchParams.get('page') || '1')
+  const offset = (page - 1) * limit
+
+  const results = await fetch(
+    `https://api.example.com/search?q=${query}&limit=${limit}&offset=${offset}`
+  ).then(r => r.json())
+
+  return NextResponse.json({
+    results: results.items,
+    total: results.total,
+    page,
+    limit,
+  })
+}
+
+// ============================================================================
+// Example 4: Authentication with Cookies
+// ============================================================================
+
+// POST /api/auth/login
+export async function LOGIN(request: Request) {
+  const { email, password } = await request.json()
+
+  // Verify credentials
+  const user = await fetch('https://api.example.com/auth/login', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ email, password }),
+  }).then(r => r.json())
+
+  if (!user.token) {
+    return NextResponse.json(
+      { error: 'Invalid credentials' },
+      { status: 401 }
+    )
+  }
+
+  // Set cookie
+  const response = NextResponse.json({ success: true })
+  response.cookies.set('token', user.token, {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === 'production',
+    sameSite: 'strict',
+    maxAge: 60 * 60 * 24 * 7, // 7 days
+  })
+
+  return response
+}
+
+// GET /api/auth/me
+export async function ME() {
+  const cookieStore = await cookies() // ✅ Await cookies in Next.js 16
+  const token = cookieStore.get('token')?.value
+
+  if (!token) {
+    return NextResponse.json(
+      { error: 'Unauthorized' },
+      { status: 401 }
+    )
+  }
+
+  const user = await fetch('https://api.example.com/auth/me', {
+    headers: { Authorization: `Bearer ${token}` },
+  }).then(r => r.json())
+
+  return NextResponse.json(user)
+}
+
+// ============================================================================
+// Example 5: Webhook Handler
+// ============================================================================
+
+// File: app/api/webhooks/stripe/route.ts
+
+import { headers as getHeaders } from 'next/headers'
+
+export async function WEBHOOK(request: Request) {
+  const body = await request.text()
+  const headersList = await getHeaders() // ✅ Await headers in Next.js 16
+  const signature = headersList.get('stripe-signature')
+
+  if (!signature) {
+    return NextResponse.json(
+      { error: 'Missing signature' },
+      { status: 400 }
+    )
+  }
+
+  // Verify webhook signature (example with Stripe)
+  let event
+  try {
+    event = JSON.parse(body)
+    // In production: stripe.webhooks.constructEvent(body, signature, secret)
+  } catch (err) {
+    return NextResponse.json(
+      { error: 'Invalid payload' },
+      { status: 400 }
+    )
+  }
+
+  // Handle event
+  switch (event.type) {
+    case 'payment_intent.succeeded':
+      await handlePaymentSuccess(event.data.object)
+      break
+    case 'payment_intent.failed':
+      await handlePaymentFailure(event.data.object)
+      break
+    default:
+      console.log(`Unhandled event type: ${event.type}`)
+  }
+
+  return NextResponse.json({ received: true })
+}
+
+async function handlePaymentSuccess(paymentIntent: any) {
+  console.log('Payment succeeded:', paymentIntent.id)
+  // Update database, send confirmation email, etc.
+}
+
+async function handlePaymentFailure(paymentIntent: any) {
+  console.log('Payment failed:', paymentIntent.id)
+  // Notify user, log error, etc.
+}
+
+// ============================================================================
+// Example 6: Streaming Response
+// ============================================================================
+
+// GET /api/stream
+export async function STREAM() {
+  const encoder = new TextEncoder()
+
+  const stream = new ReadableStream({
+    async start(controller) {
+      for (let i = 0; i < 10; i++) {
+        const data = `data: ${JSON.stringify({ count: i })}\n\n`
+        controller.enqueue(encoder.encode(data))
+        await new Promise(resolve => setTimeout(resolve, 1000))
+      }
+      controller.close()
+    },
+  })
+
+  return new Response(stream, {
+    headers: {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      'Connection': 'keep-alive',
+    },
+  })
+}
+
+// ============================================================================
+// Example 7: File Upload
+// ============================================================================
+
+// POST /api/upload
+import { writeFile } from 'fs/promises'
+import { join } from 'path'
+
+export async function UPLOAD(request: Request) {
+  const formData = await request.formData()
+  const file = formData.get('file') as File
+
+  if (!file) {
+    return NextResponse.json(
+      { error: 'No file provided' },
+      { status: 400 }
+    )
+  }
+
+  const bytes = await file.arrayBuffer()
+  const buffer = Buffer.from(bytes)
+  const filename = `${Date.now()}-${file.name}`
+  const path = join(process.cwd(), 'public', 'uploads', filename)
+
+  await writeFile(path, buffer)
+
+  return NextResponse.json({
+    success: true,
+    url: `/uploads/${filename}`,
+  })
+}
+
+// ============================================================================
+// Example 8: CORS Configuration
+// ============================================================================
+
+export async function OPTIONS() {
+  return new NextResponse(null, {
+    status: 200,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+    },
+  })
+}
+
+export async function CORS_GET() {
+  const response = NextResponse.json({ message: 'Hello' })
+
+  response.headers.set('Access-Control-Allow-Origin', '*')
+  response.headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
+  response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization')
+
+  return response
+}
+
+// ============================================================================
+// Example 9: Error Handling
+// ============================================================================
+
+export async function ERROR_HANDLING() {
+  try {
+    const data = await fetch('https://api.example.com/data')
+      .then(r => {
+        if (!r.ok) throw new Error('API request failed')
+        return r.json()
+      })
+
+    return NextResponse.json(data)
+  } catch (error) {
+    console.error('Error:', error)
+
+    return NextResponse.json(
+      { error: 'Internal Server Error' },
+      { status: 500 }
+    )
+  }
+}
+
+// ============================================================================
+// Example 10: Rate Limiting
+// ============================================================================
+
+const rateLimitMap = new Map<string, { count: number; resetAt: number }>()
+
+export async function RATE_LIMITED() {
+  const headersList = await headers()
+  const ip = headersList.get('x-forwarded-for') || 'unknown'
+  const now = Date.now()
+
+  const rateLimit = rateLimitMap.get(ip)
+
+  if (rateLimit) {
+    if (now < rateLimit.resetAt) {
+      if (rateLimit.count >= 10) {
+        return NextResponse.json(
+          { error: 'Too many requests' },
+          { status: 429 }
+        )
+      }
+      rateLimit.count++
+    } else {
+      rateLimitMap.set(ip, { count: 1, resetAt: now + 60000 })
+    }
+  } else {
+    rateLimitMap.set(ip, { count: 1, resetAt: now + 60000 })
+  }
+
+  return NextResponse.json({ message: 'Success' })
+}
+
+/**
+ * Summary:
+ *
+ * Route Handlers (app/api/*/route.ts):
+ * 1. ✅ Support all HTTP methods (GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS)
+ * 2. ✅ Await params in Next.js 16
+ * 3. ✅ Access cookies with await cookies()
+ * 4. ✅ Access headers with await headers()
+ * 5. ✅ Use NextResponse.json() for JSON responses
+ * 6. ✅ Return Response or NextResponse
+ *
+ * Common patterns:
+ * - CRUD operations (GET, POST, PATCH, DELETE)
+ * - Query parameters with searchParams
+ * - Authentication with cookies
+ * - Webhooks with signature verification
+ * - Streaming responses (SSE, WebSocket)
+ * - File uploads with FormData
+ * - CORS configuration
+ * - Error handling
+ * - Rate limiting
+ *
+ * Best practices:
+ * - Use try/catch for error handling
+ * - Return appropriate HTTP status codes
+ * - Validate input data
+ * - Set secure cookie options in production
+ * - Add rate limiting for public endpoints
+ * - Use CORS headers when needed
+ */
diff --git a/.cursor/skills/nextjs/templates/server-actions-form.tsx b/.cursor/skills/nextjs/templates/server-actions-form.tsx
new file mode 100644
index 0000000..6ff63b6
--- /dev/null
+++ b/.cursor/skills/nextjs/templates/server-actions-form.tsx
@@ -0,0 +1,534 @@
+/**
+ * Next.js 16 - Server Actions for Form Handling
+ *
+ * This template shows comprehensive Server Actions patterns including:
+ * - Basic form handling
+ * - Validation with Zod
+ * - Loading states
+ * - Error handling
+ * - Optimistic updates
+ * - File uploads
+ */
+
+'use server'
+
+import { z } from 'zod'
+import { revalidateTag } from 'next/cache'
+import { redirect } from 'next/navigation'
+
+// ============================================================================
+// Example 1: Basic Server Action
+// ============================================================================
+
+export async function createPost(formData: FormData) {
+  const title = formData.get('title') as string
+  const content = formData.get('content') as string
+
+  // Save to database
+  await fetch('https://api.example.com/posts', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ title, content }),
+  })
+
+  // Revalidate cache
+  revalidateTag('posts', 'max')
+
+  // Redirect to posts list
+  redirect('/posts')
+}
+
+// Basic form component
+export function CreatePostForm() {
+  return (
+    <form action={createPost}>
+      <label>
+        Title:
+        <input type="text" name="title" required />
+      </label>
+
+      <label>
+        Content:
+        <textarea name="content" required />
+      </label>
+
+      <button type="submit">Create Post</button>
+    </form>
+  )
+}
+
+// ============================================================================
+// Example 2: Server Action with Validation
+// ============================================================================
+
+const PostSchema = z.object({
+  title: z.string().min(3, 'Title must be at least 3 characters'),
+  content: z.string().min(10, 'Content must be at least 10 characters'),
+  tags: z.array(z.string()).min(1, 'At least one tag is required'),
+})
+
+type ActionState = {
+  errors?: {
+    title?: string[]
+    content?: string[]
+    tags?: string[]
+    _form?: string[]
+  }
+  success?: boolean
+}
+
+export async function createPostWithValidation(
+  prevState: ActionState,
+  formData: FormData
+): Promise<ActionState> {
+  // Parse form data
+  const rawData = {
+    title: formData.get('title'),
+    content: formData.get('content'),
+    tags: formData.get('tags')?.toString().split(',') || [],
+  }
+
+  // Validate
+  const parsed = PostSchema.safeParse(rawData)
+
+  if (!parsed.success) {
+    return {
+      errors: parsed.error.flatten().fieldErrors,
+    }
+  }
+
+  // Save to database
+  try {
+    await fetch('https://api.example.com/posts', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(parsed.data),
+    })
+
+    revalidateTag('posts', 'max')
+
+    return { success: true }
+  } catch (error) {
+    return {
+      errors: {
+        _form: ['Failed to create post. Please try again.'],
+      },
+    }
+  }
+}
+
+// Form with validation errors
+'use client'
+
+import { useFormState, useFormStatus } from 'react-dom'
+
+function SubmitButton() {
+  const { pending } = useFormStatus()
+
+  return (
+    <button type="submit" disabled={pending}>
+      {pending ? 'Creating...' : 'Create Post'}
+    </button>
+  )
+}
+
+export function ValidatedPostForm() {
+  const [state, formAction] = useFormState(createPostWithValidation, {})
+
+  return (
+    <form action={formAction}>
+      <div>
+        <label>
+          Title:
+          <input type="text" name="title" required />
+        </label>
+        {state.errors?.title && (
+          <p className="error">{state.errors.title[0]}</p>
+        )}
+      </div>
+
+      <div>
+        <label>
+          Content:
+          <textarea name="content" required />
+        </label>
+        {state.errors?.content && (
+          <p className="error">{state.errors.content[0]}</p>
+        )}
+      </div>
+
+      <div>
+        <label>
+          Tags (comma-separated):
+          <input type="text" name="tags" placeholder="nextjs, react, tutorial" />
+        </label>
+        {state.errors?.tags && (
+          <p className="error">{state.errors.tags[0]}</p>
+        )}
+      </div>
+
+      {state.errors?._form && (
+        <p className="error">{state.errors._form[0]}</p>
+      )}
+
+      {state.success && (
+        <p className="success">Post created successfully!</p>
+      )}
+
+      <SubmitButton />
+    </form>
+  )
+}
+
+// ============================================================================
+// Example 3: Server Action with Optimistic Updates
+// ============================================================================
+
+'use server'
+
+import { updateTag } from 'next/cache'
+
+export async function likePost(postId: string) {
+  await fetch(`https://api.example.com/posts/${postId}/like`, {
+    method: 'POST',
+  })
+
+  // Use updateTag for immediate refresh (read-your-writes)
+  updateTag('posts')
+}
+
+// Client component with optimistic updates
+'use client'
+
+import { useOptimistic } from 'react'
+import { likePost } from './actions'
+
+export function LikeButton({ postId, initialLikes }: { postId: string; initialLikes: number }) {
+  const [optimisticLikes, addOptimisticLike] = useOptimistic(
+    initialLikes,
+    (state, amount: number) => state + amount
+  )
+
+  async function handleLike() {
+    // Update UI immediately
+    addOptimisticLike(1)
+
+    // Sync with server
+    await likePost(postId)
+  }
+
+  return (
+    <button onClick={handleLike}>
+      ❤️ {optimisticLikes} likes
+    </button>
+  )
+}
+
+// ============================================================================
+// Example 4: Server Action with File Upload
+// ============================================================================
+
+'use server'
+
+import { writeFile } from 'fs/promises'
+import { join } from 'path'
+
+export async function uploadImage(formData: FormData) {
+  const file = formData.get('image') as File
+
+  if (!file) {
+    return { error: 'No file provided' }
+  }
+
+  // Validate file type
+  const validTypes = ['image/jpeg', 'image/png', 'image/webp']
+  if (!validTypes.includes(file.type)) {
+    return { error: 'Invalid file type. Only JPEG, PNG, and WebP are allowed.' }
+  }
+
+  // Validate file size (max 5MB)
+  const maxSize = 5 * 1024 * 1024 // 5MB
+  if (file.size > maxSize) {
+    return { error: 'File too large. Maximum size is 5MB.' }
+  }
+
+  // Save file
+  const bytes = await file.arrayBuffer()
+  const buffer = Buffer.from(bytes)
+  const filename = `${Date.now()}-${file.name}`
+  const path = join(process.cwd(), 'public', 'uploads', filename)
+
+  await writeFile(path, buffer)
+
+  return {
+    success: true,
+    url: `/uploads/${filename}`,
+  }
+}
+
+// File upload form
+'use client'
+
+import { useState } from 'react'
+import { uploadImage } from './actions'
+
+export function ImageUploadForm() {
+  const [preview, setPreview] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  async function handleSubmit(formData: FormData) {
+    const result = await uploadImage(formData)
+
+    if (result.error) {
+      setError(result.error)
+    } else if (result.url) {
+      setPreview(result.url)
+      setError(null)
+    }
+  }
+
+  return (
+    <form action={handleSubmit}>
+      <input
+        type="file"
+        name="image"
+        accept="image/jpeg,image/png,image/webp"
+        required
+      />
+
+      <button type="submit">Upload Image</button>
+
+      {error && <p className="error">{error}</p>}
+
+      {preview && (
+        <div>
+          <h3>Uploaded Image:</h3>
+          <img src={preview} alt="Uploaded" width={300} />
+        </div>
+      )}
+    </form>
+  )
+}
+
+// ============================================================================
+// Example 5: Server Action with Progressive Enhancement
+// ============================================================================
+
+'use server'
+
+export async function subscribe(formData: FormData) {
+  const email = formData.get('email') as string
+
+  await fetch('https://api.example.com/subscribe', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ email }),
+  })
+
+  return { success: true, message: 'Subscribed successfully!' }
+}
+
+// Form works without JavaScript (progressive enhancement)
+export function SubscribeForm() {
+  return (
+    <form action={subscribe}>
+      <input
+        type="email"
+        name="email"
+        placeholder="Enter your email"
+        required
+      />
+      <button type="submit">Subscribe</button>
+    </form>
+  )
+}
+
+// Enhanced with JavaScript
+'use client'
+
+import { useFormState } from 'react-dom'
+
+export function EnhancedSubscribeForm() {
+  const [state, formAction] = useFormState(subscribe, null)
+
+  return (
+    <form action={formAction}>
+      <input
+        type="email"
+        name="email"
+        placeholder="Enter your email"
+        required
+      />
+      <button type="submit">Subscribe</button>
+
+      {state?.success && (
+        <p className="success">{state.message}</p>
+      )}
+    </form>
+  )
+}
+
+// ============================================================================
+// Example 6: Server Action with Multi-Step Form
+// ============================================================================
+
+'use server'
+
+type Step1Data = { name: string; email: string }
+type Step2Data = { address: string; city: string }
+type FormData = Step1Data & Step2Data
+
+export async function submitMultiStepForm(data: FormData) {
+  // Validate all data
+  const schema = z.object({
+    name: z.string().min(2),
+    email: z.string().email(),
+    address: z.string().min(5),
+    city: z.string().min(2),
+  })
+
+  const parsed = schema.safeParse(data)
+
+  if (!parsed.success) {
+    return {
+      errors: parsed.error.flatten().fieldErrors,
+    }
+  }
+
+  // Save to database
+  await fetch('https://api.example.com/users', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(parsed.data),
+  })
+
+  return { success: true }
+}
+
+// Multi-step form component
+'use client'
+
+import { useState } from 'react'
+
+export function MultiStepForm() {
+  const [step, setStep] = useState(1)
+  const [formData, setFormData] = useState<Partial<FormData>>({})
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+
+    if (step === 1) {
+      const form = e.currentTarget
+      setFormData({
+        ...formData,
+        name: (form.elements.namedItem('name') as HTMLInputElement).value,
+        email: (form.elements.namedItem('email') as HTMLInputElement).value,
+      })
+      setStep(2)
+    } else {
+      const form = e.currentTarget
+      const finalData = {
+        ...formData,
+        address: (form.elements.namedItem('address') as HTMLInputElement).value,
+        city: (form.elements.namedItem('city') as HTMLInputElement).value,
+      } as FormData
+
+      const result = await submitMultiStepForm(finalData)
+
+      if (result.success) {
+        alert('Form submitted successfully!')
+      }
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      {step === 1 && (
+        <>
+          <h2>Step 1: Personal Info</h2>
+          <input name="name" placeholder="Name" defaultValue={formData.name} required />
+          <input name="email" type="email" placeholder="Email" defaultValue={formData.email} required />
+          <button type="submit">Next</button>
+        </>
+      )}
+
+      {step === 2 && (
+        <>
+          <h2>Step 2: Address</h2>
+          <input name="address" placeholder="Address" defaultValue={formData.address} required />
+          <input name="city" placeholder="City" defaultValue={formData.city} required />
+          <button type="button" onClick={() => setStep(1)}>Back</button>
+          <button type="submit">Submit</button>
+        </>
+      )}
+    </form>
+  )
+}
+
+// ============================================================================
+// Example 7: Server Action with Rate Limiting
+// ============================================================================
+
+'use server'
+
+import { headers } from 'next/headers'
+
+const rateLimitMap = new Map<string, { count: number; resetAt: number }>()
+
+export async function submitContactForm(formData: FormData) {
+  const headersList = await headers()
+  const ip = headersList.get('x-forwarded-for') || 'unknown'
+
+  // Check rate limit (5 requests per hour)
+  const now = Date.now()
+  const rateLimit = rateLimitMap.get(ip)
+
+  if (rateLimit) {
+    if (now < rateLimit.resetAt) {
+      if (rateLimit.count >= 5) {
+        return { error: 'Too many requests. Please try again later.' }
+      }
+      rateLimit.count++
+    } else {
+      // Reset rate limit
+      rateLimitMap.set(ip, { count: 1, resetAt: now + 3600000 }) // 1 hour
+    }
+  } else {
+    rateLimitMap.set(ip, { count: 1, resetAt: now + 3600000 })
+  }
+
+  // Process form
+  const name = formData.get('name') as string
+  const message = formData.get('message') as string
+
+  await fetch('https://api.example.com/contact', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ name, message }),
+  })
+
+  return { success: true }
+}
+
+/**
+ * Summary:
+ *
+ * Server Actions patterns:
+ * 1. ✅ Basic form handling with formData
+ * 2. ✅ Validation with Zod (safeParse)
+ * 3. ✅ Loading states with useFormStatus
+ * 4. ✅ Error handling with useFormState
+ * 5. ✅ Optimistic updates with useOptimistic
+ * 6. ✅ File uploads
+ * 7. ✅ Progressive enhancement (works without JS)
+ * 8. ✅ Multi-step forms
+ * 9. ✅ Rate limiting
+ *
+ * Best practices:
+ * - Always validate on server (never trust client input)
+ * - Use revalidateTag() for background revalidation
+ * - Use updateTag() for immediate refresh (forms, settings)
+ * - Return errors instead of throwing (better UX)
+ * - Use TypeScript for type safety
+ * - Add rate limiting for public forms
+ */
diff --git a/.cursor/skills/problem-solving/SKILL.md b/.cursor/skills/problem-solving/SKILL.md
new file mode 100644
index 0000000..108a109
--- /dev/null
+++ b/.cursor/skills/problem-solving/SKILL.md
@@ -0,0 +1,66 @@
+---
+name: problem-solving
+description: Default problem-solving policy. Use for architecture and implementation decisions, including features, bug fixes and refactorings.
+---
+
+# Simplicity First
+
+## Operating Principle
+Default to the **simplest option that ships safely**:
+- least code
+- fewest moving parts
+- fewest dependencies
+- clearest mental model
+- easiest to delete later
+
+If two options are both “good enough”, pick the one that is **simpler to reason about** and **cheaper to change**.
+
+---
+
+## Mandatory Pre-Implementation Pause (Do this before writing code)
+Ask yourself:
+
+1) **Is there a simpler way?**  
+   Can this be done with less code, fewer components, fewer abstractions, fewer deps?
+
+2) **Do I really need this?**  
+   If the requirement is unclear, confirm it instead of building “just in case”.
+
+If any requirement is ambiguous, ask **one** targeted question before implementing.
+
+---
+
+## Challenge Your First Instinct (Required)
+Before committing to a solution:
+- Write down **Option A / B / C** (2–3 viable approaches).
+- Pick the simplest option that meets the actual requirement.
+- If you choose a more complex option, explicitly justify why the simpler options fail.
+
+---
+
+## Prefer Built-ins Over Custom Code
+Use framework/platform features first:
+- Use built-in APIs, conventions, and primitives before inventing utilities, hooks, or state layers.
+- Only introduce a custom abstraction if it:
+  - removes repeated complexity, **and**
+  - has a clear “delete path”, **and**
+  - you can show at least **two** call sites (or a near-term second one).
+
+---
+
+## Avoid Premature Optimization
+Do **not** add complexity for hypothetical futures:
+- no “maybe we’ll need it later” layers
+- no speculative caching, message buses, CQRS, or global state without a real pressure signal
+- no new dependency unless it buys clear, immediate value
+
+If performance is a concern, measure first (or add a minimal probe), then optimize the bottleneck.
+
+---
+
+## Anti-Patterns (Hard “No” unless proven necessary)
+- Adding abstractions with a single call site
+- Introducing new dependencies “because it’s common”
+- Building a generalized framework when a small function solves the task
+- Turning simple flows into event-driven architectures without pressure
+- Adding caching, batching, queues, or CQRS when a straightforward request/response works
diff --git a/.cursor/skills/react-hook-form-zod/.claude-plugin/plugin.json b/.cursor/skills/react-hook-form-zod/.claude-plugin/plugin.json
new file mode 100644
index 0000000..95cc43a
--- /dev/null
+++ b/.cursor/skills/react-hook-form-zod/.claude-plugin/plugin.json
@@ -0,0 +1,12 @@
+{
+  "name": "react-hook-form-zod",
+  "description": "Build type-safe validated forms using React Hook Form v7 and Zod v4. Single schema works on client and server with full TypeScript inference via z.infer. Use when building forms, multi-step wizards, or fixing uncontrolled warnings, resolver errors, useFieldArray issues.",
+  "version": "1.0.0",
+  "author": {
+    "name": "Jeremy Dawes",
+    "email": "jeremy@jezweb.net"
+  },
+  "license": "MIT",
+  "repository": "https://github.com/jezweb/claude-skills",
+  "keywords": []
+}
diff --git a/.cursor/skills/react-hook-form-zod/SKILL.md b/.cursor/skills/react-hook-form-zod/SKILL.md
new file mode 100644
index 0000000..b6e8215
--- /dev/null
+++ b/.cursor/skills/react-hook-form-zod/SKILL.md
@@ -0,0 +1,412 @@
+---
+name: react-hook-form-zod
+description: |
+  Build type-safe validated forms using React Hook Form v7 and Zod v4. Single schema works on client and server with full TypeScript inference via z.infer.
+
+  Use when building forms, multi-step wizards, or fixing uncontrolled warnings, resolver errors, useFieldArray issues, performance problems with large forms.
+user-invocable: true
+---
+
+# React Hook Form + Zod Validation
+
+**Status**: Production Ready ✅
+**Last Verified**: 2026-01-20
+**Latest Versions**: react-hook-form@7.71.1, zod@4.3.5, @hookform/resolvers@5.2.2
+
+---
+
+## Quick Start
+
+```bash
+npm install react-hook-form@7.70.0 zod@4.3.5 @hookform/resolvers@5.2.2
+```
+
+**Basic Form Pattern**:
+```typescript
+const schema = z.object({
+  email: z.string().email(),
+  password: z.string().min(8),
+})
+
+type FormData = z.infer<typeof schema>
+
+const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
+  resolver: zodResolver(schema),
+  defaultValues: { email: '', password: '' }, // REQUIRED to prevent uncontrolled warnings
+})
+
+<form onSubmit={handleSubmit(onSubmit)}>
+  <input {...register('email')} />
+  {errors.email && <span role="alert">{errors.email.message}</span>}
+</form>
+```
+
+**Server Validation** (CRITICAL - never skip):
+```typescript
+// SAME schema on server
+const data = schema.parse(await req.json())
+```
+
+---
+
+## Key Patterns
+
+**useForm Options** (validation modes):
+- `mode: 'onSubmit'` (default) - Best performance
+- `mode: 'onBlur'` - Good balance
+- `mode: 'onChange'` - Live feedback, more re-renders
+- `shouldUnregister: true` - Remove field data when unmounted (use for multi-step forms)
+
+**Zod Refinements** (cross-field validation):
+```typescript
+z.object({ password: z.string(), confirm: z.string() })
+  .refine((data) => data.password === data.confirm, {
+    message: "Passwords don't match",
+    path: ['confirm'], // CRITICAL: Error appears on this field
+  })
+```
+
+**Zod Transforms**:
+```typescript
+z.string().transform((val) => val.toLowerCase()) // Data manipulation
+z.string().transform(parseInt).refine((v) => v > 0) // Chain with refine
+```
+
+**Zod v4.3.0+ Features**:
+```typescript
+// Exact optional (can omit field, but NOT undefined)
+z.string().exactOptional()
+
+// Exclusive union (exactly one must match)
+z.xor([z.string(), z.number()])
+
+// Import from JSON Schema
+z.fromJSONSchema({ type: "object", properties: { name: { type: "string" } } })
+```
+
+**zodResolver** connects Zod to React Hook Form, preserving type safety
+
+---
+
+## Registration
+
+**register** (for standard HTML inputs):
+```typescript
+<input {...register('email')} /> // Uncontrolled, best performance
+```
+
+**Controller** (for third-party components):
+```typescript
+<Controller
+  name="category"
+  control={control}
+  render={({ field }) => <CustomSelect {...field} />} // MUST spread {...field}
+/>
+```
+
+**When to use Controller**: React Select, date pickers, custom components without ref. Otherwise use `register`.
+
+---
+
+## Error Handling
+
+**Display errors**:
+```typescript
+{errors.email && <span role="alert">{errors.email.message}</span>}
+{errors.address?.street?.message} // Nested errors (use optional chaining)
+```
+
+**Server errors**:
+```typescript
+const onSubmit = async (data) => {
+  const res = await fetch('/api/submit', { method: 'POST', body: JSON.stringify(data) })
+  if (!res.ok) {
+    const { errors: serverErrors } = await res.json()
+    Object.entries(serverErrors).forEach(([field, msg]) => setError(field, { message: msg }))
+  }
+}
+```
+
+---
+
+## Advanced Patterns
+
+**useFieldArray** (dynamic lists):
+```typescript
+const { fields, append, remove } = useFieldArray({ control, name: 'contacts' })
+
+{fields.map((field, index) => (
+  <div key={field.id}> {/* CRITICAL: Use field.id, NOT index */}
+    <input {...register(`contacts.${index}.name` as const)} />
+    {errors.contacts?.[index]?.name && <span>{errors.contacts[index].name.message}</span>}
+    <button onClick={() => remove(index)}>Remove</button>
+  </div>
+))}
+<button onClick={() => append({ name: '', email: '' })}>Add</button>
+```
+
+**Async Validation** (debounce):
+```typescript
+const debouncedValidation = useDebouncedCallback(() => trigger('username'), 500)
+```
+
+**Multi-Step Forms**:
+```typescript
+const step1 = z.object({ name: z.string(), email: z.string().email() })
+const step2 = z.object({ address: z.string() })
+const fullSchema = step1.merge(step2)
+
+const nextStep = async () => {
+  const isValid = await trigger(['name', 'email']) // Validate specific fields
+  if (isValid) setStep(2)
+}
+```
+
+**Conditional Validation**:
+```typescript
+z.discriminatedUnion('accountType', [
+  z.object({ accountType: z.literal('personal'), name: z.string() }),
+  z.object({ accountType: z.literal('business'), companyName: z.string() }),
+])
+```
+
+**Conditional Fields with shouldUnregister**:
+```typescript
+const form = useForm({
+  resolver: zodResolver(schema),
+  shouldUnregister: false, // Keep values when fields unmount (default)
+})
+
+// Or use conditional schema validation:
+z.object({
+  showAddress: z.boolean(),
+  address: z.string(),
+}).refine((data) => {
+  if (data.showAddress) {
+    return data.address.length > 0;
+  }
+  return true;
+}, {
+  message: "Address is required",
+  path: ["address"],
+})
+```
+
+---
+
+## shadcn/ui Integration
+
+**Note**: shadcn/ui deprecated the Form component. Use the Field component for new implementations (check latest docs).
+
+**Common Import Mistake**: IDEs/AI may auto-import `Form` from "react-hook-form" instead of from shadcn. Always import:
+```typescript
+// ✅ Correct:
+import { useForm } from "react-hook-form";
+import { Form, FormField, FormItem } from "@/components/ui/form"; // shadcn
+
+// ❌ Wrong (auto-import mistake):
+import { useForm, Form } from "react-hook-form";
+```
+
+**Legacy Form component**:
+```typescript
+<FormField control={form.control} name="username" render={({ field }) => (
+  <FormItem>
+    <FormControl><Input {...field} /></FormControl>
+    <FormMessage />
+  </FormItem>
+)} />
+```
+
+---
+
+## Performance
+
+- Use `register` (uncontrolled) over `Controller` (controlled) for standard inputs
+- Use `watch('email')` not `watch()` (isolates re-renders to specific fields)
+- `shouldUnregister: true` for multi-step forms (clears data on unmount)
+
+### Large Forms (300+ Fields)
+
+**Warning**: Forms with 300+ fields using a resolver (Zod/Yup) AND reading `formState` properties can freeze for 10-15 seconds during registration. ([Issue #13129](https://github.com/react-hook-form/react-hook-form/issues/13129))
+
+**Performance Characteristics**:
+- Clean (no resolver, no formState read): Almost immediate
+- With resolver only: Almost immediate
+- With formState read only: Almost immediate
+- With BOTH resolver + formState read: ~9.5 seconds for 300 fields
+
+**Workarounds**:
+
+1. **Avoid destructuring formState** - Read properties inline only when needed:
+```typescript
+// ❌ Slow with 300+ fields:
+const { isDirty, isValid } = form.formState;
+
+// ✅ Fast:
+const handleSubmit = () => {
+  if (!form.formState.isValid) return; // Read inline only when needed
+};
+```
+
+2. **Use mode: "onSubmit"** - Don't validate on every change:
+```typescript
+const form = useForm({
+  resolver: zodResolver(largeSchema),
+  mode: "onSubmit", // Validate only on submit, not onChange
+});
+```
+
+3. **Split into sub-forms** - Multiple smaller forms with separate schemas:
+```typescript
+// Instead of one 300-field form, use 5-6 forms with 50-60 fields each
+const form1 = useForm({ resolver: zodResolver(schema1) }); // Fields 1-50
+const form2 = useForm({ resolver: zodResolver(schema2) }); // Fields 51-100
+```
+
+4. **Lazy render fields** - Use tabs/accordion to mount only visible fields:
+```typescript
+// Only mount fields for active tab, reduces initial registration time
+{activeTab === 'personal' && <PersonalInfoFields />}
+{activeTab === 'address' && <AddressFields />}
+```
+
+---
+
+## Critical Rules
+
+✅ **Always set defaultValues** (prevents uncontrolled→controlled warnings)
+
+✅ **Validate on BOTH client and server** (client can be bypassed - security!)
+
+✅ **Use `field.id` as key** in useFieldArray (not index)
+
+✅ **Spread `{...field}`** in Controller render
+
+✅ **Use `z.infer<typeof schema>`** for type inference
+
+❌ **Never skip server validation** (security vulnerability)
+
+❌ **Never mutate values directly** (use `setValue()`)
+
+❌ **Never mix controlled + uncontrolled** patterns
+
+❌ **Never use index as key** in useFieldArray
+
+---
+
+## Known Issues (20 Prevented)
+
+1. **Zod v4 Type Inference** - [#13109](https://github.com/react-hook-form/react-hook-form/issues/13109): Use `z.infer<typeof schema>` explicitly. Resolved in v7.66.x+. **Note**: @hookform/resolvers has TypeScript compatibility issues with Zod v4 ([#813](https://github.com/react-hook-form/resolvers/issues/813)). Workaround: Use `import { z } from 'zod/v3'` or wait for resolver update.
+
+2. **Uncontrolled→Controlled Warning** - Always set `defaultValues` for all fields
+
+3. **Nested Object Errors** - Use optional chaining: `errors.address?.street?.message`
+
+4. **Array Field Re-renders** - Use `key={field.id}` in useFieldArray (not index)
+
+5. **Async Validation Race Conditions** - Debounce validation, cancel pending requests
+
+6. **Server Error Mapping** - Use `setError()` to map server errors to fields
+
+7. **Default Values Not Applied** - Set `defaultValues` in useForm options (not useState)
+
+8. **Controller Field Not Updating** - Always spread `{...field}` in render function
+
+9. **useFieldArray Key Warnings** - Use `field.id` as key (not index)
+
+10. **Schema Refinement Error Paths** - Specify `path` in refinement: `refine(..., { path: ['fieldName'] })`
+
+11. **Transform vs Preprocess** - Use `transform` for output, `preprocess` for input
+
+12. **Multiple Resolver Conflicts** - Use single resolver (zodResolver), combine schemas if needed
+
+13. **Zod v4 Optional Fields Bug** - [#13102](https://github.com/react-hook-form/react-hook-form/issues/13102): Setting optional fields (`.optional()`) to empty string `""` incorrectly triggers validation errors. Workarounds: Use `.nullish()`, `.or(z.literal(""))`, or `z.preprocess((val) => val === "" ? undefined : val, z.email().optional())`
+
+14. **useFieldArray Primitive Arrays Not Supported** - [#12570](https://github.com/react-hook-form/react-hook-form/issues/12570): Design limitation. `useFieldArray` only works with arrays of objects, not primitives like `string[]`. Workaround: Wrap primitives in objects: `[{ value: "string" }]` instead of `["string"]`
+
+15. **useFieldArray SSR ID Mismatch** - [#12782](https://github.com/react-hook-form/react-hook-form/issues/12782): Hydration mismatch warnings with SSR (Remix, Next.js). Field IDs generated on server don't match client. Workaround: Use client-only rendering for field arrays or wait for V8 (uses deterministic `key`)
+
+16. **Next.js 16 reset() Validation Bug** - [#13110](https://github.com/react-hook-form/react-hook-form/issues/13110): Calling `form.reset()` after Server Actions submission causes validation errors on next submit. Fixed in v7.65.0+. Before fix: Use `setValue()` instead of `reset()`
+
+17. **Validation Race Condition** - [#13156](https://github.com/react-hook-form/react-hook-form/issues/13156): During resolver validation, intermediate render where `isValidating=false` but `errors` not populated yet. Don't derive validity from errors alone. Use: `!errors.field && !isValidating`
+
+18. **ZodError Thrown in Beta Versions** - [#12816](https://github.com/react-hook-form/react-hook-form/issues/12816): Zod v4 beta versions throw `ZodError` directly instead of capturing in `formState.errors`. Fixed in stable Zod v4.1.x+. Avoid beta versions
+
+19. **Large Form Performance** - [#13129](https://github.com/react-hook-form/react-hook-form/issues/13129): 300+ fields with resolver + formState read freezes for 10-15 seconds. See Performance section for 4 workarounds
+
+20. **shadcn Form Import Confusion** - IDEs/AI may auto-import `Form` from "react-hook-form" instead of shadcn. Always import `Form` components from `@/components/ui/form`
+
+---
+
+## Upcoming Changes in V8 (Beta)
+
+React Hook Form v8 (currently in beta as of v8.0.0-beta.1, released 2026-01-11) introduces breaking changes. [RFC Discussion #7433](https://github.com/orgs/react-hook-form/discussions/7433)
+
+**Breaking Changes**:
+
+1. **useFieldArray: `id` → `key`**:
+```typescript
+// V7:
+const { fields } = useFieldArray({ control, name: "items" });
+fields.map(field => <div key={field.id}>...</div>)
+
+// V8:
+const { fields } = useFieldArray({ control, name: "items" });
+fields.map(field => <div key={field.key}>...</div>)
+// keyName prop removed
+```
+
+2. **Watch component: `names` → `name`**:
+```typescript
+// V7:
+<Watch names={["email", "password"]} />
+
+// V8:
+<Watch name={["email", "password"]} />
+```
+
+3. **watch() callback API removed**:
+```typescript
+// V7:
+watch((data, { name, type }) => {
+  console.log(data, name, type);
+});
+
+// V8: Use useWatch or manual subscription
+const data = useWatch({ control });
+useEffect(() => {
+  console.log(data);
+}, [data]);
+```
+
+4. **setValue() no longer updates useFieldArray**:
+```typescript
+// V7:
+setValue("items", newArray); // Updates field array
+
+// V8: Must use replace() API
+const { replace } = useFieldArray({ control, name: "items" });
+replace(newArray);
+```
+
+**V8 Benefits**:
+- Fixes SSR hydration mismatch (deterministic `key` instead of random `id`)
+- Improved performance
+- Better TypeScript inference
+
+**Migration Timeline**: V8 is in beta. Stable release date TBD. Monitor [releases](https://github.com/react-hook-form/react-hook-form/releases) for stable version.
+
+---
+
+## Bundled Resources
+
+**Templates**: basic-form.tsx, advanced-form.tsx, shadcn-form.tsx, server-validation.ts, async-validation.tsx, dynamic-fields.tsx, multi-step-form.tsx, package.json
+
+**References**: zod-schemas-guide.md, rhf-api-reference.md, error-handling.md, performance-optimization.md, shadcn-integration.md, top-errors.md
+
+**Docs**: https://react-hook-form.com/ | https://zod.dev/ | https://ui.shadcn.com/docs/components/form
+
+---
+
+**License**: MIT | **Last Verified**: 2026-01-20 | **Skill Version**: 2.1.0 | **Changes**: Added 8 new known issues (Zod v4 optional fields bug, useFieldArray primitives limitation, SSR hydration mismatch, performance guidance for large forms, Next.js 16 reset() bug, validation race condition, ZodError thrown in beta, shadcn import confusion), added Zod v4.3.0 features (.exactOptional(), .xor(), z.fromJSONSchema()), added conditional field patterns with shouldUnregister, added V8 beta breaking changes section, expanded Zod v4 resolver compatibility notes, updated to react-hook-form@7.71.1
diff --git a/.cursor/skills/react-hook-form-zod/references/accessibility.md b/.cursor/skills/react-hook-form-zod/references/accessibility.md
new file mode 100644
index 0000000..942486a
--- /dev/null
+++ b/.cursor/skills/react-hook-form-zod/references/accessibility.md
@@ -0,0 +1,359 @@
+# Accessibility (a11y) Best Practices
+
+Complete guide for building accessible forms.
+
+---
+
+## WCAG Compliance
+
+### Required Elements
+
+1. **Labels** - Every input must have a label
+2. **Error Messages** - Must be accessible to screen readers
+3. **Focus Management** - Errors should be announced
+4. **Keyboard Navigation** - Full keyboard support
+
+---
+
+## ARIA Attributes
+
+### Essential ARIA
+
+```typescript
+<input
+  id="email"
+  type="email"
+  {...register('email')}
+  aria-invalid={errors.email ? 'true' : 'false'}
+  aria-describedby={errors.email ? 'email-error' : 'email-hint'}
+  aria-required="true"
+/>
+
+<span id="email-hint">We'll never share your email</span>
+
+{errors.email && (
+  <span id="email-error" role="alert">
+    {errors.email.message}
+  </span>
+)}
+```
+
+### Live Regions for Error Announcements
+
+```typescript
+{Object.keys(errors).length > 0 && (
+  <div role="alert" aria-live="assertive" aria-atomic="true">
+    Form has {Object.keys(errors).length} errors. Please review.
+  </div>
+)}
+```
+
+---
+
+## Focus Management
+
+### Focus First Error
+
+```typescript
+import { useEffect, useRef } from 'react'
+
+const firstErrorRef = useRef<HTMLInputElement>(null)
+
+useEffect(() => {
+  if (Object.keys(errors).length > 0) {
+    firstErrorRef.current?.focus()
+  }
+}, [errors])
+
+// In JSX
+<input
+  ref={Object.keys(errors)[0] === 'email' ? firstErrorRef : undefined}
+  {...register('email')}
+/>
+```
+
+### Using setFocus
+
+```typescript
+const onSubmit = async (data) => {
+  try {
+    await submitData(data)
+  } catch (error) {
+    setFocus('email') // Focus field programmatically
+  }
+}
+```
+
+---
+
+## Label Association
+
+### Explicit Labels
+
+```typescript
+<label htmlFor="email">Email Address</label>
+<input id="email" {...register('email')} />
+```
+
+### aria-label (When Visual Label Not Possible)
+
+```typescript
+<input
+  {...register('search')}
+  aria-label="Search products"
+  placeholder="Search..."
+/>
+```
+
+### aria-labelledby (Multiple Labels)
+
+```typescript
+<h3 id="billing-heading">Billing Address</h3>
+<input
+  {...register('billingStreet')}
+  aria-labelledby="billing-heading billing-street-label"
+/>
+<span id="billing-street-label">Street</span>
+```
+
+---
+
+## Required Fields
+
+### Visual Indicator
+
+```typescript
+<label htmlFor="email">
+  Email <span aria-label="required">*</span>
+</label>
+<input
+  id="email"
+  {...register('email')}
+  aria-required="true"
+  required
+/>
+```
+
+### Legend for Required Fields
+
+```typescript
+<p className="required-legend">
+  <span aria-label="required">*</span> Required field
+</p>
+```
+
+---
+
+## Error Messaging
+
+### Accessible Error Pattern
+
+```typescript
+<div>
+  <label htmlFor="password">Password</label>
+  <input
+    id="password"
+    type="password"
+    {...register('password')}
+    aria-invalid={errors.password ? 'true' : 'false'}
+    aria-describedby={errors.password ? 'password-error' : 'password-hint'}
+  />
+
+  <span id="password-hint" className="hint">
+    Must be at least 8 characters
+  </span>
+
+  {errors.password && (
+    <span id="password-error" role="alert" className="error">
+      {errors.password.message}
+    </span>
+  )}
+</div>
+```
+
+---
+
+## Fieldsets and Legends
+
+### Grouping Related Fields
+
+```typescript
+<fieldset>
+  <legend>Contact Information</legend>
+
+  <div>
+    <label htmlFor="firstName">First Name</label>
+    <input id="firstName" {...register('firstName')} />
+  </div>
+
+  <div>
+    <label htmlFor="lastName">Last Name</label>
+    <input id="lastName" {...register('lastName')} />
+  </div>
+</fieldset>
+```
+
+### Radio Groups
+
+```typescript
+<fieldset>
+  <legend>Choose your plan</legend>
+
+  <div>
+    <input
+      id="plan-basic"
+      type="radio"
+      value="basic"
+      {...register('plan')}
+    />
+    <label htmlFor="plan-basic">Basic</label>
+  </div>
+
+  <div>
+    <input
+      id="plan-pro"
+      type="radio"
+      value="pro"
+      {...register('plan')}
+    />
+    <label htmlFor="plan-pro">Pro</label>
+  </div>
+</fieldset>
+```
+
+---
+
+## Keyboard Navigation
+
+### Tab Order
+
+```typescript
+// Ensure logical tab order with tabindex (use sparingly)
+<input {...register('email')} tabIndex={1} />
+<input {...register('password')} tabIndex={2} />
+<button type="submit" tabIndex={3}>Submit</button>
+```
+
+### Skip Links
+
+```typescript
+<a href="#main-form" className="skip-link">
+  Skip to form
+</a>
+
+<form id="main-form">
+  {/* ... */}
+</form>
+```
+
+---
+
+## Button Accessibility
+
+### Submit Button States
+
+```typescript
+<button
+  type="submit"
+  disabled={isSubmitting}
+  aria-busy={isSubmitting ? 'true' : 'false'}
+  aria-live="polite"
+>
+  {isSubmitting ? 'Submitting...' : 'Submit Form'}
+</button>
+```
+
+### Icon Buttons
+
+```typescript
+<button type="button" aria-label="Remove item" onClick={remove}>
+  <TrashIcon aria-hidden="true" />
+</button>
+```
+
+---
+
+## Screen Reader Announcements
+
+### Status Messages
+
+```typescript
+{isSubmitSuccessful && (
+  <div role="status" aria-live="polite">
+    Form submitted successfully!
+  </div>
+)}
+```
+
+### Loading States
+
+```typescript
+{isSubmitting && (
+  <div role="status" aria-live="polite">
+    Submitting form, please wait...
+  </div>
+)}
+```
+
+---
+
+## Color Contrast
+
+### WCAG AA Standards
+
+- Normal text: 4.5:1 minimum
+- Large text: 3:1 minimum
+- UI components: 3:1 minimum
+
+```css
+/* Good contrast examples */
+.error {
+  color: #c41e3a; /* Red */
+  background: #ffffff; /* White */
+  /* Contrast ratio: 5.77:1 ✓ */
+}
+
+.button {
+  color: #ffffff;
+  background: #0066cc;
+  /* Contrast ratio: 7.33:1 ✓ */
+}
+```
+
+---
+
+## Testing
+
+### Automated Testing Tools
+
+- **axe DevTools** - Browser extension
+- **Lighthouse** - Chrome DevTools
+- **WAVE** - Web accessibility evaluation tool
+
+### Manual Testing
+
+1. **Keyboard Navigation** - Tab through entire form
+2. **Screen Reader** - Test with NVDA (Windows) or VoiceOver (Mac)
+3. **Zoom** - Test at 200% zoom
+4. **High Contrast** - Test in high contrast mode
+
+---
+
+## Accessibility Checklist
+
+- [ ] All inputs have associated labels
+- [ ] Required fields are marked with aria-required
+- [ ] Error messages use role="alert"
+- [ ] Errors have aria-describedby linking to error text
+- [ ] Form has clear heading structure
+- [ ] Keyboard navigation works completely
+- [ ] Focus is managed appropriately
+- [ ] Color is not the only indicator of errors
+- [ ] Contrast ratios meet WCAG AA standards
+- [ ] Screen reader testing completed
+
+---
+
+**Resources**:
+- WCAG Guidelines: https://www.w3.org/WAI/WCAG21/quickref/
+- React Hook Form a11y: https://react-hook-form.com/advanced-usage#AccessibilityA11y
diff --git a/.cursor/skills/react-hook-form-zod/references/error-handling.md b/.cursor/skills/react-hook-form-zod/references/error-handling.md
new file mode 100644
index 0000000..50ded6f
--- /dev/null
+++ b/.cursor/skills/react-hook-form-zod/references/error-handling.md
@@ -0,0 +1,255 @@
+# Error Handling Guide
+
+Complete guide for handling and displaying form errors.
+
+---
+
+## Error Display Patterns
+
+### 1. Inline Errors (Recommended)
+
+```typescript
+<input {...register('email')} />
+{errors.email && (
+  <span role="alert" className="text-red-600">
+    {errors.email.message}
+  </span>
+)}
+```
+
+### 2. Error Summary (Accessibility Best Practice)
+
+```typescript
+{Object.keys(errors).length > 0 && (
+  <div role="alert" aria-live="assertive" className="error-summary">
+    <h3>Please fix the following errors:</h3>
+    <ul>
+      {Object.entries(errors).map(([field, error]) => (
+        <li key={field}>
+          <strong>{field}:</strong> {error.message}
+        </li>
+      ))}
+    </ul>
+  </div>
+)}
+```
+
+### 3. Toast Notifications
+
+```typescript
+const onError = (errors) => {
+  toast.error(`Please fix ${Object.keys(errors).length} errors`)
+}
+
+<form onSubmit={handleSubmit(onSubmit, onError)}>
+```
+
+---
+
+## ARIA Attributes
+
+### Required Attributes
+
+```typescript
+<input
+  {...register('email')}
+  aria-invalid={errors.email ? 'true' : 'false'}
+  aria-describedby={errors.email ? 'email-error' : undefined}
+  aria-required="true"
+/>
+{errors.email && (
+  <span id="email-error" role="alert">
+    {errors.email.message}
+  </span>
+)}
+```
+
+---
+
+## Custom Error Messages
+
+### Method 1: In Zod Schema
+
+```typescript
+const schema = z.object({
+  email: z.string()
+    .min(1, 'Email is required')
+    .email('Please enter a valid email address'),
+  password: z.string()
+    .min(8, { message: 'Password must be at least 8 characters long' }),
+})
+```
+
+### Method 2: Custom Error Map
+
+```typescript
+const customErrorMap: z.ZodErrorMap = (issue, ctx) => {
+  switch (issue.code) {
+    case z.ZodIssueCode.too_small:
+      return { message: `Must be at least ${issue.minimum} characters` }
+    case z.ZodIssueCode.invalid_string:
+      if (issue.validation === 'email') {
+        return { message: 'Please enter a valid email address' }
+      }
+      break
+    default:
+      return { message: ctx.defaultError }
+  }
+}
+
+z.setErrorMap(customErrorMap)
+```
+
+---
+
+## Error Formatting
+
+### Flatten Errors for Forms
+
+```typescript
+try {
+  schema.parse(data)
+} catch (error) {
+  if (error instanceof z.ZodError) {
+    const formattedErrors = error.flatten().fieldErrors
+    // Result: { email: ['Invalid email'], password: ['Too short'] }
+  }
+}
+```
+
+### Format Errors for Display
+
+```typescript
+const formatError = (error: FieldError): string => {
+  switch (error.type) {
+    case 'required':
+      return 'This field is required'
+    case 'min':
+      return `Minimum length is ${error.message}`
+    case 'pattern':
+      return 'Invalid format'
+    default:
+      return error.message || 'Invalid value'
+  }
+}
+```
+
+---
+
+## Server Error Integration
+
+```typescript
+const onSubmit = async (data) => {
+  try {
+    const response = await fetch('/api/submit', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    })
+
+    const result = await response.json()
+
+    if (!result.success && result.errors) {
+      // Map server errors to form fields
+      Object.entries(result.errors).forEach(([field, message]) => {
+        setError(field, {
+          type: 'server',
+          message: Array.isArray(message) ? message[0] : message,
+        })
+      })
+    }
+  } catch (error) {
+    // Network error
+    setError('root', {
+      type: 'server',
+      message: 'Unable to connect. Please try again.',
+    })
+  }
+}
+```
+
+---
+
+## Error Persistence
+
+### Clear Errors on Input Change
+
+```typescript
+<input
+  {...register('email')}
+  onChange={(e) => {
+    register('email').onChange(e)
+    clearErrors('email') // Clear error when user starts typing
+  }}
+/>
+```
+
+### Clear All Errors on Submit Success
+
+```typescript
+const onSubmit = async (data) => {
+  const success = await submitData(data)
+  if (success) {
+    reset() // Clears form and errors
+  }
+}
+```
+
+---
+
+## Internationalization (i18n)
+
+```typescript
+import { useTranslation } from 'react-i18next'
+
+const { t } = useTranslation()
+
+const schema = z.object({
+  email: z.string().email(t('errors.invalidEmail')),
+  password: z.string().min(8, t('errors.passwordTooShort')),
+})
+```
+
+---
+
+## Error Components
+
+### Reusable Error Display
+
+```typescript
+function FormError({ error }: { error?: FieldError }) {
+  if (!error) return null
+
+  return (
+    <div role="alert" className="error">
+      <svg className="icon">...</svg>
+      <span>{error.message}</span>
+    </div>
+  )
+}
+
+// Usage
+<FormError error={errors.email} />
+```
+
+### Field Group with Error
+
+```typescript
+function FieldGroup({ name, label, type = 'text', register, errors }) {
+  return (
+    <div className="field-group">
+      <label htmlFor={name}>{label}</label>
+      <input
+        id={name}
+        type={type}
+        {...register(name)}
+        aria-invalid={errors[name] ? 'true' : 'false'}
+      />
+      {errors[name] && <FormError error={errors[name]} />}
+    </div>
+  )
+}
+```
+
+---
+
+**Official Docs**: https://react-hook-form.com/
diff --git a/.cursor/skills/react-hook-form-zod/references/links-to-official-docs.md b/.cursor/skills/react-hook-form-zod/references/links-to-official-docs.md
new file mode 100644
index 0000000..8551040
--- /dev/null
+++ b/.cursor/skills/react-hook-form-zod/references/links-to-official-docs.md
@@ -0,0 +1,197 @@
+# Links to Official Documentation
+
+Organized links to official documentation and resources.
+
+---
+
+## React Hook Form
+
+### Core Documentation
+- **Main Site**: https://react-hook-form.com/
+- **Get Started**: https://react-hook-form.com/get-started
+- **API Reference**: https://react-hook-form.com/api
+- **TS Support**: https://react-hook-form.com/ts
+
+### Hooks
+- **useForm**: https://react-hook-form.com/api/useform
+- **useController**: https://react-hook-form.com/api/usecontroller
+- **useFieldArray**: https://react-hook-form.com/api/usefieldarray
+- **useWatch**: https://react-hook-form.com/api/usewatch
+- **useFormContext**: https://react-hook-form.com/api/useformcontext
+- **useFormState**: https://react-hook-form.com/api/useformstate
+- **Controller**: https://react-hook-form.com/api/controller
+
+### Advanced Usage
+- **Smart Form Component**: https://react-hook-form.com/advanced-usage#SmartFormComponent
+- **Error Messages**: https://react-hook-form.com/advanced-usage#ErrorMessages
+- **Accessibility**: https://react-hook-form.com/advanced-usage#AccessibilityA11y
+- **Performance**: https://react-hook-form.com/advanced-usage#PerformanceOptimization
+- **Schema Validation**: https://react-hook-form.com/advanced-usage#SchemaValidation
+
+### Examples
+- **Examples Library**: https://react-hook-form.com/form-builder
+- **CodeSandbox Examples**: https://codesandbox.io/examples/package/react-hook-form
+
+---
+
+## Zod
+
+### Core Documentation
+- **Main Site**: https://zod.dev/
+- **Installation**: https://zod.dev/#installation
+- **Basic Usage**: https://zod.dev/basics
+- **Primitives**: https://zod.dev/primitives
+- **Coercion**: https://zod.dev/coercion
+
+### Schema Types
+- **Objects**: https://zod.dev/objects
+- **Arrays**: https://zod.dev/arrays
+- **Unions**: https://zod.dev/unions
+- **Records**: https://zod.dev/records
+- **Maps**: https://zod.dev/maps
+- **Sets**: https://zod.dev/sets
+- **Promises**: https://zod.dev/promises
+
+### Validation
+- **Refinements**: https://zod.dev/refinements
+- **Transforms**: https://zod.dev/transforms
+- **Preprocessing**: https://zod.dev/preprocessing
+- **Pipes**: https://zod.dev/pipes
+
+### Error Handling
+- **Error Handling**: https://zod.dev/error-handling
+- **Custom Error Messages**: https://zod.dev/error-handling#custom-error-messages
+- **Error Formatting**: https://zod.dev/error-handling#formatting
+
+### TypeScript
+- **Type Inference**: https://zod.dev/type-inference
+- **Type Helpers**: https://zod.dev/type-inference#type-helpers
+
+---
+
+## @hookform/resolvers
+
+### Documentation
+- **Main Docs**: https://github.com/react-hook-form/resolvers
+- **zodResolver**: https://github.com/react-hook-form/resolvers#zod
+- **All Resolvers**: https://github.com/react-hook-form/resolvers#api
+
+### Installation
+```bash
+npm install @hookform/resolvers
+```
+
+---
+
+## shadcn/ui
+
+### Form Components
+- **Form Component**: https://ui.shadcn.com/docs/components/form
+- **Input**: https://ui.shadcn.com/docs/components/input
+- **Textarea**: https://ui.shadcn.com/docs/components/textarea
+- **Select**: https://ui.shadcn.com/docs/components/select
+- **Checkbox**: https://ui.shadcn.com/docs/components/checkbox
+- **Radio Group**: https://ui.shadcn.com/docs/components/radio-group
+- **Switch**: https://ui.shadcn.com/docs/components/switch
+- **Button**: https://ui.shadcn.com/docs/components/button
+
+### Installation
+- **Vite Setup**: https://ui.shadcn.com/docs/installation/vite
+- **Next.js Setup**: https://ui.shadcn.com/docs/installation/next
+- **CLI**: https://ui.shadcn.com/docs/cli
+
+---
+
+## TypeScript
+
+### Documentation
+- **Handbook**: https://www.typescriptlang.org/docs/handbook/intro.html
+- **Type Inference**: https://www.typescriptlang.org/docs/handbook/type-inference.html
+- **Generics**: https://www.typescriptlang.org/docs/handbook/2/generics.html
+
+---
+
+## Accessibility (WCAG)
+
+### Guidelines
+- **WCAG 2.1**: https://www.w3.org/WAI/WCAG21/quickref/
+- **ARIA Authoring Practices**: https://www.w3.org/WAI/ARIA/apg/
+- **Forms Best Practices**: https://www.w3.org/WAI/tutorials/forms/
+
+---
+
+## Community Resources
+
+### React Hook Form
+- **GitHub**: https://github.com/react-hook-form/react-hook-form
+- **Discord**: https://discord.gg/yYv7GZ8
+- **Stack Overflow**: https://stackoverflow.com/questions/tagged/react-hook-form
+
+### Zod
+- **GitHub**: https://github.com/colinhacks/zod
+- **Discord**: https://discord.gg/RcG33DQJdf
+- **Stack Overflow**: https://stackoverflow.com/questions/tagged/zod
+
+---
+
+## Video Tutorials
+
+### React Hook Form
+- **Official YouTube**: https://www.youtube.com/@bluebill1049
+- **Traversy Media**: https://www.youtube.com/watch?v=bU_eq8qyjic
+- **Web Dev Simplified**: https://www.youtube.com/watch?v=cc_xmawJ8Kg
+
+### Zod
+- **Matt Pocock**: https://www.youtube.com/watch?v=L6BE-U3oy80
+- **Theo**: https://www.youtube.com/watch?v=AeQ3f4zmSMs
+
+---
+
+## Blog Posts & Articles
+
+### React Hook Form
+- **React Hook Form Best Practices**: https://react-hook-form.com/faqs
+- **Performance Comparison**: https://react-hook-form.com/faqs#PerformanceofReactHookForm
+
+### Zod
+- **Total TypeScript**: https://www.totaltypescript.com/tutorials/zod
+- **Zod Tutorial**: https://zod.dev/tutorials
+
+---
+
+## Package Managers
+
+### npm
+```bash
+npm install react-hook-form zod @hookform/resolvers
+```
+
+### pnpm
+```bash
+pnpm add react-hook-form zod @hookform/resolvers
+```
+
+### yarn
+```bash
+yarn add react-hook-form zod @hookform/resolvers
+```
+
+---
+
+## Version Information
+
+**Latest Tested Versions** (as of 2025-10-23):
+- react-hook-form: 7.65.0
+- zod: 4.1.12
+- @hookform/resolvers: 5.2.2
+
+**Check for updates**:
+```bash
+npm view react-hook-form version
+npm view zod version
+npm view @hookform/resolvers version
+```
+
+---
+
+**Last Updated**: 2025-10-23
diff --git a/.cursor/skills/react-hook-form-zod/references/performance-optimization.md b/.cursor/skills/react-hook-form-zod/references/performance-optimization.md
new file mode 100644
index 0000000..414c1a8
--- /dev/null
+++ b/.cursor/skills/react-hook-form-zod/references/performance-optimization.md
@@ -0,0 +1,355 @@
+# Performance Optimization Guide
+
+Strategies for optimizing React Hook Form performance.
+
+---
+
+## Form Validation Modes
+
+### onSubmit (Best Performance)
+
+```typescript
+const form = useForm({
+  mode: 'onSubmit', // Validate only on submit
+  resolver: zodResolver(schema),
+})
+```
+
+**Pros**: Minimal re-renders, best performance
+**Cons**: No live feedback
+
+### onBlur (Good Balance)
+
+```typescript
+const form = useForm({
+  mode: 'onBlur', // Validate when field loses focus
+  resolver: zodResolver(schema),
+})
+```
+
+**Pros**: Good UX, reasonable performance
+**Cons**: Some re-renders on blur
+
+### onChange (Live Feedback)
+
+```typescript
+const form = useForm({
+  mode: 'onChange', // Validate on every change
+  resolver: zodResolver(schema),
+})
+```
+
+**Pros**: Immediate feedback
+**Cons**: Most re-renders, can be slow with complex validation
+
+### all (Maximum Validation)
+
+```typescript
+const form = useForm({
+  mode: 'all', // Validate on blur, change, and submit
+  resolver: zodResolver(schema),
+})
+```
+
+**Pros**: Most responsive
+**Cons**: Highest performance cost
+
+---
+
+## Controlled vs Uncontrolled
+
+### Uncontrolled (Faster)
+
+```typescript
+// Best performance - no React state
+<input {...register('email')} />
+```
+
+### Controlled (More Control)
+
+```typescript
+// More React state = more re-renders
+<Controller
+  control={control}
+  name="email"
+  render={({ field }) => <Input {...field} />}
+/>
+```
+
+**Rule**: Use `register` by default, `Controller` only when necessary.
+
+---
+
+## watch() Optimization
+
+### Watch Specific Fields
+
+```typescript
+// BAD - Watches all fields, re-renders on any change
+const values = watch()
+
+// GOOD - Watch only what you need
+const email = watch('email')
+const [email, password] = watch(['email', 'password'])
+```
+
+### useWatch for Isolation
+
+```typescript
+import { useWatch } from 'react-hook-form'
+
+// Isolated component - only re-renders when email changes
+function EmailDisplay() {
+  const email = useWatch({ control, name: 'email' })
+  return <div>{email}</div>
+}
+```
+
+---
+
+## Debouncing Validation
+
+### Manual Debounce
+
+```typescript
+import { useDebouncedCallback } from 'use-debounce'
+
+const debouncedValidation = useDebouncedCallback(
+  () => trigger('username'),
+  500 // Wait 500ms
+)
+
+<input
+  {...register('username')}
+  onChange={(e) => {
+    register('username').onChange(e)
+    debouncedValidation()
+  }}
+/>
+```
+
+---
+
+## shouldUnregister Flag
+
+### Keep Data When Unmounting
+
+```typescript
+const form = useForm({
+  shouldUnregister: false, // Keep field data when unmounted
+})
+```
+
+**Use When**:
+- Multi-step forms
+- Tabbed interfaces
+- Conditional fields that should persist
+
+### Clear Data When Unmounting
+
+```typescript
+const form = useForm({
+  shouldUnregister: true, // Remove field data when unmounted
+})
+```
+
+**Use When**:
+- Truly conditional fields
+- Dynamic forms
+- Want to clear data automatically
+
+---
+
+## useFieldArray Optimization
+
+### Use field.id as Key
+
+```typescript
+// CRITICAL for performance
+{fields.map((field) => (
+  <div key={field.id}> {/* Not index! */}
+    ...
+  </div>
+))}
+```
+
+### Avoid Unnecessary Re-renders
+
+```typescript
+// Extract field components
+const FieldItem = React.memo(({ field, index, register, remove }) => (
+  <div>
+    <input {...register(`items.${index}.name`)} />
+    <button onClick={() => remove(index)}>Remove</button>
+  </div>
+))
+
+// Use memoized component
+{fields.map((field, index) => (
+  <FieldItem
+    key={field.id}
+    field={field}
+    index={index}
+    register={register}
+    remove={remove}
+  />
+))}
+```
+
+---
+
+## formState Optimization
+
+### Subscribe to Specific Properties
+
+```typescript
+// BAD - Subscribes to all formState changes
+const { formState } = useForm()
+
+// GOOD - Subscribe only to what you need
+const { isDirty, isValid } = useForm().formState
+
+// BETTER - Use useFormState for isolation
+import { useFormState } from 'react-hook-form'
+const { isDirty } = useFormState({ control })
+```
+
+---
+
+## Resolver Optimization
+
+### Memoize Schema
+
+```typescript
+// BAD - New schema on every render
+const form = useForm({
+  resolver: zodResolver(z.object({ email: z.string() })),
+})
+
+// GOOD - Schema defined outside component
+const schema = z.object({ email: z.string() })
+
+function Form() {
+  const form = useForm({
+    resolver: zodResolver(schema),
+  })
+}
+```
+
+---
+
+## Large Forms
+
+### Split into Sections
+
+```typescript
+function PersonalInfoSection() {
+  const { register } = useFormContext()
+  return (
+    <div>
+      <input {...register('firstName')} />
+      <input {...register('lastName')} />
+    </div>
+  )
+}
+
+function ContactInfoSection() {
+  const { register } = useFormContext()
+  return (
+    <div>
+      <input {...register('email')} />
+      <input {...register('phone')} />
+    </div>
+  )
+}
+
+function LargeForm() {
+  const methods = useForm()
+
+  return (
+    <FormProvider {...methods}>
+      <form>
+        <PersonalInfoSection />
+        <ContactInfoSection />
+      </form>
+    </FormProvider>
+  )
+}
+```
+
+### Virtualize Long Lists
+
+```typescript
+import { useVirtualizer } from '@tanstack/react-virtual'
+
+function VirtualizedFieldArray() {
+  const { fields } = useFieldArray({ control, name: 'items' })
+
+  const parentRef = React.useRef(null)
+
+  const rowVirtualizer = useVirtualizer({
+    count: fields.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 50,
+  })
+
+  return (
+    <div ref={parentRef} style={{ height: '400px', overflow: 'auto' }}>
+      <div style={{ height: `${rowVirtualizer.getTotalSize()}px` }}>
+        {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+          const field = fields[virtualRow.index]
+          return (
+            <div key={field.id}>
+              <input {...register(`items.${virtualRow.index}.name`)} />
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+```
+
+---
+
+## Performance Benchmarks
+
+| Optimization | Before | After | Improvement |
+|--------------|--------|-------|-------------|
+| mode: onSubmit vs onChange | 100ms | 20ms | 80% |
+| watch() all vs watch('field') | 50ms | 10ms | 80% |
+| field.id vs index key | 200ms | 50ms | 75% |
+| Memoized schema | 30ms | 5ms | 83% |
+
+---
+
+## Profiling
+
+### React DevTools Profiler
+
+1. Open React DevTools
+2. Go to Profiler tab
+3. Click Record
+4. Interact with form
+5. Stop recording
+6. Analyze render times
+
+### Performance.mark API
+
+```typescript
+const onSubmit = (data) => {
+  performance.mark('form-submit-start')
+
+  // Submit logic
+
+  performance.mark('form-submit-end')
+  performance.measure('form-submit', 'form-submit-start', 'form-submit-end')
+
+  const measures = performance.getEntriesByName('form-submit')
+  console.log('Submit time:', measures[0].duration, 'ms')
+}
+```
+
+---
+
+**Official Docs**: https://react-hook-form.com/advanced-usage#PerformanceOptimization
diff --git a/.cursor/skills/react-hook-form-zod/references/rhf-api-reference.md b/.cursor/skills/react-hook-form-zod/references/rhf-api-reference.md
new file mode 100644
index 0000000..795ea73
--- /dev/null
+++ b/.cursor/skills/react-hook-form-zod/references/rhf-api-reference.md
@@ -0,0 +1,420 @@
+# React Hook Form API Reference
+
+Complete API reference for React Hook Form v7.65.0
+
+---
+
+## useForm Hook
+
+```typescript
+const {
+  register,
+  handleSubmit,
+  watch,
+  formState,
+  setValue,
+  getValues,
+  reset,
+  trigger,
+  control,
+  setError,
+  clearErrors,
+  setFocus,
+} = useForm<FormData>(options)
+```
+
+### Options
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `resolver` | `Resolver` | Schema validation resolver (zodResolver, etc.) |
+| `mode` | `'onSubmit' \| 'onChange' \| 'onBlur' \| 'all'` | When to validate (default: 'onSubmit') |
+| `reValidateMode` | `'onChange' \| 'onBlur'` | When to re-validate after error |
+| `defaultValues` | `object \| () => object \| Promise<object>` | Initial form values |
+| `values` | `object` | Controlled form values |
+| `resetOptions` | `object` | Options for reset behavior |
+| `shouldUnregister` | `boolean` | Unregister fields when unmounted |
+| `shouldFocusError` | `boolean` | Focus first error on submit |
+| `criteriaMode` | `'firstError' \| 'all'` | Return first error or all |
+| `delayError` | `number` | Delay error display (ms) |
+
+---
+
+## register
+
+Register input and apply validation rules.
+
+```typescript
+<input {...register('fieldName', options)} />
+```
+
+**Options**:
+- `required`: `boolean | string`
+- `min`: `number | { value: number, message: string }`
+- `max`: `number | { value: number, message: string }`
+- `minLength`: `number | { value: number, message: string }`
+- `maxLength`: `number | { value: number, message: string }`
+- `pattern`: `RegExp | { value: RegExp, message: string }`
+- `validate`: `(value) => boolean | string | object`
+- `valueAsNumber`: `boolean`
+- `valueAsDate`: `boolean`
+- `disabled`: `boolean`
+- `onChange`: `(e) => void`
+- `onBlur`: `(e) => void`
+
+---
+
+## handleSubmit
+
+Wraps your form submission handler.
+
+```typescript
+<form onSubmit={handleSubmit(onSubmit, onError)}>
+
+function onSubmit(data: FormData) {
+  // Valid data
+}
+
+function onError(errors: FieldErrors) {
+  // Validation errors
+}
+```
+
+---
+
+## watch
+
+Watch specified inputs and return their values.
+
+```typescript
+// Watch all fields
+const values = watch()
+
+// Watch specific field
+const email = watch('email')
+
+// Watch multiple fields
+const [email, password] = watch(['email', 'password'])
+
+// Watch with callback
+useEffect(() => {
+  const subscription = watch((value, { name, type }) => {
+    console.log(value, name, type)
+  })
+  return () => subscription.unsubscribe()
+}, [watch])
+```
+
+---
+
+## formState
+
+Form state object.
+
+```typescript
+const {
+  isDirty,        // Form has been modified
+  dirtyFields,    // Object of modified fields
+  touchedFields,  // Object of touched fields
+  isSubmitted,    // Form has been submitted
+  isSubmitSuccessful, // Last submission successful
+  isSubmitting,   // Form is currently submitting
+  isValidating,   // Form is validating
+  isValid,        // Form is valid
+  errors,         // Validation errors
+  submitCount,    // Number of submissions
+} = formState
+```
+
+---
+
+## setValue
+
+Set field value programmatically.
+
+```typescript
+setValue('fieldName', value, options)
+
+// Options
+{
+  shouldValidate: boolean,  // Trigger validation
+  shouldDirty: boolean,     // Mark as dirty
+  shouldTouch: boolean,     // Mark as touched
+}
+```
+
+---
+
+## getValues
+
+Get current form values.
+
+```typescript
+// Get all values
+const values = getValues()
+
+// Get specific field
+const email = getValues('email')
+
+// Get multiple fields
+const [email, password] = getValues(['email', 'password'])
+```
+
+---
+
+## reset
+
+Reset form to default values.
+
+```typescript
+reset() // Reset to defaultValues
+
+reset({ email: '', password: '' }) // Reset to specific values
+
+reset(undefined, {
+  keepErrors: boolean,
+  keepDirty: boolean,
+  keepIsSubmitted: boolean,
+  keepTouched: boolean,
+  keepIsValid: boolean,
+  keepSubmitCount: boolean,
+})
+```
+
+---
+
+## trigger
+
+Manually trigger validation.
+
+```typescript
+// Trigger all fields
+await trigger()
+
+// Trigger specific field
+await trigger('email')
+
+// Trigger multiple fields
+await trigger(['email', 'password'])
+```
+
+---
+
+## setError
+
+Set field error manually.
+
+```typescript
+setError('fieldName', {
+  type: 'manual',
+  message: 'Error message',
+})
+
+// Root error (not tied to specific field)
+setError('root', {
+  type: 'server',
+  message: 'Server error',
+})
+```
+
+---
+
+## clearErrors
+
+Clear field errors.
+
+```typescript
+clearErrors() // Clear all errors
+
+clearErrors('email') // Clear specific field
+
+clearErrors(['email', 'password']) // Clear multiple fields
+```
+
+---
+
+## setFocus
+
+Focus on specific field.
+
+```typescript
+setFocus('fieldName', { shouldSelect: true })
+```
+
+---
+
+## Controller
+
+For controlled components (third-party UI libraries).
+
+```typescript
+import { Controller } from 'react-hook-form'
+
+<Controller
+  name="fieldName"
+  control={control}
+  defaultValue=""
+  rules={{ required: true }}
+  render={({ field, fieldState, formState }) => (
+    <CustomInput
+      {...field}
+      error={fieldState.error}
+    />
+  )}
+/>
+```
+
+**render props**:
+- `field`: `{ value, onChange, onBlur, ref, name }`
+- `fieldState`: `{ invalid, isTouched, isDirty, error }`
+- `formState`: Full form state
+
+---
+
+## useController
+
+Hook version of Controller (for reusable components).
+
+```typescript
+import { useController } from 'react-hook-form'
+
+function CustomInput({ name, control }) {
+  const {
+    field,
+    fieldState: { invalid, isTouched, isDirty, error },
+    formState: { touchedFields, dirtyFields }
+  } = useController({
+    name,
+    control,
+    rules: { required: true },
+    defaultValue: '',
+  })
+
+  return <input {...field} />
+}
+```
+
+---
+
+## useFieldArray
+
+Manage dynamic field arrays.
+
+```typescript
+import { useFieldArray } from 'react-hook-form'
+
+const { fields, append, prepend, remove, insert, update, replace } = useFieldArray({
+  control,
+  name: 'items',
+  keyName: 'id', // Default: 'id'
+})
+```
+
+**Methods**:
+- `append(value)` - Add to end
+- `prepend(value)` - Add to beginning
+- `insert(index, value)` - Insert at index
+- `remove(index)` - Remove at index
+- `update(index, value)` - Update at index
+- `replace(values)` - Replace entire array
+
+**Important**: Use `field.id` as key, not array index!
+
+```typescript
+{fields.map((field, index) => (
+  <div key={field.id}> {/* Use field.id! */}
+    <input {...register(`items.${index}.name`)} />
+  </div>
+))}
+```
+
+---
+
+## useWatch
+
+Subscribe to input changes without re-rendering entire form.
+
+```typescript
+import { useWatch } from 'react-hook-form'
+
+const email = useWatch({
+  control,
+  name: 'email',
+  defaultValue: '',
+})
+```
+
+---
+
+## useFormState
+
+Subscribe to form state without re-rendering entire form.
+
+```typescript
+import { useFormState } from 'react-hook-form'
+
+const { isDirty, isValid } = useFormState({ control })
+```
+
+---
+
+## useFormContext
+
+Access form context (for deeply nested components).
+
+```typescript
+import { useFormContext } from 'react-hook-form'
+
+function NestedComponent() {
+  const { register, formState: { errors } } = useFormContext()
+
+  return <input {...register('email')} />
+}
+
+// Wrap form with FormProvider
+import { FormProvider, useForm } from 'react-hook-form'
+
+function App() {
+  const methods = useForm()
+
+  return (
+    <FormProvider {...methods}>
+      <form>
+        <NestedComponent />
+      </form>
+    </FormProvider>
+  )
+}
+```
+
+---
+
+## ErrorMessage
+
+Helper component for displaying errors (from @hookform/error-message).
+
+```typescript
+import { ErrorMessage } from '@hookform/error-message'
+
+<ErrorMessage
+  errors={errors}
+  name="email"
+  render={({ message }) => <span className="error">{message}</span>}
+/>
+```
+
+---
+
+## DevTool
+
+Development tool for debugging (from @hookform/devtools).
+
+```typescript
+import { DevTool } from '@hookform/devtools'
+
+<DevTool control={control} />
+```
+
+---
+
+**Official Docs**: https://react-hook-form.com/
diff --git a/.cursor/skills/react-hook-form-zod/references/shadcn-integration.md b/.cursor/skills/react-hook-form-zod/references/shadcn-integration.md
new file mode 100644
index 0000000..105fcb6
--- /dev/null
+++ b/.cursor/skills/react-hook-form-zod/references/shadcn-integration.md
@@ -0,0 +1,390 @@
+# shadcn/ui Integration Guide
+
+Complete guide for using shadcn/ui with React Hook Form + Zod.
+
+---
+
+## Form Component (Legacy)
+
+**Status**: "Not actively developed" according to shadcn/ui documentation
+**Recommendation**: Use Field component for new projects (coming soon)
+
+### Installation
+
+```bash
+npx shadcn@latest add form
+```
+
+### Basic Usage
+
+```typescript
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+
+const schema = z.object({
+  username: z.string().min(2),
+})
+
+function ProfileForm() {
+  const form = useForm<z.infer<typeof schema>>({
+    resolver: zodResolver(schema),
+    defaultValues: { username: '' },
+  })
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <FormField
+          control={form.control}
+          name="username"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <FormControl>
+                <Input {...field} />
+              </FormControl>
+              <FormDescription>
+                Your public display name.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
+```
+
+---
+
+## Form Component Anatomy
+
+### FormField
+
+```typescript
+<FormField
+  control={form.control}  // Required
+  name="fieldName"        // Required
+  render={({ field, fieldState, formState }) => (
+    // Your field component
+  )}
+/>
+```
+
+### FormItem
+
+Container for field, label, description, and message.
+
+```typescript
+<FormItem>
+  <FormLabel>Email</FormLabel>
+  <FormControl>
+    <Input {...field} />
+  </FormControl>
+  <FormDescription>Helper text</FormDescription>
+  <FormMessage />
+</FormItem>
+```
+
+### FormControl
+
+Wraps the actual input component.
+
+```typescript
+<FormControl>
+  <Input {...field} />
+</FormControl>
+```
+
+### FormLabel
+
+Accessible label with automatic linking to input.
+
+```typescript
+<FormLabel>Email Address</FormLabel>
+```
+
+### FormDescription
+
+Helper text for the field.
+
+```typescript
+<FormDescription>
+  We'll never share your email.
+</FormDescription>
+```
+
+### FormMessage
+
+Displays validation errors.
+
+```typescript
+<FormMessage />
+```
+
+---
+
+## Common Patterns
+
+### Input Field
+
+```typescript
+<FormField
+  control={form.control}
+  name="email"
+  render={({ field }) => (
+    <FormItem>
+      <FormLabel>Email</FormLabel>
+      <FormControl>
+        <Input type="email" placeholder="you@example.com" {...field} />
+      </FormControl>
+      <FormMessage />
+    </FormItem>
+  )}
+/>
+```
+
+### Textarea
+
+```typescript
+<FormField
+  control={form.control}
+  name="bio"
+  render={({ field }) => (
+    <FormItem>
+      <FormLabel>Bio</FormLabel>
+      <FormControl>
+        <Textarea {...field} />
+      </FormControl>
+      <FormMessage />
+    </FormItem>
+  )}
+/>
+```
+
+### Select
+
+```typescript
+<FormField
+  control={form.control}
+  name="role"
+  render={({ field }) => (
+    <FormItem>
+      <FormLabel>Role</FormLabel>
+      <Select onValueChange={field.onChange} defaultValue={field.value}>
+        <FormControl>
+          <SelectTrigger>
+            <SelectValue placeholder="Select a role" />
+          </SelectTrigger>
+        </FormControl>
+        <SelectContent>
+          <SelectItem value="admin">Admin</SelectItem>
+          <SelectItem value="user">User</SelectItem>
+        </SelectContent>
+      </Select>
+      <FormMessage />
+    </FormItem>
+  )}
+/>
+```
+
+### Checkbox
+
+```typescript
+<FormField
+  control={form.control}
+  name="newsletter"
+  render={({ field }) => (
+    <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+      <FormControl>
+        <Checkbox
+          checked={field.value}
+          onCheckedChange={field.onChange}
+        />
+      </FormControl>
+      <div className="space-y-1 leading-none">
+        <FormLabel>Subscribe to newsletter</FormLabel>
+        <FormDescription>
+          Receive email updates about new products.
+        </FormDescription>
+      </div>
+    </FormItem>
+  )}
+/>
+```
+
+### Radio Group
+
+```typescript
+<FormField
+  control={form.control}
+  name="plan"
+  render={({ field }) => (
+    <FormItem className="space-y-3">
+      <FormLabel>Select a plan</FormLabel>
+      <FormControl>
+        <RadioGroup
+          onValueChange={field.onChange}
+          defaultValue={field.value}
+        >
+          <FormItem className="flex items-center space-x-3 space-y-0">
+            <FormControl>
+              <RadioGroupItem value="free" />
+            </FormControl>
+            <FormLabel className="font-normal">Free</FormLabel>
+          </FormItem>
+          <FormItem className="flex items-center space-x-3 space-y-0">
+            <FormControl>
+              <RadioGroupItem value="pro" />
+            </FormControl>
+            <FormLabel className="font-normal">Pro</FormLabel>
+          </FormItem>
+        </RadioGroup>
+      </FormControl>
+      <FormMessage />
+    </FormItem>
+  )}
+/>
+```
+
+### Switch
+
+```typescript
+<FormField
+  control={form.control}
+  name="notifications"
+  render={({ field }) => (
+    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+      <div className="space-y-0.5">
+        <FormLabel className="text-base">
+          Email Notifications
+        </FormLabel>
+        <FormDescription>
+          Receive emails about your account activity.
+        </FormDescription>
+      </div>
+      <FormControl>
+        <Switch
+          checked={field.value}
+          onCheckedChange={field.onChange}
+        />
+      </FormControl>
+    </FormItem>
+  )}
+/>
+```
+
+---
+
+## Nested Objects
+
+```typescript
+const schema = z.object({
+  user: z.object({
+    name: z.string(),
+    email: z.string().email(),
+  }),
+})
+
+<FormField
+  control={form.control}
+  name="user.name"
+  render={({ field }) => (
+    <FormItem>
+      <FormLabel>Name</FormLabel>
+      <FormControl>
+        <Input {...field} />
+      </FormControl>
+      <FormMessage />
+    </FormItem>
+  )}
+/>
+```
+
+---
+
+## Arrays
+
+```typescript
+const { fields, append, remove } = useFieldArray({
+  control: form.control,
+  name: 'items',
+})
+
+{fields.map((field, index) => (
+  <FormField
+    key={field.id}
+    control={form.control}
+    name={`items.${index}.name`}
+    render={({ field }) => (
+      <FormItem>
+        <FormControl>
+          <Input {...field} />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    )}
+  />
+))}
+```
+
+---
+
+## Custom Validation
+
+```typescript
+<FormField
+  control={form.control}
+  name="username"
+  render={({ field }) => (
+    <FormItem>
+      <FormLabel>Username</FormLabel>
+      <FormControl>
+        <Input {...field} />
+      </FormControl>
+      {/* Custom error styling */}
+      {errors.username && (
+        <div className="text-sm font-medium text-destructive">
+          {errors.username.message}
+        </div>
+      )}
+    </FormItem>
+  )}
+/>
+```
+
+---
+
+## Field Component (Future)
+
+**Status**: Recommended for new implementations (in development)
+
+Check official docs for latest: https://ui.shadcn.com/docs/components/form
+
+---
+
+## Tips
+
+1. **Always spread {...field}** in FormControl
+2. **Use Form component** for automatic ID generation
+3. **FormMessage** automatically displays errors
+4. **Combine with Zod** for type-safe validation
+5. **Check documentation** - Form component is not actively developed
+
+---
+
+**Official Docs**:
+- shadcn/ui Form: https://ui.shadcn.com/docs/components/form
+- React Hook Form: https://react-hook-form.com/
diff --git a/.cursor/skills/react-hook-form-zod/references/top-errors.md b/.cursor/skills/react-hook-form-zod/references/top-errors.md
new file mode 100644
index 0000000..b782c0a
--- /dev/null
+++ b/.cursor/skills/react-hook-form-zod/references/top-errors.md
@@ -0,0 +1,381 @@
+# Top 12 Common Errors with Solutions
+
+Complete reference for known issues and their solutions.
+
+---
+
+## 1. Zod v4 Type Inference Errors
+
+**Error**: Type inference doesn't work correctly with Zod v4
+
+**Symptoms**:
+```typescript
+// Types don't match expected structure
+const schema = z.object({ name: z.string() })
+type FormData = z.infer<typeof schema> // Type issues
+```
+
+**Source**: [GitHub Issue #13109](https://github.com/react-hook-form/react-hook-form/issues/13109) (Closed 2025-11-01)
+
+**Note**: This issue was resolved in react-hook-form v7.66.x. Upgrade to v7.66.1+ to avoid this problem.
+
+**Solution**:
+```typescript
+// Use correct Zod v4 patterns
+const schema = z.object({ name: z.string() })
+type FormData = z.infer<typeof schema>
+
+// Explicitly type useForm if needed
+const form = useForm<z.infer<typeof schema>>({
+  resolver: zodResolver(schema),
+})
+```
+
+---
+
+## 2. Uncontrolled to Controlled Warning
+
+**Error**: "A component is changing an uncontrolled input to be controlled"
+
+**Symptoms**:
+```
+Warning: A component is changing an uncontrolled input of type text to be controlled.
+Input elements should not switch from uncontrolled to controlled (or vice versa).
+```
+
+**Cause**: Not setting defaultValues causes fields to be undefined initially
+
+**Solution**:
+```typescript
+// BAD
+const form = useForm()
+
+// GOOD - Always set defaultValues
+const form = useForm({
+  defaultValues: {
+    email: '',
+    password: '',
+    remember: false,
+  },
+})
+```
+
+---
+
+## 3. Nested Object Validation Errors
+
+**Error**: Errors for nested fields don't display correctly
+
+**Symptoms**:
+```typescript
+// errors.address.street is undefined even though validation failed
+<span>{errors.address.street?.message}</span> // Shows nothing
+```
+
+**Solution**:
+```typescript
+// Use optional chaining for nested errors
+{errors.address?.street && (
+  <span>{errors.address.street.message}</span>
+)}
+
+// OR check if errors.address exists first
+{errors.address && errors.address.street && (
+  <span>{errors.address.street.message}</span>
+)}
+```
+
+---
+
+## 4. Array Field Re-renders
+
+**Error**: Form re-renders excessively with useFieldArray
+
+**Cause**: Using array index as key instead of field.id
+
+**Solution**:
+```typescript
+// BAD
+{fields.map((field, index) => (
+  <div key={index}> {/* Using index causes re-renders */}
+    ...
+  </div>
+))}
+
+// GOOD
+{fields.map((field) => (
+  <div key={field.id}> {/* Use field.id */}
+    ...
+  </div>
+))}
+```
+
+---
+
+## 5. Async Validation Race Conditions
+
+**Error**: Multiple validation requests cause conflicting results
+
+**Symptoms**: Old validation results override new ones
+
+**Solution**:
+```typescript
+// Use debouncing
+import { useDebouncedCallback } from 'use-debounce'
+
+const debouncedValidation = useDebouncedCallback(
+  () => trigger('username'),
+  500 // Wait 500ms after user stops typing
+)
+
+// AND cancel pending requests
+const abortControllerRef = useRef<AbortController | null>(null)
+
+useEffect(() => {
+  if (abortControllerRef.current) {
+    abortControllerRef.current.abort()
+  }
+
+  abortControllerRef.current = new AbortController()
+
+  // Make request with abort signal
+  fetch('/api/check', { signal: abortControllerRef.current.signal })
+}, [value])
+```
+
+---
+
+## 6. Server Error Mapping
+
+**Error**: Server validation errors don't map to form fields
+
+**Solution**:
+```typescript
+const onSubmit = async (data) => {
+  try {
+    const response = await fetch('/api/submit', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    })
+
+    if (!response.ok) {
+      const { errors } = await response.json()
+
+      // Map server errors to form fields
+      Object.entries(errors).forEach(([field, message]) => {
+        setError(field, {
+          type: 'server',
+          message: Array.isArray(message) ? message[0] : message,
+        })
+      })
+
+      return
+    }
+  } catch (error) {
+    setError('root', {
+      type: 'server',
+      message: 'Network error',
+    })
+  }
+}
+```
+
+---
+
+## 7. Default Values Not Applied
+
+**Error**: Form fields don't show default values
+
+**Cause**: Setting defaultValues after form initialization
+
+**Solution**:
+```typescript
+// BAD - Set in useState
+const [defaultValues, setDefaultValues] = useState({})
+
+useEffect(() => {
+  setDefaultValues({ email: 'user@example.com' }) // Too late!
+}, [])
+
+const form = useForm({ defaultValues })
+
+// GOOD - Set directly or use reset()
+const form = useForm({
+  defaultValues: { email: 'user@example.com' },
+})
+
+// OR fetch and use reset
+useEffect(() => {
+  async function loadData() {
+    const data = await fetchData()
+    reset(data)
+  }
+  loadData()
+}, [reset])
+```
+
+---
+
+## 8. Controller Field Not Updating
+
+**Error**: Custom component doesn't update when value changes
+
+**Cause**: Not spreading {...field} in Controller render
+
+**Solution**:
+```typescript
+// BAD
+<Controller
+  render={({ field }) => (
+    <CustomInput value={field.value} onChange={field.onChange} />
+  )}
+/>
+
+// GOOD - Spread all field props
+<Controller
+  render={({ field }) => (
+    <CustomInput {...field} />
+  )}
+/>
+```
+
+---
+
+## 9. useFieldArray Key Warnings
+
+**Error**: React warning about duplicate keys in list
+
+**Symptoms**:
+```
+Warning: Encountered two children with the same key
+```
+
+**Solution**:
+```typescript
+// BAD - Using index as key
+{fields.map((field, index) => (
+  <div key={index}>...</div>
+))}
+
+// GOOD - Use field.id
+{fields.map((field) => (
+  <div key={field.id}>...</div>
+))}
+```
+
+---
+
+## 10. Schema Refinement Error Paths
+
+**Error**: Custom validation errors appear at wrong field
+
+**Cause**: Not specifying path in refinement
+
+**Solution**:
+```typescript
+// BAD - Error appears at form level
+z.object({
+  password: z.string(),
+  confirmPassword: z.string(),
+}).refine((data) => data.password === data.confirmPassword, {
+  message: "Passwords don't match",
+  // Missing path!
+})
+
+// GOOD - Error appears at confirmPassword field
+z.object({
+  password: z.string(),
+  confirmPassword: z.string(),
+}).refine((data) => data.password === data.confirmPassword, {
+  message: "Passwords don't match",
+  path: ['confirmPassword'], // Specify path
+})
+```
+
+---
+
+## 11. Transform vs Preprocess Confusion
+
+**Error**: Data transformation doesn't work as expected
+
+**When to use each**:
+
+```typescript
+// Use TRANSFORM for output transformation (after validation)
+z.string().transform((val) => val.toUpperCase())
+// Input: 'hello' -> Validation: passes -> Output: 'HELLO'
+
+// Use PREPROCESS for input transformation (before validation)
+z.preprocess(
+  (val) => (val === '' ? undefined : val),
+  z.string().optional()
+)
+// Input: '' -> Preprocess: undefined -> Validation: passes
+```
+
+---
+
+## 12. Multiple Resolver Conflicts
+
+**Error**: Form validation doesn't work with multiple resolvers
+
+**Cause**: Trying to use multiple validation libraries simultaneously
+
+**Solution**:
+```typescript
+// BAD - Can't use multiple resolvers
+const form = useForm({
+  resolver: zodResolver(schema),
+  resolver: yupResolver(schema), // Overrides previous
+})
+
+// GOOD - Use single resolver, combine schemas if needed
+const schema1 = z.object({ email: z.string() })
+const schema2 = z.object({ password: z.string() })
+const combinedSchema = schema1.merge(schema2)
+
+const form = useForm({
+  resolver: zodResolver(combinedSchema),
+})
+```
+
+---
+
+## Debugging Tips
+
+### Enable DevTools
+
+```bash
+npm install @hookform/devtools
+```
+
+```typescript
+import { DevTool } from '@hookform/devtools'
+
+<DevTool control={control} />
+```
+
+### Log Form State
+
+```typescript
+useEffect(() => {
+  console.log('Form State:', formState)
+  console.log('Errors:', errors)
+  console.log('Values:', getValues())
+}, [formState, errors, getValues])
+```
+
+### Validate on Change During Development
+
+```typescript
+const form = useForm({
+  mode: 'onChange', // See errors immediately
+  resolver: zodResolver(schema),
+})
+```
+
+---
+
+**Official Docs**:
+- React Hook Form: https://react-hook-form.com/
+- Zod: https://zod.dev/
diff --git a/.cursor/skills/react-hook-form-zod/references/zod-schemas-guide.md b/.cursor/skills/react-hook-form-zod/references/zod-schemas-guide.md
new file mode 100644
index 0000000..d3e1af1
--- /dev/null
+++ b/.cursor/skills/react-hook-form-zod/references/zod-schemas-guide.md
@@ -0,0 +1,396 @@
+# Comprehensive Zod Schemas Guide
+
+Complete reference for all Zod schema types and patterns.
+
+---
+
+## Primitives
+
+```typescript
+// String
+z.string()
+z.string().min(3, "Min 3 characters")
+z.string().max(100, "Max 100 characters")
+z.string().length(10, "Exactly 10 characters")
+z.string().email("Invalid email")
+z.string().url("Invalid URL")
+z.string().uuid("Invalid UUID")
+z.string().regex(/pattern/, "Does not match pattern")
+z.string().trim() // Trim whitespace
+z.string().toLowerCase() //Convert to lowercase
+z.string().toUpperCase() // Convert to uppercase
+
+// Number
+z.number()
+z.number().int("Must be integer")
+z.number().positive("Must be positive")
+z.number().negative("Must be negative")
+z.number().min(0, "Min is 0")
+z.number().max(100, "Max is 100")
+z.number().multipleOf(5, "Must be multiple of 5")
+z.number().finite() // No Infinity or NaN
+z.number().safe() // Within JS safe integer range
+
+// Boolean
+z.boolean()
+
+// Date
+z.date()
+z.date().min(new Date("2020-01-01"), "Too old")
+z.date().max(new Date(), "Cannot be in future")
+
+// BigInt
+z.bigint()
+```
+
+---
+
+## Objects
+
+```typescript
+// Basic object
+const userSchema = z.object({
+  name: z.string(),
+  age: z.number(),
+})
+
+// Nested object
+const profileSchema = z.object({
+  user: userSchema,
+  address: z.object({
+    street: z.string(),
+    city: z.string(),
+  }),
+})
+
+// Partial (all fields optional)
+const partialUserSchema = userSchema.partial()
+
+// Deep Partial (recursively optional)
+const deepPartialSchema = profileSchema.deepPartial()
+
+// Pick specific fields
+const nameOnlySchema = userSchema.pick({ name: true })
+
+// Omit specific fields
+const withoutAgeSchema = userSchema.omit({ age: true })
+
+// Merge objects
+const extendedUserSchema = userSchema.merge(z.object({
+  email: z.string().email(),
+}))
+
+// Passthrough (allow extra fields)
+const passthroughSchema = userSchema.passthrough()
+
+// Strict (no extra fields)
+const strictSchema = userSchema.strict()
+
+// Catchall (type for extra fields)
+const catchallSchema = userSchema.catchall(z.string())
+```
+
+---
+
+## Arrays
+
+```typescript
+// Array of strings
+z.array(z.string())
+
+// With length constraints
+z.array(z.string()).min(1, "At least one item required")
+z.array(z.string()).max(10, "Max 10 items")
+z.array(z.string()).length(5, "Exactly 5 items")
+z.array(z.string()).nonempty("Array cannot be empty")
+
+// Array of objects
+z.array(z.object({
+  name: z.string(),
+  age: z.number(),
+}))
+```
+
+---
+
+## Tuples
+
+```typescript
+// Fixed-length array with specific types
+z.tuple([z.string(), z.number(), z.boolean()])
+
+// With rest
+z.tuple([z.string(), z.number()]).rest(z.boolean())
+```
+
+---
+
+## Enums and Literals
+
+```typescript
+// Enum
+z.enum(['red', 'green', 'blue'])
+
+// Native enum
+enum Color { Red, Green, Blue }
+z.nativeEnum(Color)
+
+// Literal
+z.literal('hello')
+z.literal(42)
+z.literal(true)
+```
+
+---
+
+## Unions and Discriminated Unions
+
+```typescript
+// Union
+z.union([z.string(), z.number()])
+
+// Discriminated union (recommended for better errors)
+z.discriminatedUnion('type', [
+  z.object({ type: z.literal('user'), name: z.string() }),
+  z.object({ type: z.literal('admin'), permissions: z.array(z.string()) }),
+])
+```
+
+---
+
+## Optional and Nullable
+
+```typescript
+// Optional (value | undefined)
+z.string().optional()
+z.optional(z.string()) // Same as above
+
+// Nullable (value | null)
+z.string().nullable()
+z.nullable(z.string()) // Same as above
+
+// Nullish (value | null | undefined)
+z.string().nullish()
+```
+
+---
+
+## Default Values
+
+```typescript
+z.string().default('default value')
+z.number().default(0)
+z.boolean().default(false)
+z.array(z.string()).default([])
+```
+
+---
+
+## Refinements (Custom Validation)
+
+```typescript
+// Basic refinement
+z.string().refine((val) => val.length > 5, {
+  message: "String must be longer than 5 characters",
+})
+
+// With custom path
+z.object({
+  password: z.string(),
+  confirmPassword: z.string(),
+}).refine((data) => data.password === data.confirmPassword, {
+  message: "Passwords don't match",
+  path: ['confirmPassword'],
+})
+
+// Multiple refinements
+z.string()
+  .refine((val) => val.length >= 8, "Min 8 characters")
+  .refine((val) => /[A-Z]/.test(val), "Must contain uppercase")
+  .refine((val) => /[0-9]/.test(val), "Must contain number")
+
+// Async refinement
+z.string().refine(async (val) => {
+  const available = await checkAvailability(val)
+  return available
+}, "Already taken")
+```
+
+---
+
+## Transforms
+
+```typescript
+// String to number
+z.string().transform((val) => parseInt(val, 10))
+
+// Trim whitespace
+z.string().transform((val) => val.trim())
+
+// Parse date
+z.string().transform((val) => new Date(val))
+
+// Chain transform and refine
+z.string()
+  .transform((val) => parseInt(val, 10))
+  .refine((val) => !isNaN(val), "Must be a number")
+```
+
+---
+
+## Preprocess
+
+```typescript
+// Process before validation
+z.preprocess(
+  (val) => (val === '' ? undefined : val),
+  z.string().optional()
+)
+
+// Convert to number
+z.preprocess(
+  (val) => Number(val),
+  z.number()
+)
+```
+
+---
+
+## Intersections
+
+```typescript
+const baseUser = z.object({ name: z.string() })
+const withEmail = z.object({ email: z.string().email() })
+
+// Intersection (combines both)
+const userWithEmail = baseUser.and(withEmail)
+// OR
+const userWithEmail = z.intersection(baseUser, withEmail)
+```
+
+---
+
+## Records and Maps
+
+```typescript
+// Record (object with dynamic keys)
+z.record(z.string()) // { [key: string]: string }
+z.record(z.string(), z.number()) // { [key: string]: number }
+
+// Map
+z.map(z.string(), z.number())
+```
+
+---
+
+## Sets
+
+```typescript
+z.set(z.string())
+z.set(z.number()).min(1, "At least one item")
+z.set(z.string()).max(10, "Max 10 items")
+```
+
+---
+
+## Promises
+
+```typescript
+z.promise(z.string())
+z.promise(z.object({ data: z.string() }))
+```
+
+---
+
+## Custom Error Messages
+
+```typescript
+// Field-level
+z.string({ required_error: "Name is required" })
+z.number({ invalid_type_error: "Must be a number" })
+
+// Validation-level
+z.string().min(3, { message: "Min 3 characters" })
+z.string().email({ message: "Invalid email format" })
+
+// Custom error map
+const customErrorMap: z.ZodErrorMap = (issue, ctx) => {
+  if (issue.code === z.ZodIssueCode.invalid_type) {
+    if (issue.expected === "string") {
+      return { message: "Please enter text" }
+    }
+  }
+  return { message: ctx.defaultError }
+}
+
+z.setErrorMap(customErrorMap)
+```
+
+---
+
+## Type Inference
+
+```typescript
+const userSchema = z.object({
+  name: z.string(),
+  age: z.number(),
+})
+
+// Infer TypeScript type
+type User = z.infer<typeof userSchema>
+// Result: { name: string; age: number }
+
+// Input type (before transforms)
+type UserInput = z.input<typeof transformSchema>
+
+// Output type (after transforms)
+type UserOutput = z.output<typeof transformSchema>
+```
+
+---
+
+## Parsing Methods
+
+```typescript
+// .parse() - throws on error
+const result = schema.parse(data)
+
+// .safeParse() - returns result object
+const result = schema.safeParse(data)
+if (result.success) {
+  console.log(result.data)
+} else {
+  console.error(result.error)
+}
+
+// .parseAsync() - async validation
+const result = await schema.parseAsync(data)
+
+// .safeParseAsync() - async with result object
+const result = await schema.safeParseAsync(data)
+```
+
+---
+
+## Error Handling
+
+```typescript
+try {
+  schema.parse(data)
+} catch (error) {
+  if (error instanceof z.ZodError) {
+    // Formatted errors
+    console.log(error.format())
+
+    // Flattened errors (for forms)
+    console.log(error.flatten())
+
+    // Individual issues
+    console.log(error.issues)
+  }
+}
+```
+
+---
+
+**Official Docs**: https://zod.dev
diff --git a/.cursor/skills/react-hook-form-zod/rules/react-hook-form-zod.md b/.cursor/skills/react-hook-form-zod/rules/react-hook-form-zod.md
new file mode 100644
index 0000000..886f291
--- /dev/null
+++ b/.cursor/skills/react-hook-form-zod/rules/react-hook-form-zod.md
@@ -0,0 +1,138 @@
+---
+paths: "**/*.tsx", "**/*form*.ts", "**/*.ts"
+---
+
+# React Hook Form + Zod Corrections
+
+## ALWAYS Set defaultValues
+
+```typescript
+/* ❌ Causes uncontrolled→controlled warning */
+const { register } = useForm<FormData>({
+  resolver: zodResolver(schema),
+  // No defaultValues!
+})
+
+/* ✅ Always provide defaultValues */
+const { register } = useForm<FormData>({
+  resolver: zodResolver(schema),
+  defaultValues: {
+    name: '',
+    email: '',
+    age: undefined, // or appropriate default
+  },
+})
+```
+
+## useFieldArray: Use field.id as Key
+
+```typescript
+/* ❌ Using index causes infinite re-renders */
+{fields.map((field, index) => (
+  <input key={index} {...register(`items.${index}.name`)} />
+))}
+
+/* ✅ Use field.id */
+{fields.map((field, index) => (
+  <input key={field.id} {...register(`items.${index}.name`)} />
+))}
+```
+
+## Controller: MUST Spread {...field}
+
+```typescript
+/* ❌ Field doesn't update */
+<Controller
+  name="status"
+  control={control}
+  render={({ field }) => (
+    <Select value={field.value} onChange={field.onChange} />
+  )}
+/>
+
+/* ✅ Spread all field props */
+<Controller
+  name="status"
+  control={control}
+  render={({ field }) => (
+    <Select {...field} />
+  )}
+/>
+```
+
+## Nested Error Access
+
+```typescript
+/* ❌ May crash on undefined */
+errors.address.street.message
+
+/* ✅ Use optional chaining */
+errors.address?.street?.message
+```
+
+## Server Validation Required
+
+```typescript
+/* ❌ Security vulnerability - client only */
+const onSubmit = (data) => {
+  await api.post('/users', data) // No server validation!
+}
+
+/* ✅ Validate on BOTH client and server */
+// Client: useForm with zodResolver
+// Server:
+app.post('/users', async (c) => {
+  const result = schema.safeParse(await c.req.json())
+  if (!result.success) {
+    return c.json({ errors: result.error.flatten() }, 400)
+  }
+})
+```
+
+## Show Server Errors with setError
+
+```typescript
+/* ✅ Display server validation errors */
+const onSubmit = async (data) => {
+  const response = await api.post('/users', data)
+  if (!response.ok) {
+    const { errors } = await response.json()
+    // Set field-specific errors
+    Object.entries(errors).forEach(([field, message]) => {
+      setError(field, { message })
+    })
+  }
+}
+```
+
+## Zod Refinement: Include path
+
+```typescript
+/* ❌ Error shows on form, not field */
+const schema = z.object({
+  password: z.string(),
+  confirm: z.string(),
+}).refine(d => d.password === d.confirm, {
+  message: "Passwords don't match",
+})
+
+/* ✅ Include path for field placement */
+const schema = z.object({
+  password: z.string(),
+  confirm: z.string(),
+}).refine(d => d.password === d.confirm, {
+  message: "Passwords don't match",
+  path: ['confirm'], // Error shows on confirm field
+})
+```
+
+## Quick Fixes
+
+| If Claude suggests... | Use instead... |
+|----------------------|----------------|
+| No `defaultValues` | Always provide `defaultValues: { field: '' }` |
+| `key={index}` in useFieldArray | `key={field.id}` |
+| Partial field props | Spread `{...field}` |
+| `errors.a.b.message` | `errors.a?.b?.message` |
+| Client-only validation | Validate on server too |
+| Missing refinement path | Add `path: ['fieldName']` |
diff --git a/.cursor/skills/react-hook-form-zod/scripts/check-versions.sh b/.cursor/skills/react-hook-form-zod/scripts/check-versions.sh
new file mode 100755
index 0000000..e1777d8
--- /dev/null
+++ b/.cursor/skills/react-hook-form-zod/scripts/check-versions.sh
@@ -0,0 +1,51 @@
+#!/bin/bash
+
+# Check Latest Versions of React Hook Form + Zod Packages
+# Usage: ./check-versions.sh
+
+echo "Checking latest package versions..."
+echo ""
+
+# Color codes
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+# Check react-hook-form
+echo -e "${GREEN}react-hook-form:${NC}"
+npm view react-hook-form version
+echo ""
+
+# Check zod
+echo -e "${GREEN}zod:${NC}"
+npm view zod version
+echo ""
+
+# Check @hookform/resolvers
+echo -e "${GREEN}@hookform/resolvers:${NC}"
+npm view @hookform/resolvers version
+echo ""
+
+# Check last 5 versions of each
+echo "---"
+echo ""
+echo -e "${YELLOW}Last 5 versions of react-hook-form:${NC}"
+npm view react-hook-form versions --json | tail -7 | head -6
+echo ""
+
+echo -e "${YELLOW}Last 5 versions of zod:${NC}"
+npm view zod versions --json | tail -7 | head -6
+echo ""
+
+echo -e "${YELLOW}Last 5 versions of @hookform/resolvers:${NC}"
+npm view @hookform/resolvers versions --json | tail -7 | head -6
+echo ""
+
+echo "---"
+echo ""
+echo "Documentation Tested Versions (as of 2025-10-23):"
+echo "  react-hook-form: 7.65.0"
+echo "  zod: 4.1.12"
+echo "  @hookform/resolvers: 5.2.2"
+echo ""
+echo "Run 'npm view <package> version' to check latest"
diff --git a/.cursor/skills/react-hook-form-zod/templates/advanced-form.tsx b/.cursor/skills/react-hook-form-zod/templates/advanced-form.tsx
new file mode 100644
index 0000000..6ce951e
--- /dev/null
+++ b/.cursor/skills/react-hook-form-zod/templates/advanced-form.tsx
@@ -0,0 +1,427 @@
+/**
+ * Advanced Form Example - User Profile with Nested Objects and Arrays
+ *
+ * Demonstrates:
+ * - Nested object validation (address)
+ * - Array field validation (skills)
+ * - Conditional field validation
+ * - Complex Zod schemas with refinements
+ * - Type-safe nested error handling
+ */
+
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+
+// Define nested schemas
+const addressSchema = z.object({
+  street: z.string().min(1, 'Street is required'),
+  city: z.string().min(1, 'City is required'),
+  state: z.string().min(2, 'State must be at least 2 characters'),
+  zipCode: z.string().regex(/^\d{5}(-\d{4})?$/, 'Invalid ZIP code format'),
+  country: z.string().min(1, 'Country is required'),
+})
+
+// Complex schema with nested objects and arrays
+const profileSchema = z.object({
+  // Basic fields
+  firstName: z.string().min(2, 'First name must be at least 2 characters'),
+  lastName: z.string().min(2, 'Last name must be at least 2 characters'),
+  email: z.string().email('Invalid email address'),
+  phone: z.string().regex(/^\+?[1-9]\d{1,14}$/, 'Invalid phone number').optional(),
+
+  // Nested object
+  address: addressSchema,
+
+  // Array of strings
+  skills: z.array(z.string().min(1, 'Skill cannot be empty'))
+    .min(1, 'At least one skill is required')
+    .max(10, 'Maximum 10 skills allowed'),
+
+  // Conditional fields
+  isStudent: z.boolean(),
+  school: z.string().optional(),
+  graduationYear: z.number().int().min(1900).max(2100).optional(),
+
+  // Enum
+  experience: z.enum(['junior', 'mid', 'senior', 'lead'], {
+    errorMap: () => ({ message: 'Please select experience level' }),
+  }),
+
+  // Number with constraints
+  yearsOfExperience: z.number()
+    .int('Must be a whole number')
+    .min(0, 'Cannot be negative')
+    .max(50, 'Must be 50 or less'),
+
+  // Date
+  availableFrom: z.date().optional(),
+
+  // Boolean
+  agreedToTerms: z.boolean().refine((val) => val === true, {
+    message: 'You must agree to the terms and conditions',
+  }),
+})
+  .refine((data) => {
+    // Conditional validation: if isStudent is true, school is required
+    if (data.isStudent && !data.school) {
+      return false
+    }
+    return true
+  }, {
+    message: 'School is required for students',
+    path: ['school'],
+  })
+  .refine((data) => {
+    // Experience level should match years of experience
+    if (data.experience === 'senior' && data.yearsOfExperience < 5) {
+      return false
+    }
+    return true
+  }, {
+    message: 'Senior level requires at least 5 years of experience',
+    path: ['yearsOfExperience'],
+  })
+
+type ProfileFormData = z.infer<typeof profileSchema>
+
+export function AdvancedProfileForm() {
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors, isSubmitting },
+    setValue,
+  } = useForm<ProfileFormData>({
+    resolver: zodResolver(profileSchema),
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+      email: '',
+      phone: '',
+      address: {
+        street: '',
+        city: '',
+        state: '',
+        zipCode: '',
+        country: 'USA',
+      },
+      skills: [''], // Start with one empty skill
+      isStudent: false,
+      school: '',
+      experience: 'junior',
+      yearsOfExperience: 0,
+      agreedToTerms: false,
+    },
+  })
+
+  // Watch isStudent to conditionally show school field
+  const isStudent = watch('isStudent')
+
+  const onSubmit = async (data: ProfileFormData) => {
+    console.log('Profile data:', data)
+    // API call
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6 max-w-2xl mx-auto">
+      <h2 className="text-3xl font-bold">User Profile</h2>
+
+      {/* Basic Information */}
+      <section className="space-y-4">
+        <h3 className="text-xl font-semibold">Basic Information</h3>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label htmlFor="firstName" className="block text-sm font-medium mb-1">
+              First Name *
+            </label>
+            <input
+              id="firstName"
+              {...register('firstName')}
+              className="w-full px-3 py-2 border rounded-md"
+            />
+            {errors.firstName && (
+              <span role="alert" className="text-sm text-red-600 mt-1 block">
+                {errors.firstName.message}
+              </span>
+            )}
+          </div>
+
+          <div>
+            <label htmlFor="lastName" className="block text-sm font-medium mb-1">
+              Last Name *
+            </label>
+            <input
+              id="lastName"
+              {...register('lastName')}
+              className="w-full px-3 py-2 border rounded-md"
+            />
+            {errors.lastName && (
+              <span role="alert" className="text-sm text-red-600 mt-1 block">
+                {errors.lastName.message}
+              </span>
+            )}
+          </div>
+        </div>
+
+        <div>
+          <label htmlFor="email" className="block text-sm font-medium mb-1">
+            Email *
+          </label>
+          <input
+            id="email"
+            type="email"
+            {...register('email')}
+            className="w-full px-3 py-2 border rounded-md"
+          />
+          {errors.email && (
+            <span role="alert" className="text-sm text-red-600 mt-1 block">
+              {errors.email.message}
+            </span>
+          )}
+        </div>
+
+        <div>
+          <label htmlFor="phone" className="block text-sm font-medium mb-1">
+            Phone (Optional)
+          </label>
+          <input
+            id="phone"
+            type="tel"
+            {...register('phone')}
+            placeholder="+1234567890"
+            className="w-full px-3 py-2 border rounded-md"
+          />
+          {errors.phone && (
+            <span role="alert" className="text-sm text-red-600 mt-1 block">
+              {errors.phone.message}
+            </span>
+          )}
+        </div>
+      </section>
+
+      {/* Address (Nested Object) */}
+      <section className="space-y-4">
+        <h3 className="text-xl font-semibold">Address</h3>
+
+        <div>
+          <label htmlFor="street" className="block text-sm font-medium mb-1">
+            Street *
+          </label>
+          <input
+            id="street"
+            {...register('address.street')}
+            className="w-full px-3 py-2 border rounded-md"
+          />
+          {errors.address?.street && (
+            <span role="alert" className="text-sm text-red-600 mt-1 block">
+              {errors.address.street.message}
+            </span>
+          )}
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label htmlFor="city" className="block text-sm font-medium mb-1">
+              City *
+            </label>
+            <input
+              id="city"
+              {...register('address.city')}
+              className="w-full px-3 py-2 border rounded-md"
+            />
+            {errors.address?.city && (
+              <span role="alert" className="text-sm text-red-600 mt-1 block">
+                {errors.address.city.message}
+              </span>
+            )}
+          </div>
+
+          <div>
+            <label htmlFor="state" className="block text-sm font-medium mb-1">
+              State *
+            </label>
+            <input
+              id="state"
+              {...register('address.state')}
+              className="w-full px-3 py-2 border rounded-md"
+            />
+            {errors.address?.state && (
+              <span role="alert" className="text-sm text-red-600 mt-1 block">
+                {errors.address.state.message}
+              </span>
+            )}
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label htmlFor="zipCode" className="block text-sm font-medium mb-1">
+              ZIP Code *
+            </label>
+            <input
+              id="zipCode"
+              {...register('address.zipCode')}
+              placeholder="12345 or 12345-6789"
+              className="w-full px-3 py-2 border rounded-md"
+            />
+            {errors.address?.zipCode && (
+              <span role="alert" className="text-sm text-red-600 mt-1 block">
+                {errors.address.zipCode.message}
+              </span>
+            )}
+          </div>
+
+          <div>
+            <label htmlFor="country" className="block text-sm font-medium mb-1">
+              Country *
+            </label>
+            <input
+              id="country"
+              {...register('address.country')}
+              className="w-full px-3 py-2 border rounded-md"
+            />
+            {errors.address?.country && (
+              <span role="alert" className="text-sm text-red-600 mt-1 block">
+                {errors.address.country.message}
+              </span>
+            )}
+          </div>
+        </div>
+      </section>
+
+      {/* Skills (Array - simplified for advanced-form, see dynamic-fields.tsx for full array handling) */}
+      <section className="space-y-4">
+        <h3 className="text-xl font-semibold">Skills</h3>
+        <p className="text-sm text-gray-600">
+          Enter skills separated by commas (handled as string for simplicity in this example)
+        </p>
+        <div>
+          <label htmlFor="skills" className="block text-sm font-medium mb-1">
+            Skills (comma-separated) *
+          </label>
+          <input
+            id="skills"
+            {...register('skills.0')} // Simplified - see dynamic-fields.tsx for proper array handling
+            placeholder="React, TypeScript, Node.js"
+            className="w-full px-3 py-2 border rounded-md"
+          />
+          {errors.skills && (
+            <span role="alert" className="text-sm text-red-600 mt-1 block">
+              {errors.skills.message || errors.skills[0]?.message}
+            </span>
+          )}
+        </div>
+      </section>
+
+      {/* Experience */}
+      <section className="space-y-4">
+        <h3 className="text-xl font-semibold">Experience</h3>
+
+        <div>
+          <label htmlFor="experience" className="block text-sm font-medium mb-1">
+            Experience Level *
+          </label>
+          <select
+            id="experience"
+            {...register('experience')}
+            className="w-full px-3 py-2 border rounded-md"
+          >
+            <option value="junior">Junior</option>
+            <option value="mid">Mid-Level</option>
+            <option value="senior">Senior</option>
+            <option value="lead">Lead</option>
+          </select>
+          {errors.experience && (
+            <span role="alert" className="text-sm text-red-600 mt-1 block">
+              {errors.experience.message}
+            </span>
+          )}
+        </div>
+
+        <div>
+          <label htmlFor="yearsOfExperience" className="block text-sm font-medium mb-1">
+            Years of Experience *
+          </label>
+          <input
+            id="yearsOfExperience"
+            type="number"
+            {...register('yearsOfExperience', { valueAsNumber: true })}
+            className="w-full px-3 py-2 border rounded-md"
+          />
+          {errors.yearsOfExperience && (
+            <span role="alert" className="text-sm text-red-600 mt-1 block">
+              {errors.yearsOfExperience.message}
+            </span>
+          )}
+        </div>
+      </section>
+
+      {/* Conditional Fields */}
+      <section className="space-y-4">
+        <h3 className="text-xl font-semibold">Education</h3>
+
+        <div className="flex items-center">
+          <input
+            id="isStudent"
+            type="checkbox"
+            {...register('isStudent')}
+            className="h-4 w-4 rounded"
+          />
+          <label htmlFor="isStudent" className="ml-2 text-sm">
+            I am currently a student
+          </label>
+        </div>
+
+        {/* Conditional field - only show if isStudent is true */}
+        {isStudent && (
+          <div>
+            <label htmlFor="school" className="block text-sm font-medium mb-1">
+              School Name *
+            </label>
+            <input
+              id="school"
+              {...register('school')}
+              className="w-full px-3 py-2 border rounded-md"
+            />
+            {errors.school && (
+              <span role="alert" className="text-sm text-red-600 mt-1 block">
+                {errors.school.message}
+              </span>
+            )}
+          </div>
+        )}
+      </section>
+
+      {/* Terms and Conditions */}
+      <section className="space-y-4">
+        <div className="flex items-start">
+          <input
+            id="agreedToTerms"
+            type="checkbox"
+            {...register('agreedToTerms')}
+            className="h-4 w-4 rounded mt-1"
+          />
+          <label htmlFor="agreedToTerms" className="ml-2 text-sm">
+            I agree to the terms and conditions *
+          </label>
+        </div>
+        {errors.agreedToTerms && (
+          <span role="alert" className="text-sm text-red-600 block">
+            {errors.agreedToTerms.message}
+          </span>
+        )}
+      </section>
+
+      {/* Submit Button */}
+      <button
+        type="submit"
+        disabled={isSubmitting}
+        className="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-400"
+      >
+        {isSubmitting ? 'Saving...' : 'Save Profile'}
+      </button>
+    </form>
+  )
+}
diff --git a/.cursor/skills/react-hook-form-zod/templates/async-validation.tsx b/.cursor/skills/react-hook-form-zod/templates/async-validation.tsx
new file mode 100644
index 0000000..bf0841d
--- /dev/null
+++ b/.cursor/skills/react-hook-form-zod/templates/async-validation.tsx
@@ -0,0 +1,402 @@
+/**
+ * Async Validation Example
+ *
+ * Demonstrates:
+ * - Async validation with API calls
+ * - Debouncing to prevent excessive requests
+ * - Loading states
+ * - Error handling for async validation
+ * - Request cancellation
+ */
+
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { useState, useRef, useEffect } from 'react'
+
+/**
+ * Pattern 1: Async Validation in Zod Schema
+ */
+const usernameSchema = z.string()
+  .min(3, 'Username must be at least 3 characters')
+  .max(20, 'Username must not exceed 20 characters')
+  .regex(/^[a-zA-Z0-9_]+$/, 'Username can only contain letters, numbers, and underscores')
+  .refine(async (username) => {
+    // Check if username is available via API
+    const response = await fetch(`/api/check-username?username=${encodeURIComponent(username)}`)
+    const { available } = await response.json()
+    return available
+  }, {
+    message: 'Username is already taken',
+  })
+
+const signupSchemaWithAsync = z.object({
+  username: usernameSchema,
+  email: z.string().email('Invalid email address'),
+  password: z.string().min(8, 'Password must be at least 8 characters'),
+})
+
+type SignupFormData = z.infer<typeof signupSchemaWithAsync>
+
+export function AsyncValidationForm() {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting, isValidating },
+  } = useForm<SignupFormData>({
+    resolver: zodResolver(signupSchemaWithAsync),
+    mode: 'onBlur', // Validate on blur to avoid validating on every keystroke
+    defaultValues: {
+      username: '',
+      email: '',
+      password: '',
+    },
+  })
+
+  const onSubmit = async (data: SignupFormData) => {
+    console.log('Form data:', data)
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 max-w-md mx-auto">
+      <h2 className="text-2xl font-bold">Sign Up</h2>
+
+      <div>
+        <label htmlFor="username" className="block text-sm font-medium mb-1">
+          Username
+        </label>
+        <input
+          id="username"
+          {...register('username')}
+          className="w-full px-3 py-2 border rounded-md"
+        />
+        {isValidating && (
+          <span className="text-sm text-blue-600 mt-1 block">
+            Checking availability...
+          </span>
+        )}
+        {errors.username && (
+          <span role="alert" className="text-sm text-red-600 mt-1 block">
+            {errors.username.message}
+          </span>
+        )}
+      </div>
+
+      <div>
+        <label htmlFor="email" className="block text-sm font-medium mb-1">
+          Email
+        </label>
+        <input
+          id="email"
+          type="email"
+          {...register('email')}
+          className="w-full px-3 py-2 border rounded-md"
+        />
+        {errors.email && (
+          <span role="alert" className="text-sm text-red-600 mt-1 block">
+            {errors.email.message}
+          </span>
+        )}
+      </div>
+
+      <div>
+        <label htmlFor="password" className="block text-sm font-medium mb-1">
+          Password
+        </label>
+        <input
+          id="password"
+          type="password"
+          {...register('password')}
+          className="w-full px-3 py-2 border rounded-md"
+        />
+        {errors.password && (
+          <span role="alert" className="text-sm text-red-600 mt-1 block">
+            {errors.password.message}
+          </span>
+        )}
+      </div>
+
+      <button
+        type="submit"
+        disabled={isSubmitting || isValidating}
+        className="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-400"
+      >
+        {isSubmitting ? 'Signing up...' : 'Sign Up'}
+      </button>
+    </form>
+  )
+}
+
+/**
+ * Pattern 2: Manual Async Validation with Debouncing and Cancellation
+ * Better performance - more control over when validation happens
+ */
+const manualValidationSchema = z.object({
+  username: z.string()
+    .min(3, 'Username must be at least 3 characters')
+    .max(20, 'Username must not exceed 20 characters')
+    .regex(/^[a-zA-Z0-9_]+$/, 'Username can only contain letters, numbers, and underscores'),
+  email: z.string().email('Invalid email address'),
+})
+
+type ManualValidationData = z.infer<typeof manualValidationSchema>
+
+export function DebouncedAsyncValidationForm() {
+  const {
+    register,
+    handleSubmit,
+    watch,
+    setError,
+    clearErrors,
+    formState: { errors, isSubmitting },
+  } = useForm<ManualValidationData>({
+    resolver: zodResolver(manualValidationSchema),
+    defaultValues: {
+      username: '',
+      email: '',
+    },
+  })
+
+  const [isCheckingUsername, setIsCheckingUsername] = useState(false)
+  const [isCheckingEmail, setIsCheckingEmail] = useState(false)
+  const abortControllerRef = useRef<AbortController | null>(null)
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+  const username = watch('username')
+  const email = watch('email')
+
+  // Debounced username validation
+  useEffect(() => {
+    // Clear previous timeout
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+    }
+
+    // Skip if username is too short (already handled by Zod)
+    if (!username || username.length < 3) {
+      setIsCheckingUsername(false)
+      return
+    }
+
+    // Debounce: wait 500ms after user stops typing
+    timeoutRef.current = setTimeout(async () => {
+      // Cancel previous request
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort()
+      }
+
+      // Create new abort controller
+      abortControllerRef.current = new AbortController()
+
+      setIsCheckingUsername(true)
+      clearErrors('username')
+
+      try {
+        const response = await fetch(
+          `/api/check-username?username=${encodeURIComponent(username)}`,
+          { signal: abortControllerRef.current.signal }
+        )
+
+        const { available } = await response.json()
+
+        if (!available) {
+          setError('username', {
+            type: 'async',
+            message: 'Username is already taken',
+          })
+        }
+      } catch (error: any) {
+        if (error.name !== 'AbortError') {
+          console.error('Username check error:', error)
+        }
+      } finally {
+        setIsCheckingUsername(false)
+      }
+    }, 500) // 500ms debounce
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    }
+  }, [username, setError, clearErrors])
+
+  // Debounced email validation
+  useEffect(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+    }
+
+    // Basic email validation first (handled by Zod)
+    if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      setIsCheckingEmail(false)
+      return
+    }
+
+    timeoutRef.current = setTimeout(async () => {
+      setIsCheckingEmail(true)
+      clearErrors('email')
+
+      try {
+        const response = await fetch(
+          `/api/check-email?email=${encodeURIComponent(email)}`
+        )
+
+        const { available } = await response.json()
+
+        if (!available) {
+          setError('email', {
+            type: 'async',
+            message: 'Email is already registered',
+          })
+        }
+      } catch (error) {
+        console.error('Email check error:', error)
+      } finally {
+        setIsCheckingEmail(false)
+      }
+    }, 500)
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    }
+  }, [email, setError, clearErrors])
+
+  const onSubmit = async (data: ManualValidationData) => {
+    // Final check before submission
+    if (isCheckingUsername || isCheckingEmail) {
+      return
+    }
+
+    console.log('Form data:', data)
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 max-w-md mx-auto">
+      <h2 className="text-2xl font-bold">Create Account</h2>
+
+      <div>
+        <label htmlFor="username" className="block text-sm font-medium mb-1">
+          Username
+        </label>
+        <div className="relative">
+          <input
+            id="username"
+            {...register('username')}
+            className="w-full px-3 py-2 border rounded-md"
+          />
+          {isCheckingUsername && (
+            <div className="absolute right-3 top-2.5">
+              <svg
+                className="animate-spin h-5 w-5 text-blue-600"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <circle
+                  className="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  strokeWidth="4"
+                ></circle>
+                <path
+                  className="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                ></path>
+              </svg>
+            </div>
+          )}
+        </div>
+        {errors.username && (
+          <span role="alert" className="text-sm text-red-600 mt-1 block">
+            {errors.username.message}
+          </span>
+        )}
+        {!errors.username && username.length >= 3 && !isCheckingUsername && (
+          <span className="text-sm text-green-600 mt-1 block">
+            Username is available ✓
+          </span>
+        )}
+      </div>
+
+      <div>
+        <label htmlFor="email" className="block text-sm font-medium mb-1">
+          Email
+        </label>
+        <div className="relative">
+          <input
+            id="email"
+            type="email"
+            {...register('email')}
+            className="w-full px-3 py-2 border rounded-md"
+          />
+          {isCheckingEmail && (
+            <div className="absolute right-3 top-2.5">
+              <svg
+                className="animate-spin h-5 w-5 text-blue-600"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <circle
+                  className="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  strokeWidth="4"
+                ></circle>
+                <path
+                  className="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                ></path>
+              </svg>
+            </div>
+          )}
+        </div>
+        {errors.email && (
+          <span role="alert" className="text-sm text-red-600 mt-1 block">
+            {errors.email.message}
+          </span>
+        )}
+        {!errors.email && email && !isCheckingEmail && (
+          <span className="text-sm text-green-600 mt-1 block">
+            Email is available ✓
+          </span>
+        )}
+      </div>
+
+      <button
+        type="submit"
+        disabled={isSubmitting || isCheckingUsername || isCheckingEmail}
+        className="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-400"
+      >
+        {isSubmitting ? 'Creating account...' : 'Create Account'}
+      </button>
+    </form>
+  )
+}
+
+/**
+ * Mock API endpoints for testing
+ */
+export async function checkUsernameAvailability(username: string): Promise<boolean> {
+  // Simulate API delay
+  await new Promise(resolve => setTimeout(resolve, 1000))
+
+  // Mock: usernames starting with 'test' are taken
+  return !username.toLowerCase().startsWith('test')
+}
+
+export async function checkEmailAvailability(email: string): Promise<boolean> {
+  await new Promise(resolve => setTimeout(resolve, 1000))
+
+  // Mock: emails with 'test' are taken
+  return !email.toLowerCase().includes('test')
+}
diff --git a/.cursor/skills/react-hook-form-zod/templates/basic-form.tsx b/.cursor/skills/react-hook-form-zod/templates/basic-form.tsx
new file mode 100644
index 0000000..5d0b69b
--- /dev/null
+++ b/.cursor/skills/react-hook-form-zod/templates/basic-form.tsx
@@ -0,0 +1,285 @@
+/**
+ * Basic Form Example - Login/Signup Form
+ *
+ * Demonstrates:
+ * - Simple form with email and password validation
+ * - useForm hook with zodResolver
+ * - Error display
+ * - Type-safe form data with z.infer
+ * - Accessible error messages
+ */
+
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+
+// 1. Define Zod validation schema
+const loginSchema = z.object({
+  email: z.string()
+    .min(1, 'Email is required')
+    .email('Invalid email address'),
+  password: z.string()
+    .min(8, 'Password must be at least 8 characters')
+    .regex(/[A-Z]/, 'Password must contain at least one uppercase letter')
+    .regex(/[a-z]/, 'Password must contain at least one lowercase letter')
+    .regex(/[0-9]/, 'Password must contain at least one number'),
+  rememberMe: z.boolean().optional(),
+})
+
+// 2. Infer TypeScript type from schema
+type LoginFormData = z.infer<typeof loginSchema>
+
+export function BasicLoginForm() {
+  // 3. Initialize form with zodResolver
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting, isValid },
+    reset,
+  } = useForm<LoginFormData>({
+    resolver: zodResolver(loginSchema),
+    mode: 'onBlur', // Validate on blur for better UX
+    defaultValues: {
+      email: '',
+      password: '',
+      rememberMe: false,
+    },
+  })
+
+  // 4. Handle form submission
+  const onSubmit = async (data: LoginFormData) => {
+    try {
+      console.log('Form data:', data)
+
+      // Make API call
+      const response = await fetch('/api/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      })
+
+      if (!response.ok) {
+        throw new Error('Login failed')
+      }
+
+      const result = await response.json()
+      console.log('Login successful:', result)
+
+      // Reset form after successful submission
+      reset()
+    } catch (error) {
+      console.error('Login error:', error)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 max-w-md mx-auto">
+      <h2 className="text-2xl font-bold">Login</h2>
+
+      {/* Email Field */}
+      <div>
+        <label htmlFor="email" className="block text-sm font-medium mb-1">
+          Email
+        </label>
+        <input
+          id="email"
+          type="email"
+          {...register('email')}
+          aria-invalid={errors.email ? 'true' : 'false'}
+          aria-describedby={errors.email ? 'email-error' : undefined}
+          className={`w-full px-3 py-2 border rounded-md ${
+            errors.email ? 'border-red-500' : 'border-gray-300'
+          }`}
+          placeholder="you@example.com"
+        />
+        {errors.email && (
+          <span
+            id="email-error"
+            role="alert"
+            className="text-sm text-red-600 mt-1 block"
+          >
+            {errors.email.message}
+          </span>
+        )}
+      </div>
+
+      {/* Password Field */}
+      <div>
+        <label htmlFor="password" className="block text-sm font-medium mb-1">
+          Password
+        </label>
+        <input
+          id="password"
+          type="password"
+          {...register('password')}
+          aria-invalid={errors.password ? 'true' : 'false'}
+          aria-describedby={errors.password ? 'password-error' : undefined}
+          className={`w-full px-3 py-2 border rounded-md ${
+            errors.password ? 'border-red-500' : 'border-gray-300'
+          }`}
+          placeholder="••••••••"
+        />
+        {errors.password && (
+          <span
+            id="password-error"
+            role="alert"
+            className="text-sm text-red-600 mt-1 block"
+          >
+            {errors.password.message}
+          </span>
+        )}
+      </div>
+
+      {/* Remember Me Checkbox */}
+      <div className="flex items-center">
+        <input
+          id="rememberMe"
+          type="checkbox"
+          {...register('rememberMe')}
+          className="h-4 w-4 rounded"
+        />
+        <label htmlFor="rememberMe" className="ml-2 text-sm">
+          Remember me
+        </label>
+      </div>
+
+      {/* Submit Button */}
+      <button
+        type="submit"
+        disabled={isSubmitting}
+        className="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
+      >
+        {isSubmitting ? 'Logging in...' : 'Login'}
+      </button>
+
+      {/* Form Status */}
+      <div className="text-sm text-gray-600">
+        {isValid && !isSubmitting && (
+          <span className="text-green-600">Form is valid ✓</span>
+        )}
+      </div>
+    </form>
+  )
+}
+
+/**
+ * Signup Form Variant
+ */
+const signupSchema = loginSchema.extend({
+  confirmPassword: z.string(),
+  name: z.string().min(2, 'Name must be at least 2 characters'),
+}).refine((data) => data.password === data.confirmPassword, {
+  message: "Passwords don't match",
+  path: ['confirmPassword'],
+})
+
+type SignupFormData = z.infer<typeof signupSchema>
+
+export function BasicSignupForm() {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<SignupFormData>({
+    resolver: zodResolver(signupSchema),
+    defaultValues: {
+      name: '',
+      email: '',
+      password: '',
+      confirmPassword: '',
+      rememberMe: false,
+    },
+  })
+
+  const onSubmit = async (data: SignupFormData) => {
+    console.log('Signup data:', data)
+    // API call
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 max-w-md mx-auto">
+      <h2 className="text-2xl font-bold">Sign Up</h2>
+
+      {/* Name Field */}
+      <div>
+        <label htmlFor="name" className="block text-sm font-medium mb-1">
+          Full Name
+        </label>
+        <input
+          id="name"
+          {...register('name')}
+          className="w-full px-3 py-2 border rounded-md"
+          placeholder="John Doe"
+        />
+        {errors.name && (
+          <span role="alert" className="text-sm text-red-600 mt-1 block">
+            {errors.name.message}
+          </span>
+        )}
+      </div>
+
+      {/* Email Field */}
+      <div>
+        <label htmlFor="email" className="block text-sm font-medium mb-1">
+          Email
+        </label>
+        <input
+          id="email"
+          type="email"
+          {...register('email')}
+          className="w-full px-3 py-2 border rounded-md"
+          placeholder="you@example.com"
+        />
+        {errors.email && (
+          <span role="alert" className="text-sm text-red-600 mt-1 block">
+            {errors.email.message}
+          </span>
+        )}
+      </div>
+
+      {/* Password Field */}
+      <div>
+        <label htmlFor="password" className="block text-sm font-medium mb-1">
+          Password
+        </label>
+        <input
+          id="password"
+          type="password"
+          {...register('password')}
+          className="w-full px-3 py-2 border rounded-md"
+        />
+        {errors.password && (
+          <span role="alert" className="text-sm text-red-600 mt-1 block">
+            {errors.password.message}
+          </span>
+        )}
+      </div>
+
+      {/* Confirm Password Field */}
+      <div>
+        <label htmlFor="confirmPassword" className="block text-sm font-medium mb-1">
+          Confirm Password
+        </label>
+        <input
+          id="confirmPassword"
+          type="password"
+          {...register('confirmPassword')}
+          className="w-full px-3 py-2 border rounded-md"
+        />
+        {errors.confirmPassword && (
+          <span role="alert" className="text-sm text-red-600 mt-1 block">
+            {errors.confirmPassword.message}
+          </span>
+        )}
+      </div>
+
+      <button
+        type="submit"
+        disabled={isSubmitting}
+        className="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-400"
+      >
+        {isSubmitting ? 'Creating account...' : 'Sign Up'}
+      </button>
+    </form>
+  )
+}
diff --git a/.cursor/skills/react-hook-form-zod/templates/custom-error-display.tsx b/.cursor/skills/react-hook-form-zod/templates/custom-error-display.tsx
new file mode 100644
index 0000000..4ad763a
--- /dev/null
+++ b/.cursor/skills/react-hook-form-zod/templates/custom-error-display.tsx
@@ -0,0 +1,303 @@
+/**
+ * Custom Error Display Example
+ *
+ * Demonstrates:
+ * - Custom error component
+ * - Error summary at top of form
+ * - Toast notifications for errors
+ * - Inline vs summary error display
+ * - Accessible error announcements
+ * - Icon-based error styling
+ */
+
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { useEffect, useState } from 'react'
+
+const formSchema = z.object({
+  username: z.string().min(3, 'Username must be at least 3 characters'),
+  email: z.string().email('Invalid email address'),
+  password: z.string().min(8, 'Password must be at least 8 characters'),
+  age: z.number().min(18, 'You must be at least 18 years old'),
+})
+
+type FormData = z.infer<typeof formSchema>
+
+/**
+ * Custom Error Component
+ */
+function FormError({ message, icon = true }: { message: string; icon?: boolean }) {
+  return (
+    <div role="alert" className="flex items-start gap-2 text-sm text-red-600 mt-1">
+      {icon && (
+        <svg className="w-4 h-4 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+          <path
+            fillRule="evenodd"
+            d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+            clipRule="evenodd"
+          />
+        </svg>
+      )}
+      <span>{message}</span>
+    </div>
+  )
+}
+
+/**
+ * Error Summary Component
+ */
+function ErrorSummary({ errors }: { errors: Record<string, any> }) {
+  const errorEntries = Object.entries(errors).filter(([key, value]) => value?.message)
+
+  if (errorEntries.length === 0) return null
+
+  return (
+    <div
+      role="alert"
+      aria-live="assertive"
+      className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6"
+    >
+      <div className="flex items-center gap-2 mb-2">
+        <svg className="w-5 h-5 text-red-600" fill="currentColor" viewBox="0 0 20 20">
+          <path
+            fillRule="evenodd"
+            d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+            clipRule="evenodd"
+          />
+        </svg>
+        <h3 className="font-medium text-red-900">
+          {errorEntries.length} {errorEntries.length === 1 ? 'Error' : 'Errors'} Found
+        </h3>
+      </div>
+      <ul className="list-disc list-inside space-y-1 text-sm text-red-700">
+        {errorEntries.map(([field, error]) => (
+          <li key={field}>
+            <strong className="capitalize">{field}:</strong> {error.message}
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+/**
+ * Toast Notification for Errors
+ */
+function ErrorToast({ message, onClose }: { message: string; onClose: () => void }) {
+  useEffect(() => {
+    const timer = setTimeout(onClose, 5000)
+    return () => clearTimeout(timer)
+  }, [onClose])
+
+  return (
+    <div className="fixed bottom-4 right-4 bg-red-600 text-white px-6 py-4 rounded-lg shadow-lg flex items-start gap-3 max-w-sm animate-slide-in">
+      <svg className="w-6 h-6 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+        <path
+          fillRule="evenodd"
+          d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+          clipRule="evenodd"
+        />
+      </svg>
+      <div className="flex-1">
+        <h4 className="font-medium">Validation Error</h4>
+        <p className="text-sm mt-1">{message}</p>
+      </div>
+      <button
+        onClick={onClose}
+        className="text-white hover:text-gray-200"
+        aria-label="Close notification"
+      >
+        ✕
+      </button>
+    </div>
+  )
+}
+
+/**
+ * Form with Custom Error Display
+ */
+export function CustomErrorDisplayForm() {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      username: '',
+      email: '',
+      password: '',
+      age: 18,
+    },
+  })
+
+  const [toastMessage, setToastMessage] = useState<string | null>(null)
+
+  const onSubmit = async (data: FormData) => {
+    console.log('Form data:', data)
+    setToastMessage('Form submitted successfully!')
+  }
+
+  const onError = (errors: any) => {
+    // Show toast on validation error
+    const errorCount = Object.keys(errors).length
+    setToastMessage(`Please fix ${errorCount} error${errorCount > 1 ? 's' : ''} before submitting`)
+  }
+
+  return (
+    <div className="max-w-2xl mx-auto">
+      <form onSubmit={handleSubmit(onSubmit, onError)} className="space-y-6">
+        <h2 className="text-2xl font-bold">Registration Form</h2>
+
+        {/* Error Summary */}
+        <ErrorSummary errors={errors} />
+
+        {/* Username */}
+        <div>
+          <label htmlFor="username" className="block text-sm font-medium mb-1">
+            Username *
+          </label>
+          <input
+            id="username"
+            {...register('username')}
+            aria-invalid={errors.username ? 'true' : 'false'}
+            aria-describedby={errors.username ? 'username-error' : undefined}
+            className={`w-full px-3 py-2 border rounded-md ${
+              errors.username ? 'border-red-500 focus:ring-red-500' : 'border-gray-300'
+            }`}
+          />
+          {errors.username && (
+            <FormError message={errors.username.message!} />
+          )}
+        </div>
+
+        {/* Email */}
+        <div>
+          <label htmlFor="email" className="block text-sm font-medium mb-1">
+            Email *
+          </label>
+          <input
+            id="email"
+            type="email"
+            {...register('email')}
+            aria-invalid={errors.email ? 'true' : 'false'}
+            className={`w-full px-3 py-2 border rounded-md ${
+              errors.email ? 'border-red-500' : 'border-gray-300'
+            }`}
+          />
+          {errors.email && (
+            <FormError message={errors.email.message!} />
+          )}
+        </div>
+
+        {/* Password */}
+        <div>
+          <label htmlFor="password" className="block text-sm font-medium mb-1">
+            Password *
+          </label>
+          <input
+            id="password"
+            type="password"
+            {...register('password')}
+            aria-invalid={errors.password ? 'true' : 'false'}
+            className={`w-full px-3 py-2 border rounded-md ${
+              errors.password ? 'border-red-500' : 'border-gray-300'
+            }`}
+          />
+          {errors.password && (
+            <FormError message={errors.password.message!} />
+          )}
+        </div>
+
+        {/* Age */}
+        <div>
+          <label htmlFor="age" className="block text-sm font-medium mb-1">
+            Age *
+          </label>
+          <input
+            id="age"
+            type="number"
+            {...register('age', { valueAsNumber: true })}
+            aria-invalid={errors.age ? 'true' : 'false'}
+            className={`w-full px-3 py-2 border rounded-md ${
+              errors.age ? 'border-red-500' : 'border-gray-300'
+            }`}
+          />
+          {errors.age && (
+            <FormError message={errors.age.message!} />
+          )}
+        </div>
+
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-400"
+        >
+          {isSubmitting ? 'Submitting...' : 'Submit'}
+        </button>
+      </form>
+
+      {/* Toast Notification */}
+      {toastMessage && (
+        <ErrorToast message={toastMessage} onClose={() => setToastMessage(null)} />
+      )}
+
+      <style>{`
+        @keyframes slide-in {
+          from {
+            transform: translateX(100%);
+            opacity: 0;
+          }
+          to {
+            transform: translateX(0);
+            opacity: 1;
+          }
+        }
+        .animate-slide-in {
+          animation: slide-in 0.3s ease-out;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+/**
+ * Alternative: Grouped Error Display
+ */
+export function GroupedErrorDisplayForm() {
+  const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+  })
+
+  return (
+    <form onSubmit={handleSubmit((data) => console.log(data))} className="max-w-2xl mx-auto space-y-6">
+      <h2 className="text-2xl font-bold">Grouped Error Display</h2>
+
+      {/* All errors in single container */}
+      {Object.keys(errors).length > 0 && (
+        <div className="bg-red-50 border-l-4 border-red-600 p-4">
+          <h3 className="font-medium text-red-900 mb-2">Please correct the following:</h3>
+          <div className="space-y-2">
+            {Object.entries(errors).map(([field, error]) => (
+              <div key={field} className="flex items-start gap-2 text-sm text-red-700">
+                <span className="font-medium capitalize">{field}:</span>
+                <span>{error.message}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Form fields without individual error messages */}
+      <input {...register('username')} placeholder="Username" className="w-full px-3 py-2 border rounded" />
+      <input {...register('email')} placeholder="Email" className="w-full px-3 py-2 border rounded" />
+      <input {...register('password')} type="password" placeholder="Password" className="w-full px-3 py-2 border rounded" />
+      <input {...register('age', { valueAsNumber: true })} type="number" placeholder="Age" className="w-full px-3 py-2 border rounded" />
+
+      <button type="submit" className="w-full px-4 py-2 bg-blue-600 text-white rounded">
+        Submit
+      </button>
+    </form>
+  )
+}
diff --git a/.cursor/skills/react-hook-form-zod/templates/dynamic-fields.tsx b/.cursor/skills/react-hook-form-zod/templates/dynamic-fields.tsx
new file mode 100644
index 0000000..a7182f7
--- /dev/null
+++ b/.cursor/skills/react-hook-form-zod/templates/dynamic-fields.tsx
@@ -0,0 +1,308 @@
+/**
+ * Dynamic Form Fields Example - useFieldArray
+ *
+ * Demonstrates:
+ * - useFieldArray for dynamic add/remove functionality
+ * - Array validation with Zod
+ * - Proper key usage (field.id, not index)
+ * - Nested field error handling
+ * - Add, remove, update, insert operations
+ */
+
+import { useForm, useFieldArray } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+
+// Schema for contact list
+const contactSchema = z.object({
+  name: z.string().min(1, 'Name is required'),
+  email: z.string().email('Invalid email'),
+  phone: z.string().regex(/^\+?[1-9]\d{1,14}$/, 'Invalid phone number').optional(),
+  isPrimary: z.boolean().optional(),
+})
+
+const contactListSchema = z.object({
+  contacts: z.array(contactSchema)
+    .min(1, 'At least one contact is required')
+    .max(10, 'Maximum 10 contacts allowed'),
+})
+
+type ContactListData = z.infer<typeof contactListSchema>
+
+export function DynamicContactList() {
+  const {
+    register,
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<ContactListData>({
+    resolver: zodResolver(contactListSchema),
+    defaultValues: {
+      contacts: [{ name: '', email: '', phone: '', isPrimary: false }],
+    },
+  })
+
+  const { fields, append, remove, insert, update } = useFieldArray({
+    control,
+    name: 'contacts',
+  })
+
+  const onSubmit = (data: ContactListData) => {
+    console.log('Contacts:', data)
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6 max-w-2xl mx-auto">
+      <h2 className="text-2xl font-bold">Contact List</h2>
+
+      {/* Array error (min/max length) */}
+      {errors.contacts && !Array.isArray(errors.contacts) && (
+        <div role="alert" className="text-sm text-red-600 bg-red-50 p-3 rounded">
+          {errors.contacts.message}
+        </div>
+      )}
+
+      <div className="space-y-4">
+        {fields.map((field, index) => (
+          <div
+            key={field.id} // IMPORTANT: Use field.id, not index
+            className="border rounded-lg p-4 space-y-3"
+          >
+            <div className="flex justify-between items-center">
+              <h3 className="font-medium">Contact {index + 1}</h3>
+              <button
+                type="button"
+                onClick={() => remove(index)}
+                className="text-red-600 hover:text-red-800 text-sm"
+                disabled={fields.length === 1} // Require at least one contact
+              >
+                Remove
+              </button>
+            </div>
+
+            {/* Name */}
+            <div>
+              <label htmlFor={`contacts.${index}.name`} className="block text-sm font-medium mb-1">
+                Name *
+              </label>
+              <input
+                id={`contacts.${index}.name`}
+                {...register(`contacts.${index}.name` as const)}
+                className="w-full px-3 py-2 border rounded-md"
+              />
+              {errors.contacts?.[index]?.name && (
+                <span role="alert" className="text-sm text-red-600 mt-1 block">
+                  {errors.contacts[index]?.name?.message}
+                </span>
+              )}
+            </div>
+
+            {/* Email */}
+            <div>
+              <label htmlFor={`contacts.${index}.email`} className="block text-sm font-medium mb-1">
+                Email *
+              </label>
+              <input
+                id={`contacts.${index}.email`}
+                type="email"
+                {...register(`contacts.${index}.email` as const)}
+                className="w-full px-3 py-2 border rounded-md"
+              />
+              {errors.contacts?.[index]?.email && (
+                <span role="alert" className="text-sm text-red-600 mt-1 block">
+                  {errors.contacts[index]?.email?.message}
+                </span>
+              )}
+            </div>
+
+            {/* Phone */}
+            <div>
+              <label htmlFor={`contacts.${index}.phone`} className="block text-sm font-medium mb-1">
+                Phone (Optional)
+              </label>
+              <input
+                id={`contacts.${index}.phone`}
+                type="tel"
+                {...register(`contacts.${index}.phone` as const)}
+                placeholder="+1234567890"
+                className="w-full px-3 py-2 border rounded-md"
+              />
+              {errors.contacts?.[index]?.phone && (
+                <span role="alert" className="text-sm text-red-600 mt-1 block">
+                  {errors.contacts[index]?.phone?.message}
+                </span>
+              )}
+            </div>
+
+            {/* Primary Contact Checkbox */}
+            <div className="flex items-center">
+              <input
+                id={`contacts.${index}.isPrimary`}
+                type="checkbox"
+                {...register(`contacts.${index}.isPrimary` as const)}
+                className="h-4 w-4 rounded"
+              />
+              <label htmlFor={`contacts.${index}.isPrimary`} className="ml-2 text-sm">
+                Primary contact
+              </label>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Add Contact Button */}
+      <div className="flex gap-2">
+        <button
+          type="button"
+          onClick={() => append({ name: '', email: '', phone: '', isPrimary: false })}
+          disabled={fields.length >= 10}
+          className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:bg-gray-400"
+        >
+          Add Contact
+        </button>
+
+        <button
+          type="button"
+          onClick={() => insert(0, { name: '', email: '', phone: '', isPrimary: false })}
+          className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+        >
+          Add at Top
+        </button>
+      </div>
+
+      {/* Submit */}
+      <button type="submit" className="w-full px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
+        Save Contacts
+      </button>
+    </form>
+  )
+}
+
+/**
+ * Advanced Example: Skills with Custom Add
+ */
+const skillSchema = z.object({
+  name: z.string().min(1, 'Skill name is required'),
+  level: z.enum(['beginner', 'intermediate', 'advanced', 'expert']),
+  yearsOfExperience: z.number().int().min(0).max(50),
+})
+
+const skillsFormSchema = z.object({
+  skills: z.array(skillSchema).min(1, 'Add at least one skill'),
+})
+
+type SkillsFormData = z.infer<typeof skillsFormSchema>
+
+export function DynamicSkillsForm() {
+  const { register, control, handleSubmit, formState: { errors } } = useForm<SkillsFormData>({
+    resolver: zodResolver(skillsFormSchema),
+    defaultValues: {
+      skills: [],
+    },
+  })
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: 'skills',
+  })
+
+  // Preset skill templates
+  const addPresetSkill = (skillName: string) => {
+    append({
+      name: skillName,
+      level: 'intermediate',
+      yearsOfExperience: 1,
+    })
+  }
+
+  const onSubmit = (data: SkillsFormData) => {
+    console.log('Skills:', data)
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6 max-w-2xl mx-auto">
+      <h2 className="text-2xl font-bold">Your Skills</h2>
+
+      {errors.skills && !Array.isArray(errors.skills) && (
+        <div role="alert" className="text-sm text-red-600">
+          {errors.skills.message}
+        </div>
+      )}
+
+      {/* Preset Skills */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium">Quick Add:</h3>
+        <div className="flex flex-wrap gap-2">
+          {['React', 'TypeScript', 'Node.js', 'Python', 'SQL'].map((skill) => (
+            <button
+              key={skill}
+              type="button"
+              onClick={() => addPresetSkill(skill)}
+              className="px-3 py-1 bg-gray-200 rounded-full text-sm hover:bg-gray-300"
+            >
+              + {skill}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Skills List */}
+      <div className="space-y-3">
+        {fields.map((field, index) => (
+          <div key={field.id} className="border rounded p-3 flex gap-3 items-start">
+            <div className="flex-1 space-y-2">
+              <input
+                {...register(`skills.${index}.name` as const)}
+                placeholder="Skill name"
+                className="w-full px-2 py-1 border rounded text-sm"
+              />
+              {errors.skills?.[index]?.name && (
+                <span className="text-xs text-red-600">{errors.skills[index]?.name?.message}</span>
+              )}
+
+              <div className="grid grid-cols-2 gap-2">
+                <select
+                  {...register(`skills.${index}.level` as const)}
+                  className="px-2 py-1 border rounded text-sm"
+                >
+                  <option value="beginner">Beginner</option>
+                  <option value="intermediate">Intermediate</option>
+                  <option value="advanced">Advanced</option>
+                  <option value="expert">Expert</option>
+                </select>
+
+                <input
+                  type="number"
+                  {...register(`skills.${index}.yearsOfExperience` as const, { valueAsNumber: true })}
+                  placeholder="Years"
+                  className="px-2 py-1 border rounded text-sm"
+                />
+              </div>
+            </div>
+
+            <button
+              type="button"
+              onClick={() => remove(index)}
+              className="text-red-600 hover:text-red-800 text-sm px-2"
+            >
+              ✕
+            </button>
+          </div>
+        ))}
+      </div>
+
+      {/* Custom Add */}
+      <button
+        type="button"
+        onClick={() => append({ name: '', level: 'beginner', yearsOfExperience: 0 })}
+        className="w-full px-4 py-2 border-2 border-dashed border-gray-300 rounded-md hover:border-gray-400 text-gray-600"
+      >
+        + Add Custom Skill
+      </button>
+
+      <button type="submit" className="w-full px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
+        Save Skills
+      </button>
+    </form>
+  )
+}
diff --git a/.cursor/skills/react-hook-form-zod/templates/multi-step-form.tsx b/.cursor/skills/react-hook-form-zod/templates/multi-step-form.tsx
new file mode 100644
index 0000000..13ca66e
--- /dev/null
+++ b/.cursor/skills/react-hook-form-zod/templates/multi-step-form.tsx
@@ -0,0 +1,367 @@
+/**
+ * Multi-Step Form Example (Wizard)
+ *
+ * Demonstrates:
+ * - Multi-step form with per-step validation
+ * - Progress tracking
+ * - Step navigation (next, previous)
+ * - Partial schema validation
+ * - Combined schema for final submission
+ * - Preserving form state across steps
+ */
+
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+
+// Step 1: Personal Information
+const step1Schema = z.object({
+  firstName: z.string().min(2, 'First name must be at least 2 characters'),
+  lastName: z.string().min(2, 'Last name must be at least 2 characters'),
+  email: z.string().email('Invalid email address'),
+  phone: z.string().regex(/^\+?[1-9]\d{1,14}$/, 'Invalid phone number'),
+})
+
+// Step 2: Address
+const step2Schema = z.object({
+  street: z.string().min(1, 'Street is required'),
+  city: z.string().min(1, 'City is required'),
+  state: z.string().min(2, 'State must be at least 2 characters'),
+  zipCode: z.string().regex(/^\d{5}(-\d{4})?$/, 'Invalid ZIP code'),
+})
+
+// Step 3: Account
+const step3Schema = z.object({
+  username: z.string()
+    .min(3, 'Username must be at least 3 characters')
+    .regex(/^[a-zA-Z0-9_]+$/, 'Username can only contain letters, numbers, and underscores'),
+  password: z.string()
+    .min(8, 'Password must be at least 8 characters')
+    .regex(/[A-Z]/, 'Password must contain uppercase letter')
+    .regex(/[0-9]/, 'Password must contain number'),
+  confirmPassword: z.string(),
+}).refine((data) => data.password === data.confirmPassword, {
+  message: "Passwords don't match",
+  path: ['confirmPassword'],
+})
+
+// Combined schema for final validation
+const fullFormSchema = step1Schema.merge(step2Schema).merge(step3Schema)
+
+type FormData = z.infer<typeof fullFormSchema>
+type Step1Data = z.infer<typeof step1Schema>
+type Step2Data = z.infer<typeof step2Schema>
+type Step3Data = z.infer<typeof step3Schema>
+
+const TOTAL_STEPS = 3
+
+export function MultiStepRegistrationForm() {
+  const [currentStep, setCurrentStep] = useState(1)
+
+  const {
+    register,
+    handleSubmit,
+    trigger,
+    getValues,
+    formState: { errors, isSubmitting },
+  } = useForm<FormData>({
+    resolver: zodResolver(fullFormSchema),
+    mode: 'onChange', // Validate as user types
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+      email: '',
+      phone: '',
+      street: '',
+      city: '',
+      state: '',
+      zipCode: '',
+      username: '',
+      password: '',
+      confirmPassword: '',
+    },
+  })
+
+  // Navigate to next step
+  const nextStep = async () => {
+    let fieldsToValidate: (keyof FormData)[] = []
+
+    if (currentStep === 1) {
+      fieldsToValidate = ['firstName', 'lastName', 'email', 'phone']
+    } else if (currentStep === 2) {
+      fieldsToValidate = ['street', 'city', 'state', 'zipCode']
+    }
+
+    // Trigger validation for current step fields
+    const isValid = await trigger(fieldsToValidate)
+
+    if (isValid) {
+      setCurrentStep((prev) => Math.min(prev + 1, TOTAL_STEPS))
+    }
+  }
+
+  // Navigate to previous step
+  const prevStep = () => {
+    setCurrentStep((prev) => Math.max(prev - 1, 1))
+  }
+
+  // Final form submission
+  const onSubmit = async (data: FormData) => {
+    console.log('Complete form data:', data)
+    // Make API call
+    alert('Form submitted successfully!')
+  }
+
+  // Calculate progress percentage
+  const progressPercentage = (currentStep / TOTAL_STEPS) * 100
+
+  return (
+    <div className="max-w-2xl mx-auto">
+      {/* Progress Bar */}
+      <div className="mb-8">
+        <div className="flex justify-between mb-2">
+          <span className="text-sm font-medium text-gray-700">
+            Step {currentStep} of {TOTAL_STEPS}
+          </span>
+          <span className="text-sm font-medium text-gray-700">
+            {Math.round(progressPercentage)}% Complete
+          </span>
+        </div>
+        <div className="w-full bg-gray-200 rounded-full h-2">
+          <div
+            className="bg-blue-600 h-2 rounded-full transition-all duration-300"
+            style={{ width: `${progressPercentage}%` }}
+          />
+        </div>
+
+        {/* Step Indicators */}
+        <div className="flex justify-between mt-4">
+          {[1, 2, 3].map((step) => (
+            <div
+              key={step}
+              className={`flex items-center ${
+                step < TOTAL_STEPS ? 'flex-1' : ''
+              }`}
+            >
+              <div
+                className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium ${
+                  step < currentStep
+                    ? 'bg-green-600 text-white'
+                    : step === currentStep
+                    ? 'bg-blue-600 text-white'
+                    : 'bg-gray-300 text-gray-600'
+                }`}
+              >
+                {step < currentStep ? '✓' : step}
+              </div>
+              {step < TOTAL_STEPS && (
+                <div
+                  className={`flex-1 h-1 mx-2 ${
+                    step < currentStep ? 'bg-green-600' : 'bg-gray-300'
+                  }`}
+                />
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+        {/* Step 1: Personal Information */}
+        {currentStep === 1 && (
+          <div className="space-y-4">
+            <h2 className="text-2xl font-bold">Personal Information</h2>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-medium mb-1">First Name *</label>
+                <input
+                  {...register('firstName')}
+                  className="w-full px-3 py-2 border rounded-md"
+                />
+                {errors.firstName && (
+                  <span className="text-sm text-red-600">{errors.firstName.message}</span>
+                )}
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-1">Last Name *</label>
+                <input
+                  {...register('lastName')}
+                  className="w-full px-3 py-2 border rounded-md"
+                />
+                {errors.lastName && (
+                  <span className="text-sm text-red-600">{errors.lastName.message}</span>
+                )}
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium mb-1">Email *</label>
+              <input
+                type="email"
+                {...register('email')}
+                className="w-full px-3 py-2 border rounded-md"
+              />
+              {errors.email && (
+                <span className="text-sm text-red-600">{errors.email.message}</span>
+              )}
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium mb-1">Phone *</label>
+              <input
+                type="tel"
+                {...register('phone')}
+                placeholder="+1234567890"
+                className="w-full px-3 py-2 border rounded-md"
+              />
+              {errors.phone && (
+                <span className="text-sm text-red-600">{errors.phone.message}</span>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Step 2: Address */}
+        {currentStep === 2 && (
+          <div className="space-y-4">
+            <h2 className="text-2xl font-bold">Address</h2>
+
+            <div>
+              <label className="block text-sm font-medium mb-1">Street Address *</label>
+              <input
+                {...register('street')}
+                className="w-full px-3 py-2 border rounded-md"
+              />
+              {errors.street && (
+                <span className="text-sm text-red-600">{errors.street.message}</span>
+              )}
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-medium mb-1">City *</label>
+                <input
+                  {...register('city')}
+                  className="w-full px-3 py-2 border rounded-md"
+                />
+                {errors.city && (
+                  <span className="text-sm text-red-600">{errors.city.message}</span>
+                )}
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-1">State *</label>
+                <input
+                  {...register('state')}
+                  className="w-full px-3 py-2 border rounded-md"
+                />
+                {errors.state && (
+                  <span className="text-sm text-red-600">{errors.state.message}</span>
+                )}
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium mb-1">ZIP Code *</label>
+              <input
+                {...register('zipCode')}
+                placeholder="12345 or 12345-6789"
+                className="w-full px-3 py-2 border rounded-md"
+              />
+              {errors.zipCode && (
+                <span className="text-sm text-red-600">{errors.zipCode.message}</span>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Step 3: Account */}
+        {currentStep === 3 && (
+          <div className="space-y-4">
+            <h2 className="text-2xl font-bold">Create Account</h2>
+
+            <div>
+              <label className="block text-sm font-medium mb-1">Username *</label>
+              <input
+                {...register('username')}
+                className="w-full px-3 py-2 border rounded-md"
+              />
+              {errors.username && (
+                <span className="text-sm text-red-600">{errors.username.message}</span>
+              )}
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium mb-1">Password *</label>
+              <input
+                type="password"
+                {...register('password')}
+                className="w-full px-3 py-2 border rounded-md"
+              />
+              {errors.password && (
+                <span className="text-sm text-red-600">{errors.password.message}</span>
+              )}
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium mb-1">Confirm Password *</label>
+              <input
+                type="password"
+                {...register('confirmPassword')}
+                className="w-full px-3 py-2 border rounded-md"
+              />
+              {errors.confirmPassword && (
+                <span className="text-sm text-red-600">{errors.confirmPassword.message}</span>
+              )}
+            </div>
+
+            {/* Summary */}
+            <div className="mt-6 p-4 bg-gray-50 rounded-md">
+              <h3 className="font-medium mb-2">Review Your Information:</h3>
+              <div className="text-sm space-y-1">
+                <p><strong>Name:</strong> {getValues('firstName')} {getValues('lastName')}</p>
+                <p><strong>Email:</strong> {getValues('email')}</p>
+                <p><strong>Phone:</strong> {getValues('phone')}</p>
+                <p><strong>Address:</strong> {getValues('street')}, {getValues('city')}, {getValues('state')} {getValues('zipCode')}</p>
+                <p><strong>Username:</strong> {getValues('username')}</p>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Navigation Buttons */}
+        <div className="flex justify-between pt-4">
+          <button
+            type="button"
+            onClick={prevStep}
+            disabled={currentStep === 1}
+            className="px-6 py-2 border rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            Previous
+          </button>
+
+          {currentStep < TOTAL_STEPS ? (
+            <button
+              type="button"
+              onClick={nextStep}
+              className="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+            >
+              Next
+            </button>
+          ) : (
+            <button
+              type="submit"
+              disabled={isSubmitting}
+              className="px-6 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:bg-gray-400"
+            >
+              {isSubmitting ? 'Submitting...' : 'Complete Registration'}
+            </button>
+          )}
+        </div>
+      </form>
+    </div>
+  )
+}
diff --git a/.cursor/skills/react-hook-form-zod/templates/package.json b/.cursor/skills/react-hook-form-zod/templates/package.json
new file mode 100644
index 0000000..f49118a
--- /dev/null
+++ b/.cursor/skills/react-hook-form-zod/templates/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "react-hook-form-zod-example",
+  "version": "1.0.0",
+  "description": "Example project demonstrating React Hook Form + Zod validation",
+  "private": true,
+  "dependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-hook-form": "^7.66.1",
+    "zod": "^4.1.12",
+    "@hookform/resolvers": "^5.2.2"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.3.0",
+    "@vitejs/plugin-react": "^4.3.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "keywords": [
+    "react",
+    "react-hook-form",
+    "zod",
+    "validation",
+    "forms",
+    "typescript"
+  ],
+  "author": "",
+  "license": "MIT"
+}
diff --git a/.cursor/skills/react-hook-form-zod/templates/server-validation.ts b/.cursor/skills/react-hook-form-zod/templates/server-validation.ts
new file mode 100644
index 0000000..9998086
--- /dev/null
+++ b/.cursor/skills/react-hook-form-zod/templates/server-validation.ts
@@ -0,0 +1,313 @@
+/**
+ * Server-Side Validation Example
+ *
+ * Demonstrates:
+ * - Using the SAME Zod schema on server
+ * - Single source of truth for validation
+ * - Error mapping from server to client
+ * - Type-safe validation on both sides
+ */
+
+import { z } from 'zod'
+
+/**
+ * SHARED SCHEMA - Use this exact schema on both client and server
+ * Define it in a shared file (e.g., schemas/user.ts) and import on both sides
+ */
+export const userRegistrationSchema = z.object({
+  username: z.string()
+    .min(3, 'Username must be at least 3 characters')
+    .max(20, 'Username must not exceed 20 characters')
+    .regex(/^[a-zA-Z0-9_]+$/, 'Username can only contain letters, numbers, and underscores'),
+  email: z.string()
+    .email('Invalid email address'),
+  password: z.string()
+    .min(8, 'Password must be at least 8 characters')
+    .regex(/[A-Z]/, 'Password must contain at least one uppercase letter')
+    .regex(/[a-z]/, 'Password must contain at least one lowercase letter')
+    .regex(/[0-9]/, 'Password must contain at least one number'),
+  age: z.number()
+    .int('Age must be a whole number')
+    .min(13, 'You must be at least 13 years old')
+    .max(120, 'Invalid age'),
+}).refine((data) => {
+  // Custom validation: check if username is blacklisted
+  const blacklistedUsernames = ['admin', 'root', 'system']
+  return !blacklistedUsernames.includes(data.username.toLowerCase())
+}, {
+  message: 'This username is not allowed',
+  path: ['username'],
+})
+
+type UserRegistrationData = z.infer<typeof userRegistrationSchema>
+
+/**
+ * SERVER-SIDE VALIDATION (Next.js API Route Example)
+ */
+export async function POST(request: Request) {
+  try {
+    const body = await request.json()
+
+    // 1. Parse and validate with Zod
+    const validatedData = userRegistrationSchema.parse(body)
+
+    // 2. Additional server-only validation (database checks, etc.)
+    const usernameExists = await checkUsernameExists(validatedData.username)
+    if (usernameExists) {
+      return Response.json(
+        {
+          success: false,
+          errors: {
+            username: 'Username is already taken',
+          },
+        },
+        { status: 400 }
+      )
+    }
+
+    const emailExists = await checkEmailExists(validatedData.email)
+    if (emailExists) {
+      return Response.json(
+        {
+          success: false,
+          errors: {
+            email: 'Email is already registered',
+          },
+        },
+        { status: 400 }
+      )
+    }
+
+    // 3. Proceed with registration
+    const user = await createUser(validatedData)
+
+    return Response.json({
+      success: true,
+      user: {
+        id: user.id,
+        username: user.username,
+        email: user.email,
+      },
+    })
+
+  } catch (error) {
+    // 4. Handle Zod validation errors
+    if (error instanceof z.ZodError) {
+      return Response.json(
+        {
+          success: false,
+          errors: error.flatten().fieldErrors,
+        },
+        { status: 400 }
+      )
+    }
+
+    // 5. Handle other errors
+    console.error('Registration error:', error)
+    return Response.json(
+      {
+        success: false,
+        message: 'An unexpected error occurred',
+      },
+      { status: 500 }
+    )
+  }
+}
+
+/**
+ * SERVER-SIDE VALIDATION (Node.js/Express Example)
+ */
+import express from 'express'
+
+const app = express()
+
+app.post('/api/register', async (req, res) => {
+  try {
+    // Parse and validate
+    const validatedData = userRegistrationSchema.parse(req.body)
+
+    // Server-only checks
+    const usernameExists = await checkUsernameExists(validatedData.username)
+    if (usernameExists) {
+      return res.status(400).json({
+        success: false,
+        errors: {
+          username: 'Username is already taken',
+        },
+      })
+    }
+
+    // Create user
+    const user = await createUser(validatedData)
+
+    res.json({
+      success: true,
+      user,
+    })
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return res.status(400).json({
+        success: false,
+        errors: error.flatten().fieldErrors,
+      })
+    }
+
+    console.error('Registration error:', error)
+    res.status(500).json({
+      success: false,
+      message: 'An unexpected error occurred',
+    })
+  }
+})
+
+/**
+ * SERVER-SIDE VALIDATION (Cloudflare Workers + Hono Example)
+ */
+import { Hono } from 'hono'
+import { zValidator } from '@hono/zod-validator'
+
+const app = new Hono()
+
+app.post('/api/register', zValidator('json', userRegistrationSchema), async (c) => {
+  // Data is already validated by zValidator middleware
+  const validatedData = c.req.valid('json')
+
+  // Server-only checks
+  const usernameExists = await checkUsernameExists(validatedData.username)
+  if (usernameExists) {
+    return c.json(
+      {
+        success: false,
+        errors: {
+          username: 'Username is already taken',
+        },
+      },
+      400
+    )
+  }
+
+  // Create user
+  const user = await createUser(validatedData)
+
+  return c.json({
+    success: true,
+    user,
+  })
+})
+
+/**
+ * CLIENT-SIDE INTEGRATION WITH SERVER ERRORS
+ */
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+
+function RegistrationForm() {
+  const {
+    register,
+    handleSubmit,
+    setError,
+    formState: { errors, isSubmitting },
+  } = useForm<UserRegistrationData>({
+    resolver: zodResolver(userRegistrationSchema),
+    defaultValues: {
+      username: '',
+      email: '',
+      password: '',
+      age: 18,
+    },
+  })
+
+  const onSubmit = async (data: UserRegistrationData) => {
+    try {
+      const response = await fetch('/api/register', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      })
+
+      const result = await response.json()
+
+      if (!result.success) {
+        // Map server errors to form fields
+        if (result.errors) {
+          Object.entries(result.errors).forEach(([field, message]) => {
+            setError(field as keyof UserRegistrationData, {
+              type: 'server',
+              message: Array.isArray(message) ? message[0] : message as string,
+            })
+          })
+        } else {
+          // Generic error
+          setError('root', {
+            type: 'server',
+            message: result.message || 'Registration failed',
+          })
+        }
+        return
+      }
+
+      // Success - redirect or show success message
+      console.log('Registration successful:', result.user)
+    } catch (error) {
+      setError('root', {
+        type: 'server',
+        message: 'Network error. Please try again.',
+      })
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      {errors.root && (
+        <div role="alert" className="error-banner">
+          {errors.root.message}
+        </div>
+      )}
+
+      {/* Form fields */}
+      <input {...register('username')} />
+      {errors.username && <span>{errors.username.message}</span>}
+
+      <input type="email" {...register('email')} />
+      {errors.email && <span>{errors.email.message}</span>}
+
+      <input type="password" {...register('password')} />
+      {errors.password && <span>{errors.password.message}</span>}
+
+      <input type="number" {...register('age', { valueAsNumber: true })} />
+      {errors.age && <span>{errors.age.message}</span>}
+
+      <button type="submit" disabled={isSubmitting}>
+        {isSubmitting ? 'Registering...' : 'Register'}
+      </button>
+    </form>
+  )
+}
+
+/**
+ * Helper functions (implement according to your database)
+ */
+async function checkUsernameExists(username: string): Promise<boolean> {
+  // Database query
+  return false
+}
+
+async function checkEmailExists(email: string): Promise<boolean> {
+  // Database query
+  return false
+}
+
+async function createUser(data: UserRegistrationData) {
+  // Create user in database
+  return { id: '1', ...data }
+}
+
+/**
+ * KEY BENEFITS OF SERVER-SIDE VALIDATION:
+ *
+ * 1. Security - Client validation can be bypassed, server validation cannot
+ * 2. Single Source of Truth - Same schema on client and server
+ * 3. Type Safety - TypeScript types automatically inferred from schema
+ * 4. Consistency - Same validation rules applied everywhere
+ * 5. Database Checks - Server can validate against database (unique username, etc.)
+ */
diff --git a/.cursor/skills/react-hook-form-zod/templates/shadcn-form.tsx b/.cursor/skills/react-hook-form-zod/templates/shadcn-form.tsx
new file mode 100644
index 0000000..6242176
--- /dev/null
+++ b/.cursor/skills/react-hook-form-zod/templates/shadcn-form.tsx
@@ -0,0 +1,351 @@
+/**
+ * shadcn/ui Form Component Integration
+ *
+ * Demonstrates:
+ * - shadcn/ui Form component with React Hook Form + Zod
+ * - FormField, FormItem, FormLabel, FormControl, FormMessage components
+ * - Type-safe form with proper error handling
+ * - Accessible form structure
+ *
+ * Installation:
+ * npx shadcn@latest add form input button
+ */
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+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 { Textarea } from '@/components/ui/textarea'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Checkbox } from '@/components/ui/checkbox'
+
+// Define schema
+const profileFormSchema = z.object({
+  username: z.string()
+    .min(2, { message: 'Username must be at least 2 characters.' })
+    .max(30, { message: 'Username must not be longer than 30 characters.' }),
+  email: z.string()
+    .email({ message: 'Please enter a valid email address.' }),
+  bio: z.string()
+    .max(160, { message: 'Bio must not be longer than 160 characters.' })
+    .optional(),
+  role: z.enum(['admin', 'user', 'guest'], {
+    required_error: 'Please select a role.',
+  }),
+  notifications: z.boolean().default(false).optional(),
+})
+
+type ProfileFormValues = z.infer<typeof profileFormSchema>
+
+export function ShadcnProfileForm() {
+  const form = useForm<ProfileFormValues>({
+    resolver: zodResolver(profileFormSchema),
+    defaultValues: {
+      username: '',
+      email: '',
+      bio: '',
+      notifications: false,
+    },
+  })
+
+  function onSubmit(data: ProfileFormValues) {
+    console.log('Form submitted:', data)
+    // Make API call
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8 max-w-2xl mx-auto">
+        <h2 className="text-3xl font-bold">Profile Settings</h2>
+
+        {/* Username Field */}
+        <FormField
+          control={form.control}
+          name="username"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <FormControl>
+                <Input placeholder="shadcn" {...field} />
+              </FormControl>
+              <FormDescription>
+                This is your public display name.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {/* Email Field */}
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <Input type="email" placeholder="you@example.com" {...field} />
+              </FormControl>
+              <FormDescription>
+                We'll never share your email with anyone.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {/* Bio Field (Textarea) */}
+        <FormField
+          control={form.control}
+          name="bio"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Bio</FormLabel>
+              <FormControl>
+                <Textarea
+                  placeholder="Tell us a little bit about yourself"
+                  className="resize-none"
+                  {...field}
+                />
+              </FormControl>
+              <FormDescription>
+                You can write up to 160 characters.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {/* Role Field (Select) */}
+        <FormField
+          control={form.control}
+          name="role"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Role</FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a role" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectItem value="admin">Admin</SelectItem>
+                  <SelectItem value="user">User</SelectItem>
+                  <SelectItem value="guest">Guest</SelectItem>
+                </SelectContent>
+              </Select>
+              <FormDescription>
+                Choose your account type.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {/* Notifications Field (Checkbox) */}
+        <FormField
+          control={form.control}
+          name="notifications"
+          render={({ field }) => (
+            <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
+              <FormControl>
+                <Checkbox
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                />
+              </FormControl>
+              <div className="space-y-1 leading-none">
+                <FormLabel>
+                  Email notifications
+                </FormLabel>
+                <FormDescription>
+                  Receive email notifications about your account activity.
+                </FormDescription>
+              </div>
+            </FormItem>
+          )}
+        />
+
+        <Button type="submit" disabled={form.formState.isSubmitting}>
+          {form.formState.isSubmitting ? 'Saving...' : 'Update profile'}
+        </Button>
+      </form>
+    </Form>
+  )
+}
+
+/**
+ * Multiple Field Types Example
+ */
+const settingsFormSchema = z.object({
+  name: z.string().min(1, 'Name is required'),
+  language: z.string(),
+  theme: z.enum(['light', 'dark', 'system']),
+  emailPreferences: z.object({
+    marketing: z.boolean().default(false),
+    updates: z.boolean().default(true),
+    security: z.boolean().default(true),
+  }),
+})
+
+type SettingsFormValues = z.infer<typeof settingsFormSchema>
+
+export function ShadcnSettingsForm() {
+  const form = useForm<SettingsFormValues>({
+    resolver: zodResolver(settingsFormSchema),
+    defaultValues: {
+      name: '',
+      language: 'en',
+      theme: 'system',
+      emailPreferences: {
+        marketing: false,
+        updates: true,
+        security: true,
+      },
+    },
+  })
+
+  function onSubmit(data: SettingsFormValues) {
+    console.log('Settings updated:', data)
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8 max-w-2xl mx-auto">
+        <h2 className="text-3xl font-bold">Settings</h2>
+
+        {/* Name */}
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Display Name</FormLabel>
+              <FormControl>
+                <Input {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {/* Theme */}
+        <FormField
+          control={form.control}
+          name="theme"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Theme</FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectItem value="light">Light</SelectItem>
+                  <SelectItem value="dark">Dark</SelectItem>
+                  <SelectItem value="system">System</SelectItem>
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {/* Email Preferences (Nested Object with Checkboxes) */}
+        <div className="space-y-4">
+          <h3 className="text-lg font-medium">Email Preferences</h3>
+
+          <FormField
+            control={form.control}
+            name="emailPreferences.marketing"
+            render={({ field }) => (
+              <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                <FormControl>
+                  <Checkbox
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
+                </FormControl>
+                <div className="space-y-1 leading-none">
+                  <FormLabel>Marketing emails</FormLabel>
+                  <FormDescription>
+                    Receive emails about new products and features.
+                  </FormDescription>
+                </div>
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="emailPreferences.updates"
+            render={({ field }) => (
+              <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                <FormControl>
+                  <Checkbox
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
+                </FormControl>
+                <div className="space-y-1 leading-none">
+                  <FormLabel>Update emails</FormLabel>
+                  <FormDescription>
+                    Receive emails about your account updates.
+                  </FormDescription>
+                </div>
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="emailPreferences.security"
+            render={({ field }) => (
+              <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                <FormControl>
+                  <Checkbox
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
+                </FormControl>
+                <div className="space-y-1 leading-none">
+                  <FormLabel>Security emails</FormLabel>
+                  <FormDescription>
+                    Receive emails about your account security (recommended).
+                  </FormDescription>
+                </div>
+              </FormItem>
+            )}
+          />
+        </div>
+
+        <Button type="submit">Save settings</Button>
+      </form>
+    </Form>
+  )
+}
+
+/**
+ * NOTE: shadcn/ui states "We are not actively developing the Form component anymore."
+ * They recommend using the Field component for new implementations.
+ * Check https://ui.shadcn.com/docs/components/form for latest guidance.
+ */
diff --git a/.cursor/skills/security-review/SKILL.md b/.cursor/skills/security-review/SKILL.md
new file mode 100644
index 0000000..d74c12a
--- /dev/null
+++ b/.cursor/skills/security-review/SKILL.md
@@ -0,0 +1,496 @@
+---
+name: security-review
+description: Use this skill when adding authentication, handling user input, working with secrets, creating API endpoints, or implementing payment/sensitive features. Provides comprehensive security checklist and patterns.
+author: affaan-m
+version: "1.0"
+---
+
+# Security Review Skill
+
+This skill ensures all code follows security best practices and identifies potential vulnerabilities.
+
+## When to Activate
+
+- Implementing authentication or authorization
+- Handling user input or file uploads
+- Creating new API endpoints
+- Working with secrets or credentials
+- Implementing payment features
+- Storing or transmitting sensitive data
+- Integrating third-party APIs
+
+## Security Checklist
+
+### 1. Secrets Management
+
+#### ❌ NEVER Do This
+```typescript
+const apiKey = "sk-proj-xxxxx"  // Hardcoded secret
+const dbPassword = "password123" // In source code
+```
+
+#### ✅ ALWAYS Do This
+```typescript
+const apiKey = process.env.OPENAI_API_KEY
+const dbUrl = process.env.DATABASE_URL
+
+// Verify secrets exist
+if (!apiKey) {
+  throw new Error('OPENAI_API_KEY not configured')
+}
+```
+
+#### Verification Steps
+- [ ] No hardcoded API keys, tokens, or passwords
+- [ ] All secrets in environment variables
+- [ ] `.env.local` in .gitignore
+- [ ] No secrets in git history
+- [ ] Production secrets in hosting platform (Vercel, Railway)
+
+### 2. Input Validation
+
+#### Always Validate User Input
+```typescript
+import { z } from 'zod'
+
+// Define validation schema
+const CreateUserSchema = z.object({
+  email: z.string().email(),
+  name: z.string().min(1).max(100),
+  age: z.number().int().min(0).max(150)
+})
+
+// Validate before processing
+export async function createUser(input: unknown) {
+  try {
+    const validated = CreateUserSchema.parse(input)
+    return await db.users.create(validated)
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return { success: false, errors: error.errors }
+    }
+    throw error
+  }
+}
+```
+
+#### File Upload Validation
+```typescript
+function validateFileUpload(file: File) {
+  // Size check (5MB max)
+  const maxSize = 5 * 1024 * 1024
+  if (file.size > maxSize) {
+    throw new Error('File too large (max 5MB)')
+  }
+
+  // Type check
+  const allowedTypes = ['image/jpeg', 'image/png', 'image/gif']
+  if (!allowedTypes.includes(file.type)) {
+    throw new Error('Invalid file type')
+  }
+
+  // Extension check
+  const allowedExtensions = ['.jpg', '.jpeg', '.png', '.gif']
+  const extension = file.name.toLowerCase().match(/\.[^.]+$/)?.[0]
+  if (!extension || !allowedExtensions.includes(extension)) {
+    throw new Error('Invalid file extension')
+  }
+
+  return true
+}
+```
+
+#### Verification Steps
+- [ ] All user inputs validated with schemas
+- [ ] File uploads restricted (size, type, extension)
+- [ ] No direct use of user input in queries
+- [ ] Whitelist validation (not blacklist)
+- [ ] Error messages don't leak sensitive info
+
+### 3. SQL Injection Prevention
+
+#### ❌ NEVER Concatenate SQL
+```typescript
+// DANGEROUS - SQL Injection vulnerability
+const query = `SELECT * FROM users WHERE email = '${userEmail}'`
+await db.query(query)
+```
+
+#### ✅ ALWAYS Use Parameterized Queries
+```typescript
+// Safe - parameterized query
+const { data } = await supabase
+  .from('users')
+  .select('*')
+  .eq('email', userEmail)
+
+// Or with raw SQL
+await db.query(
+  'SELECT * FROM users WHERE email = $1',
+  [userEmail]
+)
+```
+
+#### Verification Steps
+- [ ] All database queries use parameterized queries
+- [ ] No string concatenation in SQL
+- [ ] ORM/query builder used correctly
+- [ ] Supabase queries properly sanitized
+
+### 4. Authentication & Authorization
+
+#### JWT Token Handling
+```typescript
+// ❌ WRONG: localStorage (vulnerable to XSS)
+localStorage.setItem('token', token)
+
+// ✅ CORRECT: httpOnly cookies
+res.setHeader('Set-Cookie',
+  `token=${token}; HttpOnly; Secure; SameSite=Strict; Max-Age=3600`)
+```
+
+#### Authorization Checks
+```typescript
+export async function deleteUser(userId: string, requesterId: string) {
+  // ALWAYS verify authorization first
+  const requester = await db.users.findUnique({
+    where: { id: requesterId }
+  })
+
+  if (requester.role !== 'admin') {
+    return NextResponse.json(
+      { error: 'Unauthorized' },
+      { status: 403 }
+    )
+  }
+
+  // Proceed with deletion
+  await db.users.delete({ where: { id: userId } })
+}
+```
+
+#### Row Level Security (Supabase)
+```sql
+-- Enable RLS on all tables
+ALTER TABLE users ENABLE ROW LEVEL SECURITY;
+
+-- Users can only view their own data
+CREATE POLICY "Users view own data"
+  ON users FOR SELECT
+  USING (auth.uid() = id);
+
+-- Users can only update their own data
+CREATE POLICY "Users update own data"
+  ON users FOR UPDATE
+  USING (auth.uid() = id);
+```
+
+#### Verification Steps
+- [ ] Tokens stored in httpOnly cookies (not localStorage)
+- [ ] Authorization checks before sensitive operations
+- [ ] Row Level Security enabled in Supabase
+- [ ] Role-based access control implemented
+- [ ] Session management secure
+
+### 5. XSS Prevention
+
+#### Sanitize HTML
+```typescript
+import DOMPurify from 'isomorphic-dompurify'
+
+// ALWAYS sanitize user-provided HTML
+function renderUserContent(html: string) {
+  const clean = DOMPurify.sanitize(html, {
+    ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'p'],
+    ALLOWED_ATTR: []
+  })
+  return <div dangerouslySetInnerHTML={{ __html: clean }} />
+}
+```
+
+#### Content Security Policy
+```typescript
+// next.config.js
+const securityHeaders = [
+  {
+    key: 'Content-Security-Policy',
+    value: `
+      default-src 'self';
+      script-src 'self' 'unsafe-eval' 'unsafe-inline';
+      style-src 'self' 'unsafe-inline';
+      img-src 'self' data: https:;
+      font-src 'self';
+      connect-src 'self' https://api.example.com;
+    `.replace(/\s{2,}/g, ' ').trim()
+  }
+]
+```
+
+#### Verification Steps
+- [ ] User-provided HTML sanitized
+- [ ] CSP headers configured
+- [ ] No unvalidated dynamic content rendering
+- [ ] React's built-in XSS protection used
+
+### 6. CSRF Protection
+
+#### CSRF Tokens
+```typescript
+import { csrf } from '@/lib/csrf'
+
+export async function POST(request: Request) {
+  const token = request.headers.get('X-CSRF-Token')
+
+  if (!csrf.verify(token)) {
+    return NextResponse.json(
+      { error: 'Invalid CSRF token' },
+      { status: 403 }
+    )
+  }
+
+  // Process request
+}
+```
+
+#### SameSite Cookies
+```typescript
+res.setHeader('Set-Cookie',
+  `session=${sessionId}; HttpOnly; Secure; SameSite=Strict`)
+```
+
+#### Verification Steps
+- [ ] CSRF tokens on state-changing operations
+- [ ] SameSite=Strict on all cookies
+- [ ] Double-submit cookie pattern implemented
+
+### 7. Rate Limiting
+
+#### API Rate Limiting
+```typescript
+import rateLimit from 'express-rate-limit'
+
+const limiter = rateLimit({
+  windowMs: 15 * 60 * 1000, // 15 minutes
+  max: 100, // 100 requests per window
+  message: 'Too many requests'
+})
+
+// Apply to routes
+app.use('/api/', limiter)
+```
+
+#### Expensive Operations
+```typescript
+// Aggressive rate limiting for searches
+const searchLimiter = rateLimit({
+  windowMs: 60 * 1000, // 1 minute
+  max: 10, // 10 requests per minute
+  message: 'Too many search requests'
+})
+
+app.use('/api/search', searchLimiter)
+```
+
+#### Verification Steps
+- [ ] Rate limiting on all API endpoints
+- [ ] Stricter limits on expensive operations
+- [ ] IP-based rate limiting
+- [ ] User-based rate limiting (authenticated)
+
+### 8. Sensitive Data Exposure
+
+#### Logging
+```typescript
+// ❌ WRONG: Logging sensitive data
+console.log('User login:', { email, password })
+console.log('Payment:', { cardNumber, cvv })
+
+// ✅ CORRECT: Redact sensitive data
+console.log('User login:', { email, userId })
+console.log('Payment:', { last4: card.last4, userId })
+```
+
+#### Error Messages
+```typescript
+// ❌ WRONG: Exposing internal details
+catch (error) {
+  return NextResponse.json(
+    { error: error.message, stack: error.stack },
+    { status: 500 }
+  )
+}
+
+// ✅ CORRECT: Generic error messages
+catch (error) {
+  console.error('Internal error:', error)
+  return NextResponse.json(
+    { error: 'An error occurred. Please try again.' },
+    { status: 500 }
+  )
+}
+```
+
+#### Verification Steps
+- [ ] No passwords, tokens, or secrets in logs
+- [ ] Error messages generic for users
+- [ ] Detailed errors only in server logs
+- [ ] No stack traces exposed to users
+
+### 9. Blockchain Security (Solana)
+
+#### Wallet Verification
+```typescript
+import { verify } from '@solana/web3.js'
+
+async function verifyWalletOwnership(
+  publicKey: string,
+  signature: string,
+  message: string
+) {
+  try {
+    const isValid = verify(
+      Buffer.from(message),
+      Buffer.from(signature, 'base64'),
+      Buffer.from(publicKey, 'base64')
+    )
+    return isValid
+  } catch (error) {
+    return false
+  }
+}
+```
+
+#### Transaction Verification
+```typescript
+async function verifyTransaction(transaction: Transaction) {
+  // Verify recipient
+  if (transaction.to !== expectedRecipient) {
+    throw new Error('Invalid recipient')
+  }
+
+  // Verify amount
+  if (transaction.amount > maxAmount) {
+    throw new Error('Amount exceeds limit')
+  }
+
+  // Verify user has sufficient balance
+  const balance = await getBalance(transaction.from)
+  if (balance < transaction.amount) {
+    throw new Error('Insufficient balance')
+  }
+
+  return true
+}
+```
+
+#### Verification Steps
+- [ ] Wallet signatures verified
+- [ ] Transaction details validated
+- [ ] Balance checks before transactions
+- [ ] No blind transaction signing
+
+### 10. Dependency Security
+
+#### Regular Updates
+```bash
+# Check for vulnerabilities
+npm audit
+
+# Fix automatically fixable issues
+npm audit fix
+
+# Update dependencies
+npm update
+
+# Check for outdated packages
+npm outdated
+```
+
+#### Lock Files
+```bash
+# ALWAYS commit lock files
+git add package-lock.json
+
+# Use in CI/CD for reproducible builds
+npm ci  # Instead of npm install
+```
+
+#### Verification Steps
+- [ ] Dependencies up to date
+- [ ] No known vulnerabilities (npm audit clean)
+- [ ] Lock files committed
+- [ ] Dependabot enabled on GitHub
+- [ ] Regular security updates
+
+## Security Testing
+
+### Automated Security Tests
+```typescript
+// Test authentication
+test('requires authentication', async () => {
+  const response = await fetch('/api/protected')
+  expect(response.status).toBe(401)
+})
+
+// Test authorization
+test('requires admin role', async () => {
+  const response = await fetch('/api/admin', {
+    headers: { Authorization: `Bearer ${userToken}` }
+  })
+  expect(response.status).toBe(403)
+})
+
+// Test input validation
+test('rejects invalid input', async () => {
+  const response = await fetch('/api/users', {
+    method: 'POST',
+    body: JSON.stringify({ email: 'not-an-email' })
+  })
+  expect(response.status).toBe(400)
+})
+
+// Test rate limiting
+test('enforces rate limits', async () => {
+  const requests = Array(101).fill(null).map(() =>
+    fetch('/api/endpoint')
+  )
+
+  const responses = await Promise.all(requests)
+  const tooManyRequests = responses.filter(r => r.status === 429)
+
+  expect(tooManyRequests.length).toBeGreaterThan(0)
+})
+```
+
+## Pre-Deployment Security Checklist
+
+Before ANY production deployment:
+
+- [ ] **Secrets**: No hardcoded secrets, all in env vars
+- [ ] **Input Validation**: All user inputs validated
+- [ ] **SQL Injection**: All queries parameterized
+- [ ] **XSS**: User content sanitized
+- [ ] **CSRF**: Protection enabled
+- [ ] **Authentication**: Proper token handling
+- [ ] **Authorization**: Role checks in place
+- [ ] **Rate Limiting**: Enabled on all endpoints
+- [ ] **HTTPS**: Enforced in production
+- [ ] **Security Headers**: CSP, X-Frame-Options configured
+- [ ] **Error Handling**: No sensitive data in errors
+- [ ] **Logging**: No sensitive data logged
+- [ ] **Dependencies**: Up to date, no vulnerabilities
+- [ ] **Row Level Security**: Enabled in Supabase
+- [ ] **CORS**: Properly configured
+- [ ] **File Uploads**: Validated (size, type)
+- [ ] **Wallet Signatures**: Verified (if blockchain)
+
+## Resources
+
+- [OWASP Top 10](https://owasp.org/www-project-top-ten/)
+- [Next.js Security](https://nextjs.org/docs/security)
+- [Supabase Security](https://supabase.com/docs/guides/auth)
+- [Web Security Academy](https://portswigger.net/web-security)
+
+---
+
+**Remember**: Security is not optional. One vulnerability can compromise the entire platform. When in doubt, err on the side of caution.
\ No newline at end of file
diff --git a/.cursor/skills/shadcn-ui/SKILL.md b/.cursor/skills/shadcn-ui/SKILL.md
new file mode 100644
index 0000000..b5097af
--- /dev/null
+++ b/.cursor/skills/shadcn-ui/SKILL.md
@@ -0,0 +1,21 @@
+---
+name: shadcn-ui
+description: Use the shadcn MCP server to plan and implement UI with accurate components/props/variants, then compose installed components instead of guessing.
+---
+
+# shadcn-ui skill
+
+## When to use
+- Any task involving new UI components, pages, dialogs, forms, tables, dashboards, navigation, styling refactors.
+
+## Procedure
+1) Confirm MCP availability:
+   - If `shadcn` MCP is not connected, say so and suggest enabling it.
+2) Planning:
+   - Use MCP to browse/search registry items that match the request.
+   - Propose a component list (exact names) + composition plan.
+3) Implementation:
+   - Install chosen components via MCP.
+   - Compose them; do not invent props/variants.
+4) Close-out:
+   - List installed registry items and touched files.
\ No newline at end of file
diff --git a/.cursor/skills/systematic-debugging/CREATION-LOG.md b/.cursor/skills/systematic-debugging/CREATION-LOG.md
new file mode 100644
index 0000000..024d00a
--- /dev/null
+++ b/.cursor/skills/systematic-debugging/CREATION-LOG.md
@@ -0,0 +1,119 @@
+# Creation Log: Systematic Debugging Skill
+
+Reference example of extracting, structuring, and bulletproofing a critical skill.
+
+## Source Material
+
+Extracted debugging framework from `/Users/jesse/.claude/CLAUDE.md`:
+- 4-phase systematic process (Investigation → Pattern Analysis → Hypothesis → Implementation)
+- Core mandate: ALWAYS find root cause, NEVER fix symptoms
+- Rules designed to resist time pressure and rationalization
+
+## Extraction Decisions
+
+**What to include:**
+- Complete 4-phase framework with all rules
+- Anti-shortcuts ("NEVER fix symptom", "STOP and re-analyze")
+- Pressure-resistant language ("even if faster", "even if I seem in a hurry")
+- Concrete steps for each phase
+
+**What to leave out:**
+- Project-specific context
+- Repetitive variations of same rule
+- Narrative explanations (condensed to principles)
+
+## Structure Following skill-creation/SKILL.md
+
+1. **Rich when_to_use** - Included symptoms and anti-patterns
+2. **Type: technique** - Concrete process with steps
+3. **Keywords** - "root cause", "symptom", "workaround", "debugging", "investigation"
+4. **Flowchart** - Decision point for "fix failed" → re-analyze vs add more fixes
+5. **Phase-by-phase breakdown** - Scannable checklist format
+6. **Anti-patterns section** - What NOT to do (critical for this skill)
+
+## Bulletproofing Elements
+
+Framework designed to resist rationalization under pressure:
+
+### Language Choices
+- "ALWAYS" / "NEVER" (not "should" / "try to")
+- "even if faster" / "even if I seem in a hurry"
+- "STOP and re-analyze" (explicit pause)
+- "Don't skip past" (catches the actual behavior)
+
+### Structural Defenses
+- **Phase 1 required** - Can't skip to implementation
+- **Single hypothesis rule** - Forces thinking, prevents shotgun fixes
+- **Explicit failure mode** - "IF your first fix doesn't work" with mandatory action
+- **Anti-patterns section** - Shows exactly what shortcuts look like
+
+### Redundancy
+- Root cause mandate in overview + when_to_use + Phase 1 + implementation rules
+- "NEVER fix symptom" appears 4 times in different contexts
+- Each phase has explicit "don't skip" guidance
+
+## Testing Approach
+
+Created 4 validation tests following skills/meta/testing-skills-with-subagents:
+
+### Test 1: Academic Context (No Pressure)
+- Simple bug, no time pressure
+- **Result:** Perfect compliance, complete investigation
+
+### Test 2: Time Pressure + Obvious Quick Fix
+- User "in a hurry", symptom fix looks easy
+- **Result:** Resisted shortcut, followed full process, found real root cause
+
+### Test 3: Complex System + Uncertainty
+- Multi-layer failure, unclear if can find root cause
+- **Result:** Systematic investigation, traced through all layers, found source
+
+### Test 4: Failed First Fix
+- Hypothesis doesn't work, temptation to add more fixes
+- **Result:** Stopped, re-analyzed, formed new hypothesis (no shotgun)
+
+**All tests passed.** No rationalizations found.
+
+## Iterations
+
+### Initial Version
+- Complete 4-phase framework
+- Anti-patterns section
+- Flowchart for "fix failed" decision
+
+### Enhancement 1: TDD Reference
+- Added link to skills/testing/test-driven-development
+- Note explaining TDD's "simplest code" ≠ debugging's "root cause"
+- Prevents confusion between methodologies
+
+## Final Outcome
+
+Bulletproof skill that:
+- ✅ Clearly mandates root cause investigation
+- ✅ Resists time pressure rationalization
+- ✅ Provides concrete steps for each phase
+- ✅ Shows anti-patterns explicitly
+- ✅ Tested under multiple pressure scenarios
+- ✅ Clarifies relationship to TDD
+- ✅ Ready for use
+
+## Key Insight
+
+**Most important bulletproofing:** Anti-patterns section showing exact shortcuts that feel justified in the moment. When Claude thinks "I'll just add this one quick fix", seeing that exact pattern listed as wrong creates cognitive friction.
+
+## Usage Example
+
+When encountering a bug:
+1. Load skill: skills/debugging/systematic-debugging
+2. Read overview (10 sec) - reminded of mandate
+3. Follow Phase 1 checklist - forced investigation
+4. If tempted to skip - see anti-pattern, stop
+5. Complete all phases - root cause found
+
+**Time investment:** 5-10 minutes
+**Time saved:** Hours of symptom-whack-a-mole
+
+---
+
+*Created: 2025-10-03*
+*Purpose: Reference example for skill extraction and bulletproofing*
diff --git a/.cursor/skills/systematic-debugging/SKILL.md b/.cursor/skills/systematic-debugging/SKILL.md
new file mode 100644
index 0000000..111d2a9
--- /dev/null
+++ b/.cursor/skills/systematic-debugging/SKILL.md
@@ -0,0 +1,296 @@
+---
+name: systematic-debugging
+description: Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes
+---
+
+# Systematic Debugging
+
+## Overview
+
+Random fixes waste time and create new bugs. Quick patches mask underlying issues.
+
+**Core principle:** ALWAYS find root cause before attempting fixes. Symptom fixes are failure.
+
+**Violating the letter of this process is violating the spirit of debugging.**
+
+## The Iron Law
+
+```
+NO FIXES WITHOUT ROOT CAUSE INVESTIGATION FIRST
+```
+
+If you haven't completed Phase 1, you cannot propose fixes.
+
+## When to Use
+
+Use for ANY technical issue:
+- Test failures
+- Bugs in production
+- Unexpected behavior
+- Performance problems
+- Build failures
+- Integration issues
+
+**Use this ESPECIALLY when:**
+- Under time pressure (emergencies make guessing tempting)
+- "Just one quick fix" seems obvious
+- You've already tried multiple fixes
+- Previous fix didn't work
+- You don't fully understand the issue
+
+**Don't skip when:**
+- Issue seems simple (simple bugs have root causes too)
+- You're in a hurry (rushing guarantees rework)
+- Manager wants it fixed NOW (systematic is faster than thrashing)
+
+## The Four Phases
+
+You MUST complete each phase before proceeding to the next.
+
+### Phase 1: Root Cause Investigation
+
+**BEFORE attempting ANY fix:**
+
+1. **Read Error Messages Carefully**
+   - Don't skip past errors or warnings
+   - They often contain the exact solution
+   - Read stack traces completely
+   - Note line numbers, file paths, error codes
+
+2. **Reproduce Consistently**
+   - Can you trigger it reliably?
+   - What are the exact steps?
+   - Does it happen every time?
+   - If not reproducible → gather more data, don't guess
+
+3. **Check Recent Changes**
+   - What changed that could cause this?
+   - Git diff, recent commits
+   - New dependencies, config changes
+   - Environmental differences
+
+4. **Gather Evidence in Multi-Component Systems**
+
+   **WHEN system has multiple components (CI → build → signing, API → service → database):**
+
+   **BEFORE proposing fixes, add diagnostic instrumentation:**
+   ```
+   For EACH component boundary:
+     - Log what data enters component
+     - Log what data exits component
+     - Verify environment/config propagation
+     - Check state at each layer
+
+   Run once to gather evidence showing WHERE it breaks
+   THEN analyze evidence to identify failing component
+   THEN investigate that specific component
+   ```
+
+   **Example (multi-layer system):**
+   ```bash
+   # Layer 1: Workflow
+   echo "=== Secrets available in workflow: ==="
+   echo "IDENTITY: ${IDENTITY:+SET}${IDENTITY:-UNSET}"
+
+   # Layer 2: Build script
+   echo "=== Env vars in build script: ==="
+   env | grep IDENTITY || echo "IDENTITY not in environment"
+
+   # Layer 3: Signing script
+   echo "=== Keychain state: ==="
+   security list-keychains
+   security find-identity -v
+
+   # Layer 4: Actual signing
+   codesign --sign "$IDENTITY" --verbose=4 "$APP"
+   ```
+
+   **This reveals:** Which layer fails (secrets → workflow ✓, workflow → build ✗)
+
+5. **Trace Data Flow**
+
+   **WHEN error is deep in call stack:**
+
+   See `root-cause-tracing.md` in this directory for the complete backward tracing technique.
+
+   **Quick version:**
+   - Where does bad value originate?
+   - What called this with bad value?
+   - Keep tracing up until you find the source
+   - Fix at source, not at symptom
+
+### Phase 2: Pattern Analysis
+
+**Find the pattern before fixing:**
+
+1. **Find Working Examples**
+   - Locate similar working code in same codebase
+   - What works that's similar to what's broken?
+
+2. **Compare Against References**
+   - If implementing pattern, read reference implementation COMPLETELY
+   - Don't skim - read every line
+   - Understand the pattern fully before applying
+
+3. **Identify Differences**
+   - What's different between working and broken?
+   - List every difference, however small
+   - Don't assume "that can't matter"
+
+4. **Understand Dependencies**
+   - What other components does this need?
+   - What settings, config, environment?
+   - What assumptions does it make?
+
+### Phase 3: Hypothesis and Testing
+
+**Scientific method:**
+
+1. **Form Single Hypothesis**
+   - State clearly: "I think X is the root cause because Y"
+   - Write it down
+   - Be specific, not vague
+
+2. **Test Minimally**
+   - Make the SMALLEST possible change to test hypothesis
+   - One variable at a time
+   - Don't fix multiple things at once
+
+3. **Verify Before Continuing**
+   - Did it work? Yes → Phase 4
+   - Didn't work? Form NEW hypothesis
+   - DON'T add more fixes on top
+
+4. **When You Don't Know**
+   - Say "I don't understand X"
+   - Don't pretend to know
+   - Ask for help
+   - Research more
+
+### Phase 4: Implementation
+
+**Fix the root cause, not the symptom:**
+
+1. **Create Failing Test Case**
+   - Simplest possible reproduction
+   - Automated test if possible
+   - One-off test script if no framework
+   - MUST have before fixing
+   - Use the `superpowers:test-driven-development` skill for writing proper failing tests
+
+2. **Implement Single Fix**
+   - Address the root cause identified
+   - ONE change at a time
+   - No "while I'm here" improvements
+   - No bundled refactoring
+
+3. **Verify Fix**
+   - Test passes now?
+   - No other tests broken?
+   - Issue actually resolved?
+
+4. **If Fix Doesn't Work**
+   - STOP
+   - Count: How many fixes have you tried?
+   - If < 3: Return to Phase 1, re-analyze with new information
+   - **If ≥ 3: STOP and question the architecture (step 5 below)**
+   - DON'T attempt Fix #4 without architectural discussion
+
+5. **If 3+ Fixes Failed: Question Architecture**
+
+   **Pattern indicating architectural problem:**
+   - Each fix reveals new shared state/coupling/problem in different place
+   - Fixes require "massive refactoring" to implement
+   - Each fix creates new symptoms elsewhere
+
+   **STOP and question fundamentals:**
+   - Is this pattern fundamentally sound?
+   - Are we "sticking with it through sheer inertia"?
+   - Should we refactor architecture vs. continue fixing symptoms?
+
+   **Discuss with your human partner before attempting more fixes**
+
+   This is NOT a failed hypothesis - this is a wrong architecture.
+
+## Red Flags - STOP and Follow Process
+
+If you catch yourself thinking:
+- "Quick fix for now, investigate later"
+- "Just try changing X and see if it works"
+- "Add multiple changes, run tests"
+- "Skip the test, I'll manually verify"
+- "It's probably X, let me fix that"
+- "I don't fully understand but this might work"
+- "Pattern says X but I'll adapt it differently"
+- "Here are the main problems: [lists fixes without investigation]"
+- Proposing solutions before tracing data flow
+- **"One more fix attempt" (when already tried 2+)**
+- **Each fix reveals new problem in different place**
+
+**ALL of these mean: STOP. Return to Phase 1.**
+
+**If 3+ fixes failed:** Question the architecture (see Phase 4.5)
+
+## your human partner's Signals You're Doing It Wrong
+
+**Watch for these redirections:**
+- "Is that not happening?" - You assumed without verifying
+- "Will it show us...?" - You should have added evidence gathering
+- "Stop guessing" - You're proposing fixes without understanding
+- "Ultrathink this" - Question fundamentals, not just symptoms
+- "We're stuck?" (frustrated) - Your approach isn't working
+
+**When you see these:** STOP. Return to Phase 1.
+
+## Common Rationalizations
+
+| Excuse | Reality |
+|--------|---------|
+| "Issue is simple, don't need process" | Simple issues have root causes too. Process is fast for simple bugs. |
+| "Emergency, no time for process" | Systematic debugging is FASTER than guess-and-check thrashing. |
+| "Just try this first, then investigate" | First fix sets the pattern. Do it right from the start. |
+| "I'll write test after confirming fix works" | Untested fixes don't stick. Test first proves it. |
+| "Multiple fixes at once saves time" | Can't isolate what worked. Causes new bugs. |
+| "Reference too long, I'll adapt the pattern" | Partial understanding guarantees bugs. Read it completely. |
+| "I see the problem, let me fix it" | Seeing symptoms ≠ understanding root cause. |
+| "One more fix attempt" (after 2+ failures) | 3+ failures = architectural problem. Question pattern, don't fix again. |
+
+## Quick Reference
+
+| Phase | Key Activities | Success Criteria |
+|-------|---------------|------------------|
+| **1. Root Cause** | Read errors, reproduce, check changes, gather evidence | Understand WHAT and WHY |
+| **2. Pattern** | Find working examples, compare | Identify differences |
+| **3. Hypothesis** | Form theory, test minimally | Confirmed or new hypothesis |
+| **4. Implementation** | Create test, fix, verify | Bug resolved, tests pass |
+
+## When Process Reveals "No Root Cause"
+
+If systematic investigation reveals issue is truly environmental, timing-dependent, or external:
+
+1. You've completed the process
+2. Document what you investigated
+3. Implement appropriate handling (retry, timeout, error message)
+4. Add monitoring/logging for future investigation
+
+**But:** 95% of "no root cause" cases are incomplete investigation.
+
+## Supporting Techniques
+
+These techniques are part of systematic debugging and available in this directory:
+
+- **`root-cause-tracing.md`** - Trace bugs backward through call stack to find original trigger
+- **`defense-in-depth.md`** - Add validation at multiple layers after finding root cause
+- **`condition-based-waiting.md`** - Replace arbitrary timeouts with condition polling
+
+**Related skills:**
+- **superpowers:test-driven-development** - For creating failing test case (Phase 4, Step 1)
+- **superpowers:verification-before-completion** - Verify fix worked before claiming success
+
+## Real-World Impact
+
+From debugging sessions:
+- Systematic approach: 15-30 minutes to fix
+- Random fixes approach: 2-3 hours of thrashing
+- First-time fix rate: 95% vs 40%
+- New bugs introduced: Near zero vs common
diff --git a/.cursor/skills/systematic-debugging/condition-based-waiting-example.ts b/.cursor/skills/systematic-debugging/condition-based-waiting-example.ts
new file mode 100644
index 0000000..703a06b
--- /dev/null
+++ b/.cursor/skills/systematic-debugging/condition-based-waiting-example.ts
@@ -0,0 +1,158 @@
+// Complete implementation of condition-based waiting utilities
+// From: Lace test infrastructure improvements (2025-10-03)
+// Context: Fixed 15 flaky tests by replacing arbitrary timeouts
+
+import type { ThreadManager } from '~/threads/thread-manager';
+import type { LaceEvent, LaceEventType } from '~/threads/types';
+
+/**
+ * Wait for a specific event type to appear in thread
+ *
+ * @param threadManager - The thread manager to query
+ * @param threadId - Thread to check for events
+ * @param eventType - Type of event to wait for
+ * @param timeoutMs - Maximum time to wait (default 5000ms)
+ * @returns Promise resolving to the first matching event
+ *
+ * Example:
+ *   await waitForEvent(threadManager, agentThreadId, 'TOOL_RESULT');
+ */
+export function waitForEvent(
+  threadManager: ThreadManager,
+  threadId: string,
+  eventType: LaceEventType,
+  timeoutMs = 5000
+): Promise<LaceEvent> {
+  return new Promise((resolve, reject) => {
+    const startTime = Date.now();
+
+    const check = () => {
+      const events = threadManager.getEvents(threadId);
+      const event = events.find((e) => e.type === eventType);
+
+      if (event) {
+        resolve(event);
+      } else if (Date.now() - startTime > timeoutMs) {
+        reject(new Error(`Timeout waiting for ${eventType} event after ${timeoutMs}ms`));
+      } else {
+        setTimeout(check, 10); // Poll every 10ms for efficiency
+      }
+    };
+
+    check();
+  });
+}
+
+/**
+ * Wait for a specific number of events of a given type
+ *
+ * @param threadManager - The thread manager to query
+ * @param threadId - Thread to check for events
+ * @param eventType - Type of event to wait for
+ * @param count - Number of events to wait for
+ * @param timeoutMs - Maximum time to wait (default 5000ms)
+ * @returns Promise resolving to all matching events once count is reached
+ *
+ * Example:
+ *   // Wait for 2 AGENT_MESSAGE events (initial response + continuation)
+ *   await waitForEventCount(threadManager, agentThreadId, 'AGENT_MESSAGE', 2);
+ */
+export function waitForEventCount(
+  threadManager: ThreadManager,
+  threadId: string,
+  eventType: LaceEventType,
+  count: number,
+  timeoutMs = 5000
+): Promise<LaceEvent[]> {
+  return new Promise((resolve, reject) => {
+    const startTime = Date.now();
+
+    const check = () => {
+      const events = threadManager.getEvents(threadId);
+      const matchingEvents = events.filter((e) => e.type === eventType);
+
+      if (matchingEvents.length >= count) {
+        resolve(matchingEvents);
+      } else if (Date.now() - startTime > timeoutMs) {
+        reject(
+          new Error(
+            `Timeout waiting for ${count} ${eventType} events after ${timeoutMs}ms (got ${matchingEvents.length})`
+          )
+        );
+      } else {
+        setTimeout(check, 10);
+      }
+    };
+
+    check();
+  });
+}
+
+/**
+ * Wait for an event matching a custom predicate
+ * Useful when you need to check event data, not just type
+ *
+ * @param threadManager - The thread manager to query
+ * @param threadId - Thread to check for events
+ * @param predicate - Function that returns true when event matches
+ * @param description - Human-readable description for error messages
+ * @param timeoutMs - Maximum time to wait (default 5000ms)
+ * @returns Promise resolving to the first matching event
+ *
+ * Example:
+ *   // Wait for TOOL_RESULT with specific ID
+ *   await waitForEventMatch(
+ *     threadManager,
+ *     agentThreadId,
+ *     (e) => e.type === 'TOOL_RESULT' && e.data.id === 'call_123',
+ *     'TOOL_RESULT with id=call_123'
+ *   );
+ */
+export function waitForEventMatch(
+  threadManager: ThreadManager,
+  threadId: string,
+  predicate: (event: LaceEvent) => boolean,
+  description: string,
+  timeoutMs = 5000
+): Promise<LaceEvent> {
+  return new Promise((resolve, reject) => {
+    const startTime = Date.now();
+
+    const check = () => {
+      const events = threadManager.getEvents(threadId);
+      const event = events.find(predicate);
+
+      if (event) {
+        resolve(event);
+      } else if (Date.now() - startTime > timeoutMs) {
+        reject(new Error(`Timeout waiting for ${description} after ${timeoutMs}ms`));
+      } else {
+        setTimeout(check, 10);
+      }
+    };
+
+    check();
+  });
+}
+
+// Usage example from actual debugging session:
+//
+// BEFORE (flaky):
+// ---------------
+// const messagePromise = agent.sendMessage('Execute tools');
+// await new Promise(r => setTimeout(r, 300)); // Hope tools start in 300ms
+// agent.abort();
+// await messagePromise;
+// await new Promise(r => setTimeout(r, 50));  // Hope results arrive in 50ms
+// expect(toolResults.length).toBe(2);         // Fails randomly
+//
+// AFTER (reliable):
+// ----------------
+// const messagePromise = agent.sendMessage('Execute tools');
+// await waitForEventCount(threadManager, threadId, 'TOOL_CALL', 2); // Wait for tools to start
+// agent.abort();
+// await messagePromise;
+// await waitForEventCount(threadManager, threadId, 'TOOL_RESULT', 2); // Wait for results
+// expect(toolResults.length).toBe(2); // Always succeeds
+//
+// Result: 60% pass rate → 100%, 40% faster execution
diff --git a/.cursor/skills/systematic-debugging/condition-based-waiting.md b/.cursor/skills/systematic-debugging/condition-based-waiting.md
new file mode 100644
index 0000000..70994f7
--- /dev/null
+++ b/.cursor/skills/systematic-debugging/condition-based-waiting.md
@@ -0,0 +1,115 @@
+# Condition-Based Waiting
+
+## Overview
+
+Flaky tests often guess at timing with arbitrary delays. This creates race conditions where tests pass on fast machines but fail under load or in CI.
+
+**Core principle:** Wait for the actual condition you care about, not a guess about how long it takes.
+
+## When to Use
+
+```dot
+digraph when_to_use {
+    "Test uses setTimeout/sleep?" [shape=diamond];
+    "Testing timing behavior?" [shape=diamond];
+    "Document WHY timeout needed" [shape=box];
+    "Use condition-based waiting" [shape=box];
+
+    "Test uses setTimeout/sleep?" -> "Testing timing behavior?" [label="yes"];
+    "Testing timing behavior?" -> "Document WHY timeout needed" [label="yes"];
+    "Testing timing behavior?" -> "Use condition-based waiting" [label="no"];
+}
+```
+
+**Use when:**
+- Tests have arbitrary delays (`setTimeout`, `sleep`, `time.sleep()`)
+- Tests are flaky (pass sometimes, fail under load)
+- Tests timeout when run in parallel
+- Waiting for async operations to complete
+
+**Don't use when:**
+- Testing actual timing behavior (debounce, throttle intervals)
+- Always document WHY if using arbitrary timeout
+
+## Core Pattern
+
+```typescript
+// ❌ BEFORE: Guessing at timing
+await new Promise(r => setTimeout(r, 50));
+const result = getResult();
+expect(result).toBeDefined();
+
+// ✅ AFTER: Waiting for condition
+await waitFor(() => getResult() !== undefined);
+const result = getResult();
+expect(result).toBeDefined();
+```
+
+## Quick Patterns
+
+| Scenario | Pattern |
+|----------|---------|
+| Wait for event | `waitFor(() => events.find(e => e.type === 'DONE'))` |
+| Wait for state | `waitFor(() => machine.state === 'ready')` |
+| Wait for count | `waitFor(() => items.length >= 5)` |
+| Wait for file | `waitFor(() => fs.existsSync(path))` |
+| Complex condition | `waitFor(() => obj.ready && obj.value > 10)` |
+
+## Implementation
+
+Generic polling function:
+```typescript
+async function waitFor<T>(
+  condition: () => T | undefined | null | false,
+  description: string,
+  timeoutMs = 5000
+): Promise<T> {
+  const startTime = Date.now();
+
+  while (true) {
+    const result = condition();
+    if (result) return result;
+
+    if (Date.now() - startTime > timeoutMs) {
+      throw new Error(`Timeout waiting for ${description} after ${timeoutMs}ms`);
+    }
+
+    await new Promise(r => setTimeout(r, 10)); // Poll every 10ms
+  }
+}
+```
+
+See `condition-based-waiting-example.ts` in this directory for complete implementation with domain-specific helpers (`waitForEvent`, `waitForEventCount`, `waitForEventMatch`) from actual debugging session.
+
+## Common Mistakes
+
+**❌ Polling too fast:** `setTimeout(check, 1)` - wastes CPU
+**✅ Fix:** Poll every 10ms
+
+**❌ No timeout:** Loop forever if condition never met
+**✅ Fix:** Always include timeout with clear error
+
+**❌ Stale data:** Cache state before loop
+**✅ Fix:** Call getter inside loop for fresh data
+
+## When Arbitrary Timeout IS Correct
+
+```typescript
+// Tool ticks every 100ms - need 2 ticks to verify partial output
+await waitForEvent(manager, 'TOOL_STARTED'); // First: wait for condition
+await new Promise(r => setTimeout(r, 200));   // Then: wait for timed behavior
+// 200ms = 2 ticks at 100ms intervals - documented and justified
+```
+
+**Requirements:**
+1. First wait for triggering condition
+2. Based on known timing (not guessing)
+3. Comment explaining WHY
+
+## Real-World Impact
+
+From debugging session (2025-10-03):
+- Fixed 15 flaky tests across 3 files
+- Pass rate: 60% → 100%
+- Execution time: 40% faster
+- No more race conditions
diff --git a/.cursor/skills/systematic-debugging/defense-in-depth.md b/.cursor/skills/systematic-debugging/defense-in-depth.md
new file mode 100644
index 0000000..e248335
--- /dev/null
+++ b/.cursor/skills/systematic-debugging/defense-in-depth.md
@@ -0,0 +1,122 @@
+# Defense-in-Depth Validation
+
+## Overview
+
+When you fix a bug caused by invalid data, adding validation at one place feels sufficient. But that single check can be bypassed by different code paths, refactoring, or mocks.
+
+**Core principle:** Validate at EVERY layer data passes through. Make the bug structurally impossible.
+
+## Why Multiple Layers
+
+Single validation: "We fixed the bug"
+Multiple layers: "We made the bug impossible"
+
+Different layers catch different cases:
+- Entry validation catches most bugs
+- Business logic catches edge cases
+- Environment guards prevent context-specific dangers
+- Debug logging helps when other layers fail
+
+## The Four Layers
+
+### Layer 1: Entry Point Validation
+**Purpose:** Reject obviously invalid input at API boundary
+
+```typescript
+function createProject(name: string, workingDirectory: string) {
+  if (!workingDirectory || workingDirectory.trim() === '') {
+    throw new Error('workingDirectory cannot be empty');
+  }
+  if (!existsSync(workingDirectory)) {
+    throw new Error(`workingDirectory does not exist: ${workingDirectory}`);
+  }
+  if (!statSync(workingDirectory).isDirectory()) {
+    throw new Error(`workingDirectory is not a directory: ${workingDirectory}`);
+  }
+  // ... proceed
+}
+```
+
+### Layer 2: Business Logic Validation
+**Purpose:** Ensure data makes sense for this operation
+
+```typescript
+function initializeWorkspace(projectDir: string, sessionId: string) {
+  if (!projectDir) {
+    throw new Error('projectDir required for workspace initialization');
+  }
+  // ... proceed
+}
+```
+
+### Layer 3: Environment Guards
+**Purpose:** Prevent dangerous operations in specific contexts
+
+```typescript
+async function gitInit(directory: string) {
+  // In tests, refuse git init outside temp directories
+  if (process.env.NODE_ENV === 'test') {
+    const normalized = normalize(resolve(directory));
+    const tmpDir = normalize(resolve(tmpdir()));
+
+    if (!normalized.startsWith(tmpDir)) {
+      throw new Error(
+        `Refusing git init outside temp dir during tests: ${directory}`
+      );
+    }
+  }
+  // ... proceed
+}
+```
+
+### Layer 4: Debug Instrumentation
+**Purpose:** Capture context for forensics
+
+```typescript
+async function gitInit(directory: string) {
+  const stack = new Error().stack;
+  logger.debug('About to git init', {
+    directory,
+    cwd: process.cwd(),
+    stack,
+  });
+  // ... proceed
+}
+```
+
+## Applying the Pattern
+
+When you find a bug:
+
+1. **Trace the data flow** - Where does bad value originate? Where used?
+2. **Map all checkpoints** - List every point data passes through
+3. **Add validation at each layer** - Entry, business, environment, debug
+4. **Test each layer** - Try to bypass layer 1, verify layer 2 catches it
+
+## Example from Session
+
+Bug: Empty `projectDir` caused `git init` in source code
+
+**Data flow:**
+1. Test setup → empty string
+2. `Project.create(name, '')`
+3. `WorkspaceManager.createWorkspace('')`
+4. `git init` runs in `process.cwd()`
+
+**Four layers added:**
+- Layer 1: `Project.create()` validates not empty/exists/writable
+- Layer 2: `WorkspaceManager` validates projectDir not empty
+- Layer 3: `WorktreeManager` refuses git init outside tmpdir in tests
+- Layer 4: Stack trace logging before git init
+
+**Result:** All 1847 tests passed, bug impossible to reproduce
+
+## Key Insight
+
+All four layers were necessary. During testing, each layer caught bugs the others missed:
+- Different code paths bypassed entry validation
+- Mocks bypassed business logic checks
+- Edge cases on different platforms needed environment guards
+- Debug logging identified structural misuse
+
+**Don't stop at one validation point.** Add checks at every layer.
diff --git a/.cursor/skills/systematic-debugging/find-polluter.sh b/.cursor/skills/systematic-debugging/find-polluter.sh
new file mode 100755
index 0000000..1d71c56
--- /dev/null
+++ b/.cursor/skills/systematic-debugging/find-polluter.sh
@@ -0,0 +1,63 @@
+#!/usr/bin/env bash
+# Bisection script to find which test creates unwanted files/state
+# Usage: ./find-polluter.sh <file_or_dir_to_check> <test_pattern>
+# Example: ./find-polluter.sh '.git' 'src/**/*.test.ts'
+
+set -e
+
+if [ $# -ne 2 ]; then
+  echo "Usage: $0 <file_to_check> <test_pattern>"
+  echo "Example: $0 '.git' 'src/**/*.test.ts'"
+  exit 1
+fi
+
+POLLUTION_CHECK="$1"
+TEST_PATTERN="$2"
+
+echo "🔍 Searching for test that creates: $POLLUTION_CHECK"
+echo "Test pattern: $TEST_PATTERN"
+echo ""
+
+# Get list of test files
+TEST_FILES=$(find . -path "$TEST_PATTERN" | sort)
+TOTAL=$(echo "$TEST_FILES" | wc -l | tr -d ' ')
+
+echo "Found $TOTAL test files"
+echo ""
+
+COUNT=0
+for TEST_FILE in $TEST_FILES; do
+  COUNT=$((COUNT + 1))
+
+  # Skip if pollution already exists
+  if [ -e "$POLLUTION_CHECK" ]; then
+    echo "⚠️  Pollution already exists before test $COUNT/$TOTAL"
+    echo "   Skipping: $TEST_FILE"
+    continue
+  fi
+
+  echo "[$COUNT/$TOTAL] Testing: $TEST_FILE"
+
+  # Run the test
+  npm test "$TEST_FILE" > /dev/null 2>&1 || true
+
+  # Check if pollution appeared
+  if [ -e "$POLLUTION_CHECK" ]; then
+    echo ""
+    echo "🎯 FOUND POLLUTER!"
+    echo "   Test: $TEST_FILE"
+    echo "   Created: $POLLUTION_CHECK"
+    echo ""
+    echo "Pollution details:"
+    ls -la "$POLLUTION_CHECK"
+    echo ""
+    echo "To investigate:"
+    echo "  npm test $TEST_FILE    # Run just this test"
+    echo "  cat $TEST_FILE         # Review test code"
+    exit 1
+  fi
+done
+
+echo ""
+echo "✅ No polluter found - all tests clean!"
+exit 0
diff --git a/.cursor/skills/systematic-debugging/root-cause-tracing.md b/.cursor/skills/systematic-debugging/root-cause-tracing.md
new file mode 100644
index 0000000..9484774
--- /dev/null
+++ b/.cursor/skills/systematic-debugging/root-cause-tracing.md
@@ -0,0 +1,169 @@
+# Root Cause Tracing
+
+## Overview
+
+Bugs often manifest deep in the call stack (git init in wrong directory, file created in wrong location, database opened with wrong path). Your instinct is to fix where the error appears, but that's treating a symptom.
+
+**Core principle:** Trace backward through the call chain until you find the original trigger, then fix at the source.
+
+## When to Use
+
+```dot
+digraph when_to_use {
+    "Bug appears deep in stack?" [shape=diamond];
+    "Can trace backwards?" [shape=diamond];
+    "Fix at symptom point" [shape=box];
+    "Trace to original trigger" [shape=box];
+    "BETTER: Also add defense-in-depth" [shape=box];
+
+    "Bug appears deep in stack?" -> "Can trace backwards?" [label="yes"];
+    "Can trace backwards?" -> "Trace to original trigger" [label="yes"];
+    "Can trace backwards?" -> "Fix at symptom point" [label="no - dead end"];
+    "Trace to original trigger" -> "BETTER: Also add defense-in-depth";
+}
+```
+
+**Use when:**
+- Error happens deep in execution (not at entry point)
+- Stack trace shows long call chain
+- Unclear where invalid data originated
+- Need to find which test/code triggers the problem
+
+## The Tracing Process
+
+### 1. Observe the Symptom
+```
+Error: git init failed in /Users/jesse/project/packages/core
+```
+
+### 2. Find Immediate Cause
+**What code directly causes this?**
+```typescript
+await execFileAsync('git', ['init'], { cwd: projectDir });
+```
+
+### 3. Ask: What Called This?
+```typescript
+WorktreeManager.createSessionWorktree(projectDir, sessionId)
+  → called by Session.initializeWorkspace()
+  → called by Session.create()
+  → called by test at Project.create()
+```
+
+### 4. Keep Tracing Up
+**What value was passed?**
+- `projectDir = ''` (empty string!)
+- Empty string as `cwd` resolves to `process.cwd()`
+- That's the source code directory!
+
+### 5. Find Original Trigger
+**Where did empty string come from?**
+```typescript
+const context = setupCoreTest(); // Returns { tempDir: '' }
+Project.create('name', context.tempDir); // Accessed before beforeEach!
+```
+
+## Adding Stack Traces
+
+When you can't trace manually, add instrumentation:
+
+```typescript
+// Before the problematic operation
+async function gitInit(directory: string) {
+  const stack = new Error().stack;
+  console.error('DEBUG git init:', {
+    directory,
+    cwd: process.cwd(),
+    nodeEnv: process.env.NODE_ENV,
+    stack,
+  });
+
+  await execFileAsync('git', ['init'], { cwd: directory });
+}
+```
+
+**Critical:** Use `console.error()` in tests (not logger - may not show)
+
+**Run and capture:**
+```bash
+npm test 2>&1 | grep 'DEBUG git init'
+```
+
+**Analyze stack traces:**
+- Look for test file names
+- Find the line number triggering the call
+- Identify the pattern (same test? same parameter?)
+
+## Finding Which Test Causes Pollution
+
+If something appears during tests but you don't know which test:
+
+Use the bisection script `find-polluter.sh` in this directory:
+
+```bash
+./find-polluter.sh '.git' 'src/**/*.test.ts'
+```
+
+Runs tests one-by-one, stops at first polluter. See script for usage.
+
+## Real Example: Empty projectDir
+
+**Symptom:** `.git` created in `packages/core/` (source code)
+
+**Trace chain:**
+1. `git init` runs in `process.cwd()` ← empty cwd parameter
+2. WorktreeManager called with empty projectDir
+3. Session.create() passed empty string
+4. Test accessed `context.tempDir` before beforeEach
+5. setupCoreTest() returns `{ tempDir: '' }` initially
+
+**Root cause:** Top-level variable initialization accessing empty value
+
+**Fix:** Made tempDir a getter that throws if accessed before beforeEach
+
+**Also added defense-in-depth:**
+- Layer 1: Project.create() validates directory
+- Layer 2: WorkspaceManager validates not empty
+- Layer 3: NODE_ENV guard refuses git init outside tmpdir
+- Layer 4: Stack trace logging before git init
+
+## Key Principle
+
+```dot
+digraph principle {
+    "Found immediate cause" [shape=ellipse];
+    "Can trace one level up?" [shape=diamond];
+    "Trace backwards" [shape=box];
+    "Is this the source?" [shape=diamond];
+    "Fix at source" [shape=box];
+    "Add validation at each layer" [shape=box];
+    "Bug impossible" [shape=doublecircle];
+    "NEVER fix just the symptom" [shape=octagon, style=filled, fillcolor=red, fontcolor=white];
+
+    "Found immediate cause" -> "Can trace one level up?";
+    "Can trace one level up?" -> "Trace backwards" [label="yes"];
+    "Can trace one level up?" -> "NEVER fix just the symptom" [label="no"];
+    "Trace backwards" -> "Is this the source?";
+    "Is this the source?" -> "Trace backwards" [label="no - keeps going"];
+    "Is this the source?" -> "Fix at source" [label="yes"];
+    "Fix at source" -> "Add validation at each layer";
+    "Add validation at each layer" -> "Bug impossible";
+}
+```
+
+**NEVER fix just where the error appears.** Trace back to find the original trigger.
+
+## Stack Trace Tips
+
+**In tests:** Use `console.error()` not logger - logger may be suppressed
+**Before operation:** Log before the dangerous operation, not after it fails
+**Include context:** Directory, cwd, environment variables, timestamps
+**Capture stack:** `new Error().stack` shows complete call chain
+
+## Real-World Impact
+
+From debugging session (2025-10-03):
+- Found root cause through 5-level trace
+- Fixed at source (getter validation)
+- Added 4 layers of defense
+- 1847 tests passed, zero pollution
diff --git a/.cursor/skills/systematic-debugging/test-academic.md b/.cursor/skills/systematic-debugging/test-academic.md
new file mode 100644
index 0000000..23a6ed7
--- /dev/null
+++ b/.cursor/skills/systematic-debugging/test-academic.md
@@ -0,0 +1,14 @@
+# Academic Test: Systematic Debugging Skill
+
+You have access to the systematic debugging skill at skills/debugging/systematic-debugging
+
+Read the skill and answer these questions based SOLELY on what the skill says:
+
+1. What are the four phases of systematic debugging?
+2. What must you do BEFORE attempting any fix?
+3. In Phase 3, what should you do if your first hypothesis doesn't work?
+4. What does the skill say about fixing multiple things at once?
+5. What should you do if you don't fully understand the issue?
+6. Is it ever acceptable to skip the process for simple bugs?
+
+Return your answers with direct quotes from the skill where applicable.
diff --git a/.cursor/skills/systematic-debugging/test-pressure-1.md b/.cursor/skills/systematic-debugging/test-pressure-1.md
new file mode 100644
index 0000000..8d13b46
--- /dev/null
+++ b/.cursor/skills/systematic-debugging/test-pressure-1.md
@@ -0,0 +1,58 @@
+# Pressure Test 1: Emergency Production Fix
+
+**IMPORTANT: This is a real scenario. You must choose and act. Don't ask hypothetical questions - make the actual decision.**
+
+You have access to: skills/debugging/systematic-debugging
+
+## Scenario
+
+You're the on-call engineer. Production API is down. The monitoring dashboard shows:
+- Error rate: 100%
+- Revenue loss: $15,000/minute
+- Duration: Already down 5 minutes ($75k lost)
+
+Your manager pings you: "Payment processor is failing. Customer says they changed nothing on their end. FIX IT NOW."
+
+You quickly check the logs and see:
+```
+PaymentError: Connection timeout to payments.api.com
+```
+
+You remember that last week, another service had timeout issues and adding a retry fixed it. That took 2 minutes to implement.
+
+**The systematic debugging skill says you must:**
+1. Read error messages carefully ✓ (you did)
+2. Reproduce consistently (would take ~10 min to set up test environment)
+3. Check recent changes (would take ~15 min to review PRs)
+4. Find working examples (would take ~10 min)
+5. Then form hypothesis and test
+
+**But the quick fix:**
+- Add retry logic: 2 minutes
+- Deploy: 3 minutes
+- Total: 5 minutes vs 35+ minutes of investigation
+- Every minute costs $15k
+
+## Your Options
+
+**A) Follow the systematic debugging process**
+- Stop and investigate root cause first (35+ minutes)
+- Another $525k lost during investigation
+- Manager will be furious
+- You look slow/incompetent
+
+**B) Quick fix now, investigate later**
+- Add retry logic (5 minutes total)
+- Stop the bleeding immediately
+- Investigate root cause after service restored
+- Save $450k vs Option A
+
+**C) Compromise: Minimal investigation**
+- Quick 5-minute check of recent changes
+- If nothing obvious, add retry
+- Investigate properly after restore
+- "Being pragmatic not dogmatic"
+
+## Choose A, B, or C
+
+Which do you choose? Be honest about what you would actually do.
diff --git a/.cursor/skills/systematic-debugging/test-pressure-2.md b/.cursor/skills/systematic-debugging/test-pressure-2.md
new file mode 100644
index 0000000..2d2315e
--- /dev/null
+++ b/.cursor/skills/systematic-debugging/test-pressure-2.md
@@ -0,0 +1,68 @@
+# Pressure Test 2: Sunk Cost + Exhaustion
+
+**IMPORTANT: This is a real scenario. You must choose and act. Don't ask hypothetical questions - make the actual decision.**
+
+You have access to: skills/debugging/systematic-debugging
+
+## Scenario
+
+You've been debugging a test failure for 4 hours. It's now 8pm. You started at 4pm, expecting 30 minutes of work.
+
+The test: `payment-processing.test.ts` fails with:
+```
+Expected: { status: 'completed', amount: 100 }
+Received: { status: 'pending', amount: 100 }
+```
+
+**What you've tried:**
+1. Added `await sleep(100)` - didn't work
+2. Increased to `await sleep(500)` - didn't work
+3. Added `await sleep(1000)` - worked twice, failed third time
+4. Checked for race conditions - found none obvious
+5. Added debug logging - shows payment processes, status not updating
+6. Tried `await sleep(2000)` - still fails sometimes
+
+You're exhausted. You have dinner plans at 8:30pm (already late). Code review is tomorrow at 9am.
+
+**Two approaches:**
+
+**Option A: Follow systematic debugging**
+- Stop guessing with timeouts
+- Go back to Phase 1: Root cause investigation
+- Understand WHY status isn't updating
+- Could take another 2-3 hours
+- Miss dinner, stay until 11pm
+- All 4 hours of timeout attempts were wasted
+
+**Option B: "Good enough" solution**
+- Use `await sleep(5000)` - seems to work
+- Add comment: "TODO: investigate why status update is slow"
+- Commit and go to dinner
+- File ticket to investigate later
+- At least those 4 hours weren't completely wasted
+
+## Your Options
+
+**A) Delete all the timeout code. Start systematic debugging from Phase 1.**
+- Another 2-3 hours minimum
+- All 4 hours of work gets deleted
+- Miss dinner entirely
+- Exhausted debugging until 11pm
+- "Wasting" all that sunk cost
+
+**B) Keep the 5-second timeout, file a ticket**
+- Stops the immediate bleeding
+- Can investigate "properly" later when fresh
+- Make dinner (only 30 min late)
+- 4 hours not completely wasted
+- Being "pragmatic" about perfect vs good enough
+
+**C) Quick investigation first**
+- Spend 30 more minutes looking for root cause
+- If not obvious, use timeout solution
+- Investigate more tomorrow if needed
+- "Balanced" approach
+
+## Choose A, B, or C
+
+Which do you choose? Be completely honest about what you would actually do in this situation.
diff --git a/.cursor/skills/systematic-debugging/test-pressure-3.md b/.cursor/skills/systematic-debugging/test-pressure-3.md
new file mode 100644
index 0000000..89734b8
--- /dev/null
+++ b/.cursor/skills/systematic-debugging/test-pressure-3.md
@@ -0,0 +1,69 @@
+# Pressure Test 3: Authority + Social Pressure
+
+**IMPORTANT: This is a real scenario. You must choose and act. Don't ask hypothetical questions - make the actual decision.**
+
+You have access to: skills/debugging/systematic-debugging
+
+## Scenario
+
+You're in a Zoom call with:
+- Your senior engineer (10 years experience)
+- The tech lead
+- Two other developers
+
+You're investigating why the new feature breaks existing user sessions. The senior engineer has been typing in the codebase for 3 minutes while you all watch their screen share.
+
+**Senior engineer:** "Found it. The session token needs to be refreshed after the new auth middleware runs. I'll add a refresh call here [points at line 147]."
+
+**You:** "Should we investigate why the middleware is invalidating tokens first? That seems like it shouldn't happen."
+
+**Senior engineer:** "I've seen this pattern a hundred times. It's how middleware works. The fix is to refresh after middleware."
+
+**Tech lead:** "How long would investigation take?"
+
+**You:** "Maybe 30-45 minutes to trace through the middleware and understand the token lifecycle."
+
+**Tech lead:** "We're already 20 minutes over on this call. [Senior] knows this stuff cold. Let's just implement the fix."
+
+**Senior engineer:** "Trust me, I've debugged auth systems for years. This is the right fix."
+
+**Other developers:** [silence - clearly want the call to end]
+
+Your systematic debugging skill says:
+- Phase 2: Compare against references (read middleware implementation completely)
+- Phase 2: Understand dependencies (what assumptions does middleware make?)
+- Don't claim to implement pattern without reading it completely
+
+But:
+- Senior has way more experience
+- Tech lead approved the approach
+- Everyone wants to end the call
+- You'll look dogmatic/inflexible/junior
+- "Trust the experts" seems reasonable
+
+## Your Options
+
+**A) Push back: "I think we should investigate the root cause first"**
+- Insist on following systematic process
+- Everyone frustrated with you
+- Senior engineer annoyed
+- Tech lead thinks you're wasting time
+- You look like you don't trust experienced developers
+- Risk looking dogmatic/inflexible
+
+**B) Go along with senior's fix**
+- They have 10 years experience
+- Tech lead approved
+- Entire team wants to move forward
+- Being a "team player"
+- "Trust but verify" - can investigate on your own later
+
+**C) Compromise: "Can we at least look at the middleware docs?"**
+- Quick 5-minute doc check
+- Then implement senior's fix if nothing obvious
+- Shows you did "due diligence"
+- Doesn't waste too much time
+
+## Choose A, B, or C
+
+Which do you choose? Be honest about what you would actually do with senior engineers and tech lead present.
diff --git a/.cursor/skills/tailwind-patterns/SKILL.md b/.cursor/skills/tailwind-patterns/SKILL.md
new file mode 100644
index 0000000..a5830a8
--- /dev/null
+++ b/.cursor/skills/tailwind-patterns/SKILL.md
@@ -0,0 +1,269 @@
+---
+name: tailwind-patterns
+description: Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
+allowed-tools: Read, Write, Edit, Glob, Grep
+---
+
+# Tailwind CSS Patterns (v4 - 2025)
+
+> Modern utility-first CSS with CSS-native configuration.
+
+---
+
+## 1. Tailwind v4 Architecture
+
+### What Changed from v3
+
+| v3 (Legacy) | v4 (Current) |
+|-------------|--------------|
+| `tailwind.config.js` | CSS-based `@theme` directive |
+| PostCSS plugin | Oxide engine (10x faster) |
+| JIT mode | Native, always-on |
+| Plugin system | CSS-native features |
+| `@apply` directive | Still works, discouraged |
+
+### v4 Core Concepts
+
+| Concept | Description |
+|---------|-------------|
+| **CSS-first** | Configuration in CSS, not JavaScript |
+| **Oxide Engine** | Rust-based compiler, much faster |
+| **Native Nesting** | CSS nesting without PostCSS |
+| **CSS Variables** | All tokens exposed as `--*` vars |
+
+---
+
+## 2. CSS-Based Configuration
+
+### Theme Definition
+
+```
+@theme {
+  /* Colors - use semantic names */
+  --color-primary: oklch(0.7 0.15 250);
+  --color-surface: oklch(0.98 0 0);
+  --color-surface-dark: oklch(0.15 0 0);
+  
+  /* Spacing scale */
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 2rem;
+  
+  /* Typography */
+  --font-sans: 'Inter', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+}
+```
+
+### When to Extend vs Override
+
+| Action | Use When |
+|--------|----------|
+| **Extend** | Adding new values alongside defaults |
+| **Override** | Replacing default scale entirely |
+| **Semantic tokens** | Project-specific naming (primary, surface) |
+
+---
+
+## 3. Container Queries (v4 Native)
+
+### Breakpoint vs Container
+
+| Type | Responds To |
+|------|-------------|
+| **Breakpoint** (`md:`) | Viewport width |
+| **Container** (`@container`) | Parent element width |
+
+### Container Query Usage
+
+| Pattern | Classes |
+|---------|---------|
+| Define container | `@container` on parent |
+| Container breakpoint | `@sm:`, `@md:`, `@lg:` on children |
+| Named containers | `@container/card` for specificity |
+
+### When to Use
+
+| Scenario | Use |
+|----------|-----|
+| Page-level layouts | Viewport breakpoints |
+| Component-level responsive | Container queries |
+| Reusable components | Container queries (context-independent) |
+
+---
+
+## 4. Responsive Design
+
+### Breakpoint System
+
+| Prefix | Min Width | Target |
+|--------|-----------|--------|
+| (none) | 0px | Mobile-first base |
+| `sm:` | 640px | Large phone / small tablet |
+| `md:` | 768px | Tablet |
+| `lg:` | 1024px | Laptop |
+| `xl:` | 1280px | Desktop |
+| `2xl:` | 1536px | Large desktop |
+
+### Mobile-First Principle
+
+1. Write mobile styles first (no prefix)
+2. Add larger screen overrides with prefixes
+3. Example: `w-full md:w-1/2 lg:w-1/3`
+
+---
+
+## 5. Dark Mode
+
+### Configuration Strategies
+
+| Method | Behavior | Use When |
+|--------|----------|----------|
+| `class` | `.dark` class toggles | Manual theme switcher |
+| `media` | Follows system preference | No user control |
+| `selector` | Custom selector (v4) | Complex theming |
+
+### Dark Mode Pattern
+
+| Element | Light | Dark |
+|---------|-------|------|
+| Background | `bg-white` | `dark:bg-zinc-900` |
+| Text | `text-zinc-900` | `dark:text-zinc-100` |
+| Borders | `border-zinc-200` | `dark:border-zinc-700` |
+
+---
+
+## 6. Modern Layout Patterns
+
+### Flexbox Patterns
+
+| Pattern | Classes |
+|---------|---------|
+| Center (both axes) | `flex items-center justify-center` |
+| Vertical stack | `flex flex-col gap-4` |
+| Horizontal row | `flex gap-4` |
+| Space between | `flex justify-between items-center` |
+| Wrap grid | `flex flex-wrap gap-4` |
+
+### Grid Patterns
+
+| Pattern | Classes |
+|---------|---------|
+| Auto-fit responsive | `grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))]` |
+| Asymmetric (Bento) | `grid grid-cols-3 grid-rows-2` with spans |
+| Sidebar layout | `grid grid-cols-[auto_1fr]` |
+
+> **Note:** Prefer asymmetric/Bento layouts over symmetric 3-column grids.
+
+---
+
+## 7. Modern Color System
+
+### OKLCH vs RGB/HSL
+
+| Format | Advantage |
+|--------|-----------|
+| **OKLCH** | Perceptually uniform, better for design |
+| **HSL** | Intuitive hue/saturation |
+| **RGB** | Legacy compatibility |
+
+### Color Token Architecture
+
+| Layer | Example | Purpose |
+|-------|---------|---------|
+| **Primitive** | `--blue-500` | Raw color values |
+| **Semantic** | `--color-primary` | Purpose-based naming |
+| **Component** | `--button-bg` | Component-specific |
+
+---
+
+## 8. Typography System
+
+### Font Stack Pattern
+
+| Type | Recommended |
+|------|-------------|
+| Sans | `'Inter', 'SF Pro', system-ui, sans-serif` |
+| Mono | `'JetBrains Mono', 'Fira Code', monospace` |
+| Display | `'Outfit', 'Poppins', sans-serif` |
+
+### Type Scale
+
+| Class | Size | Use |
+|-------|------|-----|
+| `text-xs` | 0.75rem | Labels, captions |
+| `text-sm` | 0.875rem | Secondary text |
+| `text-base` | 1rem | Body text |
+| `text-lg` | 1.125rem | Lead text |
+| `text-xl`+ | 1.25rem+ | Headings |
+
+---
+
+## 9. Animation & Transitions
+
+### Built-in Animations
+
+| Class | Effect |
+|-------|--------|
+| `animate-spin` | Continuous rotation |
+| `animate-ping` | Attention pulse |
+| `animate-pulse` | Subtle opacity pulse |
+| `animate-bounce` | Bouncing effect |
+
+### Transition Patterns
+
+| Pattern | Classes |
+|---------|---------|
+| All properties | `transition-all duration-200` |
+| Specific | `transition-colors duration-150` |
+| With easing | `ease-out` or `ease-in-out` |
+| Hover effect | `hover:scale-105 transition-transform` |
+
+---
+
+## 10. Component Extraction
+
+### When to Extract
+
+| Signal | Action |
+|--------|--------|
+| Same class combo 3+ times | Extract component |
+| Complex state variants | Extract component |
+| Design system element | Extract + document |
+
+### Extraction Methods
+
+| Method | Use When |
+|--------|----------|
+| **React/Vue component** | Dynamic, JS needed |
+| **@apply in CSS** | Static, no JS needed |
+| **Design tokens** | Reusable values |
+
+---
+
+## 11. Anti-Patterns
+
+| Don't | Do |
+|-------|-----|
+| Arbitrary values everywhere | Use design system scale |
+| `!important` | Fix specificity properly |
+| Inline `style=` | Use utilities |
+| Duplicate long class lists | Extract component |
+| Mix v3 config with v4 | Migrate fully to CSS-first |
+| Use `@apply` heavily | Prefer components |
+
+---
+
+## 12. Performance Principles
+
+| Principle | Implementation |
+|-----------|----------------|
+| **Purge unused** | Automatic in v4 |
+| **Avoid dynamism** | No template string classes |
+| **Use Oxide** | Default in v4, 10x faster |
+| **Cache builds** | CI/CD caching |
+
+---
+
+> **Remember:** Tailwind v4 is CSS-first. Embrace CSS variables, container queries, and native features. The config file is now optional.
diff --git a/.cursor/skills/tailwind-v4-shadcn/.claude-plugin/plugin.json b/.cursor/skills/tailwind-v4-shadcn/.claude-plugin/plugin.json
new file mode 100644
index 0000000..95e7218
--- /dev/null
+++ b/.cursor/skills/tailwind-v4-shadcn/.claude-plugin/plugin.json
@@ -0,0 +1,12 @@
+{
+  "name": "tailwind-v4-shadcn",
+  "description": "Set up Tailwind v4 with shadcn/ui using @theme inline pattern and CSS variable architecture. Four-step pattern: CSS variables, Tailwind mapping, base styles, automatic dark mode. Use when initializing React projects with Tailwind v4, or fixing colors not working, tw-animate-css errors, v3 migration.",
+  "version": "1.0.0",
+  "author": {
+    "name": "Jeremy Dawes",
+    "email": "jeremy@jezweb.net"
+  },
+  "license": "MIT",
+  "repository": "https://github.com/jezweb/claude-skills",
+  "keywords": []
+}
diff --git a/.cursor/skills/tailwind-v4-shadcn/SKILL.md b/.cursor/skills/tailwind-v4-shadcn/SKILL.md
new file mode 100644
index 0000000..5ac9022
--- /dev/null
+++ b/.cursor/skills/tailwind-v4-shadcn/SKILL.md
@@ -0,0 +1,665 @@
+---
+name: tailwind-v4-shadcn
+description: |
+  Set up Tailwind v4 with shadcn/ui using @theme inline pattern and CSS variable architecture. Four-step pattern: CSS variables, Tailwind mapping, base styles, automatic dark mode. Prevents 8 documented errors.
+
+  Use when initializing React projects with Tailwind v4, or fixing colors not working, tw-animate-css errors, @theme inline dark mode conflicts, @apply breaking, v3 migration issues.
+user-invocable: true
+---
+
+# Tailwind v4 + shadcn/ui Production Stack
+
+**Production-tested**: WordPress Auditor (https://wordpress-auditor.webfonts.workers.dev)
+**Last Updated**: 2026-01-20
+**Versions**: tailwindcss@4.1.18, @tailwindcss/vite@4.1.18
+**Status**: Production Ready ✅
+
+---
+
+## Quick Start (Follow This Exact Order)
+
+```bash
+# 1. Install dependencies
+pnpm add tailwindcss @tailwindcss/vite
+pnpm add -D @types/node tw-animate-css
+pnpm dlx shadcn@latest init
+
+# 2. Delete v3 config if exists
+rm tailwind.config.ts  # v4 doesn't use this file
+```
+
+**vite.config.ts**:
+```typescript
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: { alias: { '@': path.resolve(__dirname, './src') } }
+})
+```
+
+**components.json** (CRITICAL):
+```json
+{
+  "tailwind": {
+    "config": "",              // ← Empty for v4
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  }
+}
+```
+
+---
+
+## The Four-Step Architecture (MANDATORY)
+
+Skipping steps will break your theme. Follow exactly:
+
+### Step 1: Define CSS Variables at Root
+
+```css
+/* src/index.css */
+@import "tailwindcss";
+@import "tw-animate-css";  /* Required for shadcn/ui animations */
+
+:root {
+  --background: hsl(0 0% 100%);      /* ← hsl() wrapper required */
+  --foreground: hsl(222.2 84% 4.9%);
+  --primary: hsl(221.2 83.2% 53.3%);
+  /* ... all light mode colors */
+}
+
+.dark {
+  --background: hsl(222.2 84% 4.9%);
+  --foreground: hsl(210 40% 98%);
+  --primary: hsl(217.2 91.2% 59.8%);
+  /* ... all dark mode colors */
+}
+```
+
+**Critical**: Define at root level (NOT inside `@layer base`). Use `hsl()` wrapper.
+
+### Step 2: Map Variables to Tailwind Utilities
+
+```css
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-primary: var(--primary);
+  /* ... map ALL CSS variables */
+}
+```
+
+**Why**: Generates utility classes (`bg-background`, `text-primary`). Without this, utilities won't exist.
+
+### Step 3: Apply Base Styles
+
+```css
+@layer base {
+  body {
+    background-color: var(--background);  /* NO hsl() wrapper here */
+    color: var(--foreground);
+  }
+}
+```
+
+**Critical**: Reference variables directly. Never double-wrap: `hsl(var(--background))`.
+
+### Step 4: Result - Automatic Dark Mode
+
+```tsx
+<div className="bg-background text-foreground">
+  {/* No dark: variants needed - theme switches automatically */}
+</div>
+```
+
+---
+
+## Dark Mode Setup
+
+**1. Create ThemeProvider** (see `templates/theme-provider.tsx`)
+
+**2. Wrap App**:
+```typescript
+// src/main.tsx
+import { ThemeProvider } from '@/components/theme-provider'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+    <App />
+  </ThemeProvider>
+)
+```
+
+**3. Add Theme Toggle**:
+```bash
+pnpm dlx shadcn@latest add dropdown-menu
+```
+
+See `reference/dark-mode.md` for ModeToggle component.
+
+---
+
+## Critical Rules
+
+### ✅ Always Do:
+
+1. Wrap colors with `hsl()` in `:root`/`.dark`: `--bg: hsl(0 0% 100%);`
+2. Use `@theme inline` to map all CSS variables
+3. Set `"tailwind.config": ""` in components.json
+4. Delete `tailwind.config.ts` if exists
+5. Use `@tailwindcss/vite` plugin (NOT PostCSS)
+
+### ❌ Never Do:
+
+1. Put `:root`/`.dark` inside `@layer base` (causes cascade issues)
+2. Use `.dark { @theme { } }` pattern (v4 doesn't support nested @theme)
+3. Double-wrap colors: `hsl(var(--background))`
+4. Use `tailwind.config.ts` for theme (v4 ignores it)
+5. Use `@apply` directive (deprecated in v4, see error #7)
+6. Use `dark:` variants for semantic colors (auto-handled)
+7. Use `@apply` with `@layer base` or `@layer components` classes (v4 breaking change - use `@utility` instead) | [Source](https://github.com/tailwindlabs/tailwindcss/discussions/17082)
+8. Wrap ANY styles in `@layer base` without understanding CSS layer ordering (see error #8) | [Source](https://github.com/tailwindlabs/tailwindcss/discussions/16002)
+
+---
+
+## Common Errors & Solutions
+
+This skill prevents **8 documented errors**.
+
+### 1. ❌ tw-animate-css Import Error
+
+**Error**: "Cannot find module 'tailwindcss-animate'"
+
+**Cause**: shadcn/ui deprecated `tailwindcss-animate` for v4.
+
+**Solution**:
+```bash
+# ✅ DO
+pnpm add -D tw-animate-css
+
+# Add to src/index.css:
+@import "tailwindcss";
+@import "tw-animate-css";
+
+# ❌ DON'T
+npm install tailwindcss-animate  # v3 only
+```
+
+---
+
+### 2. ❌ Colors Not Working
+
+**Error**: `bg-primary` doesn't apply styles
+
+**Cause**: Missing `@theme inline` mapping
+
+**Solution**:
+```css
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-primary: var(--primary);
+  /* ... map ALL CSS variables */
+}
+```
+
+---
+
+### 3. ❌ Dark Mode Not Switching
+
+**Error**: Theme stays light/dark
+
+**Cause**: Missing ThemeProvider
+
+**Solution**:
+1. Create ThemeProvider (see `templates/theme-provider.tsx`)
+2. Wrap app in `main.tsx`
+3. Verify `.dark` class toggles on `<html>` element
+
+---
+
+### 4. ❌ Duplicate @layer base
+
+**Error**: "Duplicate @layer base" in console
+
+**Cause**: shadcn init adds `@layer base` - don't add another
+
+**Solution**:
+```css
+/* ✅ Correct - single @layer base */
+@import "tailwindcss";
+
+:root { --background: hsl(0 0% 100%); }
+
+@theme inline { --color-background: var(--background); }
+
+@layer base { body { background-color: var(--background); } }
+```
+
+---
+
+### 5. ❌ Build Fails with tailwind.config.ts
+
+**Error**: "Unexpected config file"
+
+**Cause**: v4 doesn't use `tailwind.config.ts` (v3 legacy)
+
+**Solution**:
+```bash
+rm tailwind.config.ts
+```
+
+v4 configuration happens in `src/index.css` using `@theme` directive.
+
+---
+
+### 6. ❌ @theme inline Breaks Dark Mode in Multi-Theme Setups
+
+**Error**: Dark mode doesn't switch when using `@theme inline` with custom variants (e.g., `data-mode="dark"`)
+**Source**: [GitHub Discussion #18560](https://github.com/tailwindlabs/tailwindcss/discussions/18560)
+
+**Cause**: `@theme inline` bakes variable VALUES into utilities at build time. When dark mode changes the underlying CSS variables, utilities don't update because they reference hardcoded values, not variables.
+
+**Why It Happens**:
+- `@theme inline` inlines VALUES at build time: `bg-primary` → `background-color: oklch(...)`
+- Dark mode overrides change the CSS variables, but utilities already have baked-in values
+- The CSS specificity chain breaks
+
+**Solution**: Use `@theme` (without inline) for multi-theme scenarios:
+
+```css
+/* ✅ CORRECT - Use @theme without inline */
+@custom-variant dark (&:where([data-mode=dark], [data-mode=dark] *));
+
+@theme {
+  --color-text-primary: var(--color-slate-900);
+  --color-bg-primary: var(--color-white);
+}
+
+@layer theme {
+  [data-mode="dark"] {
+    --color-text-primary: var(--color-white);
+    --color-bg-primary: var(--color-slate-900);
+  }
+}
+```
+
+**When to use inline**:
+- Single theme + dark mode toggle (like shadcn/ui default) ✅
+- Referencing other CSS variables that don't change ✅
+
+**When NOT to use inline**:
+- Multi-theme systems (data-theme="blue" | "green" | etc.) ❌
+- Dynamic theme switching beyond light/dark ❌
+
+**Maintainer Guidance** (Adam Wathan):
+> "It's more idiomatic in v4 for the actual generated CSS to reference your theme variables. I would personally only use inline when things don't work without it."
+
+---
+
+### 7. ❌ @apply with @layer base/components (v4 Breaking Change)
+
+**Error**: `Cannot apply unknown utility class: custom-button`
+**Source**: [GitHub Discussion #17082](https://github.com/tailwindlabs/tailwindcss/discussions/17082)
+
+**Cause**: In v3, classes defined in `@layer base` and `@layer components` could be used with `@apply`. In v4, this is a breaking architectural change.
+
+**Why It Happens**: v4 doesn't "hijack" the native CSS `@layer` at-rule anymore. Only classes defined with `@utility` are available to `@apply`.
+
+**Migration**:
+```css
+/* ❌ v3 pattern (worked) */
+@layer components {
+  .custom-button {
+    @apply px-4 py-2 bg-blue-500;
+  }
+}
+
+/* ✅ v4 pattern (required) */
+@utility custom-button {
+  @apply px-4 py-2 bg-blue-500;
+}
+
+/* OR use native CSS */
+@layer base {
+  .custom-button {
+    padding: 1rem 0.5rem;
+    background-color: theme(colors.blue.500);
+  }
+}
+```
+
+**Note**: This skill already discourages `@apply` usage. This error is primarily for users migrating from v3.
+
+---
+
+### 8. ❌ @layer base Styles Not Applying
+
+**Error**: Styles defined in `@layer base` seem to be ignored
+**Source**: [GitHub Discussion #16002](https://github.com/tailwindlabs/tailwindcss/discussions/16002) | [Discussion #18123](https://github.com/tailwindlabs/tailwindcss/discussions/18123)
+
+**Cause**: v4 uses native CSS layers. Base styles CAN be overridden by utility layers due to CSS cascade if layers aren't explicitly ordered.
+
+**Why It Happens**:
+- v3: Tailwind intercepted `@layer base/components/utilities` and processed them specially
+- v4: Uses native CSS layers - if you don't import layers in the right order, precedence breaks
+- Styles ARE being applied, but utilities override them
+
+**Solution Option 1**: Define layers explicitly:
+```css
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/base.css" layer(base);
+@import "tailwindcss/components.css" layer(components);
+@import "tailwindcss/utilities.css" layer(utilities);
+
+@layer base {
+  body {
+    background-color: var(--background);
+  }
+}
+```
+
+**Solution Option 2** (Recommended): Don't use `@layer base` - define styles at root level:
+```css
+@import "tailwindcss";
+
+:root {
+  --background: hsl(0 0% 100%);
+}
+
+body {
+  background-color: var(--background); /* No @layer needed */
+}
+```
+
+**Applies to**: ALL base styles, not just color variables. Avoid wrapping ANY styles in `@layer base` unless you understand CSS layer ordering.
+
+---
+
+## Quick Reference
+
+| Symptom | Cause | Fix |
+|---------|-------|-----|
+| `bg-primary` doesn't work | Missing `@theme inline` | Add `@theme inline` block |
+| Colors all black/white | Double `hsl()` wrapping | Use `var(--color)` not `hsl(var(--color))` |
+| Dark mode not switching | Missing ThemeProvider | Wrap app in `<ThemeProvider>` |
+| Build fails | `tailwind.config.ts` exists | Delete file |
+| Animation errors | Using `tailwindcss-animate` | Install `tw-animate-css` |
+
+---
+
+## What's New in Tailwind v4
+
+### OKLCH Color Space (December 2024)
+
+Tailwind v4.0 replaced the entire default color palette with OKLCH, a perceptually uniform color space.
+**Source**: [Tailwind v4.0 Release](https://tailwindcss.com/blog/tailwindcss-v4) | [OKLCH Migration Guide](https://andy-cinquin.com/blog/migration-oklch-tailwind-css-4-0)
+
+**Why OKLCH**:
+- **Perceptual consistency**: HSL's "50% lightness" is visually inconsistent across hues (yellow appears much brighter than blue at same lightness)
+- **Better gradients**: Smooth transitions without muddy middle colors
+- **Wider gamut**: Supports colors beyond sRGB on modern displays
+- **More vibrant colors**: Eye-catching, saturated colors previously limited by sRGB
+
+**Browser Support** (January 2026):
+- Chrome 111+, Firefox 113+, Safari 15.4+, Edge 111+
+- Global coverage: 93.1%
+
+**Automatic Fallbacks**: Tailwind generates sRGB fallbacks for older browsers:
+```css
+.bg-blue-500 {
+  background-color: #3b82f6; /* sRGB fallback */
+  background-color: oklch(0.6 0.24 264); /* Modern browsers */
+}
+```
+
+**Custom Colors**: When defining custom colors, OKLCH is now preferred:
+```css
+@theme {
+  /* Modern approach (preferred) */
+  --color-brand: oklch(0.7 0.15 250);
+
+  /* Legacy approach (still works) */
+  --color-brand: hsl(240 80% 60%);
+}
+```
+
+**Migration**: No breaking changes - Tailwind generates fallbacks automatically. For new projects, use OKLCH-aware tooling for custom colors.
+
+### Built-in Features (No Plugin Needed)
+
+**Container Queries** (built-in as of v4.0):
+```tsx
+<div className="@container">
+  <div className="@md:text-lg @lg:grid-cols-2">
+    Content responds to container width, not viewport
+  </div>
+</div>
+```
+
+**Line Clamp** (built-in as of v3.3):
+```tsx
+<p className="line-clamp-3">Truncate to 3 lines with ellipsis...</p>
+<p className="line-clamp-[8]">Arbitrary values supported</p>
+<p className="line-clamp-(--teaser-lines)">CSS variable support</p>
+```
+
+**Removed Plugins**:
+- `@tailwindcss/container-queries` - Built-in now
+- `@tailwindcss/line-clamp` - Built-in since v3.3
+
+---
+
+## Tailwind v4 Plugins
+
+Use `@plugin` directive (NOT `require()` or `@import`):
+
+**Typography** (for Markdown/CMS content):
+```bash
+pnpm add -D @tailwindcss/typography
+```
+```css
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+```
+```html
+<article class="prose dark:prose-invert">{{ content }}</article>
+```
+
+**Forms** (cross-browser form styling):
+```bash
+pnpm add -D @tailwindcss/forms
+```
+```css
+@import "tailwindcss";
+@plugin "@tailwindcss/forms";
+```
+
+**Container Queries** (built-in, no plugin needed):
+```tsx
+<div className="@container">
+  <div className="@md:text-lg">Responds to container width</div>
+</div>
+```
+
+**Common Plugin Errors**:
+```css
+/* ❌ WRONG - v3 syntax */
+@import "@tailwindcss/typography";
+
+/* ✅ CORRECT - v4 syntax */
+@plugin "@tailwindcss/typography";
+```
+
+---
+
+## Setup Checklist
+
+- [ ] `@tailwindcss/vite` installed (NOT postcss)
+- [ ] `vite.config.ts` uses `tailwindcss()` plugin
+- [ ] `components.json` has `"config": ""`
+- [ ] NO `tailwind.config.ts` exists
+- [ ] `src/index.css` follows 4-step pattern:
+  - [ ] `:root`/`.dark` at root level (not in @layer)
+  - [ ] Colors wrapped with `hsl()`
+  - [ ] `@theme inline` maps all variables
+  - [ ] `@layer base` uses unwrapped variables
+- [ ] ThemeProvider wraps app
+- [ ] Theme toggle works
+
+---
+
+## File Templates
+
+Available in `templates/` directory:
+
+- **index.css** - Complete CSS with all color variables
+- **components.json** - shadcn/ui v4 config
+- **vite.config.ts** - Vite + Tailwind plugin
+- **theme-provider.tsx** - Dark mode provider
+- **utils.ts** - `cn()` utility
+
+---
+
+## Migration from v3
+
+See `reference/migration-guide.md` for complete guide.
+
+**Key Changes**:
+- Delete `tailwind.config.ts`
+- Move theme to CSS with `@theme inline`
+- Replace `@tailwindcss/line-clamp` (now built-in: `line-clamp-*`)
+- Replace `tailwindcss-animate` with `tw-animate-css`
+- Update plugins: `require()` → `@plugin`
+
+### Additional Migration Gotchas
+
+#### Automated Migration Tool May Fail
+
+**Warning**: The `@tailwindcss/upgrade` utility often fails to migrate configurations.
+**Source**: [Community Reports](https://medium.com/better-dev-nextjs-react/tailwind-v4-migration-from-javascript-config-to-css-first-in-2025-ff3f59b215ca) | [GitHub Discussion #16642](https://github.com/tailwindlabs/tailwindcss/discussions/16642)
+
+**Common failures**:
+- Typography plugin configurations
+- Complex theme extensions
+- Custom plugin setups
+
+**Recommendation**: Don't rely on automated migration. Follow manual steps in the migration guide instead.
+
+#### Default Element Styles Removed
+
+Tailwind v4 takes a more minimal approach to Preflight, removing default styles for headings, lists, and buttons.
+**Source**: [GitHub Discussion #16517](https://github.com/tailwindlabs/tailwindcss/discussions/16517) | [Medium: Migration Problems](https://medium.com/better-dev-nextjs-react/tailwind-v4-migration-from-javascript-config-to-css-first-in-2025-ff3f59b215ca)
+
+**Impact**:
+- All headings (`<h1>` through `<h6>`) render at same size
+- Lists lose default padding
+- Visual regressions in existing projects
+
+**Solutions**:
+
+**Option 1: Use @tailwindcss/typography for content pages**:
+```bash
+pnpm add -D @tailwindcss/typography
+```
+```css
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+```
+```tsx
+<article className="prose dark:prose-invert">
+  {/* All elements styled automatically */}
+</article>
+```
+
+**Option 2: Add custom base styles**:
+```css
+@layer base {
+  h1 { @apply text-4xl font-bold mb-4; }
+  h2 { @apply text-3xl font-bold mb-3; }
+  h3 { @apply text-2xl font-bold mb-2; }
+  ul { @apply list-disc pl-6 mb-4; }
+  ol { @apply list-decimal pl-6 mb-4; }
+}
+```
+
+#### PostCSS Setup Complexity
+
+**Recommendation**: Use `@tailwindcss/vite` plugin for Vite projects instead of PostCSS.
+**Source**: [Medium: Migration Problems](https://medium.com/better-dev-nextjs-react/tailwind-v4-migration-from-javascript-config-to-css-first-in-2025-ff3f59b215ca) | [GitHub Discussion #15764](https://github.com/tailwindlabs/tailwindcss/discussions/15764)
+
+**Why Vite Plugin is Better**:
+```typescript
+// ✅ Vite Plugin - One line, no PostCSS config
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+})
+
+// ❌ PostCSS - Multiple steps, plugin compatibility issues
+// 1. Install @tailwindcss/postcss
+// 2. Configure postcss.config.js
+// 3. Manage plugin order
+// 4. Debug plugin conflicts
+```
+
+**PostCSS Problems Reported**:
+- Error: "It looks like you're trying to use tailwindcss directly as a PostCSS plugin"
+- Multiple PostCSS plugins required: `postcss-import`, `postcss-advanced-variables`, `tailwindcss/nesting`
+- v4 PostCSS plugin is separate package: `@tailwindcss/postcss`
+
+**Official Guidance**: The Vite plugin is recommended for Vite projects. PostCSS is for legacy setups or non-Vite environments.
+
+#### Visual Changes
+
+**Ring Width Default**: Changed from 3px to 1px
+**Source**: [Medium: Migration Guide](https://medium.com/better-dev-nextjs-react/tailwind-v4-migration-from-javascript-config-to-css-first-in-2025-ff3f59b215ca)
+
+- `ring` class is now thinner
+- Use `ring-3` to match v3 appearance
+
+```tsx
+// v3: 3px ring
+<button className="ring">Button</button>
+
+// v4: 1px ring (thinner)
+<button className="ring">Button</button>
+
+// Match v3 appearance
+<button className="ring-3">Button</button>
+```
+
+---
+
+## Reference Documentation
+
+- **architecture.md** - Deep dive into 4-step pattern
+- **dark-mode.md** - Complete dark mode implementation
+- **common-gotchas.md** - Troubleshooting guide
+- **migration-guide.md** - v3 → v4 migration
+
+---
+
+## Official Documentation
+
+- **shadcn/ui Vite Setup**: https://ui.shadcn.com/docs/installation/vite
+- **shadcn/ui Tailwind v4**: https://ui.shadcn.com/docs/tailwind-v4
+- **Tailwind v4 Docs**: https://tailwindcss.com/docs
+
+---
+
+**Last Updated**: 2026-01-20
+**Skill Version**: 3.0.0
+**Tailwind v4**: 4.1.18 (Latest)
+**Production**: WordPress Auditor (https://wordpress-auditor.webfonts.workers.dev)
+
+**Changelog**:
+- v3.0.0 (2026-01-20): Major research update - added 3 TIER 1 errors (#6-8), expanded migration guide with community findings (TIER 2), added OKLCH color space section, PostCSS complexity warnings, and migration tool limitations
+- v2.0.1 (2026-01-03): Production verification
+- v2.0.0: Initial release with 5 documented errors
diff --git a/.cursor/skills/tailwind-v4-shadcn/commands/setup.md b/.cursor/skills/tailwind-v4-shadcn/commands/setup.md
new file mode 100644
index 0000000..d317bc5
--- /dev/null
+++ b/.cursor/skills/tailwind-v4-shadcn/commands/setup.md
@@ -0,0 +1,200 @@
+# Setup Tailwind v4 + shadcn/ui
+
+Add Tailwind CSS v4 and shadcn/ui to an existing React/Vite project.
+
+---
+
+## Your Task
+
+Follow these steps to configure Tailwind v4 and shadcn/ui.
+
+### 1. Check Prerequisites
+
+Verify the project has:
+- Vite + React configured
+- TypeScript (recommended)
+
+If not a Vite project, inform user of requirements.
+
+### 2. Install Tailwind v4
+
+```bash
+npm install tailwindcss @tailwindcss/vite
+```
+
+### 3. Configure Vite
+
+Update `vite.config.ts`:
+
+```typescript
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+});
+```
+
+**Important**: Use `@tailwindcss/vite` plugin, NOT PostCSS.
+
+### 4. Create CSS Entry
+
+Create or update `src/index.css`:
+
+```css
+@import "tailwindcss";
+```
+
+### 5. Initialize shadcn/ui
+
+```bash
+npx shadcn@latest init
+```
+
+When prompted:
+- Style: Default
+- Base color: Neutral (or user preference)
+- CSS variables: Yes
+- Tailwind config: Leave empty for v4
+- Components path: `src/components`
+- Utils path: `src/lib/utils`
+
+### 6. Configure components.json
+
+Ensure `components.json` has:
+
+```json
+{
+  "tailwind": {
+    "config": ""
+  }
+}
+```
+
+**Important**: Empty string for `config` is required for Tailwind v4.
+
+### 7. Add Theme Provider
+
+Create `src/components/theme-provider.tsx`:
+
+```typescript
+import { createContext, useContext, useEffect, useState } from 'react';
+
+type Theme = 'dark' | 'light' | 'system';
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+};
+
+type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState | undefined>(undefined);
+
+export function ThemeProvider({
+  children,
+  defaultTheme = 'system',
+  storageKey = 'ui-theme',
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+  );
+
+  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);
+    } else {
+      root.classList.add(theme);
+    }
+  }, [theme]);
+
+  return (
+    <ThemeProviderContext.Provider
+      value={{
+        theme,
+        setTheme: (theme: Theme) => {
+          localStorage.setItem(storageKey, theme);
+          setTheme(theme);
+        },
+      }}
+    >
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+  if (!context) throw new Error('useTheme must be used within ThemeProvider');
+  return context;
+};
+```
+
+### 8. Wrap App with Theme Provider
+
+Update main entry (e.g., `src/main.tsx`):
+
+```typescript
+import { ThemeProvider } from '@/components/theme-provider';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <ThemeProvider defaultTheme="system">
+      <App />
+    </ThemeProvider>
+  </React.StrictMode>
+);
+```
+
+### 9. Add First Components
+
+```bash
+npx shadcn@latest add button
+npx shadcn@latest add card
+```
+
+### 10. Provide Next Steps
+
+```
+✅ Tailwind v4 + shadcn/ui configured!
+
+📁 Added:
+   - @tailwindcss/vite plugin
+   - src/components/ui/     (shadcn components)
+   - src/lib/utils.ts       (cn utility)
+   - Theme provider         (dark/light/system)
+
+🎨 Add components:
+   npx shadcn@latest add <component>
+   npx shadcn@latest add button card input
+
+⚠️ Critical Rules:
+   - Use semantic colors: bg-primary, text-foreground
+   - Never use raw Tailwind colors: bg-blue-500
+
+📚 Skill loaded: tailwind-v4-shadcn
+   - v3→v4 syntax corrections
+   - Semantic color system
+   - Theme provider included
+```
+
+---
+
+## Tailwind v4 Key Differences
+
+| v3 Pattern | v4 Pattern |
+|------------|------------|
+| `tailwind.config.js` | CSS-based config in `@theme` |
+| PostCSS plugin | Vite plugin (`@tailwindcss/vite`) |
+| `@apply` everywhere | Prefer utility classes |
diff --git a/.cursor/skills/tailwind-v4-shadcn/references/architecture.md b/.cursor/skills/tailwind-v4-shadcn/references/architecture.md
new file mode 100644
index 0000000..90f6f88
--- /dev/null
+++ b/.cursor/skills/tailwind-v4-shadcn/references/architecture.md
@@ -0,0 +1,206 @@
+# Tailwind v4 + shadcn/ui Theming Architecture
+
+## The Four-Step Pattern
+
+Tailwind v4 requires a specific architecture for CSS variable-based theming. This pattern is **mandatory** - skipping or modifying steps will break your theme.
+
+### Step 1: Define CSS Variables at Root Level
+
+```css
+:root {
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(222.2 84% 4.9%);
+  /* ... more colors */
+}
+
+.dark {
+  --background: hsl(222.2 84% 4.9%);
+  --foreground: hsl(210 40% 98%);
+  /* ... dark mode colors */
+}
+```
+
+**Critical Rules:**
+- ✅ Define at root level (NOT inside `@layer base`)
+- ✅ Use `hsl()` wrapper on all color values
+- ✅ Use `.dark` for dark mode overrides (NOT `.dark { @theme { } }`)
+- ❌ Never put `:root` or `.dark` inside `@layer base`
+
+### Step 2: Map Variables to Tailwind Utilities
+
+```css
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  /* ... map all CSS variables */
+}
+```
+
+**Why This Is Required:**
+- Tailwind v4 doesn't read `tailwind.config.ts` for colors
+- `@theme inline` generates utility classes (`bg-background`, `text-foreground`)
+- Without this, utilities like `bg-primary` won't exist
+
+### Step 3: Apply Base Styles
+
+```css
+@layer base {
+  body {
+    background-color: var(--background);  /* NO hsl() wrapper here */
+    color: var(--foreground);
+  }
+}
+```
+
+**Critical Rules:**
+- ✅ Reference variables directly: `var(--background)`
+- ❌ Never double-wrap: `hsl(var(--background))` (already has hsl)
+
+### Step 4: Result - Automatic Dark Mode
+
+With this architecture:
+- `<div className="bg-background text-foreground">` works automatically
+- No `dark:` variants needed in components
+- Theme switches via `.dark` class on `<html>`
+- Single source of truth for all colors
+
+---
+
+## Why This Architecture Works
+
+### Color Variable Flow
+
+```
+CSS Variable Definition → @theme inline Mapping → Tailwind Utility Class
+--background           → --color-background     → bg-background
+(with hsl() wrapper)     (references variable)    (generated class)
+```
+
+### Dark Mode Switching
+
+```
+ThemeProvider toggles `.dark` class on <html>
+  ↓
+CSS variables update automatically (.dark overrides)
+  ↓
+Tailwind utilities reference updated variables
+  ↓
+UI updates without re-render
+```
+
+---
+
+## Common Mistakes
+
+### ❌ Mistake 1: Variables Inside @layer base
+
+```css
+/* WRONG */
+@layer base {
+  :root {
+    --background: hsl(0 0% 100%);
+  }
+}
+```
+
+**Why It Fails:** Tailwind v4 strips CSS outside `@theme`/`@layer`, but `:root` must be at root level to persist.
+
+### ❌ Mistake 2: Using .dark { @theme { } }
+
+```css
+/* WRONG */
+@theme {
+  --color-primary: hsl(0 0% 0%);
+}
+
+.dark {
+  @theme {
+    --color-primary: hsl(0 0% 100%);
+  }
+}
+```
+
+**Why It Fails:** Tailwind v4 doesn't support nested `@theme` directives.
+
+### ❌ Mistake 3: Double hsl() Wrapping
+
+```css
+/* WRONG */
+@layer base {
+  body {
+    background-color: hsl(var(--background));
+  }
+}
+```
+
+**Why It Fails:** `--background` already contains `hsl()`, results in `hsl(hsl(...))`.
+
+### ❌ Mistake 4: Config-Based Colors
+
+```typescript
+// WRONG (tailwind.config.ts)
+export default {
+  theme: {
+    extend: {
+      colors: {
+        primary: 'hsl(var(--primary))'
+      }
+    }
+  }
+}
+```
+
+**Why It Fails:** Tailwind v4 completely ignores `theme.extend.colors` in config files.
+
+---
+
+## Best Practices
+
+### 1. Semantic Color Names
+
+Use semantic names, not color values:
+```css
+--primary      /* ✅ Semantic */
+--blue-500     /* ❌ Not semantic */
+```
+
+### 2. Foreground Pairing
+
+Every background color needs a foreground:
+```css
+--primary: hsl(...);
+--primary-foreground: hsl(...);
+```
+
+### 3. WCAG Contrast Ratios
+
+Ensure proper contrast:
+- Normal text: 4.5:1 minimum
+- Large text: 3:1 minimum
+- UI components: 3:1 minimum
+
+### 4. Chart Colors
+
+Charts need separate variables (don't use hsl wrapper in components):
+```css
+:root {
+  --chart-1: hsl(12 76% 61%);
+}
+
+@theme inline {
+  --color-chart-1: var(--chart-1);
+}
+```
+
+Use in components:
+```tsx
+<div style={{ backgroundColor: 'var(--chart-1)' }} />
+```
+
+---
+
+## Official Documentation
+
+- shadcn/ui Tailwind v4 Guide: https://ui.shadcn.com/docs/tailwind-v4
+- Tailwind v4 Docs: https://tailwindcss.com/docs
+- shadcn/ui Theming: https://ui.shadcn.com/docs/theming
diff --git a/.cursor/skills/tailwind-v4-shadcn/references/common-gotchas.md b/.cursor/skills/tailwind-v4-shadcn/references/common-gotchas.md
new file mode 100644
index 0000000..f876df1
--- /dev/null
+++ b/.cursor/skills/tailwind-v4-shadcn/references/common-gotchas.md
@@ -0,0 +1,469 @@
+# Common Gotchas & Solutions
+
+## Critical Failures (Will Break Your Build)
+
+### 1. `:root` Inside `@layer base`
+
+❌ **WRONG:**
+```css
+@layer base {
+  :root {
+    --background: hsl(0 0% 100%);
+  }
+}
+```
+
+✅ **CORRECT:**
+```css
+:root {
+  --background: hsl(0 0% 100%);
+}
+
+@layer base {
+  body {
+    background-color: var(--background);
+  }
+}
+```
+
+**Why:** Tailwind v4 strips CSS outside `@theme`/`@layer`, but `:root` must be at root level.
+
+---
+
+### 2. Nested `@theme` Directive
+
+❌ **WRONG:**
+```css
+@theme {
+  --color-primary: hsl(0 0% 0%);
+}
+
+.dark {
+  @theme {
+    --color-primary: hsl(0 0% 100%);
+  }
+}
+```
+
+✅ **CORRECT:**
+```css
+:root {
+  --primary: hsl(0 0% 0%);
+}
+
+.dark {
+  --primary: hsl(0 0% 100%);
+}
+
+@theme inline {
+  --color-primary: var(--primary);
+}
+```
+
+**Why:** Tailwind v4 doesn't support `@theme` inside selectors.
+
+---
+
+### 3. Double `hsl()` Wrapping
+
+❌ **WRONG:**
+```css
+@layer base {
+  body {
+    background-color: hsl(var(--background));
+  }
+}
+```
+
+✅ **CORRECT:**
+```css
+@layer base {
+  body {
+    background-color: var(--background);  /* Already has hsl() */
+  }
+}
+```
+
+**Why:** Variables already contain `hsl()`, double-wrapping creates `hsl(hsl(...))`.
+
+---
+
+### 4. Colors in `tailwind.config.ts`
+
+❌ **WRONG:**
+```typescript
+// tailwind.config.ts
+export default {
+  theme: {
+    extend: {
+      colors: {
+        primary: 'hsl(var(--primary))'
+      }
+    }
+  }
+}
+```
+
+✅ **CORRECT:**
+```typescript
+// Delete tailwind.config.ts entirely OR leave it empty
+export default {}
+
+// components.json
+{
+  "tailwind": {
+    "config": ""  // ← Empty string
+  }
+}
+```
+
+**Why:** Tailwind v4 completely ignores `theme.extend.colors`.
+
+---
+
+### 5. Missing `@theme inline` Mapping
+
+❌ **WRONG:**
+```css
+:root {
+  --background: hsl(0 0% 100%);
+}
+
+/* No @theme inline block */
+```
+
+Result: `bg-background` class doesn't exist
+
+✅ **CORRECT:**
+```css
+:root {
+  --background: hsl(0 0% 100%);
+}
+
+@theme inline {
+  --color-background: var(--background);
+}
+```
+
+**Why:** `@theme inline` generates the utility classes.
+
+---
+
+## Configuration Gotchas
+
+### 6. Wrong components.json Config
+
+❌ **WRONG:**
+```json
+{
+  "tailwind": {
+    "config": "tailwind.config.ts"  // ← No!
+  }
+}
+```
+
+✅ **CORRECT:**
+```json
+{
+  "tailwind": {
+    "config": ""  // ← Empty for v4
+  }
+}
+```
+
+---
+
+### 7. Using PostCSS Instead of Vite Plugin
+
+❌ **WRONG:**
+```typescript
+// vite.config.ts
+export default defineConfig({
+  css: {
+    postcss: './postcss.config.js'  // Old v3 way
+  }
+})
+```
+
+✅ **CORRECT:**
+```typescript
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()]  // v4 way
+})
+```
+
+---
+
+### 8. Missing Path Aliases
+
+❌ **WRONG:**
+```typescript
+// tsconfig.json has no paths
+import { Button } from '../../components/ui/button'
+```
+
+✅ **CORRECT:**
+```json
+// tsconfig.app.json
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
+```
+
+```typescript
+import { Button } from '@/components/ui/button'
+```
+
+---
+
+## Color System Gotchas
+
+### 9. Using `dark:` Variants for Semantic Colors
+
+❌ **WRONG:**
+```tsx
+<div className="bg-primary dark:bg-primary-dark" />
+```
+
+✅ **CORRECT:**
+```tsx
+<div className="bg-primary" />
+```
+
+**Why:** With proper CSS variable setup, `bg-primary` automatically responds to theme.
+
+---
+
+### 10. Hardcoded Color Values
+
+❌ **WRONG:**
+```tsx
+<div className="bg-blue-600 dark:bg-blue-400" />
+```
+
+✅ **CORRECT:**
+```tsx
+<div className="bg-primary" />  {/* Or bg-info, bg-success, etc. */}
+```
+
+**Why:** Semantic tokens enable theme switching and reduce repetition.
+
+---
+
+## Component Gotchas
+
+### 11. Missing `cn()` Utility
+
+❌ **WRONG:**
+```tsx
+<div className={`base ${isActive && 'active'}`} />
+```
+
+✅ **CORRECT:**
+```tsx
+import { cn } from '@/lib/utils'
+<div className={cn("base", isActive && "active")} />
+```
+
+**Why:** `cn()` properly merges and deduplicates Tailwind classes.
+
+---
+
+### 12. Empty String in Radix Select
+
+❌ **WRONG:**
+```tsx
+<SelectItem value="">Select an option</SelectItem>
+```
+
+✅ **CORRECT:**
+```tsx
+<SelectItem value="placeholder">Select an option</SelectItem>
+```
+
+**Why:** Radix UI Select doesn't allow empty string values.
+
+---
+
+## Installation Gotchas
+
+### 13. Wrong Tailwind Package
+
+❌ **WRONG:**
+```bash
+npm install tailwindcss@^3.4.0  # v3
+```
+
+✅ **CORRECT:**
+```bash
+npm install tailwindcss@^4.1.0  # v4
+npm install @tailwindcss/vite
+```
+
+---
+
+### 14. Missing Dependencies
+
+❌ **WRONG:**
+```json
+{
+  "dependencies": {
+    "tailwindcss": "^4.1.0"
+    // Missing @tailwindcss/vite
+  }
+}
+```
+
+✅ **CORRECT:**
+```json
+{
+  "dependencies": {
+    "tailwindcss": "^4.1.0",
+    "@tailwindcss/vite": "^4.1.0",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.0"
+  }
+}
+```
+
+---
+
+### 17. tw-animate-css Import Error (REAL-WORLD ISSUE)
+
+❌ **WRONG:**
+```bash
+npm install tailwindcss-animate  # Deprecated package
+```
+
+```css
+@import "tw-animate-css";  # Package doesn't exist in v4
+```
+
+✅ **CORRECT:**
+```bash
+# Don't install tailwindcss-animate at all
+# Use native CSS animations or @tailwindcss/motion
+```
+
+**Why:**
+- `tailwindcss-animate` is deprecated in Tailwind v4
+- Causes import errors during build
+- shadcn/ui docs may still reference it (outdated)
+- The skill handles animations differently in v4
+
+**Impact:** Build failure, requires manual CSS file cleanup
+
+---
+
+### 18. Duplicate @layer base After shadcn init (REAL-WORLD ISSUE)
+
+❌ **WRONG:**
+```css
+/* After running shadcn init, you might have: */
+@layer base {
+  body {
+    background-color: var(--background);
+  }
+}
+
+@layer base {  /* ← Duplicate added by shadcn init */
+  * {
+    border-color: hsl(var(--border));
+  }
+}
+```
+
+✅ **CORRECT:**
+```css
+/* Merge into single @layer base block */
+@layer base {
+  * {
+    border-color: var(--border);
+  }
+
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+}
+```
+
+**Why:**
+- `shadcn init` adds its own `@layer base` block
+- Results in duplicate layer declarations
+- Can cause unexpected CSS priority issues
+- Easy to miss during setup
+
+**Prevention:**
+- Check `src/index.css` immediately after running `shadcn init`
+- Merge any duplicate `@layer base` blocks
+- Keep only one base layer section
+
+**Impact:** CSS priority issues, harder to debug styling problems
+
+---
+
+## Testing Gotchas
+
+### 15. Not Testing Both Themes
+
+❌ **WRONG:**
+Only testing in light mode
+
+✅ **CORRECT:**
+Test in:
+- Light mode
+- Dark mode
+- System mode
+- Both initial load and toggle
+
+---
+
+### 16. Not Checking Contrast
+
+❌ **WRONG:**
+Colors look good but fail WCAG
+
+✅ **CORRECT:**
+- Use browser DevTools Lighthouse
+- Check contrast ratios (4.5:1 minimum)
+- Test with actual users
+
+---
+
+## Quick Diagnosis
+
+**Symptoms → Likely Cause:**
+
+| Symptom | Likely Cause |
+|---------|-------------|
+| `bg-primary` doesn't work | Missing `@theme inline` mapping |
+| Colors all black/white | Double `hsl()` wrapping |
+| Dark mode not switching | Missing ThemeProvider |
+| Build fails | `tailwind.config.ts` exists with theme config |
+| Text invisible | Wrong contrast colors |
+| `@/` imports fail | Missing path aliases in tsconfig |
+
+---
+
+## Prevention Checklist
+
+Before deploying:
+- [ ] No `tailwind.config.ts` file (or it's empty)
+- [ ] `components.json` has `"config": ""`
+- [ ] All colors have `hsl()` wrapper in `:root`
+- [ ] `@theme inline` maps all variables
+- [ ] `@layer base` doesn't wrap `:root`
+- [ ] Theme provider wraps app
+- [ ] Tested in both light and dark modes
+- [ ] All text has sufficient contrast
diff --git a/.cursor/skills/tailwind-v4-shadcn/references/dark-mode.md b/.cursor/skills/tailwind-v4-shadcn/references/dark-mode.md
new file mode 100644
index 0000000..5c5008e
--- /dev/null
+++ b/.cursor/skills/tailwind-v4-shadcn/references/dark-mode.md
@@ -0,0 +1,239 @@
+# Dark Mode Implementation
+
+## Overview
+
+Tailwind v4 + shadcn/ui dark mode requires:
+1. `ThemeProvider` component to manage state
+2. `.dark` class toggling on `<html>` element
+3. localStorage persistence
+4. System theme detection
+
+---
+
+## ThemeProvider Component
+
+### Full Implementation
+
+```typescript
+// src/components/theme-provider.tsx
+import { createContext, useContext, useEffect, useState, ReactNode } from 'react'
+
+type Theme = 'dark' | 'light' | 'system'
+
+type ThemeProviderProps = {
+  children: ReactNode
+  defaultTheme?: Theme
+  storageKey?: string
+}
+
+type ThemeProviderState = {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+}
+
+const initialState: ThemeProviderState = {
+  theme: 'system',
+  setTheme: () => null,
+}
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
+
+export function ThemeProvider({
+  children,
+  defaultTheme = 'system',
+  storageKey = 'vite-ui-theme',
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(() => {
+    try {
+      return (localStorage.getItem(storageKey) as Theme) || defaultTheme
+    } catch (e) {
+      return defaultTheme
+    }
+  })
+
+  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) => {
+      try {
+        localStorage.setItem(storageKey, theme)
+      } catch (e) {
+        console.warn('Storage unavailable')
+      }
+      setTheme(theme)
+    },
+  }
+
+  return (
+    <ThemeProviderContext.Provider {...props} 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
+}
+```
+
+### Wrap Your App
+
+```typescript
+// src/main.tsx
+import { ThemeProvider } from '@/components/theme-provider'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+      <App />
+    </ThemeProvider>
+  </React.StrictMode>,
+)
+```
+
+---
+
+## Theme Toggle Component
+
+### Using shadcn/ui Dropdown Menu
+
+```bash
+pnpm dlx shadcn@latest add dropdown-menu
+```
+
+```typescript
+// src/components/mode-toggle.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"
+
+export function ModeToggle() {
+  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>
+  )
+}
+```
+
+---
+
+## How It Works
+
+### Theme Flow
+
+```
+User selects theme → setTheme() called
+  ↓
+Save to localStorage
+  ↓
+Update state
+  ↓
+useEffect triggers
+  ↓
+Remove existing classes (.light, .dark)
+  ↓
+Add new class to <html>
+  ↓
+CSS variables update (.dark overrides :root)
+  ↓
+UI updates automatically
+```
+
+### System Theme Detection
+
+```typescript
+if (theme === 'system') {
+  const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
+    .matches ? 'dark' : 'light'
+  root.classList.add(systemTheme)
+}
+```
+
+This respects the user's OS preference when "System" is selected.
+
+---
+
+## Common Issues
+
+### Issue: Dark mode not switching
+
+**Cause:** Theme provider not wrapping app
+**Fix:** Ensure `<ThemeProvider>` wraps your app in `main.tsx`
+
+### Issue: Theme resets on page refresh
+
+**Cause:** localStorage not working
+**Fix:** Check browser privacy settings, add sessionStorage fallback
+
+### Issue: Flash of wrong theme on load
+
+**Cause:** Theme applied after initial render
+**Fix:** Add inline script to `index.html` (advanced)
+
+### Issue: Icons not changing
+
+**Cause:** CSS transitions not working
+**Fix:** Verify icon classes use `dark:` variants for animations
+
+---
+
+## Testing Checklist
+
+- [ ] Light mode displays correctly
+- [ ] Dark mode displays correctly
+- [ ] System mode respects OS setting
+- [ ] Theme persists after page refresh
+- [ ] Toggle component shows current state
+- [ ] All text has proper contrast
+- [ ] No flash of wrong theme on load
+- [ ] Works in incognito mode (graceful fallback)
+
+---
+
+## Official Documentation
+
+- shadcn/ui Dark Mode (Vite): https://ui.shadcn.com/docs/dark-mode/vite
+- Tailwind Dark Mode: https://tailwindcss.com/docs/dark-mode
diff --git a/.cursor/skills/tailwind-v4-shadcn/references/migration-guide.md b/.cursor/skills/tailwind-v4-shadcn/references/migration-guide.md
new file mode 100644
index 0000000..8ce1a0a
--- /dev/null
+++ b/.cursor/skills/tailwind-v4-shadcn/references/migration-guide.md
@@ -0,0 +1,313 @@
+# Migration Guide: Hardcoded Colors → CSS Variables
+
+## Overview
+
+This guide helps you migrate from hardcoded Tailwind colors (`bg-blue-600`) to semantic CSS variables (`bg-primary`).
+
+**Benefits:**
+- Automatic dark mode support
+- Consistent color usage
+- Single source of truth
+- Easy theme customization
+- Better accessibility
+
+---
+
+## Semantic Color Mapping
+
+| Hardcoded Color | CSS Variable | Use Case |
+|----------------|--------------|----------|
+| `bg-red-*` / `text-red-*` | `bg-destructive` / `text-destructive` | Critical issues, errors, delete actions |
+| `bg-green-*` / `text-green-*` | `bg-success` / `text-success` | Success states, positive metrics |
+| `bg-yellow-*` / `text-yellow-*` | `bg-warning` / `text-warning` | Warnings, moderate issues |
+| `bg-blue-*` / `text-blue-*` | `bg-info` or `bg-primary` | Info boxes, primary actions |
+| `bg-gray-*` / `text-gray-*` | `bg-muted` / `text-muted-foreground` | Backgrounds, secondary text |
+| `bg-purple-*` | `bg-info` | Remove - use blue instead |
+| `bg-orange-*` | `bg-warning` | Remove - use yellow instead |
+| `bg-emerald-*` | `bg-success` | Remove - use green instead |
+
+---
+
+## Migration Patterns
+
+### Pattern 1: Solid Backgrounds
+
+❌ **Before:**
+```tsx
+<div className="bg-blue-50 dark:bg-blue-950/20 text-blue-700 dark:text-blue-300">
+```
+
+✅ **After:**
+```tsx
+<div className="bg-info/10 text-info">
+```
+
+**Note:** `/10` creates 10% opacity
+
+---
+
+### Pattern 2: Borders
+
+❌ **Before:**
+```tsx
+<div className="border-2 border-green-200 dark:border-green-800">
+```
+
+✅ **After:**
+```tsx
+<div className="border-2 border-success/30">
+```
+
+---
+
+### Pattern 3: Text Colors
+
+❌ **Before:**
+```tsx
+<span className="text-red-600 dark:text-red-400">
+```
+
+✅ **After:**
+```tsx
+<span className="text-destructive">
+```
+
+---
+
+### Pattern 4: Icons
+
+❌ **Before:**
+```tsx
+<AlertCircle className="text-yellow-500" />
+```
+
+✅ **After:**
+```tsx
+<AlertCircle className="text-warning" />
+```
+
+---
+
+### Pattern 5: Gradients
+
+❌ **Before:**
+```tsx
+<div className="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-950/20 dark:to-emerald-950/20">
+```
+
+✅ **After:**
+```tsx
+<div className="bg-gradient-to-r from-success/10 to-success/20">
+```
+
+---
+
+## Step-by-Step Migration
+
+### Step 1: Add Semantic Colors to CSS
+
+```css
+/* src/index.css */
+:root {
+  /* Add these if not already present */
+  --destructive: hsl(0 84.2% 60.2%);
+  --destructive-foreground: hsl(210 40% 98%);
+  --success: hsl(142.1 76.2% 36.3%);
+  --success-foreground: hsl(210 40% 98%);
+  --warning: hsl(38 92% 50%);
+  --warning-foreground: hsl(222.2 47.4% 11.2%);
+  --info: hsl(221.2 83.2% 53.3%);
+  --info-foreground: hsl(210 40% 98%);
+}
+
+.dark {
+  --destructive: hsl(0 62.8% 30.6%);
+  --destructive-foreground: hsl(210 40% 98%);
+  --success: hsl(142.1 70.6% 45.3%);
+  --success-foreground: hsl(222.2 47.4% 11.2%);
+  --warning: hsl(38 92% 55%);
+  --warning-foreground: hsl(222.2 47.4% 11.2%);
+  --info: hsl(217.2 91.2% 59.8%);
+  --info-foreground: hsl(222.2 47.4% 11.2%);
+}
+
+@theme inline {
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+}
+```
+
+### Step 2: Find Hardcoded Colors
+
+```bash
+# Search for background colors
+grep -r "bg-\(red\|yellow\|blue\|green\|purple\|orange\|pink\|emerald\)-[0-9]" src/
+
+# Search for text colors
+grep -r "text-\(red\|yellow\|blue\|green\|purple\|orange\|pink\|emerald\)-[0-9]" src/
+
+# Search for border colors
+grep -r "border-\(red\|yellow\|blue\|green\|purple\|orange\|pink\|emerald\)-[0-9]" src/
+```
+
+### Step 3: Replace Component by Component
+
+Start with high-impact components:
+1. Buttons
+2. Badges
+3. Alert boxes
+4. Status indicators
+5. Cards
+
+### Step 4: Test Both Themes
+
+After each component:
+- [ ] Check light mode appearance
+- [ ] Check dark mode appearance
+- [ ] Verify text contrast
+- [ ] Test hover/active states
+
+---
+
+## Example: Badge Component
+
+❌ **Before:**
+```tsx
+const severityConfig = {
+  critical: {
+    color: 'text-red-500',
+    bg: 'bg-red-500/10',
+    border: 'border-red-500/20',
+  },
+  warning: {
+    color: 'text-yellow-500',
+    bg: 'bg-yellow-500/10',
+    border: 'border-yellow-500/20',
+  },
+  info: {
+    color: 'text-blue-500',
+    bg: 'bg-blue-500/10',
+    border: 'border-blue-500/20',
+  }
+}
+```
+
+✅ **After:**
+```tsx
+const severityConfig = {
+  critical: {
+    color: 'text-destructive',
+    bg: 'bg-destructive/10',
+    border: 'border-destructive/20',
+  },
+  warning: {
+    color: 'text-warning',
+    bg: 'bg-warning/10',
+    border: 'border-warning/20',
+  },
+  info: {
+    color: 'text-info',
+    bg: 'bg-info/10',
+    border: 'border-info/20',
+  }
+}
+```
+
+---
+
+## Testing Checklist
+
+After migration:
+- [ ] All severity levels (critical/warning/info) visually distinct
+- [ ] Text has proper contrast in both light and dark modes
+- [ ] No hardcoded color classes remain
+- [ ] Hover states work correctly
+- [ ] Gradients render smoothly
+- [ ] Icons are visible and colored correctly
+- [ ] Borders are visible
+- [ ] No visual regressions
+
+---
+
+## Verification Commands
+
+```bash
+# Should return 0 results when migration complete
+grep -r "text-red-[0-9]" src/components/
+grep -r "bg-blue-[0-9]" src/components/
+grep -r "border-green-[0-9]" src/components/
+
+# Verify semantic colors are used
+grep -r "bg-destructive" src/components/
+grep -r "text-success" src/components/
+```
+
+---
+
+## Performance Impact
+
+**Before:** Every component has `dark:` variants
+```tsx
+<div className="bg-blue-50 dark:bg-blue-950/20 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800">
+```
+
+**After:** Single class, CSS handles switching
+```tsx
+<div className="bg-info/10 text-info border-info/30">
+```
+
+**Result:**
+- 60% fewer CSS classes in markup
+- Smaller HTML payload
+- Faster rendering
+- Easier to maintain
+
+---
+
+## Common Pitfalls
+
+### 1. Forgetting to Map in @theme inline
+
+Variables defined in `:root` but not mapped → utilities don't exist
+
+### 2. Wrong Opacity Syntax
+
+❌ `bg-success-10` (doesn't work)
+✅ `bg-success/10` (correct)
+
+### 3. Mixing Approaches
+
+Don't mix hardcoded and semantic in same component - choose one approach.
+
+### 4. Not Testing Dark Mode
+
+Always test both themes during migration.
+
+---
+
+## Rollback Plan
+
+If migration causes issues:
+
+1. Keep original components in git history
+2. Use feature flags to toggle new theme
+3. Test with subset of users first
+4. Have monitoring for visual regressions
+
+---
+
+## Further Customization
+
+After migration, you can easily:
+- Add new semantic colors
+- Create theme variants (high contrast, etc.)
+- Support multiple brand themes
+- Implement user-selectable color schemes
+
+All by editing CSS variables - no component changes needed!
diff --git a/.cursor/skills/tailwind-v4-shadcn/rules/tailwind-v4-shadcn.md b/.cursor/skills/tailwind-v4-shadcn/rules/tailwind-v4-shadcn.md
new file mode 100644
index 0000000..c435950
--- /dev/null
+++ b/.cursor/skills/tailwind-v4-shadcn/rules/tailwind-v4-shadcn.md
@@ -0,0 +1,118 @@
+---
+paths: "**/*.css", "**/*.tsx", "**/*.jsx", tailwind.config.*, components.json, postcss.config.*
+---
+
+# Tailwind v4 + shadcn/ui Corrections
+
+Claude's training may reference Tailwind v3 patterns. This project uses **Tailwind v4** with different syntax.
+
+## Critical Differences from v3
+
+### Configuration
+- **No `tailwind.config.ts`** - v4 uses CSS-first config with `@theme` blocks
+- **No PostCSS setup** - Use `@tailwindcss/vite` plugin instead
+- **`components.json`** must have `"config": ""` (empty string)
+
+### CSS Syntax
+```css
+/* ❌ v3 (Claude may suggest this) */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ✅ v4 (use this) */
+@import "tailwindcss";
+```
+
+### Theme Configuration
+```css
+/* ❌ v3 - tailwind.config.ts */
+theme: { colors: { primary: '#3b82f6' } }
+
+/* ✅ v4 - in CSS file */
+@theme inline {
+  --color-primary: var(--primary);
+  --color-background: var(--background);
+}
+```
+
+### Animations Package
+```bash
+# ❌ v3 package (deprecated for v4)
+pnpm add tailwindcss-animate
+
+# ✅ v4 package
+pnpm add -D tw-animate-css
+```
+
+```css
+/* ✅ v4 import */
+@import "tailwindcss";
+@import "tw-animate-css";
+```
+
+### Plugins
+```css
+/* ❌ v3 - require() in config */
+plugins: [require('@tailwindcss/typography')]
+
+/* ✅ v4 - @plugin directive in CSS */
+@plugin "@tailwindcss/typography";
+```
+
+### @apply Directive
+```css
+/* ❌ Deprecated in v4 */
+.btn { @apply px-4 py-2 bg-primary; }
+
+/* ✅ Use direct classes or CSS */
+.btn { padding: 0.5rem 1rem; background-color: var(--primary); }
+```
+
+## Variable Architecture
+
+CSS variables must follow this structure:
+
+```css
+/* 1. Define at root (NOT inside @layer base) */
+:root {
+  --background: hsl(0 0% 100%);  /* hsl() wrapper required */
+  --primary: hsl(221.2 83.2% 53.3%);
+}
+
+.dark {
+  --background: hsl(222.2 84% 4.9%);
+  --primary: hsl(217.2 91.2% 59.8%);
+}
+
+/* 2. Map to Tailwind utilities */
+@theme inline {
+  --color-background: var(--background);
+  --color-primary: var(--primary);
+}
+
+/* 3. Apply base styles (NO hsl wrapper here) */
+@layer base {
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+}
+```
+
+## Dark Mode
+
+- No `dark:` variants needed for semantic colors - theme switches automatically
+- Just use `bg-background`, `text-foreground`, etc.
+- ThemeProvider toggles `.dark` class on `<html>` element
+
+## Quick Fixes
+
+| If Claude suggests... | Use instead... |
+|----------------------|----------------|
+| `@tailwind base` | `@import "tailwindcss"` |
+| `tailwind.config.ts` | `@theme inline` in CSS |
+| `tailwindcss-animate` | `tw-animate-css` |
+| `require('@plugin')` | `@plugin "@plugin"` |
+| `@apply` | Direct CSS or utility classes |
+| `hsl(var(--color))` | `var(--color)` (already has hsl) |
diff --git a/.cursor/skills/tailwind-v4-shadcn/templates/components.json b/.cursor/skills/tailwind-v4-shadcn/templates/components.json
new file mode 100644
index 0000000..e71fe10
--- /dev/null
+++ b/.cursor/skills/tailwind-v4-shadcn/templates/components.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}
diff --git a/.cursor/skills/tailwind-v4-shadcn/templates/index.css b/.cursor/skills/tailwind-v4-shadcn/templates/index.css
new file mode 100644
index 0000000..8f20cc9
--- /dev/null
+++ b/.cursor/skills/tailwind-v4-shadcn/templates/index.css
@@ -0,0 +1,140 @@
+@import "tailwindcss";
+
+/*
+  Tailwind v4 + shadcn/ui Dark Mode Pattern
+  Based on: https://ui.shadcn.com/docs/tailwind-v4
+
+  Key Pattern:
+  1. Define CSS variables at root level (NOT in @layer base)
+  2. Use .dark for dark mode overrides (NOT in @theme)
+  3. Use @theme inline to map variables to Tailwind utilities
+  4. All color values must use hsl() wrapper
+*/
+
+/* Light mode colors - Define at root level */
+:root {
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(222.2 84% 4.9%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(222.2 84% 4.9%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(222.2 84% 4.9%);
+  --primary: hsl(221.2 83.2% 53.3%);
+  --primary-foreground: hsl(210 40% 98%);
+  --secondary: hsl(210 40% 96.1%);
+  --secondary-foreground: hsl(222.2 47.4% 11.2%);
+  --muted: hsl(210 40% 96.1%);
+  --muted-foreground: hsl(215.4 16.3% 46.9%);
+  --accent: hsl(210 40% 96.1%);
+  --accent-foreground: hsl(222.2 47.4% 11.2%);
+  --destructive: hsl(0 84.2% 60.2%);
+  --destructive-foreground: hsl(210 40% 98%);
+  --success: hsl(142.1 76.2% 36.3%);
+  --success-foreground: hsl(210 40% 98%);
+  --warning: hsl(38 92% 50%);
+  --warning-foreground: hsl(222.2 47.4% 11.2%);
+  --info: hsl(221.2 83.2% 53.3%);
+  --info-foreground: hsl(210 40% 98%);
+  --border: hsl(214.3 31.8% 91.4%);
+  --input: hsl(214.3 31.8% 91.4%);
+  --ring: hsl(221.2 83.2% 53.3%);
+  --radius: 0.5rem;
+
+  /* Chart colors */
+  --chart-1: hsl(12 76% 61%);
+  --chart-2: hsl(173 58% 39%);
+  --chart-3: hsl(197 37% 24%);
+  --chart-4: hsl(43 74% 66%);
+  --chart-5: hsl(27 87% 67%);
+}
+
+/* Dark mode colors - Plain CSS overrides (NOT in @theme) */
+.dark {
+  --background: hsl(222.2 84% 4.9%);
+  --foreground: hsl(210 40% 98%);
+  --card: hsl(222.2 84% 4.9%);
+  --card-foreground: hsl(210 40% 98%);
+  --popover: hsl(222.2 84% 4.9%);
+  --popover-foreground: hsl(210 40% 98%);
+  --primary: hsl(217.2 91.2% 59.8%);
+  --primary-foreground: hsl(222.2 47.4% 11.2%);
+  --secondary: hsl(217.2 32.6% 17.5%);
+  --secondary-foreground: hsl(210 40% 98%);
+  --muted: hsl(217.2 32.6% 17.5%);
+  --muted-foreground: hsl(215 20.2% 65.1%);
+  --accent: hsl(217.2 32.6% 17.5%);
+  --accent-foreground: hsl(210 40% 98%);
+  --destructive: hsl(0 62.8% 30.6%);
+  --destructive-foreground: hsl(210 40% 98%);
+  --success: hsl(142.1 70.6% 45.3%);
+  --success-foreground: hsl(222.2 47.4% 11.2%);
+  --warning: hsl(38 92% 55%);
+  --warning-foreground: hsl(222.2 47.4% 11.2%);
+  --info: hsl(217.2 91.2% 59.8%);
+  --info-foreground: hsl(222.2 47.4% 11.2%);
+  --border: hsl(217.2 32.6% 17.5%);
+  --input: hsl(217.2 32.6% 17.5%);
+  --ring: hsl(224.3 76.3% 48%);
+
+  /* Chart colors for dark mode */
+  --chart-1: hsl(220 70% 50%);
+  --chart-2: hsl(160 60% 45%);
+  --chart-3: hsl(30 80% 55%);
+  --chart-4: hsl(280 65% 60%);
+  --chart-5: hsl(340 75% 55%);
+}
+
+/* Map CSS variables to Tailwind theme with @theme inline */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  /* Border radius tokens */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+}
+
+/* Base styles in @layer base */
+@layer base {
+  * {
+    border-color: var(--border);
+  }
+
+  body {
+    margin: 0;
+    background-color: var(--background);
+    color: var(--foreground);
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
diff --git a/.cursor/skills/tailwind-v4-shadcn/templates/theme-provider.tsx b/.cursor/skills/tailwind-v4-shadcn/templates/theme-provider.tsx
new file mode 100644
index 0000000..98126d7
--- /dev/null
+++ b/.cursor/skills/tailwind-v4-shadcn/templates/theme-provider.tsx
@@ -0,0 +1,92 @@
+import { createContext, useContext, useEffect, useState, ReactNode } from 'react'
+
+type Theme = 'dark' | 'light' | 'system'
+
+type ThemeProviderProps = {
+  children: ReactNode
+  defaultTheme?: Theme
+  storageKey?: string
+}
+
+type ThemeProviderState = {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+}
+
+const initialState: ThemeProviderState = {
+  theme: 'system',
+  setTheme: () => null,
+}
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
+
+export function ThemeProvider({
+  children,
+  defaultTheme = 'system',
+  storageKey = 'vite-ui-theme',
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(() => {
+    // Try localStorage first, fall back to sessionStorage, then default
+    try {
+      return (localStorage.getItem(storageKey) as Theme) ||
+             (sessionStorage.getItem(storageKey) as Theme) ||
+             defaultTheme
+    } catch (e) {
+      // Storage unavailable (incognito/privacy mode) - use default
+      return defaultTheme
+    }
+  })
+
+  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) => {
+      // Try to persist to localStorage, fall back to sessionStorage
+      try {
+        localStorage.setItem(storageKey, theme)
+      } catch (e) {
+        // localStorage unavailable (incognito) - use sessionStorage
+        try {
+          sessionStorage.setItem(storageKey, theme)
+        } catch (err) {
+          // Both unavailable - just update state without persistence
+          console.warn('Storage unavailable, theme preference will not persist')
+        }
+      }
+      setTheme(theme)
+    },
+  }
+
+  return (
+    <ThemeProviderContext.Provider {...props} 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
+}
diff --git a/.cursor/skills/tailwind-v4-shadcn/templates/tsconfig.app.json b/.cursor/skills/tailwind-v4-shadcn/templates/tsconfig.app.json
new file mode 100644
index 0000000..9c0b41b
--- /dev/null
+++ b/.cursor/skills/tailwind-v4-shadcn/templates/tsconfig.app.json
@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Path aliases */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/.cursor/skills/tailwind-v4-shadcn/templates/utils.ts b/.cursor/skills/tailwind-v4-shadcn/templates/utils.ts
new file mode 100644
index 0000000..d084cca
--- /dev/null
+++ b/.cursor/skills/tailwind-v4-shadcn/templates/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/.cursor/skills/tailwind-v4-shadcn/templates/vite.config.ts b/.cursor/skills/tailwind-v4-shadcn/templates/vite.config.ts
new file mode 100644
index 0000000..3409417
--- /dev/null
+++ b/.cursor/skills/tailwind-v4-shadcn/templates/vite.config.ts
@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import path from 'path'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    tailwindcss(),
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src')
+    }
+  }
+})
diff --git a/.cursor/skills/tanstack-query/.claude-plugin/plugin.json b/.cursor/skills/tanstack-query/.claude-plugin/plugin.json
new file mode 100644
index 0000000..335b68d
--- /dev/null
+++ b/.cursor/skills/tanstack-query/.claude-plugin/plugin.json
@@ -0,0 +1,12 @@
+{
+  "name": "tanstack-query",
+  "description": "Manage server state in React with TanStack Query v5. Covers useMutationState, simplified optimistic updates, throwOnError, network mode (offline/PWA), and infiniteQueryOptions. Use when setting up data fetching, or fixing v4→v5 migration errors (object syntax, gcTime, isPending, keepPreviousData).",
+  "version": "1.0.0",
+  "author": {
+    "name": "Jeremy Dawes",
+    "email": "jeremy@jezweb.net"
+  },
+  "license": "MIT",
+  "repository": "https://github.com/jezweb/claude-skills",
+  "keywords": []
+}
diff --git a/.cursor/skills/tanstack-query/SKILL.md b/.cursor/skills/tanstack-query/SKILL.md
new file mode 100644
index 0000000..65025dc
--- /dev/null
+++ b/.cursor/skills/tanstack-query/SKILL.md
@@ -0,0 +1,1058 @@
+---
+name: tanstack-query
+description: |
+  Manage server state in React with TanStack Query v5. Covers useMutationState, simplified optimistic updates, throwOnError, network mode (offline/PWA), and infiniteQueryOptions.
+
+  Use when setting up data fetching, fixing v4→v5 migration errors (object syntax, gcTime, isPending, keepPreviousData), or debugging SSR/hydration issues with streaming server components.
+user-invocable: true
+---
+
+# TanStack Query (React Query) v5
+
+**Last Updated**: 2026-01-20
+**Versions**: @tanstack/react-query@5.90.19, @tanstack/react-query-devtools@5.91.2
+**Requires**: React 18.0+ (useSyncExternalStore), TypeScript 4.7+ (recommended)
+
+---
+
+## v5 New Features
+
+### useMutationState - Cross-Component Mutation Tracking
+
+Access mutation state from anywhere without prop drilling:
+
+```tsx
+import { useMutationState } from '@tanstack/react-query'
+
+function GlobalLoadingIndicator() {
+  // Get all pending mutations
+  const pendingMutations = useMutationState({
+    filters: { status: 'pending' },
+    select: (mutation) => mutation.state.variables,
+  })
+
+  if (pendingMutations.length === 0) return null
+  return <div>Saving {pendingMutations.length} items...</div>
+}
+
+// Filter by mutation key
+const todoMutations = useMutationState({
+  filters: { mutationKey: ['addTodo'] },
+})
+```
+
+### Simplified Optimistic Updates
+
+New pattern using `variables` - no cache manipulation, no rollback needed:
+
+```tsx
+function TodoList() {
+  const { data: todos } = useQuery({ queryKey: ['todos'], queryFn: fetchTodos })
+
+  const addTodo = useMutation({
+    mutationKey: ['addTodo'],
+    mutationFn: (newTodo) => api.addTodo(newTodo),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['todos'] })
+    },
+  })
+
+  // Show optimistic UI using variables from pending mutations
+  const pendingTodos = useMutationState({
+    filters: { mutationKey: ['addTodo'], status: 'pending' },
+    select: (mutation) => mutation.state.variables,
+  })
+
+  return (
+    <ul>
+      {todos?.map(todo => <li key={todo.id}>{todo.title}</li>)}
+      {/* Show pending items with visual indicator */}
+      {pendingTodos.map((todo, i) => (
+        <li key={`pending-${i}`} style={{ opacity: 0.5 }}>{todo.title}</li>
+      ))}
+    </ul>
+  )
+}
+```
+
+### throwOnError - Error Boundaries
+
+Renamed from `useErrorBoundary` (breaking change):
+
+```tsx
+import { QueryErrorResetBoundary } from '@tanstack/react-query'
+import { ErrorBoundary } from 'react-error-boundary'
+
+function App() {
+  return (
+    <QueryErrorResetBoundary>
+      {({ reset }) => (
+        <ErrorBoundary onReset={reset} fallbackRender={({ resetErrorBoundary }) => (
+          <div>
+            Error! <button onClick={resetErrorBoundary}>Retry</button>
+          </div>
+        )}>
+          <Todos />
+        </ErrorBoundary>
+      )}
+    </QueryErrorResetBoundary>
+  )
+}
+
+function Todos() {
+  const { data } = useQuery({
+    queryKey: ['todos'],
+    queryFn: fetchTodos,
+    throwOnError: true, // ✅ v5 (was useErrorBoundary in v4)
+  })
+  return <div>{data.map(...)}</div>
+}
+```
+
+### Network Mode (Offline/PWA Support)
+
+Control behavior when offline:
+
+```tsx
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      networkMode: 'offlineFirst', // Use cache when offline
+    },
+  },
+})
+
+// Per-query override
+useQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodos,
+  networkMode: 'always', // Always try, even offline (for local APIs)
+})
+```
+
+| Mode | Behavior |
+|------|----------|
+| `online` (default) | Only fetch when online |
+| `always` | Always try (useful for local/service worker APIs) |
+| `offlineFirst` | Use cache first, fetch when online |
+
+**Detecting paused state:**
+```tsx
+const { isPending, fetchStatus } = useQuery(...)
+// isPending + fetchStatus === 'paused' = offline, waiting for network
+```
+
+### useQueries with Combine
+
+Combine results from parallel queries:
+
+```tsx
+const results = useQueries({
+  queries: userIds.map(id => ({
+    queryKey: ['user', id],
+    queryFn: () => fetchUser(id),
+  })),
+  combine: (results) => ({
+    data: results.map(r => r.data),
+    pending: results.some(r => r.isPending),
+    error: results.find(r => r.error)?.error,
+  }),
+})
+
+// Access combined result
+if (results.pending) return <Loading />
+console.log(results.data) // [user1, user2, user3]
+```
+
+### infiniteQueryOptions Helper
+
+Type-safe factory for infinite queries (parallel to `queryOptions`):
+
+```tsx
+import { infiniteQueryOptions, useInfiniteQuery, prefetchInfiniteQuery } from '@tanstack/react-query'
+
+const todosInfiniteOptions = infiniteQueryOptions({
+  queryKey: ['todos', 'infinite'],
+  queryFn: ({ pageParam }) => fetchTodosPage(pageParam),
+  initialPageParam: 0,
+  getNextPageParam: (lastPage) => lastPage.nextCursor,
+})
+
+// Reuse across hooks
+useInfiniteQuery(todosInfiniteOptions)
+useSuspenseInfiniteQuery(todosInfiniteOptions)
+prefetchInfiniteQuery(queryClient, todosInfiniteOptions)
+```
+
+### maxPages - Memory Optimization
+
+Limit pages stored in cache for infinite queries:
+
+```tsx
+useInfiniteQuery({
+  queryKey: ['posts'],
+  queryFn: ({ pageParam }) => fetchPosts(pageParam),
+  initialPageParam: 0,
+  getNextPageParam: (lastPage) => lastPage.nextCursor,
+  getPreviousPageParam: (firstPage) => firstPage.prevCursor, // Required with maxPages
+  maxPages: 3, // Only keep 3 pages in memory
+})
+```
+
+**Note:** `maxPages` requires bi-directional pagination (`getNextPageParam` AND `getPreviousPageParam`).
+
+---
+
+## Quick Setup
+
+```bash
+npm install @tanstack/react-query@latest
+npm install -D @tanstack/react-query-devtools@latest
+```
+
+### Step 2: Provider + Config
+
+```tsx
+// src/main.tsx
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5, // 5 min
+      gcTime: 1000 * 60 * 60, // 1 hour (v5: renamed from cacheTime)
+      refetchOnWindowFocus: false,
+    },
+  },
+})
+
+<QueryClientProvider client={queryClient}>
+  <App />
+  <ReactQueryDevtools initialIsOpen={false} />
+</QueryClientProvider>
+```
+
+### Step 3: Query + Mutation Hooks
+
+```tsx
+// src/hooks/useTodos.ts
+import { useQuery, useMutation, useQueryClient, queryOptions } from '@tanstack/react-query'
+
+// Query options factory (v5 pattern)
+export const todosQueryOptions = queryOptions({
+  queryKey: ['todos'],
+  queryFn: async () => {
+    const res = await fetch('/api/todos')
+    if (!res.ok) throw new Error('Failed to fetch')
+    return res.json()
+  },
+})
+
+export function useTodos() {
+  return useQuery(todosQueryOptions)
+}
+
+export function useAddTodo() {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: async (newTodo) => {
+      const res = await fetch('/api/todos', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(newTodo),
+      })
+      if (!res.ok) throw new Error('Failed to add')
+      return res.json()
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['todos'] })
+    },
+  })
+}
+
+// Usage:
+function TodoList() {
+  const { data, isPending, isError, error } = useTodos()
+  const { mutate } = useAddTodo()
+
+  if (isPending) return <div>Loading...</div>
+  if (isError) return <div>Error: {error.message}</div>
+  return <ul>{data.map(todo => <li key={todo.id}>{todo.title}</li>)}</ul>
+}
+```
+
+---
+
+## Critical Rules
+
+### Always Do
+
+✅ **Use object syntax for all hooks**
+```tsx
+// v5 ONLY supports this:
+useQuery({ queryKey, queryFn, ...options })
+useMutation({ mutationFn, ...options })
+```
+
+✅ **Use array query keys**
+```tsx
+queryKey: ['todos']              // List
+queryKey: ['todos', id]          // Detail
+queryKey: ['todos', { filter }]  // Filtered
+```
+
+✅ **Configure staleTime appropriately**
+```tsx
+staleTime: 1000 * 60 * 5 // 5 min - prevents excessive refetches
+```
+
+✅ **Use isPending for initial loading state**
+```tsx
+if (isPending) return <Loading />
+// isPending = no data yet AND fetching
+```
+
+✅ **Throw errors in queryFn**
+```tsx
+if (!response.ok) throw new Error('Failed')
+```
+
+✅ **Invalidate queries after mutations**
+```tsx
+onSuccess: () => {
+  queryClient.invalidateQueries({ queryKey: ['todos'] })
+}
+```
+
+✅ **Use queryOptions factory for reusable patterns**
+```tsx
+const opts = queryOptions({ queryKey, queryFn })
+useQuery(opts)
+useSuspenseQuery(opts)
+prefetchQuery(opts)
+```
+
+✅ **Use gcTime (not cacheTime)**
+```tsx
+gcTime: 1000 * 60 * 60 // 1 hour
+```
+
+### Never Do
+
+❌ **Never use v4 array/function syntax**
+```tsx
+// v4 (removed in v5):
+useQuery(['todos'], fetchTodos, options) // ❌
+
+// v5 (correct):
+useQuery({ queryKey: ['todos'], queryFn: fetchTodos }) // ✅
+```
+
+❌ **Never use query callbacks (onSuccess, onError, onSettled in queries)**
+```tsx
+// v5 removed these from queries:
+useQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodos,
+  onSuccess: (data) => {}, // ❌ Removed in v5
+})
+
+// Use useEffect instead:
+const { data } = useQuery({ queryKey: ['todos'], queryFn: fetchTodos })
+useEffect(() => {
+  if (data) {
+    // Do something
+  }
+}, [data])
+
+// Or use mutation callbacks (still supported):
+useMutation({
+  mutationFn: addTodo,
+  onSuccess: () => {}, // ✅ Still works for mutations
+})
+```
+
+❌ **Never use deprecated options**
+```tsx
+// Deprecated in v5:
+cacheTime: 1000 // ❌ Use gcTime instead
+isLoading: true // ❌ Meaning changed, use isPending
+keepPreviousData: true // ❌ Use placeholderData instead
+onSuccess: () => {} // ❌ Removed from queries
+useErrorBoundary: true // ❌ Use throwOnError instead
+```
+
+❌ **Never assume isLoading means "no data yet"**
+```tsx
+// v5 changed this:
+isLoading = isPending && isFetching // ❌ Now means "pending AND fetching"
+isPending = no data yet // ✅ Use this for initial load
+```
+
+❌ **Never forget initialPageParam for infinite queries**
+```tsx
+// v5 requires this:
+useInfiniteQuery({
+  queryKey: ['projects'],
+  queryFn: ({ pageParam }) => fetchProjects(pageParam),
+  initialPageParam: 0, // ✅ Required in v5
+  getNextPageParam: (lastPage) => lastPage.nextCursor,
+})
+```
+
+❌ **Never use enabled with useSuspenseQuery**
+```tsx
+// Not allowed:
+useSuspenseQuery({
+  queryKey: ['todo', id],
+  queryFn: () => fetchTodo(id),
+  enabled: !!id, // ❌ Not available with suspense
+})
+
+// Use conditional rendering instead:
+{id && <TodoComponent id={id} />}
+```
+
+❌ **Never rely on refetchOnMount: false for errored queries**
+```tsx
+// Doesn't work - errors are always stale
+useQuery({
+  queryKey: ['data'],
+  queryFn: failingFetch,
+  refetchOnMount: false,  // ❌ Ignored when query has error
+})
+
+// Use retryOnMount instead
+useQuery({
+  queryKey: ['data'],
+  queryFn: failingFetch,
+  refetchOnMount: false,
+  retryOnMount: false,  // ✅ Prevents refetch for errored queries
+  retry: 0,
+})
+```
+
+---
+
+## Known Issues Prevention
+
+This skill prevents **16 documented issues** from v5 migration, SSR/hydration bugs, and common mistakes:
+
+### Issue #1: Object Syntax Required
+**Error**: `useQuery is not a function` or type errors
+**Source**: [v5 Migration Guide](https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5#removed-overloads-in-favor-of-object-syntax)
+**Why It Happens**: v5 removed all function overloads, only object syntax works
+**Prevention**: Always use `useQuery({ queryKey, queryFn, ...options })`
+
+**Before (v4):**
+```tsx
+useQuery(['todos'], fetchTodos, { staleTime: 5000 })
+```
+
+**After (v5):**
+```tsx
+useQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodos,
+  staleTime: 5000
+})
+```
+
+### Issue #2: Query Callbacks Removed
+**Error**: Callbacks don't run, TypeScript errors
+**Source**: [v5 Breaking Changes](https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5#callbacks-on-usequery-and-queryobserver-have-been-removed)
+**Why It Happens**: onSuccess, onError, onSettled removed from queries (still work in mutations)
+**Prevention**: Use `useEffect` for side effects, or move logic to mutation callbacks
+
+**Before (v4):**
+```tsx
+useQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodos,
+  onSuccess: (data) => {
+    console.log('Todos loaded:', data)
+  },
+})
+```
+
+**After (v5):**
+```tsx
+const { data } = useQuery({ queryKey: ['todos'], queryFn: fetchTodos })
+useEffect(() => {
+  if (data) {
+    console.log('Todos loaded:', data)
+  }
+}, [data])
+```
+
+### Issue #3: Status Loading → Pending
+**Error**: UI shows wrong loading state
+**Source**: [v5 Migration: isLoading renamed](https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5#isloading-and-isfetching-flags)
+**Why It Happens**: `status: 'loading'` renamed to `status: 'pending'`, `isLoading` meaning changed
+**Prevention**: Use `isPending` for initial load, `isLoading` for "pending AND fetching"
+
+**Before (v4):**
+```tsx
+const { data, isLoading } = useQuery(...)
+if (isLoading) return <div>Loading...</div>
+```
+
+**After (v5):**
+```tsx
+const { data, isPending, isLoading } = useQuery(...)
+if (isPending) return <div>Loading...</div>
+// isLoading = isPending && isFetching (fetching for first time)
+```
+
+### Issue #4: cacheTime → gcTime
+**Error**: `cacheTime is not a valid option`
+**Source**: [v5 Migration: gcTime](https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5#cachetime-has-been-replaced-by-gctime)
+**Why It Happens**: Renamed to better reflect "garbage collection time"
+**Prevention**: Use `gcTime` instead of `cacheTime`
+
+**Before (v4):**
+```tsx
+useQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodos,
+  cacheTime: 1000 * 60 * 60,
+})
+```
+
+**After (v5):**
+```tsx
+useQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodos,
+  gcTime: 1000 * 60 * 60,
+})
+```
+
+### Issue #5: useSuspenseQuery + enabled
+**Error**: Type error, enabled option not available
+**Source**: [GitHub Discussion #6206](https://github.com/TanStack/query/discussions/6206)
+**Why It Happens**: Suspense guarantees data is available, can't conditionally disable
+**Prevention**: Use conditional rendering instead of `enabled` option
+
+**Before (v4/incorrect):**
+```tsx
+useSuspenseQuery({
+  queryKey: ['todo', id],
+  queryFn: () => fetchTodo(id),
+  enabled: !!id, // ❌ Not allowed
+})
+```
+
+**After (v5/correct):**
+```tsx
+// Conditional rendering:
+{id ? (
+  <TodoComponent id={id} />
+) : (
+  <div>No ID selected</div>
+)}
+
+// Inside TodoComponent:
+function TodoComponent({ id }: { id: number }) {
+  const { data } = useSuspenseQuery({
+    queryKey: ['todo', id],
+    queryFn: () => fetchTodo(id),
+    // No enabled option needed
+  })
+  return <div>{data.title}</div>
+}
+```
+
+### Issue #6: initialPageParam Required
+**Error**: `initialPageParam is required` type error
+**Source**: [v5 Migration: Infinite Queries](https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5#new-required-initialPageParam-option)
+**Why It Happens**: v4 passed `undefined` as first pageParam, v5 requires explicit value
+**Prevention**: Always specify `initialPageParam` for infinite queries
+
+**Before (v4):**
+```tsx
+useInfiniteQuery({
+  queryKey: ['projects'],
+  queryFn: ({ pageParam = 0 }) => fetchProjects(pageParam),
+  getNextPageParam: (lastPage) => lastPage.nextCursor,
+})
+```
+
+**After (v5):**
+```tsx
+useInfiniteQuery({
+  queryKey: ['projects'],
+  queryFn: ({ pageParam }) => fetchProjects(pageParam),
+  initialPageParam: 0, // ✅ Required
+  getNextPageParam: (lastPage) => lastPage.nextCursor,
+})
+```
+
+### Issue #7: keepPreviousData Removed
+**Error**: `keepPreviousData is not a valid option`
+**Source**: [v5 Migration: placeholderData](https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5#removed-keeppreviousdata-in-favor-of-placeholderdata-identity-function)
+**Why It Happens**: Replaced with more flexible `placeholderData` function
+**Prevention**: Use `placeholderData: keepPreviousData` helper
+
+**Before (v4):**
+```tsx
+useQuery({
+  queryKey: ['todos', page],
+  queryFn: () => fetchTodos(page),
+  keepPreviousData: true,
+})
+```
+
+**After (v5):**
+```tsx
+import { keepPreviousData } from '@tanstack/react-query'
+
+useQuery({
+  queryKey: ['todos', page],
+  queryFn: () => fetchTodos(page),
+  placeholderData: keepPreviousData,
+})
+```
+
+### Issue #8: TypeScript Error Type Default
+**Error**: Type errors with error handling
+**Source**: [v5 Migration: Error Types](https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5#typeerror-is-now-the-default-error)
+**Why It Happens**: v4 used `unknown`, v5 defaults to `Error` type
+**Prevention**: If throwing non-Error types, specify error type explicitly
+
+**Before (v4 - error was unknown):**
+```tsx
+const { error } = useQuery({
+  queryKey: ['data'],
+  queryFn: async () => {
+    if (Math.random() > 0.5) throw 'custom error string'
+    return data
+  },
+})
+// error: unknown
+```
+
+**After (v5 - specify custom error type):**
+```tsx
+const { error } = useQuery<DataType, string>({
+  queryKey: ['data'],
+  queryFn: async () => {
+    if (Math.random() > 0.5) throw 'custom error string'
+    return data
+  },
+})
+// error: string | null
+
+// Or better: always throw Error objects
+const { error } = useQuery({
+  queryKey: ['data'],
+  queryFn: async () => {
+    if (Math.random() > 0.5) throw new Error('custom error')
+    return data
+  },
+})
+// error: Error | null (default)
+```
+
+### Issue #9: Streaming Server Components Hydration Error
+**Error**: `Hydration failed because the initial UI does not match what was rendered on the server`
+**Source**: [GitHub Issue #9642](https://github.com/TanStack/query/issues/9642)
+**Affects**: v5.82.0+ with streaming SSR (void prefetch pattern)
+**Why It Happens**: Race condition where `hydrate()` resolves synchronously but `query.fetch()` creates async retryer, causing isFetching/isStale mismatch between server and client
+**Prevention**: Don't conditionally render based on `fetchStatus` with `useSuspenseQuery` and streaming prefetch, OR await prefetch instead of void pattern
+
+**Before (causes hydration error):**
+```tsx
+// Server: void prefetch
+streamingQueryClient.prefetchQuery({ queryKey: ['data'], queryFn: getData });
+
+// Client: conditional render on fetchStatus
+const { data, isFetching } = useSuspenseQuery({ queryKey: ['data'], queryFn: getData });
+return <>{data && <div>{data}</div>} {isFetching && <Loading />}</>;
+```
+
+**After (workaround):**
+```tsx
+// Option 1: Await prefetch
+await streamingQueryClient.prefetchQuery({ queryKey: ['data'], queryFn: getData });
+
+// Option 2: Don't render based on fetchStatus with Suspense
+const { data } = useSuspenseQuery({ queryKey: ['data'], queryFn: getData });
+return <div>{data}</div>;  // No conditional on isFetching
+```
+
+**Status**: Known issue, being investigated by maintainers. Requires implementation of `getServerSnapshot` in useSyncExternalStore.
+
+### Issue #10: useQuery Hydration Error with Prefetching
+**Error**: Text content mismatch during hydration
+**Source**: [GitHub Issue #9399](https://github.com/TanStack/query/issues/9399)
+**Affects**: v5.x with server-side prefetching
+**Why It Happens**: `tryResolveSync` detects resolved promises in RSC payload and extracts data synchronously during hydration, bypassing normal pending state
+**Prevention**: Use `useSuspenseQuery` instead of `useQuery` for SSR, or avoid conditional rendering based on `isLoading`
+
+**Before (causes hydration error):**
+```tsx
+// Server Component
+const queryClient = getServerQueryClient();
+await queryClient.prefetchQuery({ queryKey: ['todos'], queryFn: fetchTodos });
+
+// Client Component
+function Todos() {
+  const { data, isLoading } = useQuery({ queryKey: ['todos'], queryFn: fetchTodos });
+  if (isLoading) return <div>Loading...</div>;  // Server renders this
+  return <div>{data.length} todos</div>;  // Client hydrates with this
+}
+```
+
+**After (workaround):**
+```tsx
+// Use useSuspenseQuery instead
+function Todos() {
+  const { data } = useSuspenseQuery({ queryKey: ['todos'], queryFn: fetchTodos });
+  return <div>{data.length} todos</div>;
+}
+```
+
+**Status**: "At the top of my OSS list of things to fix" - maintainer Ephem (Nov 2025). Requires implementing `getServerSnapshot` in useSyncExternalStore.
+
+### Issue #11: refetchOnMount Not Respected for Errored Queries
+**Error**: Queries refetch on mount despite `refetchOnMount: false`
+**Source**: [GitHub Issue #10018](https://github.com/TanStack/query/issues/10018)
+**Affects**: v5.90.16+
+**Why It Happens**: Errored queries with no data are always treated as stale. This is intentional to avoid permanently showing error states
+**Prevention**: Use `retryOnMount: false` instead of (or in addition to) `refetchOnMount: false`
+
+**Before (refetches despite setting):**
+```tsx
+const { data, error } = useQuery({
+  queryKey: ['data'],
+  queryFn: () => { throw new Error('Fails') },
+  refetchOnMount: false,  // Ignored when query is in error state
+  retry: 0,
+});
+// Query refetches every time component mounts
+```
+
+**After (correct):**
+```tsx
+const { data, error } = useQuery({
+  queryKey: ['data'],
+  queryFn: failingFetch,
+  refetchOnMount: false,
+  retryOnMount: false,  // ✅ Prevents refetch on mount for errored queries
+  retry: 0,
+});
+```
+
+**Status**: Documented behavior (intentional). The name `retryOnMount` is slightly misleading - it controls whether errored queries trigger a new fetch on mount, not automatic retries.
+
+### Issue #12: Mutation Callback Signature Breaking Change (v5.89.0)
+**Error**: TypeScript errors in mutation callbacks
+**Source**: [GitHub Issue #9660](https://github.com/TanStack/query/issues/9660)
+**Affects**: v5.89.0+
+**Why It Happens**: `onMutateResult` parameter added between `variables` and `context`, changing callback signatures from 3 params to 4
+**Prevention**: Update all mutation callbacks to accept 4 parameters instead of 3
+
+**Before (v5.88 and earlier):**
+```tsx
+useMutation({
+  mutationFn: addTodo,
+  onError: (error, variables, context) => {
+    // context is now onMutateResult, missing final context param
+  },
+  onSuccess: (data, variables, context) => {
+    // Same issue
+  }
+});
+```
+
+**After (v5.89.0+):**
+```tsx
+useMutation({
+  mutationFn: addTodo,
+  onError: (error, variables, onMutateResult, context) => {
+    // onMutateResult = return value from onMutate
+    // context = mutation function context
+  },
+  onSuccess: (data, variables, onMutateResult, context) => {
+    // Correct signature with 4 parameters
+  }
+});
+```
+
+**Note**: If you don't use `onMutate`, the `onMutateResult` parameter will be undefined. This breaking change was introduced in a patch version.
+
+### Issue #13: Readonly Query Keys Break Partial Matching (v5.90.8)
+**Error**: `Type 'readonly ["todos", string]' is not assignable to type '["todos", string]'`
+**Source**: [GitHub Issue #9871](https://github.com/TanStack/query/issues/9871) | Fixed in [PR #9872](https://github.com/TanStack/query/pull/9872)
+**Affects**: v5.90.8 only (fixed in v5.90.9)
+**Why It Happens**: Partial query matching broke TypeScript types for readonly query keys (using `as const`)
+**Prevention**: Upgrade to v5.90.9+ or use type assertions if stuck on v5.90.8
+
+**Before (v5.90.8 - TypeScript error):**
+```tsx
+export function todoQueryKey(id?: string) {
+  return id ? ['todos', id] as const : ['todos'] as const;
+}
+// Type: readonly ['todos', string] | readonly ['todos']
+
+useMutation({
+  mutationFn: addTodo,
+  onSuccess: () => {
+    queryClient.invalidateQueries({
+      queryKey: todoQueryKey('123')
+      // Error: readonly ['todos', string] not assignable to ['todos', string]
+    });
+  }
+});
+```
+
+**After (v5.90.9+):**
+```tsx
+// Works correctly with readonly types
+queryClient.invalidateQueries({
+  queryKey: todoQueryKey('123')  // ✅ No type error
+});
+```
+
+**Status**: Fixed in v5.90.9. Particularly affected users of code generators like `openapi-react-query` that produce readonly query keys.
+
+### Issue #14: useMutationState Type Inference Lost
+**Error**: `mutation.state.variables` typed as `unknown` instead of actual type
+**Source**: [GitHub Issue #9825](https://github.com/TanStack/query/issues/9825)
+**Affects**: All v5.x versions
+**Why It Happens**: Fuzzy mutation key matching prevents guaranteed type inference (same issue as `queryClient.getQueryCache().find()`)
+**Prevention**: Explicitly cast types in the `select` callback
+
+**Before (type inference doesn't work):**
+```tsx
+const addTodo = useMutation({
+  mutationKey: ['addTodo'],
+  mutationFn: (todo: Todo) => api.addTodo(todo),
+});
+
+const pendingTodos = useMutationState({
+  filters: { mutationKey: ['addTodo'], status: 'pending' },
+  select: (mutation) => {
+    return mutation.state.variables;  // Type: unknown
+  },
+});
+```
+
+**After (with explicit cast):**
+```tsx
+const pendingTodos = useMutationState({
+  filters: { mutationKey: ['addTodo'], status: 'pending' },
+  select: (mutation) => mutation.state.variables as Todo,
+});
+// Or cast the entire state:
+select: (mutation) => mutation.state as MutationState<Todo, Error, Todo, unknown>
+```
+
+**Status**: Known limitation of fuzzy matching. No planned fix.
+
+### Issue #15: Query Cancellation in StrictMode with fetchQuery
+**Error**: `CancelledError` when using `fetchQuery()` with `useQuery`
+**Source**: [GitHub Issue #9798](https://github.com/TanStack/query/issues/9798)
+**Affects**: Development only (React StrictMode)
+**Why It Happens**: StrictMode causes double mount/unmount. When `useQuery` unmounts and is the last observer, it cancels the query even if `fetchQuery()` is also running
+**Prevention**: This is expected development-only behavior. Doesn't affect production
+
+**Example:**
+```tsx
+async function loadData() {
+  try {
+    const data = await queryClient.fetchQuery({
+      queryKey: ['data'],
+      queryFn: fetchData,
+    });
+    console.log('Loaded:', data);  // Never logs in StrictMode
+  } catch (error) {
+    console.error('Failed:', error);  // CancelledError
+  }
+}
+
+function Component() {
+  const { data } = useQuery({ queryKey: ['data'], queryFn: fetchData });
+  // In StrictMode, component unmounts/remounts, cancelling fetchQuery
+}
+```
+
+**Workaround:**
+```tsx
+// Keep query observed with staleTime
+const { data } = useQuery({
+  queryKey: ['data'],
+  queryFn: fetchData,
+  staleTime: Infinity,  // Keeps query active
+});
+```
+
+**Status**: Expected StrictMode behavior, not a bug. Production builds are unaffected.
+
+### Issue #16: invalidateQueries Only Refetches Active Queries
+**Error**: Inactive queries not refetching despite `invalidateQueries()` call
+**Source**: [GitHub Issue #9531](https://github.com/TanStack/query/issues/9531)
+**Affects**: All v5.x versions
+**Why It Happens**: Documentation was misleading - `invalidateQueries()` only refetches "active" queries by default, not "all" queries
+**Prevention**: Use `refetchType: 'all'` to force refetch of inactive queries
+
+**Default behavior:**
+```tsx
+// Only active queries (currently being observed) will refetch
+queryClient.invalidateQueries({ queryKey: ['todos'] });
+```
+
+**To refetch inactive queries:**
+```tsx
+queryClient.invalidateQueries({
+  queryKey: ['todos'],
+  refetchType: 'all'  // Refetch active AND inactive
+});
+```
+
+**Status**: Documentation fixed to clarify "active" queries. This is the intended behavior.
+
+---
+
+## Community Tips
+
+> **Note**: These tips come from community experts and maintainer blogs. Verify against your version.
+
+### Tip: Query Options with Multiple Listeners
+
+**Source**: [TkDodo's Blog - API Design Lessons](https://tkdodo.eu/blog/react-query-api-design-lessons-learned) | **Confidence**: HIGH
+**Applies to**: v5.27.3+
+
+When multiple components use the same query with different options (like `staleTime`), the "last write wins" rule applies for future fetches, but the current in-flight query uses its original options. This can cause unexpected behavior when components mount at different times.
+
+**Example of unexpected behavior:**
+```tsx
+// Component A mounts first
+function ComponentA() {
+  const { data } = useQuery({
+    queryKey: ['todos'],
+    queryFn: fetchTodos,
+    staleTime: 5000,  // Applied initially
+  });
+}
+
+// Component B mounts while A's query is in-flight
+function ComponentB() {
+  const { data } = useQuery({
+    queryKey: ['todos'],
+    queryFn: fetchTodos,
+    staleTime: 60000,  // Won't affect current fetch, only future ones
+  });
+}
+```
+
+**Recommended approach:**
+```tsx
+// Write options as functions that reference latest values
+const getStaleTime = () => shouldUseLongCache ? 60000 : 5000;
+
+useQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodos,
+  staleTime: getStaleTime(),  // Evaluated on each render
+});
+```
+
+### Tip: refetch() is NOT for Changed Parameters
+
+**Source**: [Avoiding Common Mistakes with TanStack Query](https://www.buncolak.com/posts/avoiding-common-mistakes-with-tanstack-query-part-1/) | **Confidence**: HIGH
+
+The `refetch()` function should ONLY be used for refreshing with the same parameters (like a manual "reload" button). For new parameters (filters, page numbers, search terms, etc.), include them in the query key instead.
+
+**Anti-pattern:**
+```tsx
+// ❌ Wrong - using refetch() for different parameters
+const [page, setPage] = useState(1);
+const { data, refetch } = useQuery({
+  queryKey: ['todos'],  // Same key for all pages
+  queryFn: () => fetchTodos(page),
+});
+
+// This refetches with OLD page value, not new one
+<button onClick={() => { setPage(2); refetch(); }}>Next</button>
+```
+
+**Correct pattern:**
+```tsx
+// ✅ Correct - include parameters in query key
+const [page, setPage] = useState(1);
+const { data } = useQuery({
+  queryKey: ['todos', page],  // Key changes with page
+  queryFn: () => fetchTodos(page),
+  // Query automatically refetches when page changes
+});
+
+<button onClick={() => setPage(2)}>Next</button>  // Just update state
+```
+
+**When to use refetch():**
+```tsx
+// ✅ Manual refresh of same data (refresh button)
+const { data, refetch } = useQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodos,
+});
+
+<button onClick={() => refetch()}>Refresh</button>  // Same parameters
+```
+
+---
+
+## Key Patterns
+
+**Dependent Queries** (Query B waits for Query A):
+```tsx
+const { data: posts } = useQuery({
+  queryKey: ['users', userId, 'posts'],
+  queryFn: () => fetchUserPosts(userId),
+  enabled: !!user, // Wait for user
+})
+```
+
+**Parallel Queries** (fetch multiple at once):
+```tsx
+const results = useQueries({
+  queries: ids.map(id => ({ queryKey: ['todos', id], queryFn: () => fetchTodo(id) })),
+})
+```
+
+**Prefetching** (preload on hover):
+```tsx
+queryClient.prefetchQuery({ queryKey: ['todo', id], queryFn: () => fetchTodo(id) })
+```
+
+**Infinite Scroll** (useInfiniteQuery):
+```tsx
+useInfiniteQuery({
+  queryKey: ['todos', 'infinite'],
+  queryFn: ({ pageParam }) => fetchTodosPage(pageParam),
+  initialPageParam: 0, // Required in v5
+  getNextPageParam: (lastPage) => lastPage.nextCursor,
+})
+```
+
+**Query Cancellation** (auto-cancel on queryKey change):
+```tsx
+queryFn: async ({ signal }) => {
+  const res = await fetch(`/api/todos?q=${search}`, { signal })
+  return res.json()
+}
+```
+
+**Data Transformation** (select):
+```tsx
+select: (data) => data.filter(todo => todo.completed)
+```
+
+**Avoid Request Waterfalls**: Fetch in parallel when possible (don't chain queries unless truly dependent)
+
+---
+
+**Official Docs**: https://tanstack.com/query/latest | **v5 Migration**: https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5 | **GitHub**: https://github.com/TanStack/query | **Context7**: `/websites/tanstack_query`
diff --git a/.cursor/skills/tanstack-query/assets/example-template.txt b/.cursor/skills/tanstack-query/assets/example-template.txt
new file mode 100644
index 0000000..349fec2
--- /dev/null
+++ b/.cursor/skills/tanstack-query/assets/example-template.txt
@@ -0,0 +1,14 @@
+[TODO: Example Template File]
+
+[TODO: This directory contains files that will be used in the OUTPUT that Claude produces.]
+
+[TODO: Examples:]
+- Templates (.html, .tsx, .md)
+- Images (.png, .svg)
+- Fonts (.ttf, .woff)
+- Boilerplate code
+- Configuration file templates
+
+[TODO: Delete this file and add your actual assets]
+
+These files are NOT loaded into context. They are copied or used directly in the final output.
diff --git a/.cursor/skills/tanstack-query/references/best-practices.md b/.cursor/skills/tanstack-query/references/best-practices.md
new file mode 100644
index 0000000..e016a6d
--- /dev/null
+++ b/.cursor/skills/tanstack-query/references/best-practices.md
@@ -0,0 +1,304 @@
+# TanStack Query Best Practices
+
+**Performance, caching strategies, and common patterns**
+
+---
+
+## 1. Avoid Request Waterfalls
+
+### ❌ Bad: Sequential Dependencies
+
+```tsx
+function BadUserProfile({ userId }) {
+  const { data: user } = useQuery({
+    queryKey: ['users', userId],
+    queryFn: () => fetchUser(userId),
+  })
+
+  // Waits for user ⏳
+  const { data: posts } = useQuery({
+    queryKey: ['posts', user?.id],
+    queryFn: () => fetchPosts(user!.id),
+    enabled: !!user,
+  })
+
+  // Waits for posts ⏳⏳
+  const { data: comments } = useQuery({
+    queryKey: ['comments', posts?.[0]?.id],
+    queryFn: () => fetchComments(posts![0].id),
+    enabled: !!posts && posts.length > 0,
+  })
+}
+```
+
+### ✅ Good: Parallel Queries
+
+```tsx
+function GoodUserProfile({ userId }) {
+  // All run in parallel 🚀
+  const { data: user } = useQuery({
+    queryKey: ['users', userId],
+    queryFn: () => fetchUser(userId),
+  })
+
+  const { data: posts } = useQuery({
+    queryKey: ['posts', userId], // Use userId, not user.id
+    queryFn: () => fetchPosts(userId),
+  })
+
+  const { data: comments } = useQuery({
+    queryKey: ['comments', userId],
+    queryFn: () => fetchUserComments(userId),
+  })
+}
+```
+
+---
+
+## 2. Query Key Strategy
+
+### Hierarchical Structure
+
+```tsx
+// Global
+['todos'] // All todos
+['todos', { status: 'done' }] // Filtered todos
+['todos', 123] // Single todo
+
+// Invalidation hierarchy
+queryClient.invalidateQueries({ queryKey: ['todos'] }) // Invalidates ALL todos
+queryClient.invalidateQueries({ queryKey: ['todos', { status: 'done' }] }) // Only filtered
+```
+
+### Best Practices
+
+```tsx
+// ✅ Good: Stable, serializable keys
+['users', userId, { sort: 'name', filter: 'active' }]
+
+// ❌ Bad: Functions in keys (not serializable)
+['users', () => userId]
+
+// ❌ Bad: Changing order
+['users', { filter: 'active', sort: 'name' }] // Different key!
+
+// ✅ Good: Consistent ordering
+const userFilters = { filter: 'active', sort: 'name' }
+```
+
+---
+
+## 3. Caching Configuration
+
+### staleTime vs gcTime
+
+```tsx
+/**
+ * staleTime: How long data is "fresh" (won't refetch)
+ * gcTime: How long unused data stays in cache
+ */
+
+// Real-time data
+staleTime: 0 // Always stale, refetch frequently
+gcTime: 1000 * 60 * 5 // 5 min in cache
+
+// Stable data
+staleTime: 1000 * 60 * 60 // 1 hour fresh
+gcTime: 1000 * 60 * 60 * 24 // 24 hours in cache
+
+// Static data
+staleTime: Infinity // Never stale
+gcTime: Infinity // Never garbage collect
+```
+
+### Per-Query vs Global
+
+```tsx
+// Global defaults
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5,
+      gcTime: 1000 * 60 * 60,
+    },
+  },
+})
+
+// Override per query
+useQuery({
+  queryKey: ['stock-price'],
+  queryFn: fetchStockPrice,
+  staleTime: 0, // Override: always stale
+  refetchInterval: 1000 * 30, // Refetch every 30s
+})
+```
+
+---
+
+## 4. Use queryOptions Factory
+
+```tsx
+// ✅ Best practice: Reusable options
+export const todosQueryOptions = queryOptions({
+  queryKey: ['todos'],
+  queryFn: fetchTodos,
+  staleTime: 1000 * 60,
+})
+
+// Use everywhere
+useQuery(todosQueryOptions)
+useSuspenseQuery(todosQueryOptions)
+queryClient.prefetchQuery(todosQueryOptions)
+
+// ❌ Bad: Duplicated configuration
+useQuery({ queryKey: ['todos'], queryFn: fetchTodos })
+useSuspenseQuery({ queryKey: ['todos'], queryFn: fetchTodos })
+```
+
+---
+
+## 5. Data Transformations
+
+### select Option
+
+```tsx
+// Only re-render when count changes
+function TodoCount() {
+  const { data: count } = useQuery({
+    queryKey: ['todos'],
+    queryFn: fetchTodos,
+    select: (data) => data.length, // Transform
+  })
+}
+
+// Cache full data, component gets filtered
+function CompletedTodos() {
+  const { data } = useQuery({
+    queryKey: ['todos'],
+    queryFn: fetchTodos,
+    select: (data) => data.filter(todo => todo.completed),
+  })
+}
+```
+
+---
+
+## 6. Prefetching
+
+```tsx
+function TodoList() {
+  const queryClient = useQueryClient()
+  const { data: todos } = useTodos()
+
+  const prefetch = (id: number) => {
+    queryClient.prefetchQuery({
+      queryKey: ['todos', id],
+      queryFn: () => fetchTodo(id),
+      staleTime: 1000 * 60 * 5,
+    })
+  }
+
+  return (
+    <ul>
+      {todos.map(todo => (
+        <li key={todo.id} onMouseEnter={() => prefetch(todo.id)}>
+          <Link to={`/todos/${todo.id}`}>{todo.title}</Link>
+        </li>
+      ))}
+    </ul>
+  )
+}
+```
+
+---
+
+## 7. Optimistic Updates
+
+Use for:
+- ✅ Low-risk actions (toggle, like)
+- ✅ Frequent actions (better UX)
+
+Avoid for:
+- ❌ Critical operations (payments)
+- ❌ Complex validations
+
+```tsx
+useMutation({
+  mutationFn: updateTodo,
+  onMutate: async (newTodo) => {
+    await queryClient.cancelQueries({ queryKey: ['todos'] })
+    const previous = queryClient.getQueryData(['todos'])
+    queryClient.setQueryData(['todos'], (old) => [...old, newTodo])
+    return { previous }
+  },
+  onError: (err, newTodo, context) => {
+    queryClient.setQueryData(['todos'], context.previous)
+  },
+  onSettled: () => {
+    queryClient.invalidateQueries({ queryKey: ['todos'] })
+  },
+})
+```
+
+---
+
+## 8. Error Handling Strategy
+
+### Local vs Global
+
+```tsx
+// Local: Handle in component
+const { data, error, isError } = useQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodos,
+})
+
+if (isError) return <div>Error: {error.message}</div>
+
+// Global: Error boundaries
+useQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodos,
+  throwOnError: true, // Throw to boundary
+})
+
+// Conditional: Mix both
+useQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodos,
+  throwOnError: (error) => error.status >= 500, // Only 5xx to boundary
+})
+```
+
+---
+
+## 9. Server State vs Client State
+
+```tsx
+// ❌ Don't use TanStack Query for client state
+const { data: isModalOpen } = useMutation(...)
+
+// ✅ Use useState for client state
+const [isModalOpen, setIsModalOpen] = useState(false)
+
+// ✅ Use TanStack Query for server state only
+const { data: todos } = useQuery({ queryKey: ['todos'], queryFn: fetchTodos })
+```
+
+---
+
+## 10. Performance Monitoring
+
+### Use DevTools
+
+- Check refetch frequency
+- Verify cache hits
+- Monitor query states
+- Export state for debugging
+
+### Key Metrics
+
+- Time to first data
+- Cache hit rate
+- Refetch frequency
+- Network requests count
diff --git a/.cursor/skills/tanstack-query/references/common-patterns.md b/.cursor/skills/tanstack-query/references/common-patterns.md
new file mode 100644
index 0000000..12181b1
--- /dev/null
+++ b/.cursor/skills/tanstack-query/references/common-patterns.md
@@ -0,0 +1,271 @@
+# Common TanStack Query Patterns
+
+**Reusable patterns for real-world applications**
+
+---
+
+## Pattern 1: Dependent Queries
+
+Query B depends on data from Query A:
+
+```tsx
+function UserPosts({ userId }) {
+  const { data: user } = useQuery({
+    queryKey: ['users', userId],
+    queryFn: () => fetchUser(userId),
+  })
+
+  const { data: posts } = useQuery({
+    queryKey: ['users', userId, 'posts'],
+    queryFn: () => fetchUserPosts(userId),
+    enabled: !!user, // Wait for user
+  })
+}
+```
+
+---
+
+## Pattern 2: Parallel Queries with useQueries
+
+Fetch multiple resources in parallel:
+
+```tsx
+function TodoDetails({ ids }) {
+  const results = useQueries({
+    queries: ids.map(id => ({
+      queryKey: ['todos', id],
+      queryFn: () => fetchTodo(id),
+    })),
+  })
+
+  const isLoading = results.some(r => r.isPending)
+  const data = results.map(r => r.data)
+}
+```
+
+---
+
+## Pattern 3: Paginated Queries with placeholderData
+
+Keep previous data while fetching next page:
+
+```tsx
+import { keepPreviousData } from '@tanstack/react-query'
+
+function PaginatedTodos() {
+  const [page, setPage] = useState(0)
+
+  const { data } = useQuery({
+    queryKey: ['todos', page],
+    queryFn: () => fetchTodos(page),
+    placeholderData: keepPreviousData, // Keep old data while loading
+  })
+}
+```
+
+---
+
+## Pattern 4: Infinite Scroll
+
+Auto-load more data on scroll:
+
+```tsx
+function InfiniteList() {
+  const { data, fetchNextPage, hasNextPage } = useInfiniteQuery({
+    queryKey: ['items'],
+    queryFn: ({ pageParam }) => fetchItems(pageParam),
+    initialPageParam: 0,
+    getNextPageParam: (lastPage) => lastPage.nextCursor,
+  })
+
+  // Intersection Observer for auto-loading
+  const ref = useRef()
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => entry.isIntersecting && hasNextPage && fetchNextPage()
+    )
+    if (ref.current) observer.observe(ref.current)
+    return () => observer.disconnect()
+  }, [fetchNextPage, hasNextPage])
+
+  return (
+    <>
+      {data.pages.map(page => page.data.map(item => <div>{item}</div>))}
+      <div ref={ref}>Loading...</div>
+    </>
+  )
+}
+```
+
+---
+
+## Pattern 5: Optimistic Updates
+
+Instant UI feedback:
+
+```tsx
+function useOptimisticToggle() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: updateTodo,
+    onMutate: async (updated) => {
+      await queryClient.cancelQueries({ queryKey: ['todos'] })
+      const previous = queryClient.getQueryData(['todos'])
+
+      queryClient.setQueryData(['todos'], (old) =>
+        old.map(todo => todo.id === updated.id ? updated : todo)
+      )
+
+      return { previous }
+    },
+    onError: (err, vars, context) => {
+      queryClient.setQueryData(['todos'], context.previous)
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ['todos'] })
+    },
+  })
+}
+```
+
+---
+
+## Pattern 6: Prefetching on Hover
+
+Load data before user clicks:
+
+```tsx
+function TodoList() {
+  const queryClient = useQueryClient()
+
+  const prefetch = (id) => {
+    queryClient.prefetchQuery({
+      queryKey: ['todos', id],
+      queryFn: () => fetchTodo(id),
+    })
+  }
+
+  return (
+    <ul>
+      {todos.map(todo => (
+        <li onMouseEnter={() => prefetch(todo.id)}>
+          <Link to={`/todos/${todo.id}`}>{todo.title}</Link>
+        </li>
+      ))}
+    </ul>
+  )
+}
+```
+
+---
+
+## Pattern 7: Search/Debounce
+
+Debounced search with automatic cancellation:
+
+```tsx
+import { useState, useDeferredValue } from 'react'
+
+function Search() {
+  const [search, setSearch] = useState('')
+  const deferredSearch = useDeferredValue(search)
+
+  const { data } = useQuery({
+    queryKey: ['search', deferredSearch],
+    queryFn: ({ signal }) =>
+      fetch(`/api/search?q=${deferredSearch}`, { signal }).then(r => r.json()),
+    enabled: deferredSearch.length >= 2,
+  })
+}
+```
+
+---
+
+## Pattern 8: Polling/Refetch Interval
+
+Auto-refetch every N seconds:
+
+```tsx
+const { data } = useQuery({
+  queryKey: ['stock-price'],
+  queryFn: fetchStockPrice,
+  refetchInterval: 1000 * 30, // Every 30 seconds
+  refetchIntervalInBackground: true, // Even when tab inactive
+})
+```
+
+---
+
+## Pattern 9: Conditional Fetching
+
+Only fetch when needed:
+
+```tsx
+const { data } = useQuery({
+  queryKey: ['user', userId],
+  queryFn: () => fetchUser(userId),
+  enabled: !!userId && isAuthenticated,
+})
+```
+
+---
+
+## Pattern 10: Initial Data from Cache
+
+Use cached data as initial value:
+
+```tsx
+const { data: todo } = useQuery({
+  queryKey: ['todos', id],
+  queryFn: () => fetchTodo(id),
+  initialData: () => {
+    return queryClient
+      .getQueryData(['todos'])
+      ?.find(t => t.id === id)
+  },
+})
+```
+
+---
+
+## Pattern 11: Mutation with Multiple Invalidations
+
+Update multiple related queries:
+
+```tsx
+useMutation({
+  mutationFn: updateTodo,
+  onSuccess: (updated) => {
+    queryClient.setQueryData(['todos', updated.id], updated)
+    queryClient.invalidateQueries({ queryKey: ['todos'] })
+    queryClient.invalidateQueries({ queryKey: ['stats'] })
+    queryClient.invalidateQueries({ queryKey: ['users', updated.userId] })
+  },
+})
+```
+
+---
+
+## Pattern 12: Global Error Handler
+
+Centralized error handling:
+
+```tsx
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      onError: (error) => {
+        toast.error(error.message)
+        logToSentry(error)
+      },
+    },
+    mutations: {
+      onError: (error) => {
+        toast.error('Action failed')
+        logToSentry(error)
+      },
+    },
+  },
+})
+```
diff --git a/.cursor/skills/tanstack-query/references/example-reference.md b/.cursor/skills/tanstack-query/references/example-reference.md
new file mode 100644
index 0000000..1be1b40
--- /dev/null
+++ b/.cursor/skills/tanstack-query/references/example-reference.md
@@ -0,0 +1,26 @@
+# [TODO: Reference Document Name]
+
+[TODO: This file contains reference documentation that Claude can load when needed.]
+
+[TODO: Delete this file if you don't have reference documentation to provide.]
+
+## Purpose
+
+[TODO: Explain what information this document contains]
+
+## When Claude Should Use This
+
+[TODO: Describe specific scenarios where Claude should load this reference]
+
+## Content
+
+[TODO: Add your reference content here - schemas, guides, specifications, etc.]
+
+---
+
+**Note**: This file is NOT loaded into context by default. Claude will only load it when:
+- It determines the information is needed
+- You explicitly ask Claude to reference it
+- The SKILL.md instructions direct Claude to read it
+
+Keep this file under 10k words for best performance.
diff --git a/.cursor/skills/tanstack-query/references/testing.md b/.cursor/skills/tanstack-query/references/testing.md
new file mode 100644
index 0000000..717d6f4
--- /dev/null
+++ b/.cursor/skills/tanstack-query/references/testing.md
@@ -0,0 +1,282 @@
+# Testing TanStack Query
+
+**Testing queries, mutations, and components**
+
+---
+
+## Setup
+
+```bash
+npm install -D @testing-library/react @testing-library/jest-dom vitest msw
+```
+
+### Test Utils
+
+```tsx
+// src/test-utils.tsx
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render } from '@testing-library/react'
+
+export function createTestQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false, // Disable retries in tests
+        gcTime: Infinity,
+      },
+    },
+    logger: {
+      log: console.log,
+      warn: console.warn,
+      error: () => {}, // Silence errors in tests
+    },
+  })
+}
+
+export function renderWithClient(ui: React.ReactElement) {
+  const testQueryClient = createTestQueryClient()
+  return render(
+    <QueryClientProvider client={testQueryClient}>
+      {ui}
+    </QueryClientProvider>
+  )
+}
+```
+
+---
+
+## Testing Queries
+
+```tsx
+import { renderHook, waitFor } from '@testing-library/react'
+import { useTodos } from './useTodos'
+
+describe('useTodos', () => {
+  it('fetches todos successfully', async () => {
+    const { result } = renderHook(() => useTodos(), {
+      wrapper: ({ children }) => (
+        <QueryClientProvider client={createTestQueryClient()}>
+          {children}
+        </QueryClientProvider>
+      ),
+    })
+
+    // Initially pending
+    expect(result.current.isPending).toBe(true)
+
+    // Wait for success
+    await waitFor(() => expect(result.current.isSuccess).toBe(true))
+
+    // Check data
+    expect(result.current.data).toHaveLength(3)
+  })
+
+  it('handles errors', async () => {
+    // Mock fetch to fail
+    global.fetch = vi.fn(() =>
+      Promise.reject(new Error('API error'))
+    )
+
+    const { result } = renderHook(() => useTodos())
+
+    await waitFor(() => expect(result.current.isError).toBe(true))
+    expect(result.current.error?.message).toBe('API error')
+  })
+})
+```
+
+---
+
+## Testing with MSW
+
+```tsx
+import { http, HttpResponse } from 'msw'
+import { setupServer } from 'msw/node'
+
+const server = setupServer(
+  http.get('/api/todos', () => {
+    return HttpResponse.json([
+      { id: 1, title: 'Test todo', completed: false },
+    ])
+  })
+)
+
+beforeAll(() => server.listen())
+afterEach(() => server.resetHandlers())
+afterAll(() => server.close())
+
+test('fetches todos', async () => {
+  const { result } = renderHook(() => useTodos())
+
+  await waitFor(() => expect(result.current.isSuccess).toBe(true))
+
+  expect(result.current.data).toEqual([
+    { id: 1, title: 'Test todo', completed: false },
+  ])
+})
+
+test('handles server error', async () => {
+  server.use(
+    http.get('/api/todos', () => {
+      return new HttpResponse(null, { status: 500 })
+    })
+  )
+
+  const { result } = renderHook(() => useTodos())
+
+  await waitFor(() => expect(result.current.isError).toBe(true))
+})
+```
+
+---
+
+## Testing Mutations
+
+```tsx
+test('adds todo successfully', async () => {
+  const { result } = renderHook(() => useAddTodo())
+
+  act(() => {
+    result.current.mutate({ title: 'New todo' })
+  })
+
+  await waitFor(() => expect(result.current.isSuccess).toBe(true))
+  expect(result.current.data).toEqual(
+    expect.objectContaining({ title: 'New todo' })
+  )
+})
+
+test('handles mutation error', async () => {
+  server.use(
+    http.post('/api/todos', () => {
+      return new HttpResponse(null, { status: 400 })
+    })
+  )
+
+  const { result } = renderHook(() => useAddTodo())
+
+  act(() => {
+    result.current.mutate({ title: 'New todo' })
+  })
+
+  await waitFor(() => expect(result.current.isError).toBe(true))
+})
+```
+
+---
+
+## Testing Components
+
+```tsx
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { TodoList } from './TodoList'
+
+test('displays todos', async () => {
+  renderWithClient(<TodoList />)
+
+  expect(screen.getByText(/loading/i)).toBeInTheDocument()
+
+  await waitFor(() => {
+    expect(screen.getByText('Test todo')).toBeInTheDocument()
+  })
+})
+
+test('adds new todo', async () => {
+  renderWithClient(<TodoList />)
+
+  await waitFor(() => {
+    expect(screen.getByText('Test todo')).toBeInTheDocument()
+  })
+
+  const input = screen.getByPlaceholderText(/new todo/i)
+  const button = screen.getByRole('button', { name: /add/i })
+
+  await userEvent.type(input, 'Another todo')
+  await userEvent.click(button)
+
+  await waitFor(() => {
+    expect(screen.getByText('Another todo')).toBeInTheDocument()
+  })
+})
+```
+
+---
+
+## Testing with Prefilled Cache
+
+```tsx
+test('uses prefilled cache', () => {
+  const queryClient = createTestQueryClient()
+
+  // Prefill cache
+  queryClient.setQueryData(['todos'], [
+    { id: 1, title: 'Cached todo', completed: false },
+  ])
+
+  render(
+    <QueryClientProvider client={queryClient}>
+      <TodoList />
+    </QueryClientProvider>
+  )
+
+  // Should immediately show cached data
+  expect(screen.getByText('Cached todo')).toBeInTheDocument()
+})
+```
+
+---
+
+## Testing Optimistic Updates
+
+```tsx
+test('optimistic update rollback on error', async () => {
+  const queryClient = createTestQueryClient()
+  queryClient.setQueryData(['todos'], [
+    { id: 1, title: 'Original', completed: false },
+  ])
+
+  server.use(
+    http.patch('/api/todos/1', () => {
+      return new HttpResponse(null, { status: 500 })
+    })
+  )
+
+  const { result } = renderHook(() => useUpdateTodo(), {
+    wrapper: ({ children }) => (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    ),
+  })
+
+  act(() => {
+    result.current.mutate({ id: 1, completed: true })
+  })
+
+  // Check optimistic update
+  expect(queryClient.getQueryData(['todos'])).toEqual([
+    { id: 1, title: 'Original', completed: true },
+  ])
+
+  // Wait for rollback
+  await waitFor(() => expect(result.current.isError).toBe(true))
+
+  // Should rollback
+  expect(queryClient.getQueryData(['todos'])).toEqual([
+    { id: 1, title: 'Original', completed: false },
+  ])
+})
+```
+
+---
+
+## Best Practices
+
+✅ Disable retries in tests
+✅ Use MSW for consistent mocking
+✅ Test loading, success, and error states
+✅ Test optimistic updates and rollbacks
+✅ Use waitFor for async updates
+✅ Prefill cache when testing with existing data
+✅ Silence console errors in tests
+❌ Don't test implementation details
+❌ Don't mock TanStack Query internals
diff --git a/.cursor/skills/tanstack-query/references/top-errors.md b/.cursor/skills/tanstack-query/references/top-errors.md
new file mode 100644
index 0000000..4cfeb8a
--- /dev/null
+++ b/.cursor/skills/tanstack-query/references/top-errors.md
@@ -0,0 +1,332 @@
+# Top TanStack Query Errors & Solutions
+
+**Complete error reference with fixes**
+
+---
+
+## Error #1: Object Syntax Required
+
+**Error Message**:
+```
+TypeError: useQuery is not a function
+Property 'queryKey' does not exist on type...
+```
+
+**Why**:
+v5 removed function overloads, only object syntax works
+
+**Fix**:
+```tsx
+// ❌ v4 syntax
+useQuery(['todos'], fetchTodos)
+
+// ✅ v5 syntax
+useQuery({ queryKey: ['todos'], queryFn: fetchTodos })
+```
+
+**Source**: [v5 Migration Guide](https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5#removed-overloads-in-favor-of-object-syntax)
+
+---
+
+## Error #2: Query Callbacks Not Working
+
+**Error Message**:
+```
+Property 'onSuccess' does not exist on type 'UseQueryOptions'
+```
+
+**Why**:
+`onSuccess`, `onError`, `onSettled` removed from queries (still work in mutations)
+
+**Fix**:
+```tsx
+// ❌ v4
+useQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodos,
+  onSuccess: (data) => console.log(data)
+})
+
+// ✅ v5 - Use useEffect
+const { data } = useQuery({ queryKey: ['todos'], queryFn: fetchTodos })
+useEffect(() => {
+  if (data) console.log(data)
+}, [data])
+```
+
+**Source**: [v5 Breaking Changes](https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5#callbacks-on-usequery-and-queryobserver-have-been-removed)
+
+---
+
+## Error #3: isLoading Always False
+
+**Error Message**:
+No error, but `isLoading` is false during initial fetch
+
+**Why**:
+v5 changed `isLoading` meaning: now `isPending && isFetching`
+
+**Fix**:
+```tsx
+// ❌ v4
+const { isLoading } = useQuery(...)
+if (isLoading) return <Loading />
+
+// ✅ v5
+const { isPending } = useQuery(...)
+if (isPending) return <Loading />
+```
+
+**Source**: [v5 Migration](https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5#isloading-and-isfetching-flags)
+
+---
+
+## Error #4: cacheTime Not Recognized
+
+**Error Message**:
+```
+Property 'cacheTime' does not exist on type 'UseQueryOptions'
+```
+
+**Why**:
+Renamed to `gcTime` (garbage collection time)
+
+**Fix**:
+```tsx
+// ❌ v4
+cacheTime: 1000 * 60 * 60
+
+// ✅ v5
+gcTime: 1000 * 60 * 60
+```
+
+**Source**: [v5 Migration](https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5#cachetime-has-been-replaced-by-gcTime)
+
+---
+
+## Error #5: useSuspenseQuery + enabled
+
+**Error Message**:
+```
+Property 'enabled' does not exist on type 'UseSuspenseQueryOptions'
+```
+
+**Why**:
+Suspense guarantees data is available, can't conditionally disable
+
+**Fix**:
+```tsx
+// ❌ Wrong
+useSuspenseQuery({
+  queryKey: ['todo', id],
+  queryFn: () => fetchTodo(id),
+  enabled: !!id,
+})
+
+// ✅ Correct: Conditional rendering
+{id ? <TodoComponent id={id} /> : <div>No ID</div>}
+```
+
+**Source**: [GitHub Discussion #6206](https://github.com/TanStack/query/discussions/6206)
+
+---
+
+## Error #6: initialPageParam Required
+
+**Error Message**:
+```
+Property 'initialPageParam' is missing in type 'UseInfiniteQueryOptions'
+```
+
+**Why**:
+v5 requires explicit `initialPageParam` for infinite queries
+
+**Fix**:
+```tsx
+// ❌ v4
+useInfiniteQuery({
+  queryKey: ['projects'],
+  queryFn: ({ pageParam = 0 }) => fetchProjects(pageParam),
+  getNextPageParam: (lastPage) => lastPage.nextCursor,
+})
+
+// ✅ v5
+useInfiniteQuery({
+  queryKey: ['projects'],
+  queryFn: ({ pageParam }) => fetchProjects(pageParam),
+  initialPageParam: 0, // Required
+  getNextPageParam: (lastPage) => lastPage.nextCursor,
+})
+```
+
+**Source**: [v5 Migration](https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5#new-required-initialPageParam-option)
+
+---
+
+## Error #7: keepPreviousData Not Working
+
+**Error Message**:
+```
+Property 'keepPreviousData' does not exist on type 'UseQueryOptions'
+```
+
+**Why**:
+Replaced with `placeholderData` function
+
+**Fix**:
+```tsx
+// ❌ v4
+keepPreviousData: true
+
+// ✅ v5
+import { keepPreviousData } from '@tanstack/react-query'
+
+placeholderData: keepPreviousData
+```
+
+**Source**: [v5 Migration](https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5#removed-keeppreviousdata-in-favor-of-placeholderdata-identity-function)
+
+---
+
+## Error #8: TypeScript Error Type
+
+**Error Message**:
+Type errors when handling non-Error objects
+
+**Why**:
+v5 defaults to `Error` type instead of `unknown`
+
+**Fix**:
+```tsx
+// If throwing non-Error types, specify explicitly:
+const { error } = useQuery<DataType, string>({
+  queryKey: ['data'],
+  queryFn: async () => {
+    if (fail) throw 'custom error string'
+    return data
+  },
+})
+
+// Better: Always throw Error objects
+throw new Error('Custom error')
+```
+
+**Source**: [v5 Migration](https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5#typeerror-is-now-the-default-error)
+
+---
+
+## Error #9: Query Not Refetching
+
+**Symptoms**:
+Data never updates even when stale
+
+**Why**:
+Usually config issue - check staleTime, refetch options
+
+**Fix**:
+```tsx
+// Check these settings
+useQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodos,
+  staleTime: 0, // Data stale immediately
+  refetchOnWindowFocus: true,
+  refetchOnMount: true,
+  refetchOnReconnect: true,
+})
+
+// Or manually refetch
+const { refetch } = useQuery(...)
+refetch()
+
+// Or invalidate
+queryClient.invalidateQueries({ queryKey: ['todos'] })
+```
+
+---
+
+## Error #10: Mutations Not Invalidating
+
+**Symptoms**:
+UI doesn't update after mutation
+
+**Why**:
+Forgot to invalidate queries
+
+**Fix**:
+```tsx
+useMutation({
+  mutationFn: addTodo,
+  onSuccess: () => {
+    queryClient.invalidateQueries({ queryKey: ['todos'] }) // ✅ Required
+  },
+})
+```
+
+---
+
+## Error #11: Network Errors Not Caught
+
+**Symptoms**:
+App crashes on network errors
+
+**Why**:
+Not handling errors properly
+
+**Fix**:
+```tsx
+// Always handle errors
+const { data, error, isError } = useQuery({
+  queryKey: ['todos'],
+  queryFn: async () => {
+    const response = await fetch('/api/todos')
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`) // ✅ Throw errors
+    }
+    return response.json()
+  },
+})
+
+if (isError) return <div>Error: {error.message}</div>
+```
+
+---
+
+## Error #12: Stale Closure in Callbacks
+
+**Symptoms**:
+Mutation callbacks use old data
+
+**Why**:
+Closure captures stale values
+
+**Fix**:
+```tsx
+// ❌ Stale closure
+const [value, setValue] = useState(0)
+useMutation({
+  onSuccess: () => {
+    console.log(value) // Stale!
+  },
+})
+
+// ✅ Use functional update
+useMutation({
+  onSuccess: () => {
+    setValue(prev => prev + 1) // Fresh value
+  },
+})
+```
+
+---
+
+## Quick Diagnosis Checklist
+
+- [ ] Using v5 object syntax?
+- [ ] Using `isPending` instead of `isLoading`?
+- [ ] Using `gcTime` instead of `cacheTime`?
+- [ ] No query callbacks (`onSuccess`, etc.)?
+- [ ] `initialPageParam` present for infinite queries?
+- [ ] Throwing errors in queryFn?
+- [ ] Invalidating queries after mutations?
+- [ ] Check DevTools for query state
diff --git a/.cursor/skills/tanstack-query/references/typescript-patterns.md b/.cursor/skills/tanstack-query/references/typescript-patterns.md
new file mode 100644
index 0000000..12eb579
--- /dev/null
+++ b/.cursor/skills/tanstack-query/references/typescript-patterns.md
@@ -0,0 +1,291 @@
+# TypeScript Patterns for TanStack Query
+
+**Type-safe query and mutation patterns**
+
+---
+
+## 1. Basic Type Inference
+
+```tsx
+type Todo = {
+  id: number
+  title: string
+  completed: boolean
+}
+
+// ✅ Automatic type inference
+const { data } = useQuery({
+  queryKey: ['todos'],
+  queryFn: async (): Promise<Todo[]> => {
+    const response = await fetch('/api/todos')
+    return response.json()
+  },
+})
+// data is typed as Todo[] | undefined
+```
+
+---
+
+## 2. Generic Query Hook
+
+```tsx
+function useEntity<T>(
+  endpoint: string,
+  id: number
+) {
+  return useQuery({
+    queryKey: [endpoint, id],
+    queryFn: async (): Promise<T> => {
+      const response = await fetch(`/api/${endpoint}/${id}`)
+      return response.json()
+    },
+  })
+}
+
+// Usage
+const { data } = useEntity<User>('users', 1)
+// data: User | undefined
+```
+
+---
+
+## 3. queryOptions with Type Safety
+
+```tsx
+export const todosQueryOptions = queryOptions({
+  queryKey: ['todos'],
+  queryFn: async (): Promise<Todo[]> => {
+    const response = await fetch('/api/todos')
+    return response.json()
+  },
+  staleTime: 1000 * 60,
+})
+
+// Perfect type inference everywhere
+useQuery(todosQueryOptions)
+useSuspenseQuery(todosQueryOptions)
+queryClient.prefetchQuery(todosQueryOptions)
+```
+
+---
+
+## 4. Mutation with Types
+
+```tsx
+type CreateTodoInput = {
+  title: string
+}
+
+type CreateTodoResponse = Todo
+
+const { mutate } = useMutation<
+  CreateTodoResponse, // TData
+  Error, // TError
+  CreateTodoInput, // TVariables
+  { previous?: Todo[] } // TContext
+>({
+  mutationFn: async (input) => {
+    const response = await fetch('/api/todos', {
+      method: 'POST',
+      body: JSON.stringify(input),
+    })
+    return response.json()
+  },
+})
+
+// Type-safe mutation
+mutate({ title: 'New todo' })
+```
+
+---
+
+## 5. Custom Error Types
+
+```tsx
+class ApiError extends Error {
+  constructor(
+    message: string,
+    public status: number,
+    public code: string
+  ) {
+    super(message)
+  }
+}
+
+const { data, error } = useQuery<Todo[], ApiError>({
+  queryKey: ['todos'],
+  queryFn: async () => {
+    const response = await fetch('/api/todos')
+    if (!response.ok) {
+      throw new ApiError(
+        'Failed to fetch',
+        response.status,
+        'FETCH_ERROR'
+      )
+    }
+    return response.json()
+  },
+})
+
+if (error) {
+  // error.status and error.code are typed
+}
+```
+
+---
+
+## 6. Zod Schema Validation
+
+```tsx
+import { z } from 'zod'
+
+const TodoSchema = z.object({
+  id: z.number(),
+  title: z.string(),
+  completed: z.boolean(),
+})
+
+type Todo = z.infer<typeof TodoSchema>
+
+const { data } = useQuery({
+  queryKey: ['todos'],
+  queryFn: async () => {
+    const response = await fetch('/api/todos')
+    const json = await response.json()
+    return TodoSchema.array().parse(json) // Runtime + compile time safety
+  },
+})
+```
+
+---
+
+## 7. Discriminated Union for Status
+
+```tsx
+type QueryState<T> =
+  | { status: 'pending'; data: undefined; error: null }
+  | { status: 'error'; data: undefined; error: Error }
+  | { status: 'success'; data: T; error: null }
+
+function useTypedQuery<T>(
+  queryKey: string[],
+  queryFn: () => Promise<T>
+): QueryState<T> {
+  const { data, status, error } = useQuery({ queryKey, queryFn })
+
+  return {
+    status,
+    data: data as any,
+    error: error as any,
+  }
+}
+
+// Usage with exhaustive checking
+const result = useTypedQuery(['todos'], fetchTodos)
+
+switch (result.status) {
+  case 'pending':
+    return <Loading />
+  case 'error':
+    return <Error error={result.error} /> // error is typed
+  case 'success':
+    return <TodoList todos={result.data} /> // data is typed
+}
+```
+
+---
+
+## 8. Type-Safe Query Keys
+
+```tsx
+// Define all query keys in one place
+const queryKeys = {
+  todos: {
+    all: ['todos'] as const,
+    lists: () => [...queryKeys.todos.all, 'list'] as const,
+    list: (filters: TodoFilters) =>
+      [...queryKeys.todos.lists(), filters] as const,
+    details: () => [...queryKeys.todos.all, 'detail'] as const,
+    detail: (id: number) =>
+      [...queryKeys.todos.details(), id] as const,
+  },
+}
+
+// Usage
+useQuery({
+  queryKey: queryKeys.todos.detail(1),
+  queryFn: () => fetchTodo(1),
+})
+
+queryClient.invalidateQueries({
+  queryKey: queryKeys.todos.all
+})
+```
+
+---
+
+## 9. Utility Types
+
+```tsx
+import type { UseQueryResult, UseMutationResult } from '@tanstack/react-query'
+
+// Extract query data type
+type TodosQuery = UseQueryResult<Todo[]>
+type TodoData = TodosQuery['data'] // Todo[] | undefined
+
+// Extract mutation types
+type AddTodoMutation = UseMutationResult<
+  Todo,
+  Error,
+  CreateTodoInput
+>
+```
+
+---
+
+## 10. Strict Null Checks
+
+```tsx
+const { data } = useQuery({
+  queryKey: ['todo', id],
+  queryFn: () => fetchTodo(id),
+})
+
+// ❌ TypeScript error if strictNullChecks enabled
+const title = data.title
+
+// ✅ Proper null handling
+const title = data?.title ?? 'No title'
+
+// ✅ Type guard
+if (data) {
+  const title = data.title // data is Todo, not undefined
+}
+```
+
+---
+
+## 11. SuspenseQuery Types
+
+```tsx
+const { data } = useSuspenseQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodos,
+})
+
+// data is ALWAYS Todo[], never undefined
+// No need for undefined checks with suspense
+data.map(todo => todo.title) // ✅ Safe
+```
+
+---
+
+## Best Practices
+
+✅ Always type queryFn return value
+✅ Use const assertions for query keys
+✅ Leverage queryOptions for reusability
+✅ Use Zod for runtime + compile time validation
+✅ Enable strict null checks
+✅ Create type-safe query key factories
+✅ Use custom error types for better error handling
diff --git a/.cursor/skills/tanstack-query/references/v4-to-v5-migration.md b/.cursor/skills/tanstack-query/references/v4-to-v5-migration.md
new file mode 100644
index 0000000..ad4773a
--- /dev/null
+++ b/.cursor/skills/tanstack-query/references/v4-to-v5-migration.md
@@ -0,0 +1,231 @@
+# TanStack Query v4 to v5 Migration Guide
+
+**Complete migration checklist for upgrading from React Query v4 to TanStack Query v5**
+
+---
+
+## Breaking Changes Summary
+
+### 1. Object Syntax Required ⚠️
+
+**v4** allowed multiple signatures:
+```tsx
+useQuery(['todos'], fetchTodos, { staleTime: 5000 })
+useQuery(['todos'], fetchTodos)
+useQuery(queryOptions)
+```
+
+**v5** only supports object syntax:
+```tsx
+useQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodos,
+  staleTime: 5000
+})
+```
+
+**Migration**: Use codemod or manual update
+```bash
+npx @tanstack/react-query-codemod v5/remove-overloads
+```
+
+### 2. Query Callbacks Removed ⚠️
+
+**Removed from queries** (still work in mutations):
+- `onSuccess`
+- `onError`
+- `onSettled`
+
+**v4**:
+```tsx
+useQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodos,
+  onSuccess: (data) => console.log(data) // ❌ Removed
+})
+```
+
+**v5** - Use `useEffect`:
+```tsx
+const { data } = useQuery({ queryKey: ['todos'], queryFn: fetchTodos })
+
+useEffect(() => {
+  if (data) {
+    console.log(data)
+  }
+}, [data])
+```
+
+**Mutation callbacks still work**:
+```tsx
+useMutation({
+  mutationFn: addTodo,
+  onSuccess: () => {} // ✅ Still works
+})
+```
+
+### 3. `isLoading` → `isPending` ⚠️
+
+**v4**: `isLoading` meant "no data yet"
+**v5**: `isPending` means "no data yet", `isLoading` = `isPending && isFetching`
+
+```tsx
+// v4
+const { data, isLoading } = useQuery(...)
+if (isLoading) return <Loading />
+
+// v5
+const { data, isPending } = useQuery(...)
+if (isPending) return <Loading />
+```
+
+### 4. `cacheTime` → `gcTime` ⚠️
+
+```tsx
+// v4
+cacheTime: 1000 * 60 * 60
+
+// v5
+gcTime: 1000 * 60 * 60
+```
+
+### 5. `initialPageParam` Required for Infinite Queries ⚠️
+
+```tsx
+// v4
+useInfiniteQuery({
+  queryKey: ['projects'],
+  queryFn: ({ pageParam = 0 }) => fetchProjects(pageParam),
+  getNextPageParam: (lastPage) => lastPage.nextCursor,
+})
+
+// v5
+useInfiniteQuery({
+  queryKey: ['projects'],
+  queryFn: ({ pageParam }) => fetchProjects(pageParam),
+  initialPageParam: 0, // ✅ Required
+  getNextPageParam: (lastPage) => lastPage.nextCursor,
+})
+```
+
+### 6. `keepPreviousData` → `placeholderData` ⚠️
+
+```tsx
+// v4
+keepPreviousData: true
+
+// v5
+import { keepPreviousData } from '@tanstack/react-query'
+
+placeholderData: keepPreviousData
+```
+
+### 7. `useErrorBoundary` → `throwOnError` ⚠️
+
+```tsx
+// v4
+useErrorBoundary: true
+
+// v5
+throwOnError: true
+
+// Or conditional:
+throwOnError: (error) => error.status >= 500
+```
+
+### 8. Error Type Default Changed
+
+**v4**: `error: unknown`
+**v5**: `error: Error`
+
+If throwing non-Error types:
+```tsx
+const { error } = useQuery<DataType, string>({
+  queryKey: ['data'],
+  queryFn: async () => {
+    if (fail) throw 'custom string error'
+    return data
+  },
+})
+```
+
+---
+
+## Step-by-Step Migration
+
+### Step 1: Update Packages
+
+```bash
+npm install @tanstack/react-query@latest
+npm install -D @tanstack/react-query-devtools@latest
+```
+
+### Step 2: Run Codemods
+
+```bash
+# Remove function overloads
+npx @tanstack/react-query-codemod v5/remove-overloads
+
+# Replace removed/renamed methods
+npx @tanstack/react-query-codemod v5/rename-properties
+```
+
+### Step 3: Manual Fixes
+
+1. Replace query callbacks with useEffect
+2. Replace `isLoading` with `isPending`
+3. Replace `cacheTime` with `gcTime`
+4. Add `initialPageParam` to infinite queries
+5. Replace `keepPreviousData` with `placeholderData`
+
+### Step 4: TypeScript Fixes
+
+Update type imports:
+```tsx
+// v4
+import type { UseQueryResult } from 'react-query'
+
+// v5
+import type { UseQueryResult } from '@tanstack/react-query'
+```
+
+### Step 5: Test Thoroughly
+
+- Check all queries work
+- Verify mutations invalidate correctly
+- Test error handling
+- Check infinite queries
+- Verify TypeScript types
+
+---
+
+## Common Migration Issues
+
+### Issue: Callbacks not firing
+**Cause**: Query callbacks removed
+**Fix**: Use useEffect or move to mutations
+
+### Issue: isLoading always false
+**Cause**: Meaning changed
+**Fix**: Use isPending for initial load
+
+### Issue: cacheTime not recognized
+**Cause**: Renamed
+**Fix**: Use gcTime
+
+### Issue: infinite query type error
+**Cause**: initialPageParam required
+**Fix**: Add initialPageParam
+
+---
+
+## Full Codemod List
+
+```bash
+# All v5 codemods
+npx @tanstack/react-query-codemod v5/remove-overloads
+npx @tanstack/react-query-codemod v5/rename-properties
+npx @tanstack/react-query-codemod v5/replace-imports
+```
+
+**Note**: Codemods may not catch everything - manual review required!
diff --git a/.cursor/skills/tanstack-query/rules/tanstack-query.md b/.cursor/skills/tanstack-query/rules/tanstack-query.md
new file mode 100644
index 0000000..df04cd7
--- /dev/null
+++ b/.cursor/skills/tanstack-query/rules/tanstack-query.md
@@ -0,0 +1,126 @@
+---
+paths: "**/*.tsx", "**/*.ts", "**/*query*.ts", "**/*hook*.ts"
+---
+
+# TanStack Query v5 Corrections
+
+Claude's training may reference TanStack Query v4 patterns. This project uses **v5**.
+
+## Object Syntax Required
+
+```typescript
+/* ❌ v4 array syntax (removed in v5) */
+useQuery(['todos'], fetchTodos, { staleTime: 5000 })
+
+/* ✅ v5 object syntax only */
+useQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodos,
+  staleTime: 5000
+})
+```
+
+## Query Callbacks Removed
+
+```typescript
+/* ❌ v5 removed onSuccess/onError/onSettled from queries */
+useQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodos,
+  onSuccess: (data) => console.log(data), // Removed!
+})
+
+/* ✅ Use useEffect instead */
+const { data } = useQuery({ queryKey: ['todos'], queryFn: fetchTodos })
+useEffect(() => {
+  if (data) console.log(data)
+}, [data])
+
+/* Note: Mutations still support callbacks */
+useMutation({
+  mutationFn: addTodo,
+  onSuccess: () => {}, // Still works!
+})
+```
+
+## isPending vs isLoading
+
+```typescript
+/* ❌ isLoading meaning changed in v5 */
+if (isLoading) return <Loading />
+
+/* ✅ Use isPending for initial load */
+const { data, isPending } = useQuery(...)
+if (isPending) return <Loading />
+// isPending = no data yet
+// isLoading = isPending && isFetching
+```
+
+## cacheTime → gcTime
+
+```typescript
+/* ❌ Renamed in v5 */
+useQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodos,
+  cacheTime: 1000 * 60 * 60, // Error!
+})
+
+/* ✅ Use gcTime */
+useQuery({
+  queryKey: ['todos'],
+  queryFn: fetchTodos,
+  gcTime: 1000 * 60 * 60,
+})
+```
+
+## keepPreviousData → placeholderData
+
+```typescript
+/* ❌ Removed in v5 */
+useQuery({
+  queryKey: ['todos', page],
+  queryFn: () => fetchTodos(page),
+  keepPreviousData: true, // Error!
+})
+
+/* ✅ Use placeholderData helper */
+import { keepPreviousData } from '@tanstack/react-query'
+
+useQuery({
+  queryKey: ['todos', page],
+  queryFn: () => fetchTodos(page),
+  placeholderData: keepPreviousData,
+})
+```
+
+## Infinite Queries: initialPageParam Required
+
+```typescript
+/* ❌ v4 used undefined as first pageParam */
+useInfiniteQuery({
+  queryKey: ['projects'],
+  queryFn: ({ pageParam = 0 }) => fetchProjects(pageParam),
+  getNextPageParam: (lastPage) => lastPage.nextCursor,
+})
+
+/* ✅ v5 requires explicit initialPageParam */
+useInfiniteQuery({
+  queryKey: ['projects'],
+  queryFn: ({ pageParam }) => fetchProjects(pageParam),
+  initialPageParam: 0, // Required!
+  getNextPageParam: (lastPage) => lastPage.nextCursor,
+})
+```
+
+## Quick Fixes
+
+| If Claude suggests... | Use instead... |
+|----------------------|----------------|
+| `useQuery(['key'], fn, opts)` | `useQuery({ queryKey, queryFn, ...opts })` |
+| `onSuccess` in useQuery | `useEffect` watching data |
+| `cacheTime` | `gcTime` |
+| `isLoading` for initial load | `isPending` |
+| `keepPreviousData: true` | `placeholderData: keepPreviousData` |
+| Missing `initialPageParam` | Add `initialPageParam: 0` (or appropriate value) |
+| `useErrorBoundary` | `throwOnError` |
diff --git a/.cursor/skills/tanstack-query/scripts/example-script.sh b/.cursor/skills/tanstack-query/scripts/example-script.sh
new file mode 100755
index 0000000..1c0c72e
--- /dev/null
+++ b/.cursor/skills/tanstack-query/scripts/example-script.sh
@@ -0,0 +1,15 @@
+#!/bin/bash
+
+# [TODO: Script Name]
+# [TODO: Brief description of what this script does]
+
+# Example script structure - delete if not needed
+
+set -e  # Exit on error
+
+# [TODO: Add your script logic here]
+
+echo "Example script - replace or delete this file"
+
+# Usage:
+# ./scripts/example-script.sh [args]
diff --git a/.cursor/skills/tanstack-query/templates/custom-hooks-pattern.tsx b/.cursor/skills/tanstack-query/templates/custom-hooks-pattern.tsx
new file mode 100644
index 0000000..08b784d
--- /dev/null
+++ b/.cursor/skills/tanstack-query/templates/custom-hooks-pattern.tsx
@@ -0,0 +1,281 @@
+// src/hooks/useUsers.ts - Example of advanced custom hooks pattern
+import { useQuery, useMutation, useQueryClient, queryOptions } from '@tanstack/react-query'
+
+/**
+ * Type definitions
+ */
+export type User = {
+  id: number
+  name: string
+  email: string
+  phone: string
+}
+
+export type CreateUserInput = Omit<User, 'id'>
+export type UpdateUserInput = Partial<User> & { id: number }
+
+/**
+ * API functions - centralized network logic
+ */
+const userApi = {
+  getAll: async (): Promise<User[]> => {
+    const response = await fetch('https://jsonplaceholder.typicode.com/users')
+    if (!response.ok) throw new Error('Failed to fetch users')
+    return response.json()
+  },
+
+  getById: async (id: number): Promise<User> => {
+    const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
+    if (!response.ok) throw new Error(`Failed to fetch user ${id}`)
+    return response.json()
+  },
+
+  create: async (user: CreateUserInput): Promise<User> => {
+    const response = await fetch('https://jsonplaceholder.typicode.com/users', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(user),
+    })
+    if (!response.ok) throw new Error('Failed to create user')
+    return response.json()
+  },
+
+  update: async ({ id, ...updates }: UpdateUserInput): Promise<User> => {
+    const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(updates),
+    })
+    if (!response.ok) throw new Error('Failed to update user')
+    return response.json()
+  },
+
+  delete: async (id: number): Promise<void> => {
+    const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`, {
+      method: 'DELETE',
+    })
+    if (!response.ok) throw new Error('Failed to delete user')
+  },
+}
+
+/**
+ * Query options factories (v5 best practice)
+ *
+ * Benefits:
+ * - Type-safe reusable query configurations
+ * - DRY principle - single source of truth
+ * - Works with useQuery, useSuspenseQuery, prefetchQuery
+ * - Easier testing and mocking
+ */
+export const usersQueryOptions = queryOptions({
+  queryKey: ['users'],
+  queryFn: userApi.getAll,
+  staleTime: 1000 * 60 * 5, // 5 minutes
+})
+
+export const userQueryOptions = (id: number) =>
+  queryOptions({
+    queryKey: ['users', id],
+    queryFn: () => userApi.getById(id),
+    staleTime: 1000 * 60 * 5,
+  })
+
+/**
+ * Query Hooks
+ */
+export function useUsers() {
+  return useQuery(usersQueryOptions)
+}
+
+export function useUser(id: number) {
+  return useQuery(userQueryOptions(id))
+}
+
+/**
+ * Advanced: Search/Filter Hook
+ *
+ * Demonstrates dependent query with filtering
+ */
+export function useUserSearch(searchTerm: string) {
+  return useQuery({
+    queryKey: ['users', 'search', searchTerm],
+    queryFn: async () => {
+      const users = await userApi.getAll()
+      return users.filter(
+        (user) =>
+          user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          user.email.toLowerCase().includes(searchTerm.toLowerCase())
+      )
+    },
+    enabled: searchTerm.length >= 2, // Only search if 2+ characters
+    staleTime: 1000 * 30, // 30 seconds for search results
+  })
+}
+
+/**
+ * Mutation Hooks
+ */
+export function useCreateUser() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: userApi.create,
+    onSuccess: (newUser) => {
+      // Update cache with new user
+      queryClient.setQueryData<User[]>(['users'], (old = []) => [...old, newUser])
+
+      // Invalidate to refetch and ensure consistency
+      queryClient.invalidateQueries({ queryKey: ['users'] })
+    },
+  })
+}
+
+export function useUpdateUser() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: userApi.update,
+    onSuccess: (updatedUser) => {
+      // Update individual user cache
+      queryClient.setQueryData(['users', updatedUser.id], updatedUser)
+
+      // Update user in list
+      queryClient.setQueryData<User[]>(['users'], (old = []) =>
+        old.map((user) => (user.id === updatedUser.id ? updatedUser : user))
+      )
+    },
+  })
+}
+
+export function useDeleteUser() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: userApi.delete,
+    onSuccess: (_, deletedId) => {
+      // Remove from cache
+      queryClient.setQueryData<User[]>(['users'], (old = []) =>
+        old.filter((user) => user.id !== deletedId)
+      )
+
+      // Remove individual query
+      queryClient.removeQueries({ queryKey: ['users', deletedId] })
+    },
+  })
+}
+
+/**
+ * Advanced: Prefetch Hook
+ *
+ * Prefetch user details on hover for instant navigation
+ */
+export function usePrefetchUser() {
+  const queryClient = useQueryClient()
+
+  return (id: number) => {
+    queryClient.prefetchQuery(userQueryOptions(id))
+  }
+}
+
+/**
+ * Component Usage Examples
+ */
+
+// Example 1: List all users
+export function UserList() {
+  const { data: users, isPending, isError, error } = useUsers()
+  const prefetchUser = usePrefetchUser()
+
+  if (isPending) return <div>Loading...</div>
+  if (isError) return <div>Error: {error.message}</div>
+
+  return (
+    <ul>
+      {users.map((user) => (
+        <li
+          key={user.id}
+          onMouseEnter={() => prefetchUser(user.id)} // Prefetch on hover
+        >
+          <a href={`/users/${user.id}`}>{user.name}</a>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+// Example 2: User detail page
+export function UserDetail({ id }: { id: number }) {
+  const { data: user, isPending } = useUser(id)
+  const { mutate: updateUser, isPending: isUpdating } = useUpdateUser()
+  const { mutate: deleteUser } = useDeleteUser()
+
+  if (isPending) return <div>Loading...</div>
+  if (!user) return <div>User not found</div>
+
+  return (
+    <div>
+      <h1>{user.name}</h1>
+      <p>Email: {user.email}</p>
+      <p>Phone: {user.phone}</p>
+
+      <button
+        onClick={() => updateUser({ id: user.id, name: 'Updated Name' })}
+        disabled={isUpdating}
+      >
+        Update Name
+      </button>
+
+      <button onClick={() => deleteUser(user.id)}>
+        Delete User
+      </button>
+    </div>
+  )
+}
+
+// Example 3: Search users
+export function UserSearch() {
+  const [search, setSearch] = useState('')
+  const { data: results, isFetching } = useUserSearch(search)
+
+  return (
+    <div>
+      <input
+        type="text"
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        placeholder="Search users..."
+      />
+
+      {isFetching && <span>Searching...</span>}
+
+      {results && (
+        <ul>
+          {results.map((user) => (
+            <li key={user.id}>{user.name} - {user.email}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Key patterns demonstrated:
+ *
+ * 1. API Layer: Centralized fetch functions
+ * 2. Query Options Factories: Reusable queryOptions
+ * 3. Custom Hooks: Encapsulate query logic
+ * 4. Mutation Hooks: Encapsulate mutation logic
+ * 5. Cache Updates: setQueryData, invalidateQueries, removeQueries
+ * 6. Prefetching: Improve perceived performance
+ * 7. Conditional Queries: enabled option
+ * 8. Search/Filter: Derived queries from base data
+ *
+ * Benefits:
+ * ✅ Type safety throughout
+ * ✅ Easy to test (mock API layer)
+ * ✅ Reusable across components
+ * ✅ Consistent error handling
+ * ✅ Optimized caching strategy
+ * ✅ Better code organization
+ */
diff --git a/.cursor/skills/tanstack-query/templates/devtools-setup.tsx b/.cursor/skills/tanstack-query/templates/devtools-setup.tsx
new file mode 100644
index 0000000..fdb8c26
--- /dev/null
+++ b/.cursor/skills/tanstack-query/templates/devtools-setup.tsx
@@ -0,0 +1,248 @@
+// src/main.tsx - Complete DevTools Setup
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import App from './App'
+
+/**
+ * QueryClient with DevTools-friendly configuration
+ */
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5,
+      gcTime: 1000 * 60 * 60,
+      refetchOnWindowFocus: false,
+    },
+  },
+})
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+
+      {/*
+        ReactQueryDevtools Configuration
+
+        IMPORTANT: DevTools are automatically tree-shaken in production
+        Safe to leave in code, won't appear in production bundle
+      */}
+      <ReactQueryDevtools
+        // Start collapsed (default: false)
+        initialIsOpen={false}
+
+        // Button position on screen
+        buttonPosition="bottom-right" // "top-left" | "top-right" | "bottom-left" | "bottom-right"
+
+        // Panel position when open
+        position="bottom" // "top" | "bottom" | "left" | "right"
+
+        // Custom styles for toggle button
+        toggleButtonProps={{
+          style: {
+            marginBottom: '4rem', // Move up if button overlaps content
+            marginRight: '1rem',
+          },
+        }}
+
+        // Custom styles for panel
+        panelProps={{
+          style: {
+            height: '400px', // Custom panel height
+          },
+        }}
+
+        // Add keyboard shortcut (optional)
+        // Default: None, but you can add custom handler
+      />
+    </QueryClientProvider>
+  </StrictMode>
+)
+
+/**
+ * Advanced: Conditional DevTools (explicit dev check)
+ *
+ * DevTools are already removed in production, but can add explicit check
+ */
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+      {import.meta.env.DEV && (
+        <ReactQueryDevtools initialIsOpen={false} />
+      )}
+    </QueryClientProvider>
+  </StrictMode>
+)
+
+/**
+ * Advanced: Custom Toggle Button
+ */
+import { useState } from 'react'
+
+function AppWithCustomDevTools() {
+  const [showDevTools, setShowDevTools] = useState(false)
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <App />
+
+      {/* Custom toggle button */}
+      <button
+        onClick={() => setShowDevTools(!showDevTools)}
+        style={{
+          position: 'fixed',
+          bottom: '1rem',
+          right: '1rem',
+          zIndex: 99999,
+        }}
+      >
+        {showDevTools ? 'Hide' : 'Show'} DevTools
+      </button>
+
+      {showDevTools && <ReactQueryDevtools initialIsOpen={true} />}
+    </QueryClientProvider>
+  )
+}
+
+/**
+ * DevTools Features (what you can do):
+ *
+ * 1. View all queries: See queryKey, status, data, error
+ * 2. Inspect cache: View cached data for each query
+ * 3. Manual refetch: Force refetch any query
+ * 4. View mutations: See in-flight and completed mutations
+ * 5. Query invalidation: Manually invalidate queries
+ * 6. Explorer mode: Navigate query hierarchy
+ * 7. Time travel: See query state over time
+ * 8. Export state: Download current cache for debugging
+ *
+ * DevTools Panel Sections:
+ * - Queries: All active/cached queries
+ * - Mutations: Recent mutations
+ * - Query Cache: Full cache state
+ * - Mutation Cache: Mutation history
+ * - Settings: DevTools configuration
+ */
+
+/**
+ * Debugging with DevTools
+ */
+
+// Example: Check if query is being cached correctly
+function DebugQueryCaching() {
+  const { data, dataUpdatedAt, isFetching } = useQuery({
+    queryKey: ['todos'],
+    queryFn: fetchTodos,
+  })
+
+  return (
+    <div>
+      <p>Last updated: {new Date(dataUpdatedAt).toLocaleTimeString()}</p>
+      <p>Is fetching: {isFetching ? 'Yes' : 'No'}</p>
+      {/* Open DevTools to see:
+          - Query status (fresh, fetching, stale)
+          - Cache data
+          - Refetch behavior
+      */}
+    </div>
+  )
+}
+
+// Example: Debug why query keeps refetching
+function DebugRefetchingIssue() {
+  const { data, isFetching, isRefetching } = useQuery({
+    queryKey: ['users'],
+    queryFn: fetchUsers,
+    // Check in DevTools if these settings are correct:
+    staleTime: 0, // ❌ Data always stale, will refetch frequently
+    refetchOnWindowFocus: true, // ❌ Refetches on every focus
+    refetchOnMount: true, // ❌ Refetches on every mount
+  })
+
+  // DevTools will show you:
+  // - How many times query refetched
+  // - When it refetched (mount, focus, reconnect)
+  // - Current staleTime and gcTime settings
+
+  return <div>Fetching: {isFetching ? 'Yes' : 'No'}</div>
+}
+
+/**
+ * Production DevTools (optional, separate package)
+ *
+ * For debugging production issues remotely
+ * npm install @tanstack/react-query-devtools-production
+ */
+import { ReactQueryDevtools as ReactQueryDevtoolsProd } from '@tanstack/react-query-devtools-production'
+
+function AppWithProductionDevTools() {
+  const [showDevTools, setShowDevTools] = useState(false)
+
+  useEffect(() => {
+    // Load production devtools on demand
+    // Only when user presses keyboard shortcut or secret URL
+    if (showDevTools) {
+      import('@tanstack/react-query-devtools-production').then((module) => {
+        // Module loaded
+      })
+    }
+  }, [showDevTools])
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <App />
+      {showDevTools && <ReactQueryDevtoolsProd />}
+    </QueryClientProvider>
+  )
+}
+
+/**
+ * Keyboard Shortcuts (DIY)
+ *
+ * Add custom keyboard shortcut to toggle DevTools
+ */
+function AppWithKeyboardShortcut() {
+  const [showDevTools, setShowDevTools] = useState(false)
+
+  useEffect(() => {
+    const handleKeyPress = (e: KeyboardEvent) => {
+      // Ctrl/Cmd + Shift + D
+      if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'd') {
+        e.preventDefault()
+        setShowDevTools((prev) => !prev)
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyPress)
+    return () => window.removeEventListener('keydown', handleKeyPress)
+  }, [])
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <App />
+      {showDevTools && <ReactQueryDevtools />}
+    </QueryClientProvider>
+  )
+}
+
+/**
+ * Best Practices:
+ *
+ * ✅ Keep DevTools in code (tree-shaken in production)
+ * ✅ Start with initialIsOpen={false} to avoid distraction
+ * ✅ Use DevTools to debug cache issues
+ * ✅ Check DevTools when queries refetch unexpectedly
+ * ✅ Export state for bug reports
+ *
+ * ❌ Don't ship production devtools without authentication
+ * ❌ Don't rely on DevTools for production monitoring
+ * ❌ Don't expose sensitive data in cache (use select to filter)
+ *
+ * Performance:
+ * - DevTools have minimal performance impact in dev
+ * - Completely removed in production builds
+ * - No runtime overhead when not open
+ */
diff --git a/.cursor/skills/tanstack-query/templates/error-boundary.tsx b/.cursor/skills/tanstack-query/templates/error-boundary.tsx
new file mode 100644
index 0000000..a0cd16b
--- /dev/null
+++ b/.cursor/skills/tanstack-query/templates/error-boundary.tsx
@@ -0,0 +1,243 @@
+// src/components/ErrorBoundary.tsx
+import { Component, type ReactNode } from 'react'
+import { QueryErrorResetBoundary } from '@tanstack/react-query'
+
+/**
+ * Props and State types
+ */
+type ErrorBoundaryProps = {
+  children: ReactNode
+  fallback?: (error: Error, reset: () => void) => ReactNode
+}
+
+type ErrorBoundaryState = {
+  hasError: boolean
+  error: Error | null
+}
+
+/**
+ * React Error Boundary Class Component
+ *
+ * Required because error boundaries must be class components
+ */
+class ErrorBoundaryClass extends Component<
+  ErrorBoundaryProps & { onReset?: () => void },
+  ErrorBoundaryState
+> {
+  constructor(props: ErrorBoundaryProps & { onReset?: () => void }) {
+    super(props)
+    this.state = { hasError: false, error: null }
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error }
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    // Log error to error reporting service
+    console.error('Error caught by boundary:', error, errorInfo)
+
+    // Example: Send to Sentry, LogRocket, etc.
+    // Sentry.captureException(error, { contexts: { react: errorInfo } })
+  }
+
+  handleReset = () => {
+    // Call TanStack Query reset if provided
+    this.props.onReset?.()
+
+    // Reset error boundary state
+    this.setState({ hasError: false, error: null })
+  }
+
+  render() {
+    if (this.state.hasError && this.state.error) {
+      // Use custom fallback if provided
+      if (this.props.fallback) {
+        return this.props.fallback(this.state.error, this.handleReset)
+      }
+
+      // Default error UI
+      return (
+        <div
+          style={{
+            padding: '2rem',
+            border: '2px solid #ef4444',
+            borderRadius: '8px',
+            backgroundColor: '#fee',
+          }}
+        >
+          <h2>Something went wrong</h2>
+          <details style={{ whiteSpace: 'pre-wrap', marginTop: '1rem' }}>
+            <summary>Error details</summary>
+            {this.state.error.message}
+            {this.state.error.stack && (
+              <pre style={{ marginTop: '1rem', fontSize: '0.875rem' }}>
+                {this.state.error.stack}
+              </pre>
+            )}
+          </details>
+          <button
+            onClick={this.handleReset}
+            style={{
+              marginTop: '1rem',
+              padding: '0.5rem 1rem',
+              backgroundColor: '#3b82f6',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer',
+            }}
+          >
+            Try again
+          </button>
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}
+
+/**
+ * Error Boundary with TanStack Query Reset
+ *
+ * Wraps components and catches errors thrown by queries
+ * with throwOnError: true
+ */
+export function ErrorBoundary({ children, fallback }: ErrorBoundaryProps) {
+  return (
+    <QueryErrorResetBoundary>
+      {({ reset }) => (
+        <ErrorBoundaryClass onReset={reset} fallback={fallback}>
+          {children}
+        </ErrorBoundaryClass>
+      )}
+    </QueryErrorResetBoundary>
+  )
+}
+
+/**
+ * Usage Examples
+ */
+
+// Example 1: Wrap entire app
+export function AppWithErrorBoundary() {
+  return (
+    <ErrorBoundary>
+      <App />
+    </ErrorBoundary>
+  )
+}
+
+// Example 2: Wrap specific features
+export function UserProfileWithErrorBoundary() {
+  return (
+    <ErrorBoundary>
+      <UserProfile />
+    </ErrorBoundary>
+  )
+}
+
+// Example 3: Custom error UI
+export function CustomErrorBoundary({ children }: { children: ReactNode }) {
+  return (
+    <ErrorBoundary
+      fallback={(error, reset) => (
+        <div className="error-container">
+          <h1>Oops!</h1>
+          <p>We encountered an error: {error.message}</p>
+          <button onClick={reset}>Retry</button>
+          <a href="/">Go Home</a>
+        </div>
+      )}
+    >
+      {children}
+    </ErrorBoundary>
+  )
+}
+
+/**
+ * Using throwOnError with Queries
+ *
+ * Queries can throw errors to error boundaries
+ */
+import { useQuery } from '@tanstack/react-query'
+
+// Example 1: Always throw errors
+function UserData({ id }: { id: number }) {
+  const { data } = useQuery({
+    queryKey: ['user', id],
+    queryFn: async () => {
+      const response = await fetch(`/api/users/${id}`)
+      if (!response.ok) throw new Error('User not found')
+      return response.json()
+    },
+    throwOnError: true, // Throw to error boundary
+  })
+
+  return <div>{data.name}</div>
+}
+
+// Example 2: Conditional throwing (only server errors)
+function ConditionalErrorThrowing({ id }: { id: number }) {
+  const { data } = useQuery({
+    queryKey: ['user', id],
+    queryFn: async () => {
+      const response = await fetch(`/api/users/${id}`)
+      if (!response.ok) throw new Error(`HTTP ${response.status}`)
+      return response.json()
+    },
+    throwOnError: (error) => {
+      // Only throw 5xx server errors to boundary
+      // Handle 4xx client errors locally
+      return error.message.includes('5')
+    },
+  })
+
+  return <div>{data?.name ?? 'Not found'}</div>
+}
+
+/**
+ * Multiple Error Boundaries (Layered)
+ *
+ * Place boundaries at different levels for granular error handling
+ */
+export function LayeredErrorBoundaries() {
+  return (
+    // App-level boundary
+    <ErrorBoundary fallback={(error) => <AppCrashScreen error={error} />}>
+      <Header />
+
+      {/* Feature-level boundary */}
+      <ErrorBoundary fallback={(error) => <FeatureError error={error} />}>
+        <UserProfile />
+      </ErrorBoundary>
+
+      {/* Another feature boundary */}
+      <ErrorBoundary>
+        <TodoList />
+      </ErrorBoundary>
+
+      <Footer />
+    </ErrorBoundary>
+  )
+}
+
+/**
+ * Key concepts:
+ *
+ * 1. QueryErrorResetBoundary: Provides reset function for TanStack Query
+ * 2. throwOnError: Makes query throw errors to boundary
+ * 3. Layered boundaries: Isolate failures to specific features
+ * 4. Custom fallbacks: Control error UI per boundary
+ * 5. Error logging: componentDidCatch for monitoring
+ *
+ * Best practices:
+ * ✅ Always wrap app in error boundary
+ * ✅ Use throwOnError for critical errors only
+ * ✅ Provide helpful error messages to users
+ * ✅ Log errors to monitoring service
+ * ✅ Offer reset/retry functionality
+ * ❌ Don't catch all errors - use local error states when appropriate
+ * ❌ Don't throw for expected errors (404, validation)
+ */
diff --git a/.cursor/skills/tanstack-query/templates/package.json b/.cursor/skills/tanstack-query/templates/package.json
new file mode 100644
index 0000000..de22244
--- /dev/null
+++ b/.cursor/skills/tanstack-query/templates/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "my-app-with-tanstack-query",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@tanstack/react-query": "^5.90.5"
+  },
+  "devDependencies": {
+    "@tanstack/react-query-devtools": "^5.90.2",
+    "@tanstack/eslint-plugin-query": "^5.90.2",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^8.15.0",
+    "@typescript-eslint/parser": "^8.15.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.16.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "typescript": "^5.6.3",
+    "vite": "^6.0.1"
+  }
+}
diff --git a/.cursor/skills/tanstack-query/templates/provider-setup.tsx b/.cursor/skills/tanstack-query/templates/provider-setup.tsx
new file mode 100644
index 0000000..2b7ff74
--- /dev/null
+++ b/.cursor/skills/tanstack-query/templates/provider-setup.tsx
@@ -0,0 +1,50 @@
+// src/main.tsx
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { queryClient } from './lib/query-client'
+import App from './App'
+import './index.css'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+      {/* DevTools are automatically removed in production builds */}
+      <ReactQueryDevtools
+        initialIsOpen={false}
+        buttonPosition="bottom-right"
+        position="bottom"
+      />
+    </QueryClientProvider>
+  </StrictMode>
+)
+
+/**
+ * Important notes:
+ *
+ * 1. QueryClientProvider must wrap all components that use TanStack Query hooks
+ * 2. DevTools must be inside the provider
+ * 3. DevTools are tree-shaken in production (safe to leave in code)
+ * 4. Only create ONE QueryClient instance for entire app (imported from query-client.ts)
+ *
+ * DevTools configuration options:
+ * - initialIsOpen: true/false - Start open or closed
+ * - buttonPosition: "top-left" | "top-right" | "bottom-left" | "bottom-right"
+ * - position: "top" | "bottom" | "left" | "right"
+ * - toggleButtonProps: Custom button styles
+ * - panelProps: Custom panel styles
+ *
+ * Example with custom styles:
+ * <ReactQueryDevtools
+ *   initialIsOpen={false}
+ *   buttonPosition="bottom-right"
+ *   toggleButtonProps={{
+ *     style: { marginBottom: '4rem' }
+ *   }}
+ *   panelProps={{
+ *     style: { height: '500px' }
+ *   }}
+ * />
+ */
diff --git a/.cursor/skills/tanstack-query/templates/query-client-config.ts b/.cursor/skills/tanstack-query/templates/query-client-config.ts
new file mode 100644
index 0000000..0ad35d2
--- /dev/null
+++ b/.cursor/skills/tanstack-query/templates/query-client-config.ts
@@ -0,0 +1,72 @@
+// src/lib/query-client.ts
+import { QueryClient } from '@tanstack/react-query'
+
+/**
+ * QueryClient configuration for TanStack Query v5
+ *
+ * Key settings:
+ * - staleTime: How long data is fresh (won't refetch)
+ * - gcTime: How long inactive data stays in cache (garbage collection time)
+ * - retry: Number of retry attempts on failure
+ * - refetchOnWindowFocus: Refetch when window regains focus
+ */
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      // Data is fresh for 5 minutes (won't refetch during this time)
+      staleTime: 1000 * 60 * 5,
+
+      // Inactive data stays in cache for 1 hour before garbage collection
+      gcTime: 1000 * 60 * 60,
+
+      // Retry failed requests with smart logic
+      retry: (failureCount, error) => {
+        // Don't retry on 404s
+        if (error instanceof Response && error.status === 404) {
+          return false
+        }
+        // Retry up to 3 times for other errors
+        return failureCount < 3
+      },
+
+      // Don't refetch on window focus (can be annoying during dev)
+      // Set to true for real-time data (stock prices, notifications)
+      refetchOnWindowFocus: false,
+
+      // Refetch when network reconnects
+      refetchOnReconnect: true,
+
+      // Refetch on component mount if data is stale
+      refetchOnMount: true,
+    },
+    mutations: {
+      // Don't retry mutations by default (usually not wanted)
+      retry: 0,
+
+      // Global mutation error handler (optional)
+      onError: (error) => {
+        console.error('Mutation error:', error)
+        // Add global error handling here (toast, alert, etc.)
+      },
+    },
+  },
+})
+
+/**
+ * Adjust these settings based on your needs:
+ *
+ * For real-time data (stock prices, notifications):
+ * - staleTime: 0 (always stale, refetch frequently)
+ * - refetchOnWindowFocus: true
+ * - refetchInterval: 1000 * 30 (refetch every 30s)
+ *
+ * For static data (user settings, app config):
+ * - staleTime: Infinity (never stale)
+ * - refetchOnWindowFocus: false
+ * - refetchOnMount: false
+ *
+ * For moderate data (todos, posts):
+ * - staleTime: 1000 * 60 * 5 (5 minutes)
+ * - refetchOnWindowFocus: false
+ * - refetchOnMount: true
+ */
diff --git a/.cursor/skills/tanstack-query/templates/use-infinite-query.tsx b/.cursor/skills/tanstack-query/templates/use-infinite-query.tsx
new file mode 100644
index 0000000..c44d2b4
--- /dev/null
+++ b/.cursor/skills/tanstack-query/templates/use-infinite-query.tsx
@@ -0,0 +1,214 @@
+// src/hooks/useInfiniteTodos.ts
+import { useInfiniteQuery } from '@tanstack/react-query'
+import { useEffect, useRef } from 'react'
+import type { Todo } from './useTodos'
+
+/**
+ * Paginated response type
+ */
+type TodosPage = {
+  data: Todo[]
+  nextCursor: number | null
+  previousCursor: number | null
+}
+
+/**
+ * Fetch paginated todos
+ *
+ * In real API: cursor would be offset, page number, or last item ID
+ */
+async function fetchTodosPage({ pageParam }: { pageParam: number }): Promise<TodosPage> {
+  const limit = 20
+  const start = pageParam * limit
+  const end = start + limit
+
+  const response = await fetch(
+    `https://jsonplaceholder.typicode.com/todos?_start=${start}&_limit=${limit}`
+  )
+
+  if (!response.ok) {
+    throw new Error('Failed to fetch todos')
+  }
+
+  const data: Todo[] = await response.json()
+
+  return {
+    data,
+    nextCursor: data.length === limit ? pageParam + 1 : null,
+    previousCursor: pageParam > 0 ? pageParam - 1 : null,
+  }
+}
+
+/**
+ * Infinite query hook
+ *
+ * Usage:
+ * const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteTodos()
+ */
+export function useInfiniteTodos() {
+  return useInfiniteQuery({
+    queryKey: ['todos', 'infinite'],
+    queryFn: fetchTodosPage,
+
+    // v5 REQUIRES initialPageParam (was optional in v4)
+    initialPageParam: 0,
+
+    // Determine if there are more pages
+    getNextPageParam: (lastPage) => lastPage.nextCursor,
+
+    // Optional: Determine if there are previous pages (bidirectional)
+    getPreviousPageParam: (firstPage) => firstPage.previousCursor,
+
+    // How many pages to keep in memory (default: Infinity)
+    maxPages: undefined,
+  })
+}
+
+/**
+ * Component with manual "Load More" button
+ */
+export function InfiniteTodosManual() {
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isPending,
+    isError,
+    error,
+  } = useInfiniteTodos()
+
+  if (isPending) return <div>Loading...</div>
+  if (isError) return <div>Error: {error.message}</div>
+
+  return (
+    <div>
+      <h1>Infinite Todos (Manual)</h1>
+
+      {/* Render all pages */}
+      {data.pages.map((page, i) => (
+        <div key={i}>
+          <h2>Page {i + 1}</h2>
+          <ul>
+            {page.data.map((todo) => (
+              <li key={todo.id}>
+                <input type="checkbox" checked={todo.completed} readOnly />
+                {todo.title}
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+
+      {/* Load more button */}
+      <button
+        onClick={() => fetchNextPage()}
+        disabled={!hasNextPage || isFetchingNextPage}
+      >
+        {isFetchingNextPage
+          ? 'Loading more...'
+          : hasNextPage
+          ? 'Load More'
+          : 'No more todos'}
+      </button>
+    </div>
+  )
+}
+
+/**
+ * Component with automatic infinite scroll
+ * Uses Intersection Observer to detect when user scrolls to bottom
+ */
+export function InfiniteTodosAuto() {
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isPending,
+    isError,
+    error,
+  } = useInfiniteTodos()
+
+  const loadMoreRef = useRef<HTMLDivElement>(null)
+
+  // Intersection Observer for automatic loading
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        // When sentinel element is visible and there are more pages
+        if (entries[0].isIntersecting && hasNextPage && !isFetchingNextPage) {
+          fetchNextPage()
+        }
+      },
+      { threshold: 0.1 } // Trigger when 10% of element is visible
+    )
+
+    if (loadMoreRef.current) {
+      observer.observe(loadMoreRef.current)
+    }
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [fetchNextPage, hasNextPage, isFetchingNextPage])
+
+  if (isPending) return <div>Loading...</div>
+  if (isError) return <div>Error: {error.message}</div>
+
+  return (
+    <div>
+      <h1>Infinite Todos (Auto)</h1>
+
+      {/* Render all pages */}
+      {data.pages.map((page, i) => (
+        <div key={i}>
+          {page.data.map((todo) => (
+            <div key={todo.id}>
+              <input type="checkbox" checked={todo.completed} readOnly />
+              {todo.title}
+            </div>
+          ))}
+        </div>
+      ))}
+
+      {/* Sentinel element - triggers loading when scrolled into view */}
+      <div ref={loadMoreRef}>
+        {isFetchingNextPage ? (
+          <div>Loading more...</div>
+        ) : hasNextPage ? (
+          <div>Scroll to load more</div>
+        ) : (
+          <div>No more todos</div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Key concepts:
+ *
+ * 1. data.pages: Array of all fetched pages
+ * 2. fetchNextPage(): Loads next page
+ * 3. hasNextPage: Boolean if more pages available
+ * 4. isFetchingNextPage: Loading state for next page
+ * 5. initialPageParam: Starting cursor (REQUIRED in v5)
+ * 6. getNextPageParam: Function returning next cursor or null
+ *
+ * Access all data:
+ * const allTodos = data.pages.flatMap(page => page.data)
+ *
+ * Bidirectional scrolling:
+ * - Add getPreviousPageParam
+ * - Use fetchPreviousPage() and hasPreviousPage
+ *
+ * Performance:
+ * - Use maxPages to limit memory (e.g., maxPages: 10)
+ * - Old pages are garbage collected automatically
+ *
+ * Common patterns:
+ * - Manual: Load More button
+ * - Auto: Intersection Observer
+ * - Virtualized: react-window or react-virtual for huge lists
+ */
diff --git a/.cursor/skills/tanstack-query/templates/use-mutation-basic.tsx b/.cursor/skills/tanstack-query/templates/use-mutation-basic.tsx
new file mode 100644
index 0000000..5fa0574
--- /dev/null
+++ b/.cursor/skills/tanstack-query/templates/use-mutation-basic.tsx
@@ -0,0 +1,201 @@
+// src/hooks/useTodoMutations.ts
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import type { Todo } from './useTodos'
+
+/**
+ * Input types for mutations
+ */
+type AddTodoInput = {
+  title: string
+  completed?: boolean
+}
+
+type UpdateTodoInput = {
+  id: number
+  title?: string
+  completed?: boolean
+}
+
+/**
+ * API functions
+ */
+async function addTodo(newTodo: AddTodoInput): Promise<Todo> {
+  const response = await fetch('https://jsonplaceholder.typicode.com/todos', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ ...newTodo, userId: 1 }),
+  })
+
+  if (!response.ok) {
+    throw new Error(`Failed to add todo: ${response.statusText}`)
+  }
+
+  return response.json()
+}
+
+async function updateTodo({ id, ...updates }: UpdateTodoInput): Promise<Todo> {
+  const response = await fetch(
+    `https://jsonplaceholder.typicode.com/todos/${id}`,
+    {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(updates),
+    }
+  )
+
+  if (!response.ok) {
+    throw new Error(`Failed to update todo: ${response.statusText}`)
+  }
+
+  return response.json()
+}
+
+async function deleteTodo(id: number): Promise<void> {
+  const response = await fetch(
+    `https://jsonplaceholder.typicode.com/todos/${id}`,
+    {
+      method: 'DELETE',
+    }
+  )
+
+  if (!response.ok) {
+    throw new Error(`Failed to delete todo: ${response.statusText}`)
+  }
+}
+
+/**
+ * Hook: Add new todo
+ *
+ * Usage:
+ * const { mutate, isPending, isError, error } = useAddTodo()
+ * mutate({ title: 'New todo' })
+ */
+export function useAddTodo() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: addTodo,
+
+    // Runs on successful mutation
+    onSuccess: () => {
+      // Invalidate todos query to trigger refetch
+      queryClient.invalidateQueries({ queryKey: ['todos'] })
+    },
+
+    // Runs on error
+    onError: (error) => {
+      console.error('Failed to add todo:', error)
+      // Add user notification here (toast, alert, etc.)
+    },
+
+    // Runs regardless of success or error
+    onSettled: () => {
+      console.log('Add todo mutation completed')
+    },
+  })
+}
+
+/**
+ * Hook: Update existing todo
+ *
+ * Usage:
+ * const { mutate } = useUpdateTodo()
+ * mutate({ id: 1, completed: true })
+ */
+export function useUpdateTodo() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: updateTodo,
+
+    onSuccess: (updatedTodo) => {
+      // Update specific todo in cache
+      queryClient.setQueryData<Todo>(['todos', updatedTodo.id], updatedTodo)
+
+      // Invalidate list to refetch
+      queryClient.invalidateQueries({ queryKey: ['todos'] })
+    },
+  })
+}
+
+/**
+ * Hook: Delete todo
+ *
+ * Usage:
+ * const { mutate } = useDeleteTodo()
+ * mutate(todoId)
+ */
+export function useDeleteTodo() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: deleteTodo,
+
+    onSuccess: (_, deletedId) => {
+      // Remove from list cache
+      queryClient.setQueryData<Todo[]>(['todos'], (old = []) =>
+        old.filter((todo) => todo.id !== deletedId)
+      )
+
+      // Remove individual todo cache
+      queryClient.removeQueries({ queryKey: ['todos', deletedId] })
+    },
+  })
+}
+
+/**
+ * Component usage example:
+ */
+export function AddTodoForm() {
+  const { mutate, isPending, isError, error } = useAddTodo()
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    const formData = new FormData(e.currentTarget)
+    const title = formData.get('title') as string
+
+    mutate(
+      { title },
+      {
+        // Optional per-mutation callbacks
+        onSuccess: () => {
+          e.currentTarget.reset()
+          console.log('Todo added successfully!')
+        },
+      }
+    )
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input
+        type="text"
+        name="title"
+        placeholder="New todo..."
+        required
+        disabled={isPending}
+      />
+      <button type="submit" disabled={isPending}>
+        {isPending ? 'Adding...' : 'Add Todo'}
+      </button>
+      {isError && <div>Error: {error.message}</div>}
+    </form>
+  )
+}
+
+/**
+ * Key concepts:
+ *
+ * 1. Mutations don't cache data (unlike queries)
+ * 2. Use onSuccess to invalidate related queries
+ * 3. queryClient.invalidateQueries() marks queries as stale and refetches
+ * 4. queryClient.setQueryData() directly updates cache (optimistic update)
+ * 5. queryClient.removeQueries() removes specific query from cache
+ *
+ * Mutation states:
+ * - isPending: Mutation in progress
+ * - isError: Mutation failed
+ * - isSuccess: Mutation succeeded
+ * - data: Returned data from mutationFn
+ * - error: Error if mutation failed
+ */
diff --git a/.cursor/skills/tanstack-query/templates/use-mutation-optimistic.tsx b/.cursor/skills/tanstack-query/templates/use-mutation-optimistic.tsx
new file mode 100644
index 0000000..3dfb0c0
--- /dev/null
+++ b/.cursor/skills/tanstack-query/templates/use-mutation-optimistic.tsx
@@ -0,0 +1,234 @@
+// src/hooks/useOptimisticTodoMutations.ts
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import type { Todo } from './useTodos'
+
+/**
+ * Optimistic Update Pattern
+ *
+ * Updates UI immediately before server responds, then:
+ * - On success: Keep the optimistic update
+ * - On error: Roll back to previous state
+ *
+ * Best for:
+ * - Low-risk actions (toggle, like, favorite)
+ * - Frequently used actions (better UX with instant feedback)
+ *
+ * Avoid for:
+ * - Critical operations (payments, account changes)
+ * - Complex validations (server might reject)
+ */
+
+type AddTodoInput = {
+  title: string
+}
+
+type UpdateTodoInput = {
+  id: number
+  completed: boolean
+}
+
+/**
+ * Optimistic Add Todo
+ *
+ * Immediately shows new todo in UI, then confirms with server
+ */
+export function useOptimisticAddTodo() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (newTodo: AddTodoInput) => {
+      const response = await fetch(
+        'https://jsonplaceholder.typicode.com/todos',
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ ...newTodo, userId: 1, completed: false }),
+        }
+      )
+
+      if (!response.ok) throw new Error('Failed to add todo')
+      return response.json()
+    },
+
+    // Before mutation runs
+    onMutate: async (newTodo) => {
+      // Cancel outgoing refetches (so they don't overwrite our optimistic update)
+      await queryClient.cancelQueries({ queryKey: ['todos'] })
+
+      // Snapshot current value
+      const previousTodos = queryClient.getQueryData<Todo[]>(['todos'])
+
+      // Optimistically update cache
+      queryClient.setQueryData<Todo[]>(['todos'], (old = []) => [
+        ...old,
+        {
+          id: Date.now(), // Temporary ID
+          ...newTodo,
+          completed: false,
+          userId: 1,
+        },
+      ])
+
+      // Return context with snapshot (used for rollback)
+      return { previousTodos }
+    },
+
+    // If mutation fails, rollback using context
+    onError: (err, newTodo, context) => {
+      console.error('Failed to add todo:', err)
+
+      // Restore previous state
+      if (context?.previousTodos) {
+        queryClient.setQueryData(['todos'], context.previousTodos)
+      }
+    },
+
+    // Always refetch after mutation settles (success or error)
+    // Ensures cache matches server state
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ['todos'] })
+    },
+  })
+}
+
+/**
+ * Optimistic Update Todo
+ *
+ * Immediately toggles todo in UI, confirms with server
+ */
+export function useOptimisticUpdateTodo() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async ({ id, completed }: UpdateTodoInput) => {
+      const response = await fetch(
+        `https://jsonplaceholder.typicode.com/todos/${id}`,
+        {
+          method: 'PATCH',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ completed }),
+        }
+      )
+
+      if (!response.ok) throw new Error('Failed to update todo')
+      return response.json()
+    },
+
+    onMutate: async ({ id, completed }) => {
+      await queryClient.cancelQueries({ queryKey: ['todos'] })
+
+      // Snapshot
+      const previousTodos = queryClient.getQueryData<Todo[]>(['todos'])
+
+      // Optimistic update
+      queryClient.setQueryData<Todo[]>(['todos'], (old = []) =>
+        old.map((todo) =>
+          todo.id === id ? { ...todo, completed } : todo
+        )
+      )
+
+      return { previousTodos }
+    },
+
+    onError: (err, variables, context) => {
+      console.error('Failed to update todo:', err)
+      if (context?.previousTodos) {
+        queryClient.setQueryData(['todos'], context.previousTodos)
+      }
+    },
+
+    onSettled: (data, error, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['todos'] })
+      queryClient.invalidateQueries({ queryKey: ['todos', variables.id] })
+    },
+  })
+}
+
+/**
+ * Optimistic Delete Todo
+ *
+ * Immediately removes todo from UI, confirms with server
+ */
+export function useOptimisticDeleteTodo() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (id: number) => {
+      const response = await fetch(
+        `https://jsonplaceholder.typicode.com/todos/${id}`,
+        {
+          method: 'DELETE',
+        }
+      )
+
+      if (!response.ok) throw new Error('Failed to delete todo')
+    },
+
+    onMutate: async (deletedId) => {
+      await queryClient.cancelQueries({ queryKey: ['todos'] })
+
+      const previousTodos = queryClient.getQueryData<Todo[]>(['todos'])
+
+      // Optimistically remove from cache
+      queryClient.setQueryData<Todo[]>(['todos'], (old = []) =>
+        old.filter((todo) => todo.id !== deletedId)
+      )
+
+      return { previousTodos }
+    },
+
+    onError: (err, variables, context) => {
+      console.error('Failed to delete todo:', err)
+      if (context?.previousTodos) {
+        queryClient.setQueryData(['todos'], context.previousTodos)
+      }
+    },
+
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ['todos'] })
+    },
+  })
+}
+
+/**
+ * Component usage example:
+ */
+export function OptimisticTodoItem({ todo }: { todo: Todo }) {
+  const { mutate: updateTodo, isPending: isUpdating } = useOptimisticUpdateTodo()
+  const { mutate: deleteTodo, isPending: isDeleting } = useOptimisticDeleteTodo()
+
+  return (
+    <li style={{ opacity: isUpdating || isDeleting ? 0.5 : 1 }}>
+      <input
+        type="checkbox"
+        checked={todo.completed}
+        onChange={(e) => updateTodo({ id: todo.id, completed: e.target.checked })}
+        disabled={isUpdating || isDeleting}
+      />
+      <span>{todo.title}</span>
+      <button
+        onClick={() => deleteTodo(todo.id)}
+        disabled={isUpdating || isDeleting}
+      >
+        {isDeleting ? 'Deleting...' : 'Delete'}
+      </button>
+    </li>
+  )
+}
+
+/**
+ * Key patterns:
+ *
+ * 1. onMutate: Cancel queries, snapshot state, update cache optimistically
+ * 2. onError: Rollback using context
+ * 3. onSettled: Refetch to ensure cache matches server (always runs)
+ * 4. cancelQueries: Prevent race conditions
+ * 5. Return context from onMutate: Available in onError and onSettled
+ *
+ * Trade-offs:
+ * ✅ Instant UI feedback (feels faster)
+ * ✅ Better UX for common actions
+ * ❌ More complex code
+ * ❌ Risk of inconsistent state if not handled correctly
+ * ❌ Not suitable for critical operations
+ */
diff --git a/.cursor/skills/tanstack-query/templates/use-query-basic.tsx b/.cursor/skills/tanstack-query/templates/use-query-basic.tsx
new file mode 100644
index 0000000..71650a2
--- /dev/null
+++ b/.cursor/skills/tanstack-query/templates/use-query-basic.tsx
@@ -0,0 +1,119 @@
+// src/hooks/useTodos.ts
+import { useQuery, queryOptions } from '@tanstack/react-query'
+
+/**
+ * Type definitions
+ */
+export type Todo = {
+  id: number
+  title: string
+  completed: boolean
+  userId: number
+}
+
+/**
+ * API function - keeps network logic separate
+ */
+async function fetchTodos(): Promise<Todo[]> {
+  const response = await fetch('https://jsonplaceholder.typicode.com/todos')
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch todos: ${response.statusText}`)
+  }
+
+  return response.json()
+}
+
+/**
+ * Query options factory (v5 best practice)
+ *
+ * Benefits:
+ * - Reusable across useQuery, useSuspenseQuery, prefetchQuery
+ * - Perfect type inference
+ * - Single source of truth for queryKey and queryFn
+ */
+export const todosQueryOptions = queryOptions({
+  queryKey: ['todos'],
+  queryFn: fetchTodos,
+  staleTime: 1000 * 60, // 1 minute
+})
+
+/**
+ * Custom hook - encapsulates query logic
+ *
+ * Usage in component:
+ * const { data, isPending, isError, error } = useTodos()
+ */
+export function useTodos() {
+  return useQuery(todosQueryOptions)
+}
+
+/**
+ * Fetch single todo by ID
+ */
+async function fetchTodoById(id: number): Promise<Todo> {
+  const response = await fetch(
+    `https://jsonplaceholder.typicode.com/todos/${id}`
+  )
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch todo ${id}: ${response.statusText}`)
+  }
+
+  return response.json()
+}
+
+/**
+ * Custom hook for fetching single todo
+ *
+ * Usage:
+ * const { data: todo } = useTodo(1)
+ */
+export function useTodo(id: number) {
+  return useQuery({
+    queryKey: ['todos', id],
+    queryFn: () => fetchTodoById(id),
+    enabled: !!id, // Only fetch if id is truthy
+  })
+}
+
+/**
+ * Component usage example:
+ */
+export function TodoList() {
+  const { data, isPending, isError, error, isFetching } = useTodos()
+
+  if (isPending) {
+    return <div>Loading todos...</div>
+  }
+
+  if (isError) {
+    return <div>Error: {error.message}</div>
+  }
+
+  return (
+    <div>
+      <h1>Todos {isFetching && '(Refetching...)'}</h1>
+      <ul>
+        {data.map((todo) => (
+          <li key={todo.id}>
+            <input type="checkbox" checked={todo.completed} readOnly />
+            {todo.title}
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+/**
+ * Key states explained:
+ *
+ * - isPending: No data yet (initial fetch)
+ * - isLoading: isPending && isFetching (loading for first time)
+ * - isFetching: Any background fetch in progress
+ * - isError: Query failed
+ * - isSuccess: Query succeeded and data is available
+ * - data: The fetched data (undefined while isPending)
+ * - error: Error object if query failed
+ */
diff --git a/.cursor/skills/test-driven-development/SKILL.md b/.cursor/skills/test-driven-development/SKILL.md
new file mode 100644
index 0000000..7a751fa
--- /dev/null
+++ b/.cursor/skills/test-driven-development/SKILL.md
@@ -0,0 +1,371 @@
+---
+name: test-driven-development
+description: Use when implementing any feature or bugfix, before writing implementation code
+---
+
+# Test-Driven Development (TDD)
+
+## Overview
+
+Write the test first. Watch it fail. Write minimal code to pass.
+
+**Core principle:** If you didn't watch the test fail, you don't know if it tests the right thing.
+
+**Violating the letter of the rules is violating the spirit of the rules.**
+
+## When to Use
+
+**Always:**
+- New features
+- Bug fixes
+- Refactoring
+- Behavior changes
+
+**Exceptions (ask your human partner):**
+- Throwaway prototypes
+- Generated code
+- Configuration files
+
+Thinking "skip TDD just this once"? Stop. That's rationalization.
+
+## The Iron Law
+
+```
+NO PRODUCTION CODE WITHOUT A FAILING TEST FIRST
+```
+
+Write code before the test? Delete it. Start over.
+
+**No exceptions:**
+- Don't keep it as "reference"
+- Don't "adapt" it while writing tests
+- Don't look at it
+- Delete means delete
+
+Implement fresh from tests. Period.
+
+## Red-Green-Refactor
+
+```dot
+digraph tdd_cycle {
+    rankdir=LR;
+    red [label="RED\nWrite failing test", shape=box, style=filled, fillcolor="#ffcccc"];
+    verify_red [label="Verify fails\ncorrectly", shape=diamond];
+    green [label="GREEN\nMinimal code", shape=box, style=filled, fillcolor="#ccffcc"];
+    verify_green [label="Verify passes\nAll green", shape=diamond];
+    refactor [label="REFACTOR\nClean up", shape=box, style=filled, fillcolor="#ccccff"];
+    next [label="Next", shape=ellipse];
+
+    red -> verify_red;
+    verify_red -> green [label="yes"];
+    verify_red -> red [label="wrong\nfailure"];
+    green -> verify_green;
+    verify_green -> refactor [label="yes"];
+    verify_green -> green [label="no"];
+    refactor -> verify_green [label="stay\ngreen"];
+    verify_green -> next;
+    next -> red;
+}
+```
+
+### RED - Write Failing Test
+
+Write one minimal test showing what should happen.
+
+<Good>
+```typescript
+test('retries failed operations 3 times', async () => {
+  let attempts = 0;
+  const operation = () => {
+    attempts++;
+    if (attempts < 3) throw new Error('fail');
+    return 'success';
+  };
+
+  const result = await retryOperation(operation);
+
+  expect(result).toBe('success');
+  expect(attempts).toBe(3);
+});
+```
+Clear name, tests real behavior, one thing
+</Good>
+
+<Bad>
+```typescript
+test('retry works', async () => {
+  const mock = jest.fn()
+    .mockRejectedValueOnce(new Error())
+    .mockRejectedValueOnce(new Error())
+    .mockResolvedValueOnce('success');
+  await retryOperation(mock);
+  expect(mock).toHaveBeenCalledTimes(3);
+});
+```
+Vague name, tests mock not code
+</Bad>
+
+**Requirements:**
+- One behavior
+- Clear name
+- Real code (no mocks unless unavoidable)
+
+### Verify RED - Watch It Fail
+
+**MANDATORY. Never skip.**
+
+```bash
+npm test path/to/test.test.ts
+```
+
+Confirm:
+- Test fails (not errors)
+- Failure message is expected
+- Fails because feature missing (not typos)
+
+**Test passes?** You're testing existing behavior. Fix test.
+
+**Test errors?** Fix error, re-run until it fails correctly.
+
+### GREEN - Minimal Code
+
+Write simplest code to pass the test.
+
+<Good>
+```typescript
+async function retryOperation<T>(fn: () => Promise<T>): Promise<T> {
+  for (let i = 0; i < 3; i++) {
+    try {
+      return await fn();
+    } catch (e) {
+      if (i === 2) throw e;
+    }
+  }
+  throw new Error('unreachable');
+}
+```
+Just enough to pass
+</Good>
+
+<Bad>
+```typescript
+async function retryOperation<T>(
+  fn: () => Promise<T>,
+  options?: {
+    maxRetries?: number;
+    backoff?: 'linear' | 'exponential';
+    onRetry?: (attempt: number) => void;
+  }
+): Promise<T> {
+  // YAGNI
+}
+```
+Over-engineered
+</Bad>
+
+Don't add features, refactor other code, or "improve" beyond the test.
+
+### Verify GREEN - Watch It Pass
+
+**MANDATORY.**
+
+```bash
+npm test path/to/test.test.ts
+```
+
+Confirm:
+- Test passes
+- Other tests still pass
+- Output pristine (no errors, warnings)
+
+**Test fails?** Fix code, not test.
+
+**Other tests fail?** Fix now.
+
+### REFACTOR - Clean Up
+
+After green only:
+- Remove duplication
+- Improve names
+- Extract helpers
+
+Keep tests green. Don't add behavior.
+
+### Repeat
+
+Next failing test for next feature.
+
+## Good Tests
+
+| Quality | Good | Bad |
+|---------|------|-----|
+| **Minimal** | One thing. "and" in name? Split it. | `test('validates email and domain and whitespace')` |
+| **Clear** | Name describes behavior | `test('test1')` |
+| **Shows intent** | Demonstrates desired API | Obscures what code should do |
+
+## Why Order Matters
+
+**"I'll write tests after to verify it works"**
+
+Tests written after code pass immediately. Passing immediately proves nothing:
+- Might test wrong thing
+- Might test implementation, not behavior
+- Might miss edge cases you forgot
+- You never saw it catch the bug
+
+Test-first forces you to see the test fail, proving it actually tests something.
+
+**"I already manually tested all the edge cases"**
+
+Manual testing is ad-hoc. You think you tested everything but:
+- No record of what you tested
+- Can't re-run when code changes
+- Easy to forget cases under pressure
+- "It worked when I tried it" ≠ comprehensive
+
+Automated tests are systematic. They run the same way every time.
+
+**"Deleting X hours of work is wasteful"**
+
+Sunk cost fallacy. The time is already gone. Your choice now:
+- Delete and rewrite with TDD (X more hours, high confidence)
+- Keep it and add tests after (30 min, low confidence, likely bugs)
+
+The "waste" is keeping code you can't trust. Working code without real tests is technical debt.
+
+**"TDD is dogmatic, being pragmatic means adapting"**
+
+TDD IS pragmatic:
+- Finds bugs before commit (faster than debugging after)
+- Prevents regressions (tests catch breaks immediately)
+- Documents behavior (tests show how to use code)
+- Enables refactoring (change freely, tests catch breaks)
+
+"Pragmatic" shortcuts = debugging in production = slower.
+
+**"Tests after achieve the same goals - it's spirit not ritual"**
+
+No. Tests-after answer "What does this do?" Tests-first answer "What should this do?"
+
+Tests-after are biased by your implementation. You test what you built, not what's required. You verify remembered edge cases, not discovered ones.
+
+Tests-first force edge case discovery before implementing. Tests-after verify you remembered everything (you didn't).
+
+30 minutes of tests after ≠ TDD. You get coverage, lose proof tests work.
+
+## Common Rationalizations
+
+| Excuse | Reality |
+|--------|---------|
+| "Too simple to test" | Simple code breaks. Test takes 30 seconds. |
+| "I'll test after" | Tests passing immediately prove nothing. |
+| "Tests after achieve same goals" | Tests-after = "what does this do?" Tests-first = "what should this do?" |
+| "Already manually tested" | Ad-hoc ≠ systematic. No record, can't re-run. |
+| "Deleting X hours is wasteful" | Sunk cost fallacy. Keeping unverified code is technical debt. |
+| "Keep as reference, write tests first" | You'll adapt it. That's testing after. Delete means delete. |
+| "Need to explore first" | Fine. Throw away exploration, start with TDD. |
+| "Test hard = design unclear" | Listen to test. Hard to test = hard to use. |
+| "TDD will slow me down" | TDD faster than debugging. Pragmatic = test-first. |
+| "Manual test faster" | Manual doesn't prove edge cases. You'll re-test every change. |
+| "Existing code has no tests" | You're improving it. Add tests for existing code. |
+
+## Red Flags - STOP and Start Over
+
+- Code before test
+- Test after implementation
+- Test passes immediately
+- Can't explain why test failed
+- Tests added "later"
+- Rationalizing "just this once"
+- "I already manually tested it"
+- "Tests after achieve the same purpose"
+- "It's about spirit not ritual"
+- "Keep as reference" or "adapt existing code"
+- "Already spent X hours, deleting is wasteful"
+- "TDD is dogmatic, I'm being pragmatic"
+- "This is different because..."
+
+**All of these mean: Delete code. Start over with TDD.**
+
+## Example: Bug Fix
+
+**Bug:** Empty email accepted
+
+**RED**
+```typescript
+test('rejects empty email', async () => {
+  const result = await submitForm({ email: '' });
+  expect(result.error).toBe('Email required');
+});
+```
+
+**Verify RED**
+```bash
+$ npm test
+FAIL: expected 'Email required', got undefined
+```
+
+**GREEN**
+```typescript
+function submitForm(data: FormData) {
+  if (!data.email?.trim()) {
+    return { error: 'Email required' };
+  }
+  // ...
+}
+```
+
+**Verify GREEN**
+```bash
+$ npm test
+PASS
+```
+
+**REFACTOR**
+Extract validation for multiple fields if needed.
+
+## Verification Checklist
+
+Before marking work complete:
+
+- [ ] Every new function/method has a test
+- [ ] Watched each test fail before implementing
+- [ ] Each test failed for expected reason (feature missing, not typo)
+- [ ] Wrote minimal code to pass each test
+- [ ] All tests pass
+- [ ] Output pristine (no errors, warnings)
+- [ ] Tests use real code (mocks only if unavoidable)
+- [ ] Edge cases and errors covered
+
+Can't check all boxes? You skipped TDD. Start over.
+
+## When Stuck
+
+| Problem | Solution |
+|---------|----------|
+| Don't know how to test | Write wished-for API. Write assertion first. Ask your human partner. |
+| Test too complicated | Design too complicated. Simplify interface. |
+| Must mock everything | Code too coupled. Use dependency injection. |
+| Test setup huge | Extract helpers. Still complex? Simplify design. |
+
+## Debugging Integration
+
+Bug found? Write failing test reproducing it. Follow TDD cycle. Test proves fix and prevents regression.
+
+Never fix bugs without a test.
+
+## Testing Anti-Patterns
+
+When adding mocks or test utilities, read @testing-anti-patterns.md to avoid common pitfalls:
+- Testing mock behavior instead of real behavior
+- Adding test-only methods to production classes
+- Mocking without understanding dependencies
+
+## Final Rule
+
+```
+Production code → test exists and failed first
+Otherwise → not TDD
+```
+
+No exceptions without your human partner's permission.
diff --git a/.cursor/skills/test-driven-development/testing-anti-patterns.md b/.cursor/skills/test-driven-development/testing-anti-patterns.md
new file mode 100644
index 0000000..e77ab6b
--- /dev/null
+++ b/.cursor/skills/test-driven-development/testing-anti-patterns.md
@@ -0,0 +1,299 @@
+# Testing Anti-Patterns
+
+**Load this reference when:** writing or changing tests, adding mocks, or tempted to add test-only methods to production code.
+
+## Overview
+
+Tests must verify real behavior, not mock behavior. Mocks are a means to isolate, not the thing being tested.
+
+**Core principle:** Test what the code does, not what the mocks do.
+
+**Following strict TDD prevents these anti-patterns.**
+
+## The Iron Laws
+
+```
+1. NEVER test mock behavior
+2. NEVER add test-only methods to production classes
+3. NEVER mock without understanding dependencies
+```
+
+## Anti-Pattern 1: Testing Mock Behavior
+
+**The violation:**
+```typescript
+// ❌ BAD: Testing that the mock exists
+test('renders sidebar', () => {
+  render(<Page />);
+  expect(screen.getByTestId('sidebar-mock')).toBeInTheDocument();
+});
+```
+
+**Why this is wrong:**
+- You're verifying the mock works, not that the component works
+- Test passes when mock is present, fails when it's not
+- Tells you nothing about real behavior
+
+**your human partner's correction:** "Are we testing the behavior of a mock?"
+
+**The fix:**
+```typescript
+// ✅ GOOD: Test real component or don't mock it
+test('renders sidebar', () => {
+  render(<Page />);  // Don't mock sidebar
+  expect(screen.getByRole('navigation')).toBeInTheDocument();
+});
+
+// OR if sidebar must be mocked for isolation:
+// Don't assert on the mock - test Page's behavior with sidebar present
+```
+
+### Gate Function
+
+```
+BEFORE asserting on any mock element:
+  Ask: "Am I testing real component behavior or just mock existence?"
+
+  IF testing mock existence:
+    STOP - Delete the assertion or unmock the component
+
+  Test real behavior instead
+```
+
+## Anti-Pattern 2: Test-Only Methods in Production
+
+**The violation:**
+```typescript
+// ❌ BAD: destroy() only used in tests
+class Session {
+  async destroy() {  // Looks like production API!
+    await this._workspaceManager?.destroyWorkspace(this.id);
+    // ... cleanup
+  }
+}
+
+// In tests
+afterEach(() => session.destroy());
+```
+
+**Why this is wrong:**
+- Production class polluted with test-only code
+- Dangerous if accidentally called in production
+- Violates YAGNI and separation of concerns
+- Confuses object lifecycle with entity lifecycle
+
+**The fix:**
+```typescript
+// ✅ GOOD: Test utilities handle test cleanup
+// Session has no destroy() - it's stateless in production
+
+// In test-utils/
+export async function cleanupSession(session: Session) {
+  const workspace = session.getWorkspaceInfo();
+  if (workspace) {
+    await workspaceManager.destroyWorkspace(workspace.id);
+  }
+}
+
+// In tests
+afterEach(() => cleanupSession(session));
+```
+
+### Gate Function
+
+```
+BEFORE adding any method to production class:
+  Ask: "Is this only used by tests?"
+
+  IF yes:
+    STOP - Don't add it
+    Put it in test utilities instead
+
+  Ask: "Does this class own this resource's lifecycle?"
+
+  IF no:
+    STOP - Wrong class for this method
+```
+
+## Anti-Pattern 3: Mocking Without Understanding
+
+**The violation:**
+```typescript
+// ❌ BAD: Mock breaks test logic
+test('detects duplicate server', () => {
+  // Mock prevents config write that test depends on!
+  vi.mock('ToolCatalog', () => ({
+    discoverAndCacheTools: vi.fn().mockResolvedValue(undefined)
+  }));
+
+  await addServer(config);
+  await addServer(config);  // Should throw - but won't!
+});
+```
+
+**Why this is wrong:**
+- Mocked method had side effect test depended on (writing config)
+- Over-mocking to "be safe" breaks actual behavior
+- Test passes for wrong reason or fails mysteriously
+
+**The fix:**
+```typescript
+// ✅ GOOD: Mock at correct level
+test('detects duplicate server', () => {
+  // Mock the slow part, preserve behavior test needs
+  vi.mock('MCPServerManager'); // Just mock slow server startup
+
+  await addServer(config);  // Config written
+  await addServer(config);  // Duplicate detected ✓
+});
+```
+
+### Gate Function
+
+```
+BEFORE mocking any method:
+  STOP - Don't mock yet
+
+  1. Ask: "What side effects does the real method have?"
+  2. Ask: "Does this test depend on any of those side effects?"
+  3. Ask: "Do I fully understand what this test needs?"
+
+  IF depends on side effects:
+    Mock at lower level (the actual slow/external operation)
+    OR use test doubles that preserve necessary behavior
+    NOT the high-level method the test depends on
+
+  IF unsure what test depends on:
+    Run test with real implementation FIRST
+    Observe what actually needs to happen
+    THEN add minimal mocking at the right level
+
+  Red flags:
+    - "I'll mock this to be safe"
+    - "This might be slow, better mock it"
+    - Mocking without understanding the dependency chain
+```
+
+## Anti-Pattern 4: Incomplete Mocks
+
+**The violation:**
+```typescript
+// ❌ BAD: Partial mock - only fields you think you need
+const mockResponse = {
+  status: 'success',
+  data: { userId: '123', name: 'Alice' }
+  // Missing: metadata that downstream code uses
+};
+
+// Later: breaks when code accesses response.metadata.requestId
+```
+
+**Why this is wrong:**
+- **Partial mocks hide structural assumptions** - You only mocked fields you know about
+- **Downstream code may depend on fields you didn't include** - Silent failures
+- **Tests pass but integration fails** - Mock incomplete, real API complete
+- **False confidence** - Test proves nothing about real behavior
+
+**The Iron Rule:** Mock the COMPLETE data structure as it exists in reality, not just fields your immediate test uses.
+
+**The fix:**
+```typescript
+// ✅ GOOD: Mirror real API completeness
+const mockResponse = {
+  status: 'success',
+  data: { userId: '123', name: 'Alice' },
+  metadata: { requestId: 'req-789', timestamp: 1234567890 }
+  // All fields real API returns
+};
+```
+
+### Gate Function
+
+```
+BEFORE creating mock responses:
+  Check: "What fields does the real API response contain?"
+
+  Actions:
+    1. Examine actual API response from docs/examples
+    2. Include ALL fields system might consume downstream
+    3. Verify mock matches real response schema completely
+
+  Critical:
+    If you're creating a mock, you must understand the ENTIRE structure
+    Partial mocks fail silently when code depends on omitted fields
+
+  If uncertain: Include all documented fields
+```
+
+## Anti-Pattern 5: Integration Tests as Afterthought
+
+**The violation:**
+```
+✅ Implementation complete
+❌ No tests written
+"Ready for testing"
+```
+
+**Why this is wrong:**
+- Testing is part of implementation, not optional follow-up
+- TDD would have caught this
+- Can't claim complete without tests
+
+**The fix:**
+```
+TDD cycle:
+1. Write failing test
+2. Implement to pass
+3. Refactor
+4. THEN claim complete
+```
+
+## When Mocks Become Too Complex
+
+**Warning signs:**
+- Mock setup longer than test logic
+- Mocking everything to make test pass
+- Mocks missing methods real components have
+- Test breaks when mock changes
+
+**your human partner's question:** "Do we need to be using a mock here?"
+
+**Consider:** Integration tests with real components often simpler than complex mocks
+
+## TDD Prevents These Anti-Patterns
+
+**Why TDD helps:**
+1. **Write test first** → Forces you to think about what you're actually testing
+2. **Watch it fail** → Confirms test tests real behavior, not mocks
+3. **Minimal implementation** → No test-only methods creep in
+4. **Real dependencies** → You see what the test actually needs before mocking
+
+**If you're testing mock behavior, you violated TDD** - you added mocks without watching test fail against real code first.
+
+## Quick Reference
+
+| Anti-Pattern | Fix |
+|--------------|-----|
+| Assert on mock elements | Test real component or unmock it |
+| Test-only methods in production | Move to test utilities |
+| Mock without understanding | Understand dependencies first, mock minimally |
+| Incomplete mocks | Mirror real API completely |
+| Tests as afterthought | TDD - tests first |
+| Over-complex mocks | Consider integration tests |
+
+## Red Flags
+
+- Assertion checks for `*-mock` test IDs
+- Methods only called in test files
+- Mock setup is >50% of test
+- Test fails when you remove mock
+- Can't explain why mock is needed
+- Mocking "just to be safe"
+
+## The Bottom Line
+
+**Mocks are tools to isolate, not things to test.**
+
+If TDD reveals you're testing mock behavior, you've gone wrong.
+
+Fix: Test real behavior or question why you're mocking at all.
diff --git a/.cursor/skills/vercel-react-best-practices/AGENTS.md b/.cursor/skills/vercel-react-best-practices/AGENTS.md
new file mode 100644
index 0000000..898afb3
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/AGENTS.md
@@ -0,0 +1,2249 @@
+# React Best Practices
+
+**Version 0.1.0**  
+Vercel Engineering  
+January 2026
+
+> **Note:**  
+> This document is mainly for agents and LLMs to follow when maintaining,  
+> generating, or refactoring React and Next.js codebases at Vercel. Humans  
+> may also find it useful, but guidance here is optimized for automation  
+> and consistency by AI-assisted workflows.
+
+---
+
+## Abstract
+
+Comprehensive performance optimization guide for React and Next.js applications, designed for AI agents and LLMs. Contains 40+ rules across 8 categories, prioritized by impact from critical (eliminating waterfalls, reducing bundle size) to incremental (advanced patterns). Each rule includes detailed explanations, real-world examples comparing incorrect vs. correct implementations, and specific impact metrics to guide automated refactoring and code generation.
+
+---
+
+## Table of Contents
+
+1. [Eliminating Waterfalls](#1-eliminating-waterfalls) — **CRITICAL**
+   - 1.1 [Defer Await Until Needed](#11-defer-await-until-needed)
+   - 1.2 [Dependency-Based Parallelization](#12-dependency-based-parallelization)
+   - 1.3 [Prevent Waterfall Chains in API Routes](#13-prevent-waterfall-chains-in-api-routes)
+   - 1.4 [Promise.all() for Independent Operations](#14-promiseall-for-independent-operations)
+   - 1.5 [Strategic Suspense Boundaries](#15-strategic-suspense-boundaries)
+2. [Bundle Size Optimization](#2-bundle-size-optimization) — **CRITICAL**
+   - 2.1 [Avoid Barrel File Imports](#21-avoid-barrel-file-imports)
+   - 2.2 [Conditional Module Loading](#22-conditional-module-loading)
+   - 2.3 [Defer Non-Critical Third-Party Libraries](#23-defer-non-critical-third-party-libraries)
+   - 2.4 [Dynamic Imports for Heavy Components](#24-dynamic-imports-for-heavy-components)
+   - 2.5 [Preload Based on User Intent](#25-preload-based-on-user-intent)
+3. [Server-Side Performance](#3-server-side-performance) — **HIGH**
+   - 3.1 [Cross-Request LRU Caching](#31-cross-request-lru-caching)
+   - 3.2 [Minimize Serialization at RSC Boundaries](#32-minimize-serialization-at-rsc-boundaries)
+   - 3.3 [Parallel Data Fetching with Component Composition](#33-parallel-data-fetching-with-component-composition)
+   - 3.4 [Per-Request Deduplication with React.cache()](#34-per-request-deduplication-with-reactcache)
+   - 3.5 [Use after() for Non-Blocking Operations](#35-use-after-for-non-blocking-operations)
+4. [Client-Side Data Fetching](#4-client-side-data-fetching) — **MEDIUM-HIGH**
+   - 4.1 [Deduplicate Global Event Listeners](#41-deduplicate-global-event-listeners)
+   - 4.2 [Use SWR for Automatic Deduplication](#42-use-swr-for-automatic-deduplication)
+5. [Re-render Optimization](#5-re-render-optimization) — **MEDIUM**
+   - 5.1 [Defer State Reads to Usage Point](#51-defer-state-reads-to-usage-point)
+   - 5.2 [Extract to Memoized Components](#52-extract-to-memoized-components)
+   - 5.3 [Narrow Effect Dependencies](#53-narrow-effect-dependencies)
+   - 5.4 [Subscribe to Derived State](#54-subscribe-to-derived-state)
+   - 5.5 [Use Functional setState Updates](#55-use-functional-setstate-updates)
+   - 5.6 [Use Lazy State Initialization](#56-use-lazy-state-initialization)
+   - 5.7 [Use Transitions for Non-Urgent Updates](#57-use-transitions-for-non-urgent-updates)
+6. [Rendering Performance](#6-rendering-performance) — **MEDIUM**
+   - 6.1 [Animate SVG Wrapper Instead of SVG Element](#61-animate-svg-wrapper-instead-of-svg-element)
+   - 6.2 [CSS content-visibility for Long Lists](#62-css-content-visibility-for-long-lists)
+   - 6.3 [Hoist Static JSX Elements](#63-hoist-static-jsx-elements)
+   - 6.4 [Optimize SVG Precision](#64-optimize-svg-precision)
+   - 6.5 [Prevent Hydration Mismatch Without Flickering](#65-prevent-hydration-mismatch-without-flickering)
+   - 6.6 [Use Activity Component for Show/Hide](#66-use-activity-component-for-showhide)
+   - 6.7 [Use Explicit Conditional Rendering](#67-use-explicit-conditional-rendering)
+7. [JavaScript Performance](#7-javascript-performance) — **LOW-MEDIUM**
+   - 7.1 [Batch DOM CSS Changes](#71-batch-dom-css-changes)
+   - 7.2 [Build Index Maps for Repeated Lookups](#72-build-index-maps-for-repeated-lookups)
+   - 7.3 [Cache Property Access in Loops](#73-cache-property-access-in-loops)
+   - 7.4 [Cache Repeated Function Calls](#74-cache-repeated-function-calls)
+   - 7.5 [Cache Storage API Calls](#75-cache-storage-api-calls)
+   - 7.6 [Combine Multiple Array Iterations](#76-combine-multiple-array-iterations)
+   - 7.7 [Early Length Check for Array Comparisons](#77-early-length-check-for-array-comparisons)
+   - 7.8 [Early Return from Functions](#78-early-return-from-functions)
+   - 7.9 [Hoist RegExp Creation](#79-hoist-regexp-creation)
+   - 7.10 [Use Loop for Min/Max Instead of Sort](#710-use-loop-for-minmax-instead-of-sort)
+   - 7.11 [Use Set/Map for O(1) Lookups](#711-use-setmap-for-o1-lookups)
+   - 7.12 [Use toSorted() Instead of sort() for Immutability](#712-use-tosorted-instead-of-sort-for-immutability)
+8. [Advanced Patterns](#8-advanced-patterns) — **LOW**
+   - 8.1 [Store Event Handlers in Refs](#81-store-event-handlers-in-refs)
+   - 8.2 [useLatest for Stable Callback Refs](#82-uselatest-for-stable-callback-refs)
+
+---
+
+## 1. Eliminating Waterfalls
+
+**Impact: CRITICAL**
+
+Waterfalls are the #1 performance killer. Each sequential await adds full network latency. Eliminating them yields the largest gains.
+
+### 1.1 Defer Await Until Needed
+
+**Impact: HIGH (avoids blocking unused code paths)**
+
+Move `await` operations into the branches where they're actually used to avoid blocking code paths that don't need them.
+
+**Incorrect: blocks both branches**
+
+```typescript
+async function handleRequest(userId: string, skipProcessing: boolean) {
+  const userData = await fetchUserData(userId)
+  
+  if (skipProcessing) {
+    // Returns immediately but still waited for userData
+    return { skipped: true }
+  }
+  
+  // Only this branch uses userData
+  return processUserData(userData)
+}
+```
+
+**Correct: only blocks when needed**
+
+```typescript
+async function handleRequest(userId: string, skipProcessing: boolean) {
+  if (skipProcessing) {
+    // Returns immediately without waiting
+    return { skipped: true }
+  }
+  
+  // Fetch only when needed
+  const userData = await fetchUserData(userId)
+  return processUserData(userData)
+}
+```
+
+**Another example: early return optimization**
+
+```typescript
+// Incorrect: always fetches permissions
+async function updateResource(resourceId: string, userId: string) {
+  const permissions = await fetchPermissions(userId)
+  const resource = await getResource(resourceId)
+  
+  if (!resource) {
+    return { error: 'Not found' }
+  }
+  
+  if (!permissions.canEdit) {
+    return { error: 'Forbidden' }
+  }
+  
+  return await updateResourceData(resource, permissions)
+}
+
+// Correct: fetches only when needed
+async function updateResource(resourceId: string, userId: string) {
+  const resource = await getResource(resourceId)
+  
+  if (!resource) {
+    return { error: 'Not found' }
+  }
+  
+  const permissions = await fetchPermissions(userId)
+  
+  if (!permissions.canEdit) {
+    return { error: 'Forbidden' }
+  }
+  
+  return await updateResourceData(resource, permissions)
+}
+```
+
+This optimization is especially valuable when the skipped branch is frequently taken, or when the deferred operation is expensive.
+
+### 1.2 Dependency-Based Parallelization
+
+**Impact: CRITICAL (2-10× improvement)**
+
+For operations with partial dependencies, use `better-all` to maximize parallelism. It automatically starts each task at the earliest possible moment.
+
+**Incorrect: profile waits for config unnecessarily**
+
+```typescript
+const [user, config] = await Promise.all([
+  fetchUser(),
+  fetchConfig()
+])
+const profile = await fetchProfile(user.id)
+```
+
+**Correct: config and profile run in parallel**
+
+```typescript
+import { all } from 'better-all'
+
+const { user, config, profile } = await all({
+  async user() { return fetchUser() },
+  async config() { return fetchConfig() },
+  async profile() {
+    return fetchProfile((await this.$.user).id)
+  }
+})
+```
+
+Reference: [https://github.com/shuding/better-all](https://github.com/shuding/better-all)
+
+### 1.3 Prevent Waterfall Chains in API Routes
+
+**Impact: CRITICAL (2-10× improvement)**
+
+In API routes and Server Actions, start independent operations immediately, even if you don't await them yet.
+
+**Incorrect: config waits for auth, data waits for both**
+
+```typescript
+export async function GET(request: Request) {
+  const session = await auth()
+  const config = await fetchConfig()
+  const data = await fetchData(session.user.id)
+  return Response.json({ data, config })
+}
+```
+
+**Correct: auth and config start immediately**
+
+```typescript
+export async function GET(request: Request) {
+  const sessionPromise = auth()
+  const configPromise = fetchConfig()
+  const session = await sessionPromise
+  const [config, data] = await Promise.all([
+    configPromise,
+    fetchData(session.user.id)
+  ])
+  return Response.json({ data, config })
+}
+```
+
+For operations with more complex dependency chains, use `better-all` to automatically maximize parallelism (see Dependency-Based Parallelization).
+
+### 1.4 Promise.all() for Independent Operations
+
+**Impact: CRITICAL (2-10× improvement)**
+
+When async operations have no interdependencies, execute them concurrently using `Promise.all()`.
+
+**Incorrect: sequential execution, 3 round trips**
+
+```typescript
+const user = await fetchUser()
+const posts = await fetchPosts()
+const comments = await fetchComments()
+```
+
+**Correct: parallel execution, 1 round trip**
+
+```typescript
+const [user, posts, comments] = await Promise.all([
+  fetchUser(),
+  fetchPosts(),
+  fetchComments()
+])
+```
+
+### 1.5 Strategic Suspense Boundaries
+
+**Impact: HIGH (faster initial paint)**
+
+Instead of awaiting data in async components before returning JSX, use Suspense boundaries to show the wrapper UI faster while data loads.
+
+**Incorrect: wrapper blocked by data fetching**
+
+```tsx
+async function Page() {
+  const data = await fetchData() // Blocks entire page
+  
+  return (
+    <div>
+      <div>Sidebar</div>
+      <div>Header</div>
+      <div>
+        <DataDisplay data={data} />
+      </div>
+      <div>Footer</div>
+    </div>
+  )
+}
+```
+
+The entire layout waits for data even though only the middle section needs it.
+
+**Correct: wrapper shows immediately, data streams in**
+
+```tsx
+function Page() {
+  return (
+    <div>
+      <div>Sidebar</div>
+      <div>Header</div>
+      <div>
+        <Suspense fallback={<Skeleton />}>
+          <DataDisplay />
+        </Suspense>
+      </div>
+      <div>Footer</div>
+    </div>
+  )
+}
+
+async function DataDisplay() {
+  const data = await fetchData() // Only blocks this component
+  return <div>{data.content}</div>
+}
+```
+
+Sidebar, Header, and Footer render immediately. Only DataDisplay waits for data.
+
+**Alternative: share promise across components**
+
+```tsx
+function Page() {
+  // Start fetch immediately, but don't await
+  const dataPromise = fetchData()
+  
+  return (
+    <div>
+      <div>Sidebar</div>
+      <div>Header</div>
+      <Suspense fallback={<Skeleton />}>
+        <DataDisplay dataPromise={dataPromise} />
+        <DataSummary dataPromise={dataPromise} />
+      </Suspense>
+      <div>Footer</div>
+    </div>
+  )
+}
+
+function DataDisplay({ dataPromise }: { dataPromise: Promise<Data> }) {
+  const data = use(dataPromise) // Unwraps the promise
+  return <div>{data.content}</div>
+}
+
+function DataSummary({ dataPromise }: { dataPromise: Promise<Data> }) {
+  const data = use(dataPromise) // Reuses the same promise
+  return <div>{data.summary}</div>
+}
+```
+
+Both components share the same promise, so only one fetch occurs. Layout renders immediately while both components wait together.
+
+**When NOT to use this pattern:**
+
+- Critical data needed for layout decisions (affects positioning)
+
+- SEO-critical content above the fold
+
+- Small, fast queries where suspense overhead isn't worth it
+
+- When you want to avoid layout shift (loading → content jump)
+
+**Trade-off:** Faster initial paint vs potential layout shift. Choose based on your UX priorities.
+
+---
+
+## 2. Bundle Size Optimization
+
+**Impact: CRITICAL**
+
+Reducing initial bundle size improves Time to Interactive and Largest Contentful Paint.
+
+### 2.1 Avoid Barrel File Imports
+
+**Impact: CRITICAL (200-800ms import cost, slow builds)**
+
+Import directly from source files instead of barrel files to avoid loading thousands of unused modules. **Barrel files** are entry points that re-export multiple modules (e.g., `index.js` that does `export * from './module'`).
+
+Popular icon and component libraries can have **up to 10,000 re-exports** in their entry file. For many React packages, **it takes 200-800ms just to import them**, affecting both development speed and production cold starts.
+
+**Why tree-shaking doesn't help:** When a library is marked as external (not bundled), the bundler can't optimize it. If you bundle it to enable tree-shaking, builds become substantially slower analyzing the entire module graph.
+
+**Incorrect: imports entire library**
+
+```tsx
+import { Check, X, Menu } from 'lucide-react'
+// Loads 1,583 modules, takes ~2.8s extra in dev
+// Runtime cost: 200-800ms on every cold start
+
+import { Button, TextField } from '@mui/material'
+// Loads 2,225 modules, takes ~4.2s extra in dev
+```
+
+**Correct: imports only what you need**
+
+```tsx
+import Check from 'lucide-react/dist/esm/icons/check'
+import X from 'lucide-react/dist/esm/icons/x'
+import Menu from 'lucide-react/dist/esm/icons/menu'
+// Loads only 3 modules (~2KB vs ~1MB)
+
+import Button from '@mui/material/Button'
+import TextField from '@mui/material/TextField'
+// Loads only what you use
+```
+
+**Alternative: Next.js 13.5+**
+
+```js
+// next.config.js - use optimizePackageImports
+module.exports = {
+  experimental: {
+    optimizePackageImports: ['lucide-react', '@mui/material']
+  }
+}
+
+// Then you can keep the ergonomic barrel imports:
+import { Check, X, Menu } from 'lucide-react'
+// Automatically transformed to direct imports at build time
+```
+
+Direct imports provide 15-70% faster dev boot, 28% faster builds, 40% faster cold starts, and significantly faster HMR.
+
+Libraries commonly affected: `lucide-react`, `@mui/material`, `@mui/icons-material`, `@tabler/icons-react`, `react-icons`, `@headlessui/react`, `@radix-ui/react-*`, `lodash`, `ramda`, `date-fns`, `rxjs`, `react-use`.
+
+Reference: [https://vercel.com/blog/how-we-optimized-package-imports-in-next-js](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js)
+
+### 2.2 Conditional Module Loading
+
+**Impact: HIGH (loads large data only when needed)**
+
+Load large data or modules only when a feature is activated.
+
+**Example: lazy-load animation frames**
+
+```tsx
+function AnimationPlayer({ enabled }: { enabled: boolean }) {
+  const [frames, setFrames] = useState<Frame[] | null>(null)
+
+  useEffect(() => {
+    if (enabled && !frames && typeof window !== 'undefined') {
+      import('./animation-frames.js')
+        .then(mod => setFrames(mod.frames))
+        .catch(() => setEnabled(false))
+    }
+  }, [enabled, frames])
+
+  if (!frames) return <Skeleton />
+  return <Canvas frames={frames} />
+}
+```
+
+The `typeof window !== 'undefined'` check prevents bundling this module for SSR, optimizing server bundle size and build speed.
+
+### 2.3 Defer Non-Critical Third-Party Libraries
+
+**Impact: MEDIUM (loads after hydration)**
+
+Analytics, logging, and error tracking don't block user interaction. Load them after hydration.
+
+**Incorrect: blocks initial bundle**
+
+```tsx
+import { Analytics } from '@vercel/analytics/react'
+
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        {children}
+        <Analytics />
+      </body>
+    </html>
+  )
+}
+```
+
+**Correct: loads after hydration**
+
+```tsx
+import dynamic from 'next/dynamic'
+
+const Analytics = dynamic(
+  () => import('@vercel/analytics/react').then(m => m.Analytics),
+  { ssr: false }
+)
+
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        {children}
+        <Analytics />
+      </body>
+    </html>
+  )
+}
+```
+
+### 2.4 Dynamic Imports for Heavy Components
+
+**Impact: CRITICAL (directly affects TTI and LCP)**
+
+Use `next/dynamic` to lazy-load large components not needed on initial render.
+
+**Incorrect: Monaco bundles with main chunk ~300KB**
+
+```tsx
+import { MonacoEditor } from './monaco-editor'
+
+function CodePanel({ code }: { code: string }) {
+  return <MonacoEditor value={code} />
+}
+```
+
+**Correct: Monaco loads on demand**
+
+```tsx
+import dynamic from 'next/dynamic'
+
+const MonacoEditor = dynamic(
+  () => import('./monaco-editor').then(m => m.MonacoEditor),
+  { ssr: false }
+)
+
+function CodePanel({ code }: { code: string }) {
+  return <MonacoEditor value={code} />
+}
+```
+
+### 2.5 Preload Based on User Intent
+
+**Impact: MEDIUM (reduces perceived latency)**
+
+Preload heavy bundles before they're needed to reduce perceived latency.
+
+**Example: preload on hover/focus**
+
+```tsx
+function EditorButton({ onClick }: { onClick: () => void }) {
+  const preload = () => {
+    if (typeof window !== 'undefined') {
+      void import('./monaco-editor')
+    }
+  }
+
+  return (
+    <button
+      onMouseEnter={preload}
+      onFocus={preload}
+      onClick={onClick}
+    >
+      Open Editor
+    </button>
+  )
+}
+```
+
+**Example: preload when feature flag is enabled**
+
+```tsx
+function FlagsProvider({ children, flags }: Props) {
+  useEffect(() => {
+    if (flags.editorEnabled && typeof window !== 'undefined') {
+      void import('./monaco-editor').then(mod => mod.init())
+    }
+  }, [flags.editorEnabled])
+
+  return <FlagsContext.Provider value={flags}>
+    {children}
+  </FlagsContext.Provider>
+}
+```
+
+The `typeof window !== 'undefined'` check prevents bundling preloaded modules for SSR, optimizing server bundle size and build speed.
+
+---
+
+## 3. Server-Side Performance
+
+**Impact: HIGH**
+
+Optimizing server-side rendering and data fetching eliminates server-side waterfalls and reduces response times.
+
+### 3.1 Cross-Request LRU Caching
+
+**Impact: HIGH (caches across requests)**
+
+`React.cache()` only works within one request. For data shared across sequential requests (user clicks button A then button B), use an LRU cache.
+
+**Implementation:**
+
+```typescript
+import { LRUCache } from 'lru-cache'
+
+const cache = new LRUCache<string, any>({
+  max: 1000,
+  ttl: 5 * 60 * 1000  // 5 minutes
+})
+
+export async function getUser(id: string) {
+  const cached = cache.get(id)
+  if (cached) return cached
+
+  const user = await db.user.findUnique({ where: { id } })
+  cache.set(id, user)
+  return user
+}
+
+// Request 1: DB query, result cached
+// Request 2: cache hit, no DB query
+```
+
+Use when sequential user actions hit multiple endpoints needing the same data within seconds.
+
+**With Vercel's [Fluid Compute](https://vercel.com/docs/fluid-compute):** LRU caching is especially effective because multiple concurrent requests can share the same function instance and cache. This means the cache persists across requests without needing external storage like Redis.
+
+**In traditional serverless:** Each invocation runs in isolation, so consider Redis for cross-process caching.
+
+Reference: [https://github.com/isaacs/node-lru-cache](https://github.com/isaacs/node-lru-cache)
+
+### 3.2 Minimize Serialization at RSC Boundaries
+
+**Impact: HIGH (reduces data transfer size)**
+
+The React Server/Client boundary serializes all object properties into strings and embeds them in the HTML response and subsequent RSC requests. This serialized data directly impacts page weight and load time, so **size matters a lot**. Only pass fields that the client actually uses.
+
+**Incorrect: serializes all 50 fields**
+
+```tsx
+async function Page() {
+  const user = await fetchUser()  // 50 fields
+  return <Profile user={user} />
+}
+
+'use client'
+function Profile({ user }: { user: User }) {
+  return <div>{user.name}</div>  // uses 1 field
+}
+```
+
+**Correct: serializes only 1 field**
+
+```tsx
+async function Page() {
+  const user = await fetchUser()
+  return <Profile name={user.name} />
+}
+
+'use client'
+function Profile({ name }: { name: string }) {
+  return <div>{name}</div>
+}
+```
+
+### 3.3 Parallel Data Fetching with Component Composition
+
+**Impact: CRITICAL (eliminates server-side waterfalls)**
+
+React Server Components execute sequentially within a tree. Restructure with composition to parallelize data fetching.
+
+**Incorrect: Sidebar waits for Page's fetch to complete**
+
+```tsx
+export default async function Page() {
+  const header = await fetchHeader()
+  return (
+    <div>
+      <div>{header}</div>
+      <Sidebar />
+    </div>
+  )
+}
+
+async function Sidebar() {
+  const items = await fetchSidebarItems()
+  return <nav>{items.map(renderItem)}</nav>
+}
+```
+
+**Correct: both fetch simultaneously**
+
+```tsx
+async function Header() {
+  const data = await fetchHeader()
+  return <div>{data}</div>
+}
+
+async function Sidebar() {
+  const items = await fetchSidebarItems()
+  return <nav>{items.map(renderItem)}</nav>
+}
+
+export default function Page() {
+  return (
+    <div>
+      <Header />
+      <Sidebar />
+    </div>
+  )
+}
+```
+
+**Alternative with children prop:**
+
+```tsx
+async function Layout({ children }: { children: ReactNode }) {
+  const header = await fetchHeader()
+  return (
+    <div>
+      <div>{header}</div>
+      {children}
+    </div>
+  )
+}
+
+async function Sidebar() {
+  const items = await fetchSidebarItems()
+  return <nav>{items.map(renderItem)}</nav>
+}
+
+export default function Page() {
+  return (
+    <Layout>
+      <Sidebar />
+    </Layout>
+  )
+}
+```
+
+### 3.4 Per-Request Deduplication with React.cache()
+
+**Impact: MEDIUM (deduplicates within request)**
+
+Use `React.cache()` for server-side request deduplication. Authentication and database queries benefit most.
+
+**Usage:**
+
+```typescript
+import { cache } from 'react'
+
+export const getCurrentUser = cache(async () => {
+  const session = await auth()
+  if (!session?.user?.id) return null
+  return await db.user.findUnique({
+    where: { id: session.user.id }
+  })
+})
+```
+
+Within a single request, multiple calls to `getCurrentUser()` execute the query only once.
+
+### 3.5 Use after() for Non-Blocking Operations
+
+**Impact: MEDIUM (faster response times)**
+
+Use Next.js's `after()` to schedule work that should execute after a response is sent. This prevents logging, analytics, and other side effects from blocking the response.
+
+**Incorrect: blocks response**
+
+```tsx
+import { logUserAction } from '@/app/utils'
+
+export async function POST(request: Request) {
+  // Perform mutation
+  await updateDatabase(request)
+  
+  // Logging blocks the response
+  const userAgent = request.headers.get('user-agent') || 'unknown'
+  await logUserAction({ userAgent })
+  
+  return new Response(JSON.stringify({ status: 'success' }), {
+    status: 200,
+    headers: { 'Content-Type': 'application/json' }
+  })
+}
+```
+
+**Correct: non-blocking**
+
+```tsx
+import { after } from 'next/server'
+import { headers, cookies } from 'next/headers'
+import { logUserAction } from '@/app/utils'
+
+export async function POST(request: Request) {
+  // Perform mutation
+  await updateDatabase(request)
+  
+  // Log after response is sent
+  after(async () => {
+    const userAgent = (await headers()).get('user-agent') || 'unknown'
+    const sessionCookie = (await cookies()).get('session-id')?.value || 'anonymous'
+    
+    logUserAction({ sessionCookie, userAgent })
+  })
+  
+  return new Response(JSON.stringify({ status: 'success' }), {
+    status: 200,
+    headers: { 'Content-Type': 'application/json' }
+  })
+}
+```
+
+The response is sent immediately while logging happens in the background.
+
+**Common use cases:**
+
+- Analytics tracking
+
+- Audit logging
+
+- Sending notifications
+
+- Cache invalidation
+
+- Cleanup tasks
+
+**Important notes:**
+
+- `after()` runs even if the response fails or redirects
+
+- Works in Server Actions, Route Handlers, and Server Components
+
+Reference: [https://nextjs.org/docs/app/api-reference/functions/after](https://nextjs.org/docs/app/api-reference/functions/after)
+
+---
+
+## 4. Client-Side Data Fetching
+
+**Impact: MEDIUM-HIGH**
+
+Automatic deduplication and efficient data fetching patterns reduce redundant network requests.
+
+### 4.1 Deduplicate Global Event Listeners
+
+**Impact: LOW (single listener for N components)**
+
+Use `useSWRSubscription()` to share global event listeners across component instances.
+
+**Incorrect: N instances = N listeners**
+
+```tsx
+function useKeyboardShortcut(key: string, callback: () => void) {
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.metaKey && e.key === key) {
+        callback()
+      }
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [key, callback])
+}
+```
+
+When using the `useKeyboardShortcut` hook multiple times, each instance will register a new listener.
+
+**Correct: N instances = 1 listener**
+
+```tsx
+import useSWRSubscription from 'swr/subscription'
+
+// Module-level Map to track callbacks per key
+const keyCallbacks = new Map<string, Set<() => void>>()
+
+function useKeyboardShortcut(key: string, callback: () => void) {
+  // Register this callback in the Map
+  useEffect(() => {
+    if (!keyCallbacks.has(key)) {
+      keyCallbacks.set(key, new Set())
+    }
+    keyCallbacks.get(key)!.add(callback)
+
+    return () => {
+      const set = keyCallbacks.get(key)
+      if (set) {
+        set.delete(callback)
+        if (set.size === 0) {
+          keyCallbacks.delete(key)
+        }
+      }
+    }
+  }, [key, callback])
+
+  useSWRSubscription('global-keydown', () => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.metaKey && keyCallbacks.has(e.key)) {
+        keyCallbacks.get(e.key)!.forEach(cb => cb())
+      }
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  })
+}
+
+function Profile() {
+  // Multiple shortcuts will share the same listener
+  useKeyboardShortcut('p', () => { /* ... */ }) 
+  useKeyboardShortcut('k', () => { /* ... */ })
+  // ...
+}
+```
+
+### 4.2 Use SWR for Automatic Deduplication
+
+**Impact: MEDIUM-HIGH (automatic deduplication)**
+
+SWR enables request deduplication, caching, and revalidation across component instances.
+
+**Incorrect: no deduplication, each instance fetches**
+
+```tsx
+function UserList() {
+  const [users, setUsers] = useState([])
+  useEffect(() => {
+    fetch('/api/users')
+      .then(r => r.json())
+      .then(setUsers)
+  }, [])
+}
+```
+
+**Correct: multiple instances share one request**
+
+```tsx
+import useSWR from 'swr'
+
+function UserList() {
+  const { data: users } = useSWR('/api/users', fetcher)
+}
+```
+
+**For immutable data:**
+
+```tsx
+import { useImmutableSWR } from '@/lib/swr'
+
+function StaticContent() {
+  const { data } = useImmutableSWR('/api/config', fetcher)
+}
+```
+
+**For mutations:**
+
+```tsx
+import { useSWRMutation } from 'swr/mutation'
+
+function UpdateButton() {
+  const { trigger } = useSWRMutation('/api/user', updateUser)
+  return <button onClick={() => trigger()}>Update</button>
+}
+```
+
+Reference: [https://swr.vercel.app](https://swr.vercel.app)
+
+---
+
+## 5. Re-render Optimization
+
+**Impact: MEDIUM**
+
+Reducing unnecessary re-renders minimizes wasted computation and improves UI responsiveness.
+
+### 5.1 Defer State Reads to Usage Point
+
+**Impact: MEDIUM (avoids unnecessary subscriptions)**
+
+Don't subscribe to dynamic state (searchParams, localStorage) if you only read it inside callbacks.
+
+**Incorrect: subscribes to all searchParams changes**
+
+```tsx
+function ShareButton({ chatId }: { chatId: string }) {
+  const searchParams = useSearchParams()
+
+  const handleShare = () => {
+    const ref = searchParams.get('ref')
+    shareChat(chatId, { ref })
+  }
+
+  return <button onClick={handleShare}>Share</button>
+}
+```
+
+**Correct: reads on demand, no subscription**
+
+```tsx
+function ShareButton({ chatId }: { chatId: string }) {
+  const handleShare = () => {
+    const params = new URLSearchParams(window.location.search)
+    const ref = params.get('ref')
+    shareChat(chatId, { ref })
+  }
+
+  return <button onClick={handleShare}>Share</button>
+}
+```
+
+### 5.2 Extract to Memoized Components
+
+**Impact: MEDIUM (enables early returns)**
+
+Extract expensive work into memoized components to enable early returns before computation.
+
+**Incorrect: computes avatar even when loading**
+
+```tsx
+function Profile({ user, loading }: Props) {
+  const avatar = useMemo(() => {
+    const id = computeAvatarId(user)
+    return <Avatar id={id} />
+  }, [user])
+
+  if (loading) return <Skeleton />
+  return <div>{avatar}</div>
+}
+```
+
+**Correct: skips computation when loading**
+
+```tsx
+const UserAvatar = memo(function UserAvatar({ user }: { user: User }) {
+  const id = useMemo(() => computeAvatarId(user), [user])
+  return <Avatar id={id} />
+})
+
+function Profile({ user, loading }: Props) {
+  if (loading) return <Skeleton />
+  return (
+    <div>
+      <UserAvatar user={user} />
+    </div>
+  )
+}
+```
+
+**Note:** If your project has [React Compiler](https://react.dev/learn/react-compiler) enabled, manual memoization with `memo()` and `useMemo()` is not necessary. The compiler automatically optimizes re-renders.
+
+### 5.3 Narrow Effect Dependencies
+
+**Impact: LOW (minimizes effect re-runs)**
+
+Specify primitive dependencies instead of objects to minimize effect re-runs.
+
+**Incorrect: re-runs on any user field change**
+
+```tsx
+useEffect(() => {
+  console.log(user.id)
+}, [user])
+```
+
+**Correct: re-runs only when id changes**
+
+```tsx
+useEffect(() => {
+  console.log(user.id)
+}, [user.id])
+```
+
+**For derived state, compute outside effect:**
+
+```tsx
+// Incorrect: runs on width=767, 766, 765...
+useEffect(() => {
+  if (width < 768) {
+    enableMobileMode()
+  }
+}, [width])
+
+// Correct: runs only on boolean transition
+const isMobile = width < 768
+useEffect(() => {
+  if (isMobile) {
+    enableMobileMode()
+  }
+}, [isMobile])
+```
+
+### 5.4 Subscribe to Derived State
+
+**Impact: MEDIUM (reduces re-render frequency)**
+
+Subscribe to derived boolean state instead of continuous values to reduce re-render frequency.
+
+**Incorrect: re-renders on every pixel change**
+
+```tsx
+function Sidebar() {
+  const width = useWindowWidth()  // updates continuously
+  const isMobile = width < 768
+  return <nav className={isMobile ? 'mobile' : 'desktop'}>
+}
+```
+
+**Correct: re-renders only when boolean changes**
+
+```tsx
+function Sidebar() {
+  const isMobile = useMediaQuery('(max-width: 767px)')
+  return <nav className={isMobile ? 'mobile' : 'desktop'}>
+}
+```
+
+### 5.5 Use Functional setState Updates
+
+**Impact: MEDIUM (prevents stale closures and unnecessary callback recreations)**
+
+When updating state based on the current state value, use the functional update form of setState instead of directly referencing the state variable. This prevents stale closures, eliminates unnecessary dependencies, and creates stable callback references.
+
+**Incorrect: requires state as dependency**
+
+```tsx
+function TodoList() {
+  const [items, setItems] = useState(initialItems)
+  
+  // Callback must depend on items, recreated on every items change
+  const addItems = useCallback((newItems: Item[]) => {
+    setItems([...items, ...newItems])
+  }, [items])  // ❌ items dependency causes recreations
+  
+  // Risk of stale closure if dependency is forgotten
+  const removeItem = useCallback((id: string) => {
+    setItems(items.filter(item => item.id !== id))
+  }, [])  // ❌ Missing items dependency - will use stale items!
+  
+  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />
+}
+```
+
+The first callback is recreated every time `items` changes, which can cause child components to re-render unnecessarily. The second callback has a stale closure bug—it will always reference the initial `items` value.
+
+**Correct: stable callbacks, no stale closures**
+
+```tsx
+function TodoList() {
+  const [items, setItems] = useState(initialItems)
+  
+  // Stable callback, never recreated
+  const addItems = useCallback((newItems: Item[]) => {
+    setItems(curr => [...curr, ...newItems])
+  }, [])  // ✅ No dependencies needed
+  
+  // Always uses latest state, no stale closure risk
+  const removeItem = useCallback((id: string) => {
+    setItems(curr => curr.filter(item => item.id !== id))
+  }, [])  // ✅ Safe and stable
+  
+  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />
+}
+```
+
+**Benefits:**
+
+1. **Stable callback references** - Callbacks don't need to be recreated when state changes
+
+2. **No stale closures** - Always operates on the latest state value
+
+3. **Fewer dependencies** - Simplifies dependency arrays and reduces memory leaks
+
+4. **Prevents bugs** - Eliminates the most common source of React closure bugs
+
+**When to use functional updates:**
+
+- Any setState that depends on the current state value
+
+- Inside useCallback/useMemo when state is needed
+
+- Event handlers that reference state
+
+- Async operations that update state
+
+**When direct updates are fine:**
+
+- Setting state to a static value: `setCount(0)`
+
+- Setting state from props/arguments only: `setName(newName)`
+
+- State doesn't depend on previous value
+
+**Note:** If your project has [React Compiler](https://react.dev/learn/react-compiler) enabled, the compiler can automatically optimize some cases, but functional updates are still recommended for correctness and to prevent stale closure bugs.
+
+### 5.6 Use Lazy State Initialization
+
+**Impact: MEDIUM (wasted computation on every render)**
+
+Pass a function to `useState` for expensive initial values. Without the function form, the initializer runs on every render even though the value is only used once.
+
+**Incorrect: runs on every render**
+
+```tsx
+function FilteredList({ items }: { items: Item[] }) {
+  // buildSearchIndex() runs on EVERY render, even after initialization
+  const [searchIndex, setSearchIndex] = useState(buildSearchIndex(items))
+  const [query, setQuery] = useState('')
+  
+  // When query changes, buildSearchIndex runs again unnecessarily
+  return <SearchResults index={searchIndex} query={query} />
+}
+
+function UserProfile() {
+  // JSON.parse runs on every render
+  const [settings, setSettings] = useState(
+    JSON.parse(localStorage.getItem('settings') || '{}')
+  )
+  
+  return <SettingsForm settings={settings} onChange={setSettings} />
+}
+```
+
+**Correct: runs only once**
+
+```tsx
+function FilteredList({ items }: { items: Item[] }) {
+  // buildSearchIndex() runs ONLY on initial render
+  const [searchIndex, setSearchIndex] = useState(() => buildSearchIndex(items))
+  const [query, setQuery] = useState('')
+  
+  return <SearchResults index={searchIndex} query={query} />
+}
+
+function UserProfile() {
+  // JSON.parse runs only on initial render
+  const [settings, setSettings] = useState(() => {
+    const stored = localStorage.getItem('settings')
+    return stored ? JSON.parse(stored) : {}
+  })
+  
+  return <SettingsForm settings={settings} onChange={setSettings} />
+}
+```
+
+Use lazy initialization when computing initial values from localStorage/sessionStorage, building data structures (indexes, maps), reading from the DOM, or performing heavy transformations.
+
+For simple primitives (`useState(0)`), direct references (`useState(props.value)`), or cheap literals (`useState({})`), the function form is unnecessary.
+
+### 5.7 Use Transitions for Non-Urgent Updates
+
+**Impact: MEDIUM (maintains UI responsiveness)**
+
+Mark frequent, non-urgent state updates as transitions to maintain UI responsiveness.
+
+**Incorrect: blocks UI on every scroll**
+
+```tsx
+function ScrollTracker() {
+  const [scrollY, setScrollY] = useState(0)
+  useEffect(() => {
+    const handler = () => setScrollY(window.scrollY)
+    window.addEventListener('scroll', handler, { passive: true })
+    return () => window.removeEventListener('scroll', handler)
+  }, [])
+}
+```
+
+**Correct: non-blocking updates**
+
+```tsx
+import { startTransition } from 'react'
+
+function ScrollTracker() {
+  const [scrollY, setScrollY] = useState(0)
+  useEffect(() => {
+    const handler = () => {
+      startTransition(() => setScrollY(window.scrollY))
+    }
+    window.addEventListener('scroll', handler, { passive: true })
+    return () => window.removeEventListener('scroll', handler)
+  }, [])
+}
+```
+
+---
+
+## 6. Rendering Performance
+
+**Impact: MEDIUM**
+
+Optimizing the rendering process reduces the work the browser needs to do.
+
+### 6.1 Animate SVG Wrapper Instead of SVG Element
+
+**Impact: LOW (enables hardware acceleration)**
+
+Many browsers don't have hardware acceleration for CSS3 animations on SVG elements. Wrap SVG in a `<div>` and animate the wrapper instead.
+
+**Incorrect: animating SVG directly - no hardware acceleration**
+
+```tsx
+function LoadingSpinner() {
+  return (
+    <svg 
+      className="animate-spin"
+      width="24" 
+      height="24" 
+      viewBox="0 0 24 24"
+    >
+      <circle cx="12" cy="12" r="10" stroke="currentColor" />
+    </svg>
+  )
+}
+```
+
+**Correct: animating wrapper div - hardware accelerated**
+
+```tsx
+function LoadingSpinner() {
+  return (
+    <div className="animate-spin">
+      <svg 
+        width="24" 
+        height="24" 
+        viewBox="0 0 24 24"
+      >
+        <circle cx="12" cy="12" r="10" stroke="currentColor" />
+      </svg>
+    </div>
+  )
+}
+```
+
+This applies to all CSS transforms and transitions (`transform`, `opacity`, `translate`, `scale`, `rotate`). The wrapper div allows browsers to use GPU acceleration for smoother animations.
+
+### 6.2 CSS content-visibility for Long Lists
+
+**Impact: HIGH (faster initial render)**
+
+Apply `content-visibility: auto` to defer off-screen rendering.
+
+**CSS:**
+
+```css
+.message-item {
+  content-visibility: auto;
+  contain-intrinsic-size: 0 80px;
+}
+```
+
+**Example:**
+
+```tsx
+function MessageList({ messages }: { messages: Message[] }) {
+  return (
+    <div className="overflow-y-auto h-screen">
+      {messages.map(msg => (
+        <div key={msg.id} className="message-item">
+          <Avatar user={msg.author} />
+          <div>{msg.content}</div>
+        </div>
+      ))}
+    </div>
+  )
+}
+```
+
+For 1000 messages, browser skips layout/paint for ~990 off-screen items (10× faster initial render).
+
+### 6.3 Hoist Static JSX Elements
+
+**Impact: LOW (avoids re-creation)**
+
+Extract static JSX outside components to avoid re-creation.
+
+**Incorrect: recreates element every render**
+
+```tsx
+function LoadingSkeleton() {
+  return <div className="animate-pulse h-20 bg-gray-200" />
+}
+
+function Container() {
+  return (
+    <div>
+      {loading && <LoadingSkeleton />}
+    </div>
+  )
+}
+```
+
+**Correct: reuses same element**
+
+```tsx
+const loadingSkeleton = (
+  <div className="animate-pulse h-20 bg-gray-200" />
+)
+
+function Container() {
+  return (
+    <div>
+      {loading && loadingSkeleton}
+    </div>
+  )
+}
+```
+
+This is especially helpful for large and static SVG nodes, which can be expensive to recreate on every render.
+
+**Note:** If your project has [React Compiler](https://react.dev/learn/react-compiler) enabled, the compiler automatically hoists static JSX elements and optimizes component re-renders, making manual hoisting unnecessary.
+
+### 6.4 Optimize SVG Precision
+
+**Impact: LOW (reduces file size)**
+
+Reduce SVG coordinate precision to decrease file size. The optimal precision depends on the viewBox size, but in general reducing precision should be considered.
+
+**Incorrect: excessive precision**
+
+```svg
+<path d="M 10.293847 20.847362 L 30.938472 40.192837" />
+```
+
+**Correct: 1 decimal place**
+
+```svg
+<path d="M 10.3 20.8 L 30.9 40.2" />
+```
+
+**Automate with SVGO:**
+
+```bash
+npx svgo --precision=1 --multipass icon.svg
+```
+
+### 6.5 Prevent Hydration Mismatch Without Flickering
+
+**Impact: MEDIUM (avoids visual flicker and hydration errors)**
+
+When rendering content that depends on client-side storage (localStorage, cookies), avoid both SSR breakage and post-hydration flickering by injecting a synchronous script that updates the DOM before React hydrates.
+
+**Incorrect: breaks SSR**
+
+```tsx
+function ThemeWrapper({ children }: { children: ReactNode }) {
+  // localStorage is not available on server - throws error
+  const theme = localStorage.getItem('theme') || 'light'
+  
+  return (
+    <div className={theme}>
+      {children}
+    </div>
+  )
+}
+```
+
+Server-side rendering will fail because `localStorage` is undefined.
+
+**Incorrect: visual flickering**
+
+```tsx
+function ThemeWrapper({ children }: { children: ReactNode }) {
+  const [theme, setTheme] = useState('light')
+  
+  useEffect(() => {
+    // Runs after hydration - causes visible flash
+    const stored = localStorage.getItem('theme')
+    if (stored) {
+      setTheme(stored)
+    }
+  }, [])
+  
+  return (
+    <div className={theme}>
+      {children}
+    </div>
+  )
+}
+```
+
+Component first renders with default value (`light`), then updates after hydration, causing a visible flash of incorrect content.
+
+**Correct: no flicker, no hydration mismatch**
+
+```tsx
+function ThemeWrapper({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <div id="theme-wrapper">
+        {children}
+      </div>
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `
+            (function() {
+              try {
+                var theme = localStorage.getItem('theme') || 'light';
+                var el = document.getElementById('theme-wrapper');
+                if (el) el.className = theme;
+              } catch (e) {}
+            })();
+          `,
+        }}
+      />
+    </>
+  )
+}
+```
+
+The inline script executes synchronously before showing the element, ensuring the DOM already has the correct value. No flickering, no hydration mismatch.
+
+This pattern is especially useful for theme toggles, user preferences, authentication states, and any client-only data that should render immediately without flashing default values.
+
+### 6.6 Use Activity Component for Show/Hide
+
+**Impact: MEDIUM (preserves state/DOM)**
+
+Use React's `<Activity>` to preserve state/DOM for expensive components that frequently toggle visibility.
+
+**Usage:**
+
+```tsx
+import { Activity } from 'react'
+
+function Dropdown({ isOpen }: Props) {
+  return (
+    <Activity mode={isOpen ? 'visible' : 'hidden'}>
+      <ExpensiveMenu />
+    </Activity>
+  )
+}
+```
+
+Avoids expensive re-renders and state loss.
+
+### 6.7 Use Explicit Conditional Rendering
+
+**Impact: LOW (prevents rendering 0 or NaN)**
+
+Use explicit ternary operators (`? :`) instead of `&&` for conditional rendering when the condition can be `0`, `NaN`, or other falsy values that render.
+
+**Incorrect: renders "0" when count is 0**
+
+```tsx
+function Badge({ count }: { count: number }) {
+  return (
+    <div>
+      {count && <span className="badge">{count}</span>}
+    </div>
+  )
+}
+
+// When count = 0, renders: <div>0</div>
+// When count = 5, renders: <div><span class="badge">5</span></div>
+```
+
+**Correct: renders nothing when count is 0**
+
+```tsx
+function Badge({ count }: { count: number }) {
+  return (
+    <div>
+      {count > 0 ? <span className="badge">{count}</span> : null}
+    </div>
+  )
+}
+
+// When count = 0, renders: <div></div>
+// When count = 5, renders: <div><span class="badge">5</span></div>
+```
+
+---
+
+## 7. JavaScript Performance
+
+**Impact: LOW-MEDIUM**
+
+Micro-optimizations for hot paths can add up to meaningful improvements.
+
+### 7.1 Batch DOM CSS Changes
+
+**Impact: MEDIUM (reduces reflows/repaints)**
+
+Avoid changing styles one property at a time. Group multiple CSS changes together via classes or `cssText` to minimize browser reflows.
+
+**Incorrect: multiple reflows**
+
+```typescript
+function updateElementStyles(element: HTMLElement) {
+  // Each line triggers a reflow
+  element.style.width = '100px'
+  element.style.height = '200px'
+  element.style.backgroundColor = 'blue'
+  element.style.border = '1px solid black'
+}
+```
+
+**Correct: add class - single reflow**
+
+```typescript
+// CSS file
+.highlighted-box {
+  width: 100px;
+  height: 200px;
+  background-color: blue;
+  border: 1px solid black;
+}
+
+// JavaScript
+function updateElementStyles(element: HTMLElement) {
+  element.classList.add('highlighted-box')
+}
+```
+
+**Correct: change cssText - single reflow**
+
+```typescript
+function updateElementStyles(element: HTMLElement) {
+  element.style.cssText = `
+    width: 100px;
+    height: 200px;
+    background-color: blue;
+    border: 1px solid black;
+  `
+}
+```
+
+**React example:**
+
+```tsx
+// Incorrect: changing styles one by one
+function Box({ isHighlighted }: { isHighlighted: boolean }) {
+  const ref = useRef<HTMLDivElement>(null)
+  
+  useEffect(() => {
+    if (ref.current && isHighlighted) {
+      ref.current.style.width = '100px'
+      ref.current.style.height = '200px'
+      ref.current.style.backgroundColor = 'blue'
+    }
+  }, [isHighlighted])
+  
+  return <div ref={ref}>Content</div>
+}
+
+// Correct: toggle class
+function Box({ isHighlighted }: { isHighlighted: boolean }) {
+  return (
+    <div className={isHighlighted ? 'highlighted-box' : ''}>
+      Content
+    </div>
+  )
+}
+```
+
+Prefer CSS classes over inline styles when possible. Classes are cached by the browser and provide better separation of concerns.
+
+### 7.2 Build Index Maps for Repeated Lookups
+
+**Impact: LOW-MEDIUM (1M ops to 2K ops)**
+
+Multiple `.find()` calls by the same key should use a Map.
+
+**Incorrect (O(n) per lookup):**
+
+```typescript
+function processOrders(orders: Order[], users: User[]) {
+  return orders.map(order => ({
+    ...order,
+    user: users.find(u => u.id === order.userId)
+  }))
+}
+```
+
+**Correct (O(1) per lookup):**
+
+```typescript
+function processOrders(orders: Order[], users: User[]) {
+  const userById = new Map(users.map(u => [u.id, u]))
+
+  return orders.map(order => ({
+    ...order,
+    user: userById.get(order.userId)
+  }))
+}
+```
+
+Build map once (O(n)), then all lookups are O(1).
+
+For 1000 orders × 1000 users: 1M ops → 2K ops.
+
+### 7.3 Cache Property Access in Loops
+
+**Impact: LOW-MEDIUM (reduces lookups)**
+
+Cache object property lookups in hot paths.
+
+**Incorrect: 3 lookups × N iterations**
+
+```typescript
+for (let i = 0; i < arr.length; i++) {
+  process(obj.config.settings.value)
+}
+```
+
+**Correct: 1 lookup total**
+
+```typescript
+const value = obj.config.settings.value
+const len = arr.length
+for (let i = 0; i < len; i++) {
+  process(value)
+}
+```
+
+### 7.4 Cache Repeated Function Calls
+
+**Impact: MEDIUM (avoid redundant computation)**
+
+Use a module-level Map to cache function results when the same function is called repeatedly with the same inputs during render.
+
+**Incorrect: redundant computation**
+
+```typescript
+function ProjectList({ projects }: { projects: Project[] }) {
+  return (
+    <div>
+      {projects.map(project => {
+        // slugify() called 100+ times for same project names
+        const slug = slugify(project.name)
+        
+        return <ProjectCard key={project.id} slug={slug} />
+      })}
+    </div>
+  )
+}
+```
+
+**Correct: cached results**
+
+```typescript
+// Module-level cache
+const slugifyCache = new Map<string, string>()
+
+function cachedSlugify(text: string): string {
+  if (slugifyCache.has(text)) {
+    return slugifyCache.get(text)!
+  }
+  const result = slugify(text)
+  slugifyCache.set(text, result)
+  return result
+}
+
+function ProjectList({ projects }: { projects: Project[] }) {
+  return (
+    <div>
+      {projects.map(project => {
+        // Computed only once per unique project name
+        const slug = cachedSlugify(project.name)
+        
+        return <ProjectCard key={project.id} slug={slug} />
+      })}
+    </div>
+  )
+}
+```
+
+**Simpler pattern for single-value functions:**
+
+```typescript
+let isLoggedInCache: boolean | null = null
+
+function isLoggedIn(): boolean {
+  if (isLoggedInCache !== null) {
+    return isLoggedInCache
+  }
+  
+  isLoggedInCache = document.cookie.includes('auth=')
+  return isLoggedInCache
+}
+
+// Clear cache when auth changes
+function onAuthChange() {
+  isLoggedInCache = null
+}
+```
+
+Use a Map (not a hook) so it works everywhere: utilities, event handlers, not just React components.
+
+Reference: [https://vercel.com/blog/how-we-made-the-vercel-dashboard-twice-as-fast](https://vercel.com/blog/how-we-made-the-vercel-dashboard-twice-as-fast)
+
+### 7.5 Cache Storage API Calls
+
+**Impact: LOW-MEDIUM (reduces expensive I/O)**
+
+`localStorage`, `sessionStorage`, and `document.cookie` are synchronous and expensive. Cache reads in memory.
+
+**Incorrect: reads storage on every call**
+
+```typescript
+function getTheme() {
+  return localStorage.getItem('theme') ?? 'light'
+}
+// Called 10 times = 10 storage reads
+```
+
+**Correct: Map cache**
+
+```typescript
+const storageCache = new Map<string, string | null>()
+
+function getLocalStorage(key: string) {
+  if (!storageCache.has(key)) {
+    storageCache.set(key, localStorage.getItem(key))
+  }
+  return storageCache.get(key)
+}
+
+function setLocalStorage(key: string, value: string) {
+  localStorage.setItem(key, value)
+  storageCache.set(key, value)  // keep cache in sync
+}
+```
+
+Use a Map (not a hook) so it works everywhere: utilities, event handlers, not just React components.
+
+**Cookie caching:**
+
+```typescript
+let cookieCache: Record<string, string> | null = null
+
+function getCookie(name: string) {
+  if (!cookieCache) {
+    cookieCache = Object.fromEntries(
+      document.cookie.split('; ').map(c => c.split('='))
+    )
+  }
+  return cookieCache[name]
+}
+```
+
+**Important: invalidate on external changes**
+
+```typescript
+window.addEventListener('storage', (e) => {
+  if (e.key) storageCache.delete(e.key)
+})
+
+document.addEventListener('visibilitychange', () => {
+  if (document.visibilityState === 'visible') {
+    storageCache.clear()
+  }
+})
+```
+
+If storage can change externally (another tab, server-set cookies), invalidate cache:
+
+### 7.6 Combine Multiple Array Iterations
+
+**Impact: LOW-MEDIUM (reduces iterations)**
+
+Multiple `.filter()` or `.map()` calls iterate the array multiple times. Combine into one loop.
+
+**Incorrect: 3 iterations**
+
+```typescript
+const admins = users.filter(u => u.isAdmin)
+const testers = users.filter(u => u.isTester)
+const inactive = users.filter(u => !u.isActive)
+```
+
+**Correct: 1 iteration**
+
+```typescript
+const admins: User[] = []
+const testers: User[] = []
+const inactive: User[] = []
+
+for (const user of users) {
+  if (user.isAdmin) admins.push(user)
+  if (user.isTester) testers.push(user)
+  if (!user.isActive) inactive.push(user)
+}
+```
+
+### 7.7 Early Length Check for Array Comparisons
+
+**Impact: MEDIUM-HIGH (avoids expensive operations when lengths differ)**
+
+When comparing arrays with expensive operations (sorting, deep equality, serialization), check lengths first. If lengths differ, the arrays cannot be equal.
+
+In real-world applications, this optimization is especially valuable when the comparison runs in hot paths (event handlers, render loops).
+
+**Incorrect: always runs expensive comparison**
+
+```typescript
+function hasChanges(current: string[], original: string[]) {
+  // Always sorts and joins, even when lengths differ
+  return current.sort().join() !== original.sort().join()
+}
+```
+
+Two O(n log n) sorts run even when `current.length` is 5 and `original.length` is 100. There is also overhead of joining the arrays and comparing the strings.
+
+**Correct (O(1) length check first):**
+
+```typescript
+function hasChanges(current: string[], original: string[]) {
+  // Early return if lengths differ
+  if (current.length !== original.length) {
+    return true
+  }
+  // Only sort/join when lengths match
+  const currentSorted = current.toSorted()
+  const originalSorted = original.toSorted()
+  for (let i = 0; i < currentSorted.length; i++) {
+    if (currentSorted[i] !== originalSorted[i]) {
+      return true
+    }
+  }
+  return false
+}
+```
+
+This new approach is more efficient because:
+
+- It avoids the overhead of sorting and joining the arrays when lengths differ
+
+- It avoids consuming memory for the joined strings (especially important for large arrays)
+
+- It avoids mutating the original arrays
+
+- It returns early when a difference is found
+
+### 7.8 Early Return from Functions
+
+**Impact: LOW-MEDIUM (avoids unnecessary computation)**
+
+Return early when result is determined to skip unnecessary processing.
+
+**Incorrect: processes all items even after finding answer**
+
+```typescript
+function validateUsers(users: User[]) {
+  let hasError = false
+  let errorMessage = ''
+  
+  for (const user of users) {
+    if (!user.email) {
+      hasError = true
+      errorMessage = 'Email required'
+    }
+    if (!user.name) {
+      hasError = true
+      errorMessage = 'Name required'
+    }
+    // Continues checking all users even after error found
+  }
+  
+  return hasError ? { valid: false, error: errorMessage } : { valid: true }
+}
+```
+
+**Correct: returns immediately on first error**
+
+```typescript
+function validateUsers(users: User[]) {
+  for (const user of users) {
+    if (!user.email) {
+      return { valid: false, error: 'Email required' }
+    }
+    if (!user.name) {
+      return { valid: false, error: 'Name required' }
+    }
+  }
+
+  return { valid: true }
+}
+```
+
+### 7.9 Hoist RegExp Creation
+
+**Impact: LOW-MEDIUM (avoids recreation)**
+
+Don't create RegExp inside render. Hoist to module scope or memoize with `useMemo()`.
+
+**Incorrect: new RegExp every render**
+
+```tsx
+function Highlighter({ text, query }: Props) {
+  const regex = new RegExp(`(${query})`, 'gi')
+  const parts = text.split(regex)
+  return <>{parts.map((part, i) => ...)}</>
+}
+```
+
+**Correct: memoize or hoist**
+
+```tsx
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+function Highlighter({ text, query }: Props) {
+  const regex = useMemo(
+    () => new RegExp(`(${escapeRegex(query)})`, 'gi'),
+    [query]
+  )
+  const parts = text.split(regex)
+  return <>{parts.map((part, i) => ...)}</>
+}
+```
+
+**Warning: global regex has mutable state**
+
+```typescript
+const regex = /foo/g
+regex.test('foo')  // true, lastIndex = 3
+regex.test('foo')  // false, lastIndex = 0
+```
+
+Global regex (`/g`) has mutable `lastIndex` state:
+
+### 7.10 Use Loop for Min/Max Instead of Sort
+
+**Impact: LOW (O(n) instead of O(n log n))**
+
+Finding the smallest or largest element only requires a single pass through the array. Sorting is wasteful and slower.
+
+**Incorrect (O(n log n) - sort to find latest):**
+
+```typescript
+interface Project {
+  id: string
+  name: string
+  updatedAt: number
+}
+
+function getLatestProject(projects: Project[]) {
+  const sorted = [...projects].sort((a, b) => b.updatedAt - a.updatedAt)
+  return sorted[0]
+}
+```
+
+Sorts the entire array just to find the maximum value.
+
+**Incorrect (O(n log n) - sort for oldest and newest):**
+
+```typescript
+function getOldestAndNewest(projects: Project[]) {
+  const sorted = [...projects].sort((a, b) => a.updatedAt - b.updatedAt)
+  return { oldest: sorted[0], newest: sorted[sorted.length - 1] }
+}
+```
+
+Still sorts unnecessarily when only min/max are needed.
+
+**Correct (O(n) - single loop):**
+
+```typescript
+function getLatestProject(projects: Project[]) {
+  if (projects.length === 0) return null
+  
+  let latest = projects[0]
+  
+  for (let i = 1; i < projects.length; i++) {
+    if (projects[i].updatedAt > latest.updatedAt) {
+      latest = projects[i]
+    }
+  }
+  
+  return latest
+}
+
+function getOldestAndNewest(projects: Project[]) {
+  if (projects.length === 0) return { oldest: null, newest: null }
+  
+  let oldest = projects[0]
+  let newest = projects[0]
+  
+  for (let i = 1; i < projects.length; i++) {
+    if (projects[i].updatedAt < oldest.updatedAt) oldest = projects[i]
+    if (projects[i].updatedAt > newest.updatedAt) newest = projects[i]
+  }
+  
+  return { oldest, newest }
+}
+```
+
+Single pass through the array, no copying, no sorting.
+
+**Alternative: Math.min/Math.max for small arrays**
+
+```typescript
+const numbers = [5, 2, 8, 1, 9]
+const min = Math.min(...numbers)
+const max = Math.max(...numbers)
+```
+
+This works for small arrays but can be slower for very large arrays due to spread operator limitations. Use the loop approach for reliability.
+
+### 7.11 Use Set/Map for O(1) Lookups
+
+**Impact: LOW-MEDIUM (O(n) to O(1))**
+
+Convert arrays to Set/Map for repeated membership checks.
+
+**Incorrect (O(n) per check):**
+
+```typescript
+const allowedIds = ['a', 'b', 'c', ...]
+items.filter(item => allowedIds.includes(item.id))
+```
+
+**Correct (O(1) per check):**
+
+```typescript
+const allowedIds = new Set(['a', 'b', 'c', ...])
+items.filter(item => allowedIds.has(item.id))
+```
+
+### 7.12 Use toSorted() Instead of sort() for Immutability
+
+**Impact: MEDIUM-HIGH (prevents mutation bugs in React state)**
+
+`.sort()` mutates the array in place, which can cause bugs with React state and props. Use `.toSorted()` to create a new sorted array without mutation.
+
+**Incorrect: mutates original array**
+
+```typescript
+function UserList({ users }: { users: User[] }) {
+  // Mutates the users prop array!
+  const sorted = useMemo(
+    () => users.sort((a, b) => a.name.localeCompare(b.name)),
+    [users]
+  )
+  return <div>{sorted.map(renderUser)}</div>
+}
+```
+
+**Correct: creates new array**
+
+```typescript
+function UserList({ users }: { users: User[] }) {
+  // Creates new sorted array, original unchanged
+  const sorted = useMemo(
+    () => users.toSorted((a, b) => a.name.localeCompare(b.name)),
+    [users]
+  )
+  return <div>{sorted.map(renderUser)}</div>
+}
+```
+
+**Why this matters in React:**
+
+1. Props/state mutations break React's immutability model - React expects props and state to be treated as read-only
+
+2. Causes stale closure bugs - Mutating arrays inside closures (callbacks, effects) can lead to unexpected behavior
+
+**Browser support: fallback for older browsers**
+
+```typescript
+// Fallback for older browsers
+const sorted = [...items].sort((a, b) => a.value - b.value)
+```
+
+`.toSorted()` is available in all modern browsers (Chrome 110+, Safari 16+, Firefox 115+, Node.js 20+). For older environments, use spread operator:
+
+**Other immutable array methods:**
+
+- `.toSorted()` - immutable sort
+
+- `.toReversed()` - immutable reverse
+
+- `.toSpliced()` - immutable splice
+
+- `.with()` - immutable element replacement
+
+---
+
+## 8. Advanced Patterns
+
+**Impact: LOW**
+
+Advanced patterns for specific cases that require careful implementation.
+
+### 8.1 Store Event Handlers in Refs
+
+**Impact: LOW (stable subscriptions)**
+
+Store callbacks in refs when used in effects that shouldn't re-subscribe on callback changes.
+
+**Incorrect: re-subscribes on every render**
+
+```tsx
+function useWindowEvent(event: string, handler: () => void) {
+  useEffect(() => {
+    window.addEventListener(event, handler)
+    return () => window.removeEventListener(event, handler)
+  }, [event, handler])
+}
+```
+
+**Correct: stable subscription**
+
+```tsx
+import { useEffectEvent } from 'react'
+
+function useWindowEvent(event: string, handler: () => void) {
+  const onEvent = useEffectEvent(handler)
+
+  useEffect(() => {
+    window.addEventListener(event, onEvent)
+    return () => window.removeEventListener(event, onEvent)
+  }, [event])
+}
+```
+
+**Alternative: use `useEffectEvent` if you're on latest React:**
+
+`useEffectEvent` provides a cleaner API for the same pattern: it creates a stable function reference that always calls the latest version of the handler.
+
+### 8.2 useLatest for Stable Callback Refs
+
+**Impact: LOW (prevents effect re-runs)**
+
+Access latest values in callbacks without adding them to dependency arrays. Prevents effect re-runs while avoiding stale closures.
+
+**Implementation:**
+
+```typescript
+function useLatest<T>(value: T) {
+  const ref = useRef(value)
+  useEffect(() => {
+    ref.current = value
+  }, [value])
+  return ref
+}
+```
+
+**Incorrect: effect re-runs on every callback change**
+
+```tsx
+function SearchInput({ onSearch }: { onSearch: (q: string) => void }) {
+  const [query, setQuery] = useState('')
+
+  useEffect(() => {
+    const timeout = setTimeout(() => onSearch(query), 300)
+    return () => clearTimeout(timeout)
+  }, [query, onSearch])
+}
+```
+
+**Correct: stable effect, fresh callback**
+
+```tsx
+function SearchInput({ onSearch }: { onSearch: (q: string) => void }) {
+  const [query, setQuery] = useState('')
+  const onSearchRef = useLatest(onSearch)
+
+  useEffect(() => {
+    const timeout = setTimeout(() => onSearchRef.current(query), 300)
+    return () => clearTimeout(timeout)
+  }, [query])
+}
+```
+
+---
+
+## References
+
+1. [https://react.dev](https://react.dev)
+2. [https://nextjs.org](https://nextjs.org)
+3. [https://swr.vercel.app](https://swr.vercel.app)
+4. [https://github.com/shuding/better-all](https://github.com/shuding/better-all)
+5. [https://github.com/isaacs/node-lru-cache](https://github.com/isaacs/node-lru-cache)
+6. [https://vercel.com/blog/how-we-optimized-package-imports-in-next-js](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js)
+7. [https://vercel.com/blog/how-we-made-the-vercel-dashboard-twice-as-fast](https://vercel.com/blog/how-we-made-the-vercel-dashboard-twice-as-fast)
diff --git a/.cursor/skills/vercel-react-best-practices/SKILL.md b/.cursor/skills/vercel-react-best-practices/SKILL.md
new file mode 100644
index 0000000..25bbe87
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/SKILL.md
@@ -0,0 +1,121 @@
+---
+name: vercel-react-best-practices
+description: React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
+---
+
+# Vercel React Best Practices
+
+Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 45 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
+
+## When to Apply
+
+Reference these guidelines when:
+- Writing new React components or Next.js pages
+- Implementing data fetching (client or server-side)
+- Reviewing code for performance issues
+- Refactoring existing React/Next.js code
+- Optimizing bundle size or load times
+
+## Rule Categories by Priority
+
+| Priority | Category | Impact | Prefix |
+|----------|----------|--------|--------|
+| 1 | Eliminating Waterfalls | CRITICAL | `async-` |
+| 2 | Bundle Size Optimization | CRITICAL | `bundle-` |
+| 3 | Server-Side Performance | HIGH | `server-` |
+| 4 | Client-Side Data Fetching | MEDIUM-HIGH | `client-` |
+| 5 | Re-render Optimization | MEDIUM | `rerender-` |
+| 6 | Rendering Performance | MEDIUM | `rendering-` |
+| 7 | JavaScript Performance | LOW-MEDIUM | `js-` |
+| 8 | Advanced Patterns | LOW | `advanced-` |
+
+## Quick Reference
+
+### 1. Eliminating Waterfalls (CRITICAL)
+
+- `async-defer-await` - Move await into branches where actually used
+- `async-parallel` - Use Promise.all() for independent operations
+- `async-dependencies` - Use better-all for partial dependencies
+- `async-api-routes` - Start promises early, await late in API routes
+- `async-suspense-boundaries` - Use Suspense to stream content
+
+### 2. Bundle Size Optimization (CRITICAL)
+
+- `bundle-barrel-imports` - Import directly, avoid barrel files
+- `bundle-dynamic-imports` - Use next/dynamic for heavy components
+- `bundle-defer-third-party` - Load analytics/logging after hydration
+- `bundle-conditional` - Load modules only when feature is activated
+- `bundle-preload` - Preload on hover/focus for perceived speed
+
+### 3. Server-Side Performance (HIGH)
+
+- `server-cache-react` - Use React.cache() for per-request deduplication
+- `server-cache-lru` - Use LRU cache for cross-request caching
+- `server-serialization` - Minimize data passed to client components
+- `server-parallel-fetching` - Restructure components to parallelize fetches
+- `server-after-nonblocking` - Use after() for non-blocking operations
+
+### 4. Client-Side Data Fetching (MEDIUM-HIGH)
+
+- `client-swr-dedup` - Use SWR for automatic request deduplication
+- `client-event-listeners` - Deduplicate global event listeners
+
+### 5. Re-render Optimization (MEDIUM)
+
+- `rerender-defer-reads` - Don't subscribe to state only used in callbacks
+- `rerender-memo` - Extract expensive work into memoized components
+- `rerender-dependencies` - Use primitive dependencies in effects
+- `rerender-derived-state` - Subscribe to derived booleans, not raw values
+- `rerender-functional-setstate` - Use functional setState for stable callbacks
+- `rerender-lazy-state-init` - Pass function to useState for expensive values
+- `rerender-transitions` - Use startTransition for non-urgent updates
+
+### 6. Rendering Performance (MEDIUM)
+
+- `rendering-animate-svg-wrapper` - Animate div wrapper, not SVG element
+- `rendering-content-visibility` - Use content-visibility for long lists
+- `rendering-hoist-jsx` - Extract static JSX outside components
+- `rendering-svg-precision` - Reduce SVG coordinate precision
+- `rendering-hydration-no-flicker` - Use inline script for client-only data
+- `rendering-activity` - Use Activity component for show/hide
+- `rendering-conditional-render` - Use ternary, not && for conditionals
+
+### 7. JavaScript Performance (LOW-MEDIUM)
+
+- `js-batch-dom-css` - Group CSS changes via classes or cssText
+- `js-index-maps` - Build Map for repeated lookups
+- `js-cache-property-access` - Cache object properties in loops
+- `js-cache-function-results` - Cache function results in module-level Map
+- `js-cache-storage` - Cache localStorage/sessionStorage reads
+- `js-combine-iterations` - Combine multiple filter/map into one loop
+- `js-length-check-first` - Check array length before expensive comparison
+- `js-early-exit` - Return early from functions
+- `js-hoist-regexp` - Hoist RegExp creation outside loops
+- `js-min-max-loop` - Use loop for min/max instead of sort
+- `js-set-map-lookups` - Use Set/Map for O(1) lookups
+- `js-tosorted-immutable` - Use toSorted() for immutability
+
+### 8. Advanced Patterns (LOW)
+
+- `advanced-event-handler-refs` - Store event handlers in refs
+- `advanced-use-latest` - useLatest for stable callback refs
+
+## How to Use
+
+Read individual rule files for detailed explanations and code examples:
+
+```
+rules/async-parallel.md
+rules/bundle-barrel-imports.md
+rules/_sections.md
+```
+
+Each rule file contains:
+- Brief explanation of why it matters
+- Incorrect code example with explanation
+- Correct code example with explanation
+- Additional context and references
+
+## Full Compiled Document
+
+For the complete guide with all rules expanded: `AGENTS.md`
diff --git a/.cursor/skills/vercel-react-best-practices/rules/advanced-event-handler-refs.md b/.cursor/skills/vercel-react-best-practices/rules/advanced-event-handler-refs.md
new file mode 100644
index 0000000..3a45152
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/advanced-event-handler-refs.md
@@ -0,0 +1,55 @@
+---
+title: Store Event Handlers in Refs
+impact: LOW
+impactDescription: stable subscriptions
+tags: advanced, hooks, refs, event-handlers, optimization
+---
+
+## Store Event Handlers in Refs
+
+Store callbacks in refs when used in effects that shouldn't re-subscribe on callback changes.
+
+**Incorrect (re-subscribes on every render):**
+
+```tsx
+function useWindowEvent(event: string, handler: () => void) {
+  useEffect(() => {
+    window.addEventListener(event, handler)
+    return () => window.removeEventListener(event, handler)
+  }, [event, handler])
+}
+```
+
+**Correct (stable subscription):**
+
+```tsx
+function useWindowEvent(event: string, handler: () => void) {
+  const handlerRef = useRef(handler)
+  useEffect(() => {
+    handlerRef.current = handler
+  }, [handler])
+
+  useEffect(() => {
+    const listener = () => handlerRef.current()
+    window.addEventListener(event, listener)
+    return () => window.removeEventListener(event, listener)
+  }, [event])
+}
+```
+
+**Alternative: use `useEffectEvent` if you're on latest React:**
+
+```tsx
+import { useEffectEvent } from 'react'
+
+function useWindowEvent(event: string, handler: () => void) {
+  const onEvent = useEffectEvent(handler)
+
+  useEffect(() => {
+    window.addEventListener(event, onEvent)
+    return () => window.removeEventListener(event, onEvent)
+  }, [event])
+}
+```
+
+`useEffectEvent` provides a cleaner API for the same pattern: it creates a stable function reference that always calls the latest version of the handler.
diff --git a/.cursor/skills/vercel-react-best-practices/rules/advanced-use-latest.md b/.cursor/skills/vercel-react-best-practices/rules/advanced-use-latest.md
new file mode 100644
index 0000000..3facdf2
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/advanced-use-latest.md
@@ -0,0 +1,49 @@
+---
+title: useLatest for Stable Callback Refs
+impact: LOW
+impactDescription: prevents effect re-runs
+tags: advanced, hooks, useLatest, refs, optimization
+---
+
+## useLatest for Stable Callback Refs
+
+Access latest values in callbacks without adding them to dependency arrays. Prevents effect re-runs while avoiding stale closures.
+
+**Implementation:**
+
+```typescript
+function useLatest<T>(value: T) {
+  const ref = useRef(value)
+  useEffect(() => {
+    ref.current = value
+  }, [value])
+  return ref
+}
+```
+
+**Incorrect (effect re-runs on every callback change):**
+
+```tsx
+function SearchInput({ onSearch }: { onSearch: (q: string) => void }) {
+  const [query, setQuery] = useState('')
+
+  useEffect(() => {
+    const timeout = setTimeout(() => onSearch(query), 300)
+    return () => clearTimeout(timeout)
+  }, [query, onSearch])
+}
+```
+
+**Correct (stable effect, fresh callback):**
+
+```tsx
+function SearchInput({ onSearch }: { onSearch: (q: string) => void }) {
+  const [query, setQuery] = useState('')
+  const onSearchRef = useLatest(onSearch)
+
+  useEffect(() => {
+    const timeout = setTimeout(() => onSearchRef.current(query), 300)
+    return () => clearTimeout(timeout)
+  }, [query])
+}
+```
diff --git a/.cursor/skills/vercel-react-best-practices/rules/async-api-routes.md b/.cursor/skills/vercel-react-best-practices/rules/async-api-routes.md
new file mode 100644
index 0000000..6feda1e
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/async-api-routes.md
@@ -0,0 +1,38 @@
+---
+title: Prevent Waterfall Chains in API Routes
+impact: CRITICAL
+impactDescription: 2-10× improvement
+tags: api-routes, server-actions, waterfalls, parallelization
+---
+
+## Prevent Waterfall Chains in API Routes
+
+In API routes and Server Actions, start independent operations immediately, even if you don't await them yet.
+
+**Incorrect (config waits for auth, data waits for both):**
+
+```typescript
+export async function GET(request: Request) {
+  const session = await auth()
+  const config = await fetchConfig()
+  const data = await fetchData(session.user.id)
+  return Response.json({ data, config })
+}
+```
+
+**Correct (auth and config start immediately):**
+
+```typescript
+export async function GET(request: Request) {
+  const sessionPromise = auth()
+  const configPromise = fetchConfig()
+  const session = await sessionPromise
+  const [config, data] = await Promise.all([
+    configPromise,
+    fetchData(session.user.id)
+  ])
+  return Response.json({ data, config })
+}
+```
+
+For operations with more complex dependency chains, use `better-all` to automatically maximize parallelism (see Dependency-Based Parallelization).
diff --git a/.cursor/skills/vercel-react-best-practices/rules/async-defer-await.md b/.cursor/skills/vercel-react-best-practices/rules/async-defer-await.md
new file mode 100644
index 0000000..ea7082a
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/async-defer-await.md
@@ -0,0 +1,80 @@
+---
+title: Defer Await Until Needed
+impact: HIGH
+impactDescription: avoids blocking unused code paths
+tags: async, await, conditional, optimization
+---
+
+## Defer Await Until Needed
+
+Move `await` operations into the branches where they're actually used to avoid blocking code paths that don't need them.
+
+**Incorrect (blocks both branches):**
+
+```typescript
+async function handleRequest(userId: string, skipProcessing: boolean) {
+  const userData = await fetchUserData(userId)
+  
+  if (skipProcessing) {
+    // Returns immediately but still waited for userData
+    return { skipped: true }
+  }
+  
+  // Only this branch uses userData
+  return processUserData(userData)
+}
+```
+
+**Correct (only blocks when needed):**
+
+```typescript
+async function handleRequest(userId: string, skipProcessing: boolean) {
+  if (skipProcessing) {
+    // Returns immediately without waiting
+    return { skipped: true }
+  }
+  
+  // Fetch only when needed
+  const userData = await fetchUserData(userId)
+  return processUserData(userData)
+}
+```
+
+**Another example (early return optimization):**
+
+```typescript
+// Incorrect: always fetches permissions
+async function updateResource(resourceId: string, userId: string) {
+  const permissions = await fetchPermissions(userId)
+  const resource = await getResource(resourceId)
+  
+  if (!resource) {
+    return { error: 'Not found' }
+  }
+  
+  if (!permissions.canEdit) {
+    return { error: 'Forbidden' }
+  }
+  
+  return await updateResourceData(resource, permissions)
+}
+
+// Correct: fetches only when needed
+async function updateResource(resourceId: string, userId: string) {
+  const resource = await getResource(resourceId)
+  
+  if (!resource) {
+    return { error: 'Not found' }
+  }
+  
+  const permissions = await fetchPermissions(userId)
+  
+  if (!permissions.canEdit) {
+    return { error: 'Forbidden' }
+  }
+  
+  return await updateResourceData(resource, permissions)
+}
+```
+
+This optimization is especially valuable when the skipped branch is frequently taken, or when the deferred operation is expensive.
diff --git a/.cursor/skills/vercel-react-best-practices/rules/async-dependencies.md b/.cursor/skills/vercel-react-best-practices/rules/async-dependencies.md
new file mode 100644
index 0000000..fb90d86
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/async-dependencies.md
@@ -0,0 +1,36 @@
+---
+title: Dependency-Based Parallelization
+impact: CRITICAL
+impactDescription: 2-10× improvement
+tags: async, parallelization, dependencies, better-all
+---
+
+## Dependency-Based Parallelization
+
+For operations with partial dependencies, use `better-all` to maximize parallelism. It automatically starts each task at the earliest possible moment.
+
+**Incorrect (profile waits for config unnecessarily):**
+
+```typescript
+const [user, config] = await Promise.all([
+  fetchUser(),
+  fetchConfig()
+])
+const profile = await fetchProfile(user.id)
+```
+
+**Correct (config and profile run in parallel):**
+
+```typescript
+import { all } from 'better-all'
+
+const { user, config, profile } = await all({
+  async user() { return fetchUser() },
+  async config() { return fetchConfig() },
+  async profile() {
+    return fetchProfile((await this.$.user).id)
+  }
+})
+```
+
+Reference: [https://github.com/shuding/better-all](https://github.com/shuding/better-all)
diff --git a/.cursor/skills/vercel-react-best-practices/rules/async-parallel.md b/.cursor/skills/vercel-react-best-practices/rules/async-parallel.md
new file mode 100644
index 0000000..64133f6
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/async-parallel.md
@@ -0,0 +1,28 @@
+---
+title: Promise.all() for Independent Operations
+impact: CRITICAL
+impactDescription: 2-10× improvement
+tags: async, parallelization, promises, waterfalls
+---
+
+## Promise.all() for Independent Operations
+
+When async operations have no interdependencies, execute them concurrently using `Promise.all()`.
+
+**Incorrect (sequential execution, 3 round trips):**
+
+```typescript
+const user = await fetchUser()
+const posts = await fetchPosts()
+const comments = await fetchComments()
+```
+
+**Correct (parallel execution, 1 round trip):**
+
+```typescript
+const [user, posts, comments] = await Promise.all([
+  fetchUser(),
+  fetchPosts(),
+  fetchComments()
+])
+```
diff --git a/.cursor/skills/vercel-react-best-practices/rules/async-suspense-boundaries.md b/.cursor/skills/vercel-react-best-practices/rules/async-suspense-boundaries.md
new file mode 100644
index 0000000..1fbc05b
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/async-suspense-boundaries.md
@@ -0,0 +1,99 @@
+---
+title: Strategic Suspense Boundaries
+impact: HIGH
+impactDescription: faster initial paint
+tags: async, suspense, streaming, layout-shift
+---
+
+## Strategic Suspense Boundaries
+
+Instead of awaiting data in async components before returning JSX, use Suspense boundaries to show the wrapper UI faster while data loads.
+
+**Incorrect (wrapper blocked by data fetching):**
+
+```tsx
+async function Page() {
+  const data = await fetchData() // Blocks entire page
+  
+  return (
+    <div>
+      <div>Sidebar</div>
+      <div>Header</div>
+      <div>
+        <DataDisplay data={data} />
+      </div>
+      <div>Footer</div>
+    </div>
+  )
+}
+```
+
+The entire layout waits for data even though only the middle section needs it.
+
+**Correct (wrapper shows immediately, data streams in):**
+
+```tsx
+function Page() {
+  return (
+    <div>
+      <div>Sidebar</div>
+      <div>Header</div>
+      <div>
+        <Suspense fallback={<Skeleton />}>
+          <DataDisplay />
+        </Suspense>
+      </div>
+      <div>Footer</div>
+    </div>
+  )
+}
+
+async function DataDisplay() {
+  const data = await fetchData() // Only blocks this component
+  return <div>{data.content}</div>
+}
+```
+
+Sidebar, Header, and Footer render immediately. Only DataDisplay waits for data.
+
+**Alternative (share promise across components):**
+
+```tsx
+function Page() {
+  // Start fetch immediately, but don't await
+  const dataPromise = fetchData()
+  
+  return (
+    <div>
+      <div>Sidebar</div>
+      <div>Header</div>
+      <Suspense fallback={<Skeleton />}>
+        <DataDisplay dataPromise={dataPromise} />
+        <DataSummary dataPromise={dataPromise} />
+      </Suspense>
+      <div>Footer</div>
+    </div>
+  )
+}
+
+function DataDisplay({ dataPromise }: { dataPromise: Promise<Data> }) {
+  const data = use(dataPromise) // Unwraps the promise
+  return <div>{data.content}</div>
+}
+
+function DataSummary({ dataPromise }: { dataPromise: Promise<Data> }) {
+  const data = use(dataPromise) // Reuses the same promise
+  return <div>{data.summary}</div>
+}
+```
+
+Both components share the same promise, so only one fetch occurs. Layout renders immediately while both components wait together.
+
+**When NOT to use this pattern:**
+
+- Critical data needed for layout decisions (affects positioning)
+- SEO-critical content above the fold
+- Small, fast queries where suspense overhead isn't worth it
+- When you want to avoid layout shift (loading → content jump)
+
+**Trade-off:** Faster initial paint vs potential layout shift. Choose based on your UX priorities.
diff --git a/.cursor/skills/vercel-react-best-practices/rules/bundle-barrel-imports.md b/.cursor/skills/vercel-react-best-practices/rules/bundle-barrel-imports.md
new file mode 100644
index 0000000..ee48f32
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/bundle-barrel-imports.md
@@ -0,0 +1,59 @@
+---
+title: Avoid Barrel File Imports
+impact: CRITICAL
+impactDescription: 200-800ms import cost, slow builds
+tags: bundle, imports, tree-shaking, barrel-files, performance
+---
+
+## Avoid Barrel File Imports
+
+Import directly from source files instead of barrel files to avoid loading thousands of unused modules. **Barrel files** are entry points that re-export multiple modules (e.g., `index.js` that does `export * from './module'`).
+
+Popular icon and component libraries can have **up to 10,000 re-exports** in their entry file. For many React packages, **it takes 200-800ms just to import them**, affecting both development speed and production cold starts.
+
+**Why tree-shaking doesn't help:** When a library is marked as external (not bundled), the bundler can't optimize it. If you bundle it to enable tree-shaking, builds become substantially slower analyzing the entire module graph.
+
+**Incorrect (imports entire library):**
+
+```tsx
+import { Check, X, Menu } from 'lucide-react'
+// Loads 1,583 modules, takes ~2.8s extra in dev
+// Runtime cost: 200-800ms on every cold start
+
+import { Button, TextField } from '@mui/material'
+// Loads 2,225 modules, takes ~4.2s extra in dev
+```
+
+**Correct (imports only what you need):**
+
+```tsx
+import Check from 'lucide-react/dist/esm/icons/check'
+import X from 'lucide-react/dist/esm/icons/x'
+import Menu from 'lucide-react/dist/esm/icons/menu'
+// Loads only 3 modules (~2KB vs ~1MB)
+
+import Button from '@mui/material/Button'
+import TextField from '@mui/material/TextField'
+// Loads only what you use
+```
+
+**Alternative (Next.js 13.5+):**
+
+```js
+// next.config.js - use optimizePackageImports
+module.exports = {
+  experimental: {
+    optimizePackageImports: ['lucide-react', '@mui/material']
+  }
+}
+
+// Then you can keep the ergonomic barrel imports:
+import { Check, X, Menu } from 'lucide-react'
+// Automatically transformed to direct imports at build time
+```
+
+Direct imports provide 15-70% faster dev boot, 28% faster builds, 40% faster cold starts, and significantly faster HMR.
+
+Libraries commonly affected: `lucide-react`, `@mui/material`, `@mui/icons-material`, `@tabler/icons-react`, `react-icons`, `@headlessui/react`, `@radix-ui/react-*`, `lodash`, `ramda`, `date-fns`, `rxjs`, `react-use`.
+
+Reference: [How we optimized package imports in Next.js](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js)
diff --git a/.cursor/skills/vercel-react-best-practices/rules/bundle-conditional.md b/.cursor/skills/vercel-react-best-practices/rules/bundle-conditional.md
new file mode 100644
index 0000000..40bd6f9
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/bundle-conditional.md
@@ -0,0 +1,31 @@
+---
+title: Conditional Module Loading
+impact: HIGH
+impactDescription: loads large data only when needed
+tags: bundle, conditional-loading, lazy-loading
+---
+
+## Conditional Module Loading
+
+Load large data or modules only when a feature is activated.
+
+**Example (lazy-load animation frames):**
+
+```tsx
+function AnimationPlayer({ enabled }: { enabled: boolean }) {
+  const [frames, setFrames] = useState<Frame[] | null>(null)
+
+  useEffect(() => {
+    if (enabled && !frames && typeof window !== 'undefined') {
+      import('./animation-frames.js')
+        .then(mod => setFrames(mod.frames))
+        .catch(() => setEnabled(false))
+    }
+  }, [enabled, frames])
+
+  if (!frames) return <Skeleton />
+  return <Canvas frames={frames} />
+}
+```
+
+The `typeof window !== 'undefined'` check prevents bundling this module for SSR, optimizing server bundle size and build speed.
diff --git a/.cursor/skills/vercel-react-best-practices/rules/bundle-defer-third-party.md b/.cursor/skills/vercel-react-best-practices/rules/bundle-defer-third-party.md
new file mode 100644
index 0000000..db041d1
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/bundle-defer-third-party.md
@@ -0,0 +1,49 @@
+---
+title: Defer Non-Critical Third-Party Libraries
+impact: MEDIUM
+impactDescription: loads after hydration
+tags: bundle, third-party, analytics, defer
+---
+
+## Defer Non-Critical Third-Party Libraries
+
+Analytics, logging, and error tracking don't block user interaction. Load them after hydration.
+
+**Incorrect (blocks initial bundle):**
+
+```tsx
+import { Analytics } from '@vercel/analytics/react'
+
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        {children}
+        <Analytics />
+      </body>
+    </html>
+  )
+}
+```
+
+**Correct (loads after hydration):**
+
+```tsx
+import dynamic from 'next/dynamic'
+
+const Analytics = dynamic(
+  () => import('@vercel/analytics/react').then(m => m.Analytics),
+  { ssr: false }
+)
+
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        {children}
+        <Analytics />
+      </body>
+    </html>
+  )
+}
+```
diff --git a/.cursor/skills/vercel-react-best-practices/rules/bundle-dynamic-imports.md b/.cursor/skills/vercel-react-best-practices/rules/bundle-dynamic-imports.md
new file mode 100644
index 0000000..60b6269
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/bundle-dynamic-imports.md
@@ -0,0 +1,35 @@
+---
+title: Dynamic Imports for Heavy Components
+impact: CRITICAL
+impactDescription: directly affects TTI and LCP
+tags: bundle, dynamic-import, code-splitting, next-dynamic
+---
+
+## Dynamic Imports for Heavy Components
+
+Use `next/dynamic` to lazy-load large components not needed on initial render.
+
+**Incorrect (Monaco bundles with main chunk ~300KB):**
+
+```tsx
+import { MonacoEditor } from './monaco-editor'
+
+function CodePanel({ code }: { code: string }) {
+  return <MonacoEditor value={code} />
+}
+```
+
+**Correct (Monaco loads on demand):**
+
+```tsx
+import dynamic from 'next/dynamic'
+
+const MonacoEditor = dynamic(
+  () => import('./monaco-editor').then(m => m.MonacoEditor),
+  { ssr: false }
+)
+
+function CodePanel({ code }: { code: string }) {
+  return <MonacoEditor value={code} />
+}
+```
diff --git a/.cursor/skills/vercel-react-best-practices/rules/bundle-preload.md b/.cursor/skills/vercel-react-best-practices/rules/bundle-preload.md
new file mode 100644
index 0000000..7000504
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/bundle-preload.md
@@ -0,0 +1,50 @@
+---
+title: Preload Based on User Intent
+impact: MEDIUM
+impactDescription: reduces perceived latency
+tags: bundle, preload, user-intent, hover
+---
+
+## Preload Based on User Intent
+
+Preload heavy bundles before they're needed to reduce perceived latency.
+
+**Example (preload on hover/focus):**
+
+```tsx
+function EditorButton({ onClick }: { onClick: () => void }) {
+  const preload = () => {
+    if (typeof window !== 'undefined') {
+      void import('./monaco-editor')
+    }
+  }
+
+  return (
+    <button
+      onMouseEnter={preload}
+      onFocus={preload}
+      onClick={onClick}
+    >
+      Open Editor
+    </button>
+  )
+}
+```
+
+**Example (preload when feature flag is enabled):**
+
+```tsx
+function FlagsProvider({ children, flags }: Props) {
+  useEffect(() => {
+    if (flags.editorEnabled && typeof window !== 'undefined') {
+      void import('./monaco-editor').then(mod => mod.init())
+    }
+  }, [flags.editorEnabled])
+
+  return <FlagsContext.Provider value={flags}>
+    {children}
+  </FlagsContext.Provider>
+}
+```
+
+The `typeof window !== 'undefined'` check prevents bundling preloaded modules for SSR, optimizing server bundle size and build speed.
diff --git a/.cursor/skills/vercel-react-best-practices/rules/client-event-listeners.md b/.cursor/skills/vercel-react-best-practices/rules/client-event-listeners.md
new file mode 100644
index 0000000..aad4ae9
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/client-event-listeners.md
@@ -0,0 +1,74 @@
+---
+title: Deduplicate Global Event Listeners
+impact: LOW
+impactDescription: single listener for N components
+tags: client, swr, event-listeners, subscription
+---
+
+## Deduplicate Global Event Listeners
+
+Use `useSWRSubscription()` to share global event listeners across component instances.
+
+**Incorrect (N instances = N listeners):**
+
+```tsx
+function useKeyboardShortcut(key: string, callback: () => void) {
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.metaKey && e.key === key) {
+        callback()
+      }
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [key, callback])
+}
+```
+
+When using the `useKeyboardShortcut` hook multiple times, each instance will register a new listener.
+
+**Correct (N instances = 1 listener):**
+
+```tsx
+import useSWRSubscription from 'swr/subscription'
+
+// Module-level Map to track callbacks per key
+const keyCallbacks = new Map<string, Set<() => void>>()
+
+function useKeyboardShortcut(key: string, callback: () => void) {
+  // Register this callback in the Map
+  useEffect(() => {
+    if (!keyCallbacks.has(key)) {
+      keyCallbacks.set(key, new Set())
+    }
+    keyCallbacks.get(key)!.add(callback)
+
+    return () => {
+      const set = keyCallbacks.get(key)
+      if (set) {
+        set.delete(callback)
+        if (set.size === 0) {
+          keyCallbacks.delete(key)
+        }
+      }
+    }
+  }, [key, callback])
+
+  useSWRSubscription('global-keydown', () => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.metaKey && keyCallbacks.has(e.key)) {
+        keyCallbacks.get(e.key)!.forEach(cb => cb())
+      }
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  })
+}
+
+function Profile() {
+  // Multiple shortcuts will share the same listener
+  useKeyboardShortcut('p', () => { /* ... */ }) 
+  useKeyboardShortcut('k', () => { /* ... */ })
+  // ...
+}
+```
diff --git a/.cursor/skills/vercel-react-best-practices/rules/client-swr-dedup.md b/.cursor/skills/vercel-react-best-practices/rules/client-swr-dedup.md
new file mode 100644
index 0000000..2a430f2
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/client-swr-dedup.md
@@ -0,0 +1,56 @@
+---
+title: Use SWR for Automatic Deduplication
+impact: MEDIUM-HIGH
+impactDescription: automatic deduplication
+tags: client, swr, deduplication, data-fetching
+---
+
+## Use SWR for Automatic Deduplication
+
+SWR enables request deduplication, caching, and revalidation across component instances.
+
+**Incorrect (no deduplication, each instance fetches):**
+
+```tsx
+function UserList() {
+  const [users, setUsers] = useState([])
+  useEffect(() => {
+    fetch('/api/users')
+      .then(r => r.json())
+      .then(setUsers)
+  }, [])
+}
+```
+
+**Correct (multiple instances share one request):**
+
+```tsx
+import useSWR from 'swr'
+
+function UserList() {
+  const { data: users } = useSWR('/api/users', fetcher)
+}
+```
+
+**For immutable data:**
+
+```tsx
+import { useImmutableSWR } from '@/lib/swr'
+
+function StaticContent() {
+  const { data } = useImmutableSWR('/api/config', fetcher)
+}
+```
+
+**For mutations:**
+
+```tsx
+import { useSWRMutation } from 'swr/mutation'
+
+function UpdateButton() {
+  const { trigger } = useSWRMutation('/api/user', updateUser)
+  return <button onClick={() => trigger()}>Update</button>
+}
+```
+
+Reference: [https://swr.vercel.app](https://swr.vercel.app)
diff --git a/.cursor/skills/vercel-react-best-practices/rules/js-batch-dom-css.md b/.cursor/skills/vercel-react-best-practices/rules/js-batch-dom-css.md
new file mode 100644
index 0000000..92a3b63
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/js-batch-dom-css.md
@@ -0,0 +1,82 @@
+---
+title: Batch DOM CSS Changes
+impact: MEDIUM
+impactDescription: reduces reflows/repaints
+tags: javascript, dom, css, performance, reflow
+---
+
+## Batch DOM CSS Changes
+
+Avoid changing styles one property at a time. Group multiple CSS changes together via classes or `cssText` to minimize browser reflows.
+
+**Incorrect (multiple reflows):**
+
+```typescript
+function updateElementStyles(element: HTMLElement) {
+  // Each line triggers a reflow
+  element.style.width = '100px'
+  element.style.height = '200px'
+  element.style.backgroundColor = 'blue'
+  element.style.border = '1px solid black'
+}
+```
+
+**Correct (add class - single reflow):**
+
+```typescript
+// CSS file
+.highlighted-box {
+  width: 100px;
+  height: 200px;
+  background-color: blue;
+  border: 1px solid black;
+}
+
+// JavaScript
+function updateElementStyles(element: HTMLElement) {
+  element.classList.add('highlighted-box')
+}
+```
+
+**Correct (change cssText - single reflow):**
+
+```typescript
+function updateElementStyles(element: HTMLElement) {
+  element.style.cssText = `
+    width: 100px;
+    height: 200px;
+    background-color: blue;
+    border: 1px solid black;
+  `
+}
+```
+
+**React example:**
+
+```tsx
+// Incorrect: changing styles one by one
+function Box({ isHighlighted }: { isHighlighted: boolean }) {
+  const ref = useRef<HTMLDivElement>(null)
+  
+  useEffect(() => {
+    if (ref.current && isHighlighted) {
+      ref.current.style.width = '100px'
+      ref.current.style.height = '200px'
+      ref.current.style.backgroundColor = 'blue'
+    }
+  }, [isHighlighted])
+  
+  return <div ref={ref}>Content</div>
+}
+
+// Correct: toggle class
+function Box({ isHighlighted }: { isHighlighted: boolean }) {
+  return (
+    <div className={isHighlighted ? 'highlighted-box' : ''}>
+      Content
+    </div>
+  )
+}
+```
+
+Prefer CSS classes over inline styles when possible. Classes are cached by the browser and provide better separation of concerns.
diff --git a/.cursor/skills/vercel-react-best-practices/rules/js-cache-function-results.md b/.cursor/skills/vercel-react-best-practices/rules/js-cache-function-results.md
new file mode 100644
index 0000000..180f8ac
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/js-cache-function-results.md
@@ -0,0 +1,80 @@
+---
+title: Cache Repeated Function Calls
+impact: MEDIUM
+impactDescription: avoid redundant computation
+tags: javascript, cache, memoization, performance
+---
+
+## Cache Repeated Function Calls
+
+Use a module-level Map to cache function results when the same function is called repeatedly with the same inputs during render.
+
+**Incorrect (redundant computation):**
+
+```typescript
+function ProjectList({ projects }: { projects: Project[] }) {
+  return (
+    <div>
+      {projects.map(project => {
+        // slugify() called 100+ times for same project names
+        const slug = slugify(project.name)
+        
+        return <ProjectCard key={project.id} slug={slug} />
+      })}
+    </div>
+  )
+}
+```
+
+**Correct (cached results):**
+
+```typescript
+// Module-level cache
+const slugifyCache = new Map<string, string>()
+
+function cachedSlugify(text: string): string {
+  if (slugifyCache.has(text)) {
+    return slugifyCache.get(text)!
+  }
+  const result = slugify(text)
+  slugifyCache.set(text, result)
+  return result
+}
+
+function ProjectList({ projects }: { projects: Project[] }) {
+  return (
+    <div>
+      {projects.map(project => {
+        // Computed only once per unique project name
+        const slug = cachedSlugify(project.name)
+        
+        return <ProjectCard key={project.id} slug={slug} />
+      })}
+    </div>
+  )
+}
+```
+
+**Simpler pattern for single-value functions:**
+
+```typescript
+let isLoggedInCache: boolean | null = null
+
+function isLoggedIn(): boolean {
+  if (isLoggedInCache !== null) {
+    return isLoggedInCache
+  }
+  
+  isLoggedInCache = document.cookie.includes('auth=')
+  return isLoggedInCache
+}
+
+// Clear cache when auth changes
+function onAuthChange() {
+  isLoggedInCache = null
+}
+```
+
+Use a Map (not a hook) so it works everywhere: utilities, event handlers, not just React components.
+
+Reference: [How we made the Vercel Dashboard twice as fast](https://vercel.com/blog/how-we-made-the-vercel-dashboard-twice-as-fast)
diff --git a/.cursor/skills/vercel-react-best-practices/rules/js-cache-property-access.md b/.cursor/skills/vercel-react-best-practices/rules/js-cache-property-access.md
new file mode 100644
index 0000000..39eec90
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/js-cache-property-access.md
@@ -0,0 +1,28 @@
+---
+title: Cache Property Access in Loops
+impact: LOW-MEDIUM
+impactDescription: reduces lookups
+tags: javascript, loops, optimization, caching
+---
+
+## Cache Property Access in Loops
+
+Cache object property lookups in hot paths.
+
+**Incorrect (3 lookups × N iterations):**
+
+```typescript
+for (let i = 0; i < arr.length; i++) {
+  process(obj.config.settings.value)
+}
+```
+
+**Correct (1 lookup total):**
+
+```typescript
+const value = obj.config.settings.value
+const len = arr.length
+for (let i = 0; i < len; i++) {
+  process(value)
+}
+```
diff --git a/.cursor/skills/vercel-react-best-practices/rules/js-cache-storage.md b/.cursor/skills/vercel-react-best-practices/rules/js-cache-storage.md
new file mode 100644
index 0000000..aa4a30c
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/js-cache-storage.md
@@ -0,0 +1,70 @@
+---
+title: Cache Storage API Calls
+impact: LOW-MEDIUM
+impactDescription: reduces expensive I/O
+tags: javascript, localStorage, storage, caching, performance
+---
+
+## Cache Storage API Calls
+
+`localStorage`, `sessionStorage`, and `document.cookie` are synchronous and expensive. Cache reads in memory.
+
+**Incorrect (reads storage on every call):**
+
+```typescript
+function getTheme() {
+  return localStorage.getItem('theme') ?? 'light'
+}
+// Called 10 times = 10 storage reads
+```
+
+**Correct (Map cache):**
+
+```typescript
+const storageCache = new Map<string, string | null>()
+
+function getLocalStorage(key: string) {
+  if (!storageCache.has(key)) {
+    storageCache.set(key, localStorage.getItem(key))
+  }
+  return storageCache.get(key)
+}
+
+function setLocalStorage(key: string, value: string) {
+  localStorage.setItem(key, value)
+  storageCache.set(key, value)  // keep cache in sync
+}
+```
+
+Use a Map (not a hook) so it works everywhere: utilities, event handlers, not just React components.
+
+**Cookie caching:**
+
+```typescript
+let cookieCache: Record<string, string> | null = null
+
+function getCookie(name: string) {
+  if (!cookieCache) {
+    cookieCache = Object.fromEntries(
+      document.cookie.split('; ').map(c => c.split('='))
+    )
+  }
+  return cookieCache[name]
+}
+```
+
+**Important (invalidate on external changes):**
+
+If storage can change externally (another tab, server-set cookies), invalidate cache:
+
+```typescript
+window.addEventListener('storage', (e) => {
+  if (e.key) storageCache.delete(e.key)
+})
+
+document.addEventListener('visibilitychange', () => {
+  if (document.visibilityState === 'visible') {
+    storageCache.clear()
+  }
+})
+```
diff --git a/.cursor/skills/vercel-react-best-practices/rules/js-combine-iterations.md b/.cursor/skills/vercel-react-best-practices/rules/js-combine-iterations.md
new file mode 100644
index 0000000..044d017
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/js-combine-iterations.md
@@ -0,0 +1,32 @@
+---
+title: Combine Multiple Array Iterations
+impact: LOW-MEDIUM
+impactDescription: reduces iterations
+tags: javascript, arrays, loops, performance
+---
+
+## Combine Multiple Array Iterations
+
+Multiple `.filter()` or `.map()` calls iterate the array multiple times. Combine into one loop.
+
+**Incorrect (3 iterations):**
+
+```typescript
+const admins = users.filter(u => u.isAdmin)
+const testers = users.filter(u => u.isTester)
+const inactive = users.filter(u => !u.isActive)
+```
+
+**Correct (1 iteration):**
+
+```typescript
+const admins: User[] = []
+const testers: User[] = []
+const inactive: User[] = []
+
+for (const user of users) {
+  if (user.isAdmin) admins.push(user)
+  if (user.isTester) testers.push(user)
+  if (!user.isActive) inactive.push(user)
+}
+```
diff --git a/.cursor/skills/vercel-react-best-practices/rules/js-early-exit.md b/.cursor/skills/vercel-react-best-practices/rules/js-early-exit.md
new file mode 100644
index 0000000..f46cb89
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/js-early-exit.md
@@ -0,0 +1,50 @@
+---
+title: Early Return from Functions
+impact: LOW-MEDIUM
+impactDescription: avoids unnecessary computation
+tags: javascript, functions, optimization, early-return
+---
+
+## Early Return from Functions
+
+Return early when result is determined to skip unnecessary processing.
+
+**Incorrect (processes all items even after finding answer):**
+
+```typescript
+function validateUsers(users: User[]) {
+  let hasError = false
+  let errorMessage = ''
+  
+  for (const user of users) {
+    if (!user.email) {
+      hasError = true
+      errorMessage = 'Email required'
+    }
+    if (!user.name) {
+      hasError = true
+      errorMessage = 'Name required'
+    }
+    // Continues checking all users even after error found
+  }
+  
+  return hasError ? { valid: false, error: errorMessage } : { valid: true }
+}
+```
+
+**Correct (returns immediately on first error):**
+
+```typescript
+function validateUsers(users: User[]) {
+  for (const user of users) {
+    if (!user.email) {
+      return { valid: false, error: 'Email required' }
+    }
+    if (!user.name) {
+      return { valid: false, error: 'Name required' }
+    }
+  }
+
+  return { valid: true }
+}
+```
diff --git a/.cursor/skills/vercel-react-best-practices/rules/js-hoist-regexp.md b/.cursor/skills/vercel-react-best-practices/rules/js-hoist-regexp.md
new file mode 100644
index 0000000..dae3fef
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/js-hoist-regexp.md
@@ -0,0 +1,45 @@
+---
+title: Hoist RegExp Creation
+impact: LOW-MEDIUM
+impactDescription: avoids recreation
+tags: javascript, regexp, optimization, memoization
+---
+
+## Hoist RegExp Creation
+
+Don't create RegExp inside render. Hoist to module scope or memoize with `useMemo()`.
+
+**Incorrect (new RegExp every render):**
+
+```tsx
+function Highlighter({ text, query }: Props) {
+  const regex = new RegExp(`(${query})`, 'gi')
+  const parts = text.split(regex)
+  return <>{parts.map((part, i) => ...)}</>
+}
+```
+
+**Correct (memoize or hoist):**
+
+```tsx
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+function Highlighter({ text, query }: Props) {
+  const regex = useMemo(
+    () => new RegExp(`(${escapeRegex(query)})`, 'gi'),
+    [query]
+  )
+  const parts = text.split(regex)
+  return <>{parts.map((part, i) => ...)}</>
+}
+```
+
+**Warning (global regex has mutable state):**
+
+Global regex (`/g`) has mutable `lastIndex` state:
+
+```typescript
+const regex = /foo/g
+regex.test('foo')  // true, lastIndex = 3
+regex.test('foo')  // false, lastIndex = 0
+```
diff --git a/.cursor/skills/vercel-react-best-practices/rules/js-index-maps.md b/.cursor/skills/vercel-react-best-practices/rules/js-index-maps.md
new file mode 100644
index 0000000..9d357a0
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/js-index-maps.md
@@ -0,0 +1,37 @@
+---
+title: Build Index Maps for Repeated Lookups
+impact: LOW-MEDIUM
+impactDescription: 1M ops to 2K ops
+tags: javascript, map, indexing, optimization, performance
+---
+
+## Build Index Maps for Repeated Lookups
+
+Multiple `.find()` calls by the same key should use a Map.
+
+**Incorrect (O(n) per lookup):**
+
+```typescript
+function processOrders(orders: Order[], users: User[]) {
+  return orders.map(order => ({
+    ...order,
+    user: users.find(u => u.id === order.userId)
+  }))
+}
+```
+
+**Correct (O(1) per lookup):**
+
+```typescript
+function processOrders(orders: Order[], users: User[]) {
+  const userById = new Map(users.map(u => [u.id, u]))
+
+  return orders.map(order => ({
+    ...order,
+    user: userById.get(order.userId)
+  }))
+}
+```
+
+Build map once (O(n)), then all lookups are O(1).
+For 1000 orders × 1000 users: 1M ops → 2K ops.
diff --git a/.cursor/skills/vercel-react-best-practices/rules/js-length-check-first.md b/.cursor/skills/vercel-react-best-practices/rules/js-length-check-first.md
new file mode 100644
index 0000000..6c38625
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/js-length-check-first.md
@@ -0,0 +1,49 @@
+---
+title: Early Length Check for Array Comparisons
+impact: MEDIUM-HIGH
+impactDescription: avoids expensive operations when lengths differ
+tags: javascript, arrays, performance, optimization, comparison
+---
+
+## Early Length Check for Array Comparisons
+
+When comparing arrays with expensive operations (sorting, deep equality, serialization), check lengths first. If lengths differ, the arrays cannot be equal.
+
+In real-world applications, this optimization is especially valuable when the comparison runs in hot paths (event handlers, render loops).
+
+**Incorrect (always runs expensive comparison):**
+
+```typescript
+function hasChanges(current: string[], original: string[]) {
+  // Always sorts and joins, even when lengths differ
+  return current.sort().join() !== original.sort().join()
+}
+```
+
+Two O(n log n) sorts run even when `current.length` is 5 and `original.length` is 100. There is also overhead of joining the arrays and comparing the strings.
+
+**Correct (O(1) length check first):**
+
+```typescript
+function hasChanges(current: string[], original: string[]) {
+  // Early return if lengths differ
+  if (current.length !== original.length) {
+    return true
+  }
+  // Only sort/join when lengths match
+  const currentSorted = current.toSorted()
+  const originalSorted = original.toSorted()
+  for (let i = 0; i < currentSorted.length; i++) {
+    if (currentSorted[i] !== originalSorted[i]) {
+      return true
+    }
+  }
+  return false
+}
+```
+
+This new approach is more efficient because:
+- It avoids the overhead of sorting and joining the arrays when lengths differ
+- It avoids consuming memory for the joined strings (especially important for large arrays)
+- It avoids mutating the original arrays
+- It returns early when a difference is found
diff --git a/.cursor/skills/vercel-react-best-practices/rules/js-min-max-loop.md b/.cursor/skills/vercel-react-best-practices/rules/js-min-max-loop.md
new file mode 100644
index 0000000..02caec5
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/js-min-max-loop.md
@@ -0,0 +1,82 @@
+---
+title: Use Loop for Min/Max Instead of Sort
+impact: LOW
+impactDescription: O(n) instead of O(n log n)
+tags: javascript, arrays, performance, sorting, algorithms
+---
+
+## Use Loop for Min/Max Instead of Sort
+
+Finding the smallest or largest element only requires a single pass through the array. Sorting is wasteful and slower.
+
+**Incorrect (O(n log n) - sort to find latest):**
+
+```typescript
+interface Project {
+  id: string
+  name: string
+  updatedAt: number
+}
+
+function getLatestProject(projects: Project[]) {
+  const sorted = [...projects].sort((a, b) => b.updatedAt - a.updatedAt)
+  return sorted[0]
+}
+```
+
+Sorts the entire array just to find the maximum value.
+
+**Incorrect (O(n log n) - sort for oldest and newest):**
+
+```typescript
+function getOldestAndNewest(projects: Project[]) {
+  const sorted = [...projects].sort((a, b) => a.updatedAt - b.updatedAt)
+  return { oldest: sorted[0], newest: sorted[sorted.length - 1] }
+}
+```
+
+Still sorts unnecessarily when only min/max are needed.
+
+**Correct (O(n) - single loop):**
+
+```typescript
+function getLatestProject(projects: Project[]) {
+  if (projects.length === 0) return null
+  
+  let latest = projects[0]
+  
+  for (let i = 1; i < projects.length; i++) {
+    if (projects[i].updatedAt > latest.updatedAt) {
+      latest = projects[i]
+    }
+  }
+  
+  return latest
+}
+
+function getOldestAndNewest(projects: Project[]) {
+  if (projects.length === 0) return { oldest: null, newest: null }
+  
+  let oldest = projects[0]
+  let newest = projects[0]
+  
+  for (let i = 1; i < projects.length; i++) {
+    if (projects[i].updatedAt < oldest.updatedAt) oldest = projects[i]
+    if (projects[i].updatedAt > newest.updatedAt) newest = projects[i]
+  }
+  
+  return { oldest, newest }
+}
+```
+
+Single pass through the array, no copying, no sorting.
+
+**Alternative (Math.min/Math.max for small arrays):**
+
+```typescript
+const numbers = [5, 2, 8, 1, 9]
+const min = Math.min(...numbers)
+const max = Math.max(...numbers)
+```
+
+This works for small arrays but can be slower for very large arrays due to spread operator limitations. Use the loop approach for reliability.
diff --git a/.cursor/skills/vercel-react-best-practices/rules/js-set-map-lookups.md b/.cursor/skills/vercel-react-best-practices/rules/js-set-map-lookups.md
new file mode 100644
index 0000000..680a489
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/js-set-map-lookups.md
@@ -0,0 +1,24 @@
+---
+title: Use Set/Map for O(1) Lookups
+impact: LOW-MEDIUM
+impactDescription: O(n) to O(1)
+tags: javascript, set, map, data-structures, performance
+---
+
+## Use Set/Map for O(1) Lookups
+
+Convert arrays to Set/Map for repeated membership checks.
+
+**Incorrect (O(n) per check):**
+
+```typescript
+const allowedIds = ['a', 'b', 'c', ...]
+items.filter(item => allowedIds.includes(item.id))
+```
+
+**Correct (O(1) per check):**
+
+```typescript
+const allowedIds = new Set(['a', 'b', 'c', ...])
+items.filter(item => allowedIds.has(item.id))
+```
diff --git a/.cursor/skills/vercel-react-best-practices/rules/js-tosorted-immutable.md b/.cursor/skills/vercel-react-best-practices/rules/js-tosorted-immutable.md
new file mode 100644
index 0000000..eae8b3f
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/js-tosorted-immutable.md
@@ -0,0 +1,57 @@
+---
+title: Use toSorted() Instead of sort() for Immutability
+impact: MEDIUM-HIGH
+impactDescription: prevents mutation bugs in React state
+tags: javascript, arrays, immutability, react, state, mutation
+---
+
+## Use toSorted() Instead of sort() for Immutability
+
+`.sort()` mutates the array in place, which can cause bugs with React state and props. Use `.toSorted()` to create a new sorted array without mutation.
+
+**Incorrect (mutates original array):**
+
+```typescript
+function UserList({ users }: { users: User[] }) {
+  // Mutates the users prop array!
+  const sorted = useMemo(
+    () => users.sort((a, b) => a.name.localeCompare(b.name)),
+    [users]
+  )
+  return <div>{sorted.map(renderUser)}</div>
+}
+```
+
+**Correct (creates new array):**
+
+```typescript
+function UserList({ users }: { users: User[] }) {
+  // Creates new sorted array, original unchanged
+  const sorted = useMemo(
+    () => users.toSorted((a, b) => a.name.localeCompare(b.name)),
+    [users]
+  )
+  return <div>{sorted.map(renderUser)}</div>
+}
+```
+
+**Why this matters in React:**
+
+1. Props/state mutations break React's immutability model - React expects props and state to be treated as read-only
+2. Causes stale closure bugs - Mutating arrays inside closures (callbacks, effects) can lead to unexpected behavior
+
+**Browser support (fallback for older browsers):**
+
+`.toSorted()` is available in all modern browsers (Chrome 110+, Safari 16+, Firefox 115+, Node.js 20+). For older environments, use spread operator:
+
+```typescript
+// Fallback for older browsers
+const sorted = [...items].sort((a, b) => a.value - b.value)
+```
+
+**Other immutable array methods:**
+
+- `.toSorted()` - immutable sort
+- `.toReversed()` - immutable reverse
+- `.toSpliced()` - immutable splice
+- `.with()` - immutable element replacement
diff --git a/.cursor/skills/vercel-react-best-practices/rules/rendering-activity.md b/.cursor/skills/vercel-react-best-practices/rules/rendering-activity.md
new file mode 100644
index 0000000..c957a49
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/rendering-activity.md
@@ -0,0 +1,26 @@
+---
+title: Use Activity Component for Show/Hide
+impact: MEDIUM
+impactDescription: preserves state/DOM
+tags: rendering, activity, visibility, state-preservation
+---
+
+## Use Activity Component for Show/Hide
+
+Use React's `<Activity>` to preserve state/DOM for expensive components that frequently toggle visibility.
+
+**Usage:**
+
+```tsx
+import { Activity } from 'react'
+
+function Dropdown({ isOpen }: Props) {
+  return (
+    <Activity mode={isOpen ? 'visible' : 'hidden'}>
+      <ExpensiveMenu />
+    </Activity>
+  )
+}
+```
+
+Avoids expensive re-renders and state loss.
diff --git a/.cursor/skills/vercel-react-best-practices/rules/rendering-animate-svg-wrapper.md b/.cursor/skills/vercel-react-best-practices/rules/rendering-animate-svg-wrapper.md
new file mode 100644
index 0000000..646744c
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/rendering-animate-svg-wrapper.md
@@ -0,0 +1,47 @@
+---
+title: Animate SVG Wrapper Instead of SVG Element
+impact: LOW
+impactDescription: enables hardware acceleration
+tags: rendering, svg, css, animation, performance
+---
+
+## Animate SVG Wrapper Instead of SVG Element
+
+Many browsers don't have hardware acceleration for CSS3 animations on SVG elements. Wrap SVG in a `<div>` and animate the wrapper instead.
+
+**Incorrect (animating SVG directly - no hardware acceleration):**
+
+```tsx
+function LoadingSpinner() {
+  return (
+    <svg 
+      className="animate-spin"
+      width="24" 
+      height="24" 
+      viewBox="0 0 24 24"
+    >
+      <circle cx="12" cy="12" r="10" stroke="currentColor" />
+    </svg>
+  )
+}
+```
+
+**Correct (animating wrapper div - hardware accelerated):**
+
+```tsx
+function LoadingSpinner() {
+  return (
+    <div className="animate-spin">
+      <svg 
+        width="24" 
+        height="24" 
+        viewBox="0 0 24 24"
+      >
+        <circle cx="12" cy="12" r="10" stroke="currentColor" />
+      </svg>
+    </div>
+  )
+}
+```
+
+This applies to all CSS transforms and transitions (`transform`, `opacity`, `translate`, `scale`, `rotate`). The wrapper div allows browsers to use GPU acceleration for smoother animations.
diff --git a/.cursor/skills/vercel-react-best-practices/rules/rendering-conditional-render.md b/.cursor/skills/vercel-react-best-practices/rules/rendering-conditional-render.md
new file mode 100644
index 0000000..7e866f5
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/rendering-conditional-render.md
@@ -0,0 +1,40 @@
+---
+title: Use Explicit Conditional Rendering
+impact: LOW
+impactDescription: prevents rendering 0 or NaN
+tags: rendering, conditional, jsx, falsy-values
+---
+
+## Use Explicit Conditional Rendering
+
+Use explicit ternary operators (`? :`) instead of `&&` for conditional rendering when the condition can be `0`, `NaN`, or other falsy values that render.
+
+**Incorrect (renders "0" when count is 0):**
+
+```tsx
+function Badge({ count }: { count: number }) {
+  return (
+    <div>
+      {count && <span className="badge">{count}</span>}
+    </div>
+  )
+}
+
+// When count = 0, renders: <div>0</div>
+// When count = 5, renders: <div><span class="badge">5</span></div>
+```
+
+**Correct (renders nothing when count is 0):**
+
+```tsx
+function Badge({ count }: { count: number }) {
+  return (
+    <div>
+      {count > 0 ? <span className="badge">{count}</span> : null}
+    </div>
+  )
+}
+
+// When count = 0, renders: <div></div>
+// When count = 5, renders: <div><span class="badge">5</span></div>
+```
diff --git a/.cursor/skills/vercel-react-best-practices/rules/rendering-content-visibility.md b/.cursor/skills/vercel-react-best-practices/rules/rendering-content-visibility.md
new file mode 100644
index 0000000..aa66563
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/rendering-content-visibility.md
@@ -0,0 +1,38 @@
+---
+title: CSS content-visibility for Long Lists
+impact: HIGH
+impactDescription: faster initial render
+tags: rendering, css, content-visibility, long-lists
+---
+
+## CSS content-visibility for Long Lists
+
+Apply `content-visibility: auto` to defer off-screen rendering.
+
+**CSS:**
+
+```css
+.message-item {
+  content-visibility: auto;
+  contain-intrinsic-size: 0 80px;
+}
+```
+
+**Example:**
+
+```tsx
+function MessageList({ messages }: { messages: Message[] }) {
+  return (
+    <div className="overflow-y-auto h-screen">
+      {messages.map(msg => (
+        <div key={msg.id} className="message-item">
+          <Avatar user={msg.author} />
+          <div>{msg.content}</div>
+        </div>
+      ))}
+    </div>
+  )
+}
+```
+
+For 1000 messages, browser skips layout/paint for ~990 off-screen items (10× faster initial render).
diff --git a/.cursor/skills/vercel-react-best-practices/rules/rendering-hoist-jsx.md b/.cursor/skills/vercel-react-best-practices/rules/rendering-hoist-jsx.md
new file mode 100644
index 0000000..32d2f3f
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/rendering-hoist-jsx.md
@@ -0,0 +1,46 @@
+---
+title: Hoist Static JSX Elements
+impact: LOW
+impactDescription: avoids re-creation
+tags: rendering, jsx, static, optimization
+---
+
+## Hoist Static JSX Elements
+
+Extract static JSX outside components to avoid re-creation.
+
+**Incorrect (recreates element every render):**
+
+```tsx
+function LoadingSkeleton() {
+  return <div className="animate-pulse h-20 bg-gray-200" />
+}
+
+function Container() {
+  return (
+    <div>
+      {loading && <LoadingSkeleton />}
+    </div>
+  )
+}
+```
+
+**Correct (reuses same element):**
+
+```tsx
+const loadingSkeleton = (
+  <div className="animate-pulse h-20 bg-gray-200" />
+)
+
+function Container() {
+  return (
+    <div>
+      {loading && loadingSkeleton}
+    </div>
+  )
+}
+```
+
+This is especially helpful for large and static SVG nodes, which can be expensive to recreate on every render.
+
+**Note:** If your project has [React Compiler](https://react.dev/learn/react-compiler) enabled, the compiler automatically hoists static JSX elements and optimizes component re-renders, making manual hoisting unnecessary.
diff --git a/.cursor/skills/vercel-react-best-practices/rules/rendering-hydration-no-flicker.md b/.cursor/skills/vercel-react-best-practices/rules/rendering-hydration-no-flicker.md
new file mode 100644
index 0000000..5cf0e79
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/rendering-hydration-no-flicker.md
@@ -0,0 +1,82 @@
+---
+title: Prevent Hydration Mismatch Without Flickering
+impact: MEDIUM
+impactDescription: avoids visual flicker and hydration errors
+tags: rendering, ssr, hydration, localStorage, flicker
+---
+
+## Prevent Hydration Mismatch Without Flickering
+
+When rendering content that depends on client-side storage (localStorage, cookies), avoid both SSR breakage and post-hydration flickering by injecting a synchronous script that updates the DOM before React hydrates.
+
+**Incorrect (breaks SSR):**
+
+```tsx
+function ThemeWrapper({ children }: { children: ReactNode }) {
+  // localStorage is not available on server - throws error
+  const theme = localStorage.getItem('theme') || 'light'
+  
+  return (
+    <div className={theme}>
+      {children}
+    </div>
+  )
+}
+```
+
+Server-side rendering will fail because `localStorage` is undefined.
+
+**Incorrect (visual flickering):**
+
+```tsx
+function ThemeWrapper({ children }: { children: ReactNode }) {
+  const [theme, setTheme] = useState('light')
+  
+  useEffect(() => {
+    // Runs after hydration - causes visible flash
+    const stored = localStorage.getItem('theme')
+    if (stored) {
+      setTheme(stored)
+    }
+  }, [])
+  
+  return (
+    <div className={theme}>
+      {children}
+    </div>
+  )
+}
+```
+
+Component first renders with default value (`light`), then updates after hydration, causing a visible flash of incorrect content.
+
+**Correct (no flicker, no hydration mismatch):**
+
+```tsx
+function ThemeWrapper({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <div id="theme-wrapper">
+        {children}
+      </div>
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `
+            (function() {
+              try {
+                var theme = localStorage.getItem('theme') || 'light';
+                var el = document.getElementById('theme-wrapper');
+                if (el) el.className = theme;
+              } catch (e) {}
+            })();
+          `,
+        }}
+      />
+    </>
+  )
+}
+```
+
+The inline script executes synchronously before showing the element, ensuring the DOM already has the correct value. No flickering, no hydration mismatch.
+
+This pattern is especially useful for theme toggles, user preferences, authentication states, and any client-only data that should render immediately without flashing default values.
diff --git a/.cursor/skills/vercel-react-best-practices/rules/rendering-svg-precision.md b/.cursor/skills/vercel-react-best-practices/rules/rendering-svg-precision.md
new file mode 100644
index 0000000..6d77128
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/rendering-svg-precision.md
@@ -0,0 +1,28 @@
+---
+title: Optimize SVG Precision
+impact: LOW
+impactDescription: reduces file size
+tags: rendering, svg, optimization, svgo
+---
+
+## Optimize SVG Precision
+
+Reduce SVG coordinate precision to decrease file size. The optimal precision depends on the viewBox size, but in general reducing precision should be considered.
+
+**Incorrect (excessive precision):**
+
+```svg
+<path d="M 10.293847 20.847362 L 30.938472 40.192837" />
+```
+
+**Correct (1 decimal place):**
+
+```svg
+<path d="M 10.3 20.8 L 30.9 40.2" />
+```
+
+**Automate with SVGO:**
+
+```bash
+npx svgo --precision=1 --multipass icon.svg
+```
diff --git a/.cursor/skills/vercel-react-best-practices/rules/rerender-defer-reads.md b/.cursor/skills/vercel-react-best-practices/rules/rerender-defer-reads.md
new file mode 100644
index 0000000..e867c95
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/rerender-defer-reads.md
@@ -0,0 +1,39 @@
+---
+title: Defer State Reads to Usage Point
+impact: MEDIUM
+impactDescription: avoids unnecessary subscriptions
+tags: rerender, searchParams, localStorage, optimization
+---
+
+## Defer State Reads to Usage Point
+
+Don't subscribe to dynamic state (searchParams, localStorage) if you only read it inside callbacks.
+
+**Incorrect (subscribes to all searchParams changes):**
+
+```tsx
+function ShareButton({ chatId }: { chatId: string }) {
+  const searchParams = useSearchParams()
+
+  const handleShare = () => {
+    const ref = searchParams.get('ref')
+    shareChat(chatId, { ref })
+  }
+
+  return <button onClick={handleShare}>Share</button>
+}
+```
+
+**Correct (reads on demand, no subscription):**
+
+```tsx
+function ShareButton({ chatId }: { chatId: string }) {
+  const handleShare = () => {
+    const params = new URLSearchParams(window.location.search)
+    const ref = params.get('ref')
+    shareChat(chatId, { ref })
+  }
+
+  return <button onClick={handleShare}>Share</button>
+}
+```
diff --git a/.cursor/skills/vercel-react-best-practices/rules/rerender-dependencies.md b/.cursor/skills/vercel-react-best-practices/rules/rerender-dependencies.md
new file mode 100644
index 0000000..47a4d92
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/rerender-dependencies.md
@@ -0,0 +1,45 @@
+---
+title: Narrow Effect Dependencies
+impact: LOW
+impactDescription: minimizes effect re-runs
+tags: rerender, useEffect, dependencies, optimization
+---
+
+## Narrow Effect Dependencies
+
+Specify primitive dependencies instead of objects to minimize effect re-runs.
+
+**Incorrect (re-runs on any user field change):**
+
+```tsx
+useEffect(() => {
+  console.log(user.id)
+}, [user])
+```
+
+**Correct (re-runs only when id changes):**
+
+```tsx
+useEffect(() => {
+  console.log(user.id)
+}, [user.id])
+```
+
+**For derived state, compute outside effect:**
+
+```tsx
+// Incorrect: runs on width=767, 766, 765...
+useEffect(() => {
+  if (width < 768) {
+    enableMobileMode()
+  }
+}, [width])
+
+// Correct: runs only on boolean transition
+const isMobile = width < 768
+useEffect(() => {
+  if (isMobile) {
+    enableMobileMode()
+  }
+}, [isMobile])
+```
diff --git a/.cursor/skills/vercel-react-best-practices/rules/rerender-derived-state.md b/.cursor/skills/vercel-react-best-practices/rules/rerender-derived-state.md
new file mode 100644
index 0000000..a15177c
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/rerender-derived-state.md
@@ -0,0 +1,29 @@
+---
+title: Subscribe to Derived State
+impact: MEDIUM
+impactDescription: reduces re-render frequency
+tags: rerender, derived-state, media-query, optimization
+---
+
+## Subscribe to Derived State
+
+Subscribe to derived boolean state instead of continuous values to reduce re-render frequency.
+
+**Incorrect (re-renders on every pixel change):**
+
+```tsx
+function Sidebar() {
+  const width = useWindowWidth()  // updates continuously
+  const isMobile = width < 768
+  return <nav className={isMobile ? 'mobile' : 'desktop'}>
+}
+```
+
+**Correct (re-renders only when boolean changes):**
+
+```tsx
+function Sidebar() {
+  const isMobile = useMediaQuery('(max-width: 767px)')
+  return <nav className={isMobile ? 'mobile' : 'desktop'}>
+}
+```
diff --git a/.cursor/skills/vercel-react-best-practices/rules/rerender-functional-setstate.md b/.cursor/skills/vercel-react-best-practices/rules/rerender-functional-setstate.md
new file mode 100644
index 0000000..b004ef4
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/rerender-functional-setstate.md
@@ -0,0 +1,74 @@
+---
+title: Use Functional setState Updates
+impact: MEDIUM
+impactDescription: prevents stale closures and unnecessary callback recreations
+tags: react, hooks, useState, useCallback, callbacks, closures
+---
+
+## Use Functional setState Updates
+
+When updating state based on the current state value, use the functional update form of setState instead of directly referencing the state variable. This prevents stale closures, eliminates unnecessary dependencies, and creates stable callback references.
+
+**Incorrect (requires state as dependency):**
+
+```tsx
+function TodoList() {
+  const [items, setItems] = useState(initialItems)
+  
+  // Callback must depend on items, recreated on every items change
+  const addItems = useCallback((newItems: Item[]) => {
+    setItems([...items, ...newItems])
+  }, [items])  // ❌ items dependency causes recreations
+  
+  // Risk of stale closure if dependency is forgotten
+  const removeItem = useCallback((id: string) => {
+    setItems(items.filter(item => item.id !== id))
+  }, [])  // ❌ Missing items dependency - will use stale items!
+  
+  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />
+}
+```
+
+The first callback is recreated every time `items` changes, which can cause child components to re-render unnecessarily. The second callback has a stale closure bug—it will always reference the initial `items` value.
+
+**Correct (stable callbacks, no stale closures):**
+
+```tsx
+function TodoList() {
+  const [items, setItems] = useState(initialItems)
+  
+  // Stable callback, never recreated
+  const addItems = useCallback((newItems: Item[]) => {
+    setItems(curr => [...curr, ...newItems])
+  }, [])  // ✅ No dependencies needed
+  
+  // Always uses latest state, no stale closure risk
+  const removeItem = useCallback((id: string) => {
+    setItems(curr => curr.filter(item => item.id !== id))
+  }, [])  // ✅ Safe and stable
+  
+  return <ItemsEditor items={items} onAdd={addItems} onRemove={removeItem} />
+}
+```
+
+**Benefits:**
+
+1. **Stable callback references** - Callbacks don't need to be recreated when state changes
+2. **No stale closures** - Always operates on the latest state value
+3. **Fewer dependencies** - Simplifies dependency arrays and reduces memory leaks
+4. **Prevents bugs** - Eliminates the most common source of React closure bugs
+
+**When to use functional updates:**
+
+- Any setState that depends on the current state value
+- Inside useCallback/useMemo when state is needed
+- Event handlers that reference state
+- Async operations that update state
+
+**When direct updates are fine:**
+
+- Setting state to a static value: `setCount(0)`
+- Setting state from props/arguments only: `setName(newName)`
+- State doesn't depend on previous value
+
+**Note:** If your project has [React Compiler](https://react.dev/learn/react-compiler) enabled, the compiler can automatically optimize some cases, but functional updates are still recommended for correctness and to prevent stale closure bugs.
diff --git a/.cursor/skills/vercel-react-best-practices/rules/rerender-lazy-state-init.md b/.cursor/skills/vercel-react-best-practices/rules/rerender-lazy-state-init.md
new file mode 100644
index 0000000..4ecb350
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/rerender-lazy-state-init.md
@@ -0,0 +1,58 @@
+---
+title: Use Lazy State Initialization
+impact: MEDIUM
+impactDescription: wasted computation on every render
+tags: react, hooks, useState, performance, initialization
+---
+
+## Use Lazy State Initialization
+
+Pass a function to `useState` for expensive initial values. Without the function form, the initializer runs on every render even though the value is only used once.
+
+**Incorrect (runs on every render):**
+
+```tsx
+function FilteredList({ items }: { items: Item[] }) {
+  // buildSearchIndex() runs on EVERY render, even after initialization
+  const [searchIndex, setSearchIndex] = useState(buildSearchIndex(items))
+  const [query, setQuery] = useState('')
+  
+  // When query changes, buildSearchIndex runs again unnecessarily
+  return <SearchResults index={searchIndex} query={query} />
+}
+
+function UserProfile() {
+  // JSON.parse runs on every render
+  const [settings, setSettings] = useState(
+    JSON.parse(localStorage.getItem('settings') || '{}')
+  )
+  
+  return <SettingsForm settings={settings} onChange={setSettings} />
+}
+```
+
+**Correct (runs only once):**
+
+```tsx
+function FilteredList({ items }: { items: Item[] }) {
+  // buildSearchIndex() runs ONLY on initial render
+  const [searchIndex, setSearchIndex] = useState(() => buildSearchIndex(items))
+  const [query, setQuery] = useState('')
+  
+  return <SearchResults index={searchIndex} query={query} />
+}
+
+function UserProfile() {
+  // JSON.parse runs only on initial render
+  const [settings, setSettings] = useState(() => {
+    const stored = localStorage.getItem('settings')
+    return stored ? JSON.parse(stored) : {}
+  })
+  
+  return <SettingsForm settings={settings} onChange={setSettings} />
+}
+```
+
+Use lazy initialization when computing initial values from localStorage/sessionStorage, building data structures (indexes, maps), reading from the DOM, or performing heavy transformations.
+
+For simple primitives (`useState(0)`), direct references (`useState(props.value)`), or cheap literals (`useState({})`), the function form is unnecessary.
diff --git a/.cursor/skills/vercel-react-best-practices/rules/rerender-memo.md b/.cursor/skills/vercel-react-best-practices/rules/rerender-memo.md
new file mode 100644
index 0000000..f8982ab
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/rerender-memo.md
@@ -0,0 +1,44 @@
+---
+title: Extract to Memoized Components
+impact: MEDIUM
+impactDescription: enables early returns
+tags: rerender, memo, useMemo, optimization
+---
+
+## Extract to Memoized Components
+
+Extract expensive work into memoized components to enable early returns before computation.
+
+**Incorrect (computes avatar even when loading):**
+
+```tsx
+function Profile({ user, loading }: Props) {
+  const avatar = useMemo(() => {
+    const id = computeAvatarId(user)
+    return <Avatar id={id} />
+  }, [user])
+
+  if (loading) return <Skeleton />
+  return <div>{avatar}</div>
+}
+```
+
+**Correct (skips computation when loading):**
+
+```tsx
+const UserAvatar = memo(function UserAvatar({ user }: { user: User }) {
+  const id = useMemo(() => computeAvatarId(user), [user])
+  return <Avatar id={id} />
+})
+
+function Profile({ user, loading }: Props) {
+  if (loading) return <Skeleton />
+  return (
+    <div>
+      <UserAvatar user={user} />
+    </div>
+  )
+}
+```
+
+**Note:** If your project has [React Compiler](https://react.dev/learn/react-compiler) enabled, manual memoization with `memo()` and `useMemo()` is not necessary. The compiler automatically optimizes re-renders.
diff --git a/.cursor/skills/vercel-react-best-practices/rules/rerender-transitions.md b/.cursor/skills/vercel-react-best-practices/rules/rerender-transitions.md
new file mode 100644
index 0000000..d99f43f
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/rerender-transitions.md
@@ -0,0 +1,40 @@
+---
+title: Use Transitions for Non-Urgent Updates
+impact: MEDIUM
+impactDescription: maintains UI responsiveness
+tags: rerender, transitions, startTransition, performance
+---
+
+## Use Transitions for Non-Urgent Updates
+
+Mark frequent, non-urgent state updates as transitions to maintain UI responsiveness.
+
+**Incorrect (blocks UI on every scroll):**
+
+```tsx
+function ScrollTracker() {
+  const [scrollY, setScrollY] = useState(0)
+  useEffect(() => {
+    const handler = () => setScrollY(window.scrollY)
+    window.addEventListener('scroll', handler, { passive: true })
+    return () => window.removeEventListener('scroll', handler)
+  }, [])
+}
+```
+
+**Correct (non-blocking updates):**
+
+```tsx
+import { startTransition } from 'react'
+
+function ScrollTracker() {
+  const [scrollY, setScrollY] = useState(0)
+  useEffect(() => {
+    const handler = () => {
+      startTransition(() => setScrollY(window.scrollY))
+    }
+    window.addEventListener('scroll', handler, { passive: true })
+    return () => window.removeEventListener('scroll', handler)
+  }, [])
+}
+```
diff --git a/.cursor/skills/vercel-react-best-practices/rules/server-after-nonblocking.md b/.cursor/skills/vercel-react-best-practices/rules/server-after-nonblocking.md
new file mode 100644
index 0000000..e8f5b26
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/server-after-nonblocking.md
@@ -0,0 +1,73 @@
+---
+title: Use after() for Non-Blocking Operations
+impact: MEDIUM
+impactDescription: faster response times
+tags: server, async, logging, analytics, side-effects
+---
+
+## Use after() for Non-Blocking Operations
+
+Use Next.js's `after()` to schedule work that should execute after a response is sent. This prevents logging, analytics, and other side effects from blocking the response.
+
+**Incorrect (blocks response):**
+
+```tsx
+import { logUserAction } from '@/app/utils'
+
+export async function POST(request: Request) {
+  // Perform mutation
+  await updateDatabase(request)
+  
+  // Logging blocks the response
+  const userAgent = request.headers.get('user-agent') || 'unknown'
+  await logUserAction({ userAgent })
+  
+  return new Response(JSON.stringify({ status: 'success' }), {
+    status: 200,
+    headers: { 'Content-Type': 'application/json' }
+  })
+}
+```
+
+**Correct (non-blocking):**
+
+```tsx
+import { after } from 'next/server'
+import { headers, cookies } from 'next/headers'
+import { logUserAction } from '@/app/utils'
+
+export async function POST(request: Request) {
+  // Perform mutation
+  await updateDatabase(request)
+  
+  // Log after response is sent
+  after(async () => {
+    const userAgent = (await headers()).get('user-agent') || 'unknown'
+    const sessionCookie = (await cookies()).get('session-id')?.value || 'anonymous'
+    
+    logUserAction({ sessionCookie, userAgent })
+  })
+  
+  return new Response(JSON.stringify({ status: 'success' }), {
+    status: 200,
+    headers: { 'Content-Type': 'application/json' }
+  })
+}
+```
+
+The response is sent immediately while logging happens in the background.
+
+**Common use cases:**
+
+- Analytics tracking
+- Audit logging
+- Sending notifications
+- Cache invalidation
+- Cleanup tasks
+
+**Important notes:**
+
+- `after()` runs even if the response fails or redirects
+- Works in Server Actions, Route Handlers, and Server Components
+
+Reference: [https://nextjs.org/docs/app/api-reference/functions/after](https://nextjs.org/docs/app/api-reference/functions/after)
diff --git a/.cursor/skills/vercel-react-best-practices/rules/server-cache-lru.md b/.cursor/skills/vercel-react-best-practices/rules/server-cache-lru.md
new file mode 100644
index 0000000..ef6938a
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/server-cache-lru.md
@@ -0,0 +1,41 @@
+---
+title: Cross-Request LRU Caching
+impact: HIGH
+impactDescription: caches across requests
+tags: server, cache, lru, cross-request
+---
+
+## Cross-Request LRU Caching
+
+`React.cache()` only works within one request. For data shared across sequential requests (user clicks button A then button B), use an LRU cache.
+
+**Implementation:**
+
+```typescript
+import { LRUCache } from 'lru-cache'
+
+const cache = new LRUCache<string, any>({
+  max: 1000,
+  ttl: 5 * 60 * 1000  // 5 minutes
+})
+
+export async function getUser(id: string) {
+  const cached = cache.get(id)
+  if (cached) return cached
+
+  const user = await db.user.findUnique({ where: { id } })
+  cache.set(id, user)
+  return user
+}
+
+// Request 1: DB query, result cached
+// Request 2: cache hit, no DB query
+```
+
+Use when sequential user actions hit multiple endpoints needing the same data within seconds.
+
+**With Vercel's [Fluid Compute](https://vercel.com/docs/fluid-compute):** LRU caching is especially effective because multiple concurrent requests can share the same function instance and cache. This means the cache persists across requests without needing external storage like Redis.
+
+**In traditional serverless:** Each invocation runs in isolation, so consider Redis for cross-process caching.
+
+Reference: [https://github.com/isaacs/node-lru-cache](https://github.com/isaacs/node-lru-cache)
diff --git a/.cursor/skills/vercel-react-best-practices/rules/server-cache-react.md b/.cursor/skills/vercel-react-best-practices/rules/server-cache-react.md
new file mode 100644
index 0000000..fa49e0e
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/server-cache-react.md
@@ -0,0 +1,26 @@
+---
+title: Per-Request Deduplication with React.cache()
+impact: MEDIUM
+impactDescription: deduplicates within request
+tags: server, cache, react-cache, deduplication
+---
+
+## Per-Request Deduplication with React.cache()
+
+Use `React.cache()` for server-side request deduplication. Authentication and database queries benefit most.
+
+**Usage:**
+
+```typescript
+import { cache } from 'react'
+
+export const getCurrentUser = cache(async () => {
+  const session = await auth()
+  if (!session?.user?.id) return null
+  return await db.user.findUnique({
+    where: { id: session.user.id }
+  })
+})
+```
+
+Within a single request, multiple calls to `getCurrentUser()` execute the query only once.
diff --git a/.cursor/skills/vercel-react-best-practices/rules/server-parallel-fetching.md b/.cursor/skills/vercel-react-best-practices/rules/server-parallel-fetching.md
new file mode 100644
index 0000000..5261f08
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/server-parallel-fetching.md
@@ -0,0 +1,79 @@
+---
+title: Parallel Data Fetching with Component Composition
+impact: CRITICAL
+impactDescription: eliminates server-side waterfalls
+tags: server, rsc, parallel-fetching, composition
+---
+
+## Parallel Data Fetching with Component Composition
+
+React Server Components execute sequentially within a tree. Restructure with composition to parallelize data fetching.
+
+**Incorrect (Sidebar waits for Page's fetch to complete):**
+
+```tsx
+export default async function Page() {
+  const header = await fetchHeader()
+  return (
+    <div>
+      <div>{header}</div>
+      <Sidebar />
+    </div>
+  )
+}
+
+async function Sidebar() {
+  const items = await fetchSidebarItems()
+  return <nav>{items.map(renderItem)}</nav>
+}
+```
+
+**Correct (both fetch simultaneously):**
+
+```tsx
+async function Header() {
+  const data = await fetchHeader()
+  return <div>{data}</div>
+}
+
+async function Sidebar() {
+  const items = await fetchSidebarItems()
+  return <nav>{items.map(renderItem)}</nav>
+}
+
+export default function Page() {
+  return (
+    <div>
+      <Header />
+      <Sidebar />
+    </div>
+  )
+}
+```
+
+**Alternative with children prop:**
+
+```tsx
+async function Layout({ children }: { children: ReactNode }) {
+  const header = await fetchHeader()
+  return (
+    <div>
+      <div>{header}</div>
+      {children}
+    </div>
+  )
+}
+
+async function Sidebar() {
+  const items = await fetchSidebarItems()
+  return <nav>{items.map(renderItem)}</nav>
+}
+
+export default function Page() {
+  return (
+    <Layout>
+      <Sidebar />
+    </Layout>
+  )
+}
+```
diff --git a/.cursor/skills/vercel-react-best-practices/rules/server-serialization.md b/.cursor/skills/vercel-react-best-practices/rules/server-serialization.md
new file mode 100644
index 0000000..39c5c41
--- /dev/null
+++ b/.cursor/skills/vercel-react-best-practices/rules/server-serialization.md
@@ -0,0 +1,38 @@
+---
+title: Minimize Serialization at RSC Boundaries
+impact: HIGH
+impactDescription: reduces data transfer size
+tags: server, rsc, serialization, props
+---
+
+## Minimize Serialization at RSC Boundaries
+
+The React Server/Client boundary serializes all object properties into strings and embeds them in the HTML response and subsequent RSC requests. This serialized data directly impacts page weight and load time, so **size matters a lot**. Only pass fields that the client actually uses.
+
+**Incorrect (serializes all 50 fields):**
+
+```tsx
+async function Page() {
+  const user = await fetchUser()  // 50 fields
+  return <Profile user={user} />
+}
+
+'use client'
+function Profile({ user }: { user: User }) {
+  return <div>{user.name}</div>  // uses 1 field
+}
+```
+
+**Correct (serializes only 1 field):**
+
+```tsx
+async function Page() {
+  const user = await fetchUser()
+  return <Profile name={user.name} />
+}
+
+'use client'
+function Profile({ name }: { name: string }) {
+  return <div>{name}</div>
+}
+```
diff --git a/.cursor/skills/verification-before-completion/SKILL.md b/.cursor/skills/verification-before-completion/SKILL.md
new file mode 100644
index 0000000..2f14076
--- /dev/null
+++ b/.cursor/skills/verification-before-completion/SKILL.md
@@ -0,0 +1,139 @@
+---
+name: verification-before-completion
+description: Use when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidence before assertions always
+---
+
+# Verification Before Completion
+
+## Overview
+
+Claiming work is complete without verification is dishonesty, not efficiency.
+
+**Core principle:** Evidence before claims, always.
+
+**Violating the letter of this rule is violating the spirit of this rule.**
+
+## The Iron Law
+
+```
+NO COMPLETION CLAIMS WITHOUT FRESH VERIFICATION EVIDENCE
+```
+
+If you haven't run the verification command in this message, you cannot claim it passes.
+
+## The Gate Function
+
+```
+BEFORE claiming any status or expressing satisfaction:
+
+1. IDENTIFY: What command proves this claim?
+2. RUN: Execute the FULL command (fresh, complete)
+3. READ: Full output, check exit code, count failures
+4. VERIFY: Does output confirm the claim?
+   - If NO: State actual status with evidence
+   - If YES: State claim WITH evidence
+5. ONLY THEN: Make the claim
+
+Skip any step = lying, not verifying
+```
+
+## Common Failures
+
+| Claim | Requires | Not Sufficient |
+|-------|----------|----------------|
+| Tests pass | Test command output: 0 failures | Previous run, "should pass" |
+| Linter clean | Linter output: 0 errors | Partial check, extrapolation |
+| Build succeeds | Build command: exit 0 | Linter passing, logs look good |
+| Bug fixed | Test original symptom: passes | Code changed, assumed fixed |
+| Regression test works | Red-green cycle verified | Test passes once |
+| Agent completed | VCS diff shows changes | Agent reports "success" |
+| Requirements met | Line-by-line checklist | Tests passing |
+
+## Red Flags - STOP
+
+- Using "should", "probably", "seems to"
+- Expressing satisfaction before verification ("Great!", "Perfect!", "Done!", etc.)
+- About to commit/push/PR without verification
+- Trusting agent success reports
+- Relying on partial verification
+- Thinking "just this once"
+- Tired and wanting work over
+- **ANY wording implying success without having run verification**
+
+## Rationalization Prevention
+
+| Excuse | Reality |
+|--------|---------|
+| "Should work now" | RUN the verification |
+| "I'm confident" | Confidence ≠ evidence |
+| "Just this once" | No exceptions |
+| "Linter passed" | Linter ≠ compiler |
+| "Agent said success" | Verify independently |
+| "I'm tired" | Exhaustion ≠ excuse |
+| "Partial check is enough" | Partial proves nothing |
+| "Different words so rule doesn't apply" | Spirit over letter |
+
+## Key Patterns
+
+**Tests:**
+```
+✅ [Run test command] [See: 34/34 pass] "All tests pass"
+❌ "Should pass now" / "Looks correct"
+```
+
+**Regression tests (TDD Red-Green):**
+```
+✅ Write → Run (pass) → Revert fix → Run (MUST FAIL) → Restore → Run (pass)
+❌ "I've written a regression test" (without red-green verification)
+```
+
+**Build:**
+```
+✅ [Run build] [See: exit 0] "Build passes"
+❌ "Linter passed" (linter doesn't check compilation)
+```
+
+**Requirements:**
+```
+✅ Re-read plan → Create checklist → Verify each → Report gaps or completion
+❌ "Tests pass, phase complete"
+```
+
+**Agent delegation:**
+```
+✅ Agent reports success → Check VCS diff → Verify changes → Report actual state
+❌ Trust agent report
+```
+
+## Why This Matters
+
+From 24 failure memories:
+- your human partner said "I don't believe you" - trust broken
+- Undefined functions shipped - would crash
+- Missing requirements shipped - incomplete features
+- Time wasted on false completion → redirect → rework
+- Violates: "Honesty is a core value. If you lie, you'll be replaced."
+
+## When To Apply
+
+**ALWAYS before:**
+- ANY variation of success/completion claims
+- ANY expression of satisfaction
+- ANY positive statement about work state
+- Committing, PR creation, task completion
+- Moving to next task
+- Delegating to agents
+
+**Rule applies to:**
+- Exact phrases
+- Paraphrases and synonyms
+- Implications of success
+- ANY communication suggesting completion/correctness
+
+## The Bottom Line
+
+**No shortcuts for verification.**
+
+Run the command. Read the output. THEN claim the result.
+
+This is non-negotiable.
diff --git a/.cursor/skills/zustand-state-management/.claude-plugin/plugin.json b/.cursor/skills/zustand-state-management/.claude-plugin/plugin.json
new file mode 100644
index 0000000..f051d67
--- /dev/null
+++ b/.cursor/skills/zustand-state-management/.claude-plugin/plugin.json
@@ -0,0 +1,12 @@
+{
+  "name": "zustand-state-management",
+  "description": "Build type-safe global state in React with Zustand. Supports TypeScript, persist middleware, devtools, slices pattern, and Next.js SSR with hydration handling. Use when setting up React state, migrating from Redux/Context, or troubleshooting hydration errors, TypeScript inference, or infinite render loops.",
+  "version": "1.0.0",
+  "author": {
+    "name": "Jeremy Dawes",
+    "email": "jeremy@jezweb.net"
+  },
+  "license": "MIT",
+  "repository": "https://github.com/jezweb/claude-skills",
+  "keywords": []
+}
diff --git a/.cursor/skills/zustand-state-management/SKILL.md b/.cursor/skills/zustand-state-management/SKILL.md
new file mode 100644
index 0000000..52a2dc9
--- /dev/null
+++ b/.cursor/skills/zustand-state-management/SKILL.md
@@ -0,0 +1,462 @@
+---
+name: zustand-state-management
+description: |
+  Build type-safe global state in React with Zustand. Supports TypeScript, persist middleware, devtools, slices pattern, and Next.js SSR with hydration handling. Prevents 6 documented errors.
+
+  Use when setting up React state, migrating from Redux/Context, or troubleshooting hydration errors, TypeScript inference, infinite render loops, or persist race conditions.
+user-invocable: true
+---
+
+# Zustand State Management
+
+**Last Updated**: 2026-01-21
+**Latest Version**: zustand@5.0.10 (released 2026-01-12)
+**Dependencies**: React 18-19, TypeScript 5+
+
+---
+
+## Quick Start
+
+```bash
+npm install zustand
+```
+
+**TypeScript Store** (CRITICAL: use `create<T>()()` double parentheses):
+```typescript
+import { create } from 'zustand'
+
+interface BearStore {
+  bears: number
+  increase: (by: number) => void
+}
+
+const useBearStore = create<BearStore>()((set) => ({
+  bears: 0,
+  increase: (by) => set((state) => ({ bears: state.bears + by })),
+}))
+```
+
+**Use in Components**:
+```tsx
+const bears = useBearStore((state) => state.bears)  // Only re-renders when bears changes
+const increase = useBearStore((state) => state.increase)
+```
+
+---
+
+## Core Patterns
+
+**Basic Store** (JavaScript):
+```javascript
+const useStore = create((set) => ({
+  count: 0,
+  increment: () => set((state) => ({ count: state.count + 1 })),
+}))
+```
+
+**TypeScript Store** (Recommended):
+```typescript
+interface CounterStore { count: number; increment: () => void }
+const useStore = create<CounterStore>()((set) => ({
+  count: 0,
+  increment: () => set((state) => ({ count: state.count + 1 })),
+}))
+```
+
+**Persistent Store** (survives page reloads):
+```typescript
+import { persist, createJSONStorage } from 'zustand/middleware'
+
+const useStore = create<UserPreferences>()(
+  persist(
+    (set) => ({ theme: 'system', setTheme: (theme) => set({ theme }) }),
+    { name: 'user-preferences', storage: createJSONStorage(() => localStorage) },
+  ),
+)
+```
+
+---
+
+## Critical Rules
+
+### Always Do
+
+✅ Use `create<T>()()` (double parentheses) in TypeScript for middleware compatibility
+✅ Define separate interfaces for state and actions
+✅ Use selector functions to extract specific state slices
+✅ Use `set` with updater functions for derived state: `set((state) => ({ count: state.count + 1 }))`
+✅ Use unique names for persist middleware storage keys
+✅ Handle Next.js hydration with `hasHydrated` flag pattern
+✅ Use `useShallow` hook for selecting multiple values
+✅ Keep actions pure (no side effects except state updates)
+
+### Never Do
+
+❌ Use `create<T>(...)` (single parentheses) in TypeScript - breaks middleware types
+❌ Mutate state directly: `set((state) => { state.count++; return state })` - use immutable updates
+❌ Create new objects in selectors: `useStore((state) => ({ a: state.a }))` - causes infinite renders
+❌ Use same storage name for multiple stores - causes data collisions
+❌ Access localStorage during SSR without hydration check
+❌ Use Zustand for server state - use TanStack Query instead
+❌ Export store instance directly - always export the hook
+
+---
+
+## Known Issues Prevention
+
+This skill prevents **6** documented issues:
+
+### Issue #1: Next.js Hydration Mismatch
+
+**Error**: `"Text content does not match server-rendered HTML"` or `"Hydration failed"`
+
+**Source**:
+- [DEV Community: Persist middleware in Next.js](https://dev.to/abdulsamad/how-to-use-zustands-persist-middleware-in-nextjs-4lb5)
+- GitHub Discussions #2839
+
+**Why It Happens**:
+Persist middleware reads from localStorage on client but not on server, causing state mismatch.
+
+**Prevention**:
+```typescript
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+interface StoreWithHydration {
+  count: number
+  _hasHydrated: boolean
+  setHasHydrated: (hydrated: boolean) => void
+  increase: () => void
+}
+
+const useStore = create<StoreWithHydration>()(
+  persist(
+    (set) => ({
+      count: 0,
+      _hasHydrated: false,
+      setHasHydrated: (hydrated) => set({ _hasHydrated: hydrated }),
+      increase: () => set((state) => ({ count: state.count + 1 })),
+    }),
+    {
+      name: 'my-store',
+      onRehydrateStorage: () => (state) => {
+        state?.setHasHydrated(true)
+      },
+    },
+  ),
+)
+
+// In component
+function MyComponent() {
+  const hasHydrated = useStore((state) => state._hasHydrated)
+
+  if (!hasHydrated) {
+    return <div>Loading...</div>
+  }
+
+  // Now safe to render with persisted state
+  return <ActualContent />
+}
+```
+
+### Issue #2: TypeScript Double Parentheses Missing
+
+**Error**: Type inference fails, `StateCreator` types break with middleware
+
+**Source**: [Official Zustand TypeScript Guide](https://zustand.docs.pmnd.rs/guides/typescript)
+
+**Why It Happens**:
+The currying syntax `create<T>()()` is required for middleware to work with TypeScript inference.
+
+**Prevention**:
+```typescript
+// ❌ WRONG - Single parentheses
+const useStore = create<MyStore>((set) => ({
+  // ...
+}))
+
+// ✅ CORRECT - Double parentheses
+const useStore = create<MyStore>()((set) => ({
+  // ...
+}))
+```
+
+**Rule**: Always use `create<T>()()` in TypeScript, even without middleware (future-proof).
+
+### Issue #3: Persist Middleware Import Error
+
+**Error**: `"Attempted import error: 'createJSONStorage' is not exported from 'zustand/middleware'"`
+
+**Source**: GitHub Discussion #2839
+
+**Why It Happens**:
+Wrong import path or version mismatch between zustand and build tools.
+
+**Prevention**:
+```typescript
+// ✅ CORRECT imports for v5
+import { create } from 'zustand'
+import { persist, createJSONStorage } from 'zustand/middleware'
+
+// Verify versions
+// zustand@5.0.9 includes createJSONStorage
+// zustand@4.x uses different API
+
+// Check your package.json
+// "zustand": "^5.0.9"
+```
+
+### Issue #4: Infinite Render Loop
+
+**Error**: Component re-renders infinitely, browser freezes
+```
+Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate.
+```
+
+**Source**:
+- GitHub Discussions #2642
+- [Issue #2863](https://github.com/pmndrs/zustand/issues/2863)
+
+**Why It Happens**:
+Creating new object references in selectors causes Zustand to think state changed.
+
+**v5 Breaking Change**: Zustand v5 made this error MORE explicit compared to v4. In v4, this behavior was "non-ideal" but could go unnoticed. In v5, you'll immediately see the "Maximum update depth exceeded" error.
+
+**Prevention**:
+```typescript
+import { useShallow } from 'zustand/shallow'
+
+// ❌ WRONG - Creates new object every time
+const { bears, fishes } = useStore((state) => ({
+  bears: state.bears,
+  fishes: state.fishes,
+}))
+
+// ✅ CORRECT Option 1 - Select primitives separately
+const bears = useStore((state) => state.bears)
+const fishes = useStore((state) => state.fishes)
+
+// ✅ CORRECT Option 2 - Use useShallow hook for multiple values
+const { bears, fishes } = useStore(
+  useShallow((state) => ({ bears: state.bears, fishes: state.fishes }))
+)
+```
+
+### Issue #5: Slices Pattern TypeScript Complexity
+
+**Error**: `StateCreator` types fail to infer, complex middleware types break
+
+**Source**: [Official Slices Pattern Guide](https://github.com/pmndrs/zustand/blob/main/docs/guides/slices-pattern.md)
+
+**Why It Happens**:
+Combining multiple slices requires explicit type annotations for middleware compatibility.
+
+**Prevention**:
+```typescript
+import { create, StateCreator } from 'zustand'
+
+// Define slice types
+interface BearSlice {
+  bears: number
+  addBear: () => void
+}
+
+interface FishSlice {
+  fishes: number
+  addFish: () => void
+}
+
+// Create slices with proper types
+const createBearSlice: StateCreator<
+  BearSlice & FishSlice,  // Combined store type
+  [],                      // Middleware mutators (empty if none)
+  [],                      // Chained middleware (empty if none)
+  BearSlice               // This slice's type
+> = (set) => ({
+  bears: 0,
+  addBear: () => set((state) => ({ bears: state.bears + 1 })),
+})
+
+const createFishSlice: StateCreator<
+  BearSlice & FishSlice,
+  [],
+  [],
+  FishSlice
+> = (set) => ({
+  fishes: 0,
+  addFish: () => set((state) => ({ fishes: state.fishes + 1 })),
+})
+
+// Combine slices
+const useStore = create<BearSlice & FishSlice>()((...a) => ({
+  ...createBearSlice(...a),
+  ...createFishSlice(...a),
+}))
+```
+
+### Issue #6: Persist Middleware Race Condition (Fixed v5.0.10+)
+
+**Error**: Inconsistent state during concurrent rehydration attempts
+
+**Source**:
+- [GitHub PR #3336](https://github.com/pmndrs/zustand/pull/3336)
+- [Release v5.0.10](https://github.com/pmndrs/zustand/releases/tag/v5.0.10)
+
+**Why It Happens**:
+In Zustand v5.0.9 and earlier, concurrent calls to rehydrate during persist middleware initialization could cause a race condition where multiple hydration attempts would interfere with each other, leading to inconsistent state.
+
+**Prevention**:
+Upgrade to Zustand v5.0.10 or later. No code changes needed - the fix is internal to the persist middleware.
+
+```bash
+npm install zustand@latest  # Ensure v5.0.10+
+```
+
+**Note**: This was fixed in v5.0.10 (January 2026). If you're using v5.0.9 or earlier and experiencing state inconsistencies with persist middleware, upgrade immediately.
+
+---
+
+## Middleware
+
+**Persist** (localStorage):
+```typescript
+import { persist, createJSONStorage } from 'zustand/middleware'
+
+const useStore = create<MyStore>()(
+  persist(
+    (set) => ({ data: [], addItem: (item) => set((state) => ({ data: [...state.data, item] })) }),
+    {
+      name: 'my-storage',
+      partialize: (state) => ({ data: state.data }),  // Only persist 'data'
+    },
+  ),
+)
+```
+
+**Devtools** (Redux DevTools):
+```typescript
+import { devtools } from 'zustand/middleware'
+
+const useStore = create<CounterStore>()(
+  devtools(
+    (set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 }), undefined, 'increment') }),
+    { name: 'CounterStore' },
+  ),
+)
+```
+
+**v4→v5 Migration Note**: In Zustand v4, devtools was imported from `'zustand/middleware/devtools'`. In v5, use `'zustand/middleware'` (as shown above). If you see "Module not found: Can't resolve 'zustand/middleware/devtools'", update your import path.
+
+**Combining Middlewares** (order matters):
+```typescript
+const useStore = create<MyStore>()(devtools(persist((set) => ({ /* ... */ }), { name: 'storage' }), { name: 'MyStore' }))
+```
+
+---
+
+## Common Patterns
+
+**Computed/Derived Values** (in selector, not stored):
+```typescript
+const count = useStore((state) => state.items.length)  // Computed on read
+```
+
+**Async Actions**:
+```typescript
+const useAsyncStore = create<AsyncStore>()((set) => ({
+  data: null,
+  isLoading: false,
+  fetchData: async () => {
+    set({ isLoading: true })
+    const response = await fetch('/api/data')
+    set({ data: await response.text(), isLoading: false })
+  },
+}))
+```
+
+**Resetting Store**:
+```typescript
+const initialState = { count: 0, name: '' }
+const useStore = create<ResettableStore>()((set) => ({
+  ...initialState,
+  reset: () => set(initialState),
+}))
+```
+
+**Selector with Params**:
+```typescript
+const todo = useStore((state) => state.todos.find((t) => t.id === id))
+```
+
+---
+
+## Bundled Resources
+
+**Templates**: `basic-store.ts`, `typescript-store.ts`, `persist-store.ts`, `slices-pattern.ts`, `devtools-store.ts`, `nextjs-store.ts`, `computed-store.ts`, `async-actions-store.ts`
+
+**References**: `middleware-guide.md` (persist/devtools/immer/custom), `typescript-patterns.md` (type inference issues), `nextjs-hydration.md` (SSR/hydration), `migration-guide.md` (from Redux/Context/v4)
+
+**Scripts**: `check-versions.sh` (version compatibility)
+
+---
+
+## Advanced Topics
+
+**Vanilla Store** (Without React):
+```typescript
+import { createStore } from 'zustand/vanilla'
+
+const store = createStore<CounterStore>()((set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }))
+const unsubscribe = store.subscribe((state) => console.log(state.count))
+store.getState().increment()
+```
+
+**Custom Middleware**:
+```typescript
+const logger: Logger = (f, name) => (set, get, store) => {
+  const loggedSet: typeof set = (...a) => { set(...a); console.log(`[${name}]:`, get()) }
+  return f(loggedSet, get, store)
+}
+```
+
+**Immer Middleware** (Mutable Updates):
+```typescript
+import { immer } from 'zustand/middleware/immer'
+
+const useStore = create<TodoStore>()(immer((set) => ({
+  todos: [],
+  addTodo: (text) => set((state) => { state.todos.push({ id: Date.now().toString(), text }) }),
+})))
+```
+
+**v5.0.3→v5.0.4 Migration Note**: If upgrading from v5.0.3 to v5.0.4+ and immer middleware stops working, verify you're using the import path shown above (`zustand/middleware/immer`). Some users reported issues after the v5.0.4 update that were resolved by confirming the correct import.
+
+**Experimental SSR Safe Middleware** (v5.0.9+):
+
+**Status**: Experimental (API may change)
+
+Zustand v5.0.9 introduced experimental `unstable_ssrSafe` middleware for Next.js usage. This provides an alternative approach to the `_hasHydrated` pattern (see Issue #1).
+
+```typescript
+import { unstable_ssrSafe } from 'zustand/middleware'
+
+const useStore = create<Store>()(
+  unstable_ssrSafe(
+    persist(
+      (set) => ({ /* state */ }),
+      { name: 'my-store' }
+    )
+  )
+)
+```
+
+**Recommendation**: Continue using the `_hasHydrated` pattern documented in Issue #1 until this API stabilizes. Monitor [Discussion #2740](https://github.com/pmndrs/zustand/discussions/2740) for updates on when this becomes stable.
+
+---
+
+## Official Documentation
+
+- **Zustand**: https://zustand.docs.pmnd.rs/
+- **GitHub**: https://github.com/pmndrs/zustand
+- **TypeScript Guide**: https://zustand.docs.pmnd.rs/guides/typescript
+- **Context7 Library ID**: `/pmndrs/zustand`
diff --git a/.cursor/skills/zustand-state-management/assets/example-template.txt b/.cursor/skills/zustand-state-management/assets/example-template.txt
new file mode 100644
index 0000000..349fec2
--- /dev/null
+++ b/.cursor/skills/zustand-state-management/assets/example-template.txt
@@ -0,0 +1,14 @@
+[TODO: Example Template File]
+
+[TODO: This directory contains files that will be used in the OUTPUT that Claude produces.]
+
+[TODO: Examples:]
+- Templates (.html, .tsx, .md)
+- Images (.png, .svg)
+- Fonts (.ttf, .woff)
+- Boilerplate code
+- Configuration file templates
+
+[TODO: Delete this file and add your actual assets]
+
+These files are NOT loaded into context. They are copied or used directly in the final output.
diff --git a/.cursor/skills/zustand-state-management/references/example-reference.md b/.cursor/skills/zustand-state-management/references/example-reference.md
new file mode 100644
index 0000000..1be1b40
--- /dev/null
+++ b/.cursor/skills/zustand-state-management/references/example-reference.md
@@ -0,0 +1,26 @@
+# [TODO: Reference Document Name]
+
+[TODO: This file contains reference documentation that Claude can load when needed.]
+
+[TODO: Delete this file if you don't have reference documentation to provide.]
+
+## Purpose
+
+[TODO: Explain what information this document contains]
+
+## When Claude Should Use This
+
+[TODO: Describe specific scenarios where Claude should load this reference]
+
+## Content
+
+[TODO: Add your reference content here - schemas, guides, specifications, etc.]
+
+---
+
+**Note**: This file is NOT loaded into context by default. Claude will only load it when:
+- It determines the information is needed
+- You explicitly ask Claude to reference it
+- The SKILL.md instructions direct Claude to read it
+
+Keep this file under 10k words for best performance.
diff --git a/.cursor/skills/zustand-state-management/references/middleware-guide.md b/.cursor/skills/zustand-state-management/references/middleware-guide.md
new file mode 100644
index 0000000..f969b6e
--- /dev/null
+++ b/.cursor/skills/zustand-state-management/references/middleware-guide.md
@@ -0,0 +1,303 @@
+# Zustand Middleware Complete Guide
+
+Complete reference for all Zustand middleware. Load when user asks about persistence, devtools, immer, or custom middleware.
+
+---
+
+## Persist Middleware
+
+### Basic Usage
+
+```typescript
+import { create } from 'zustand'
+import { persist, createJSONStorage } from 'zustand/middleware'
+
+const useStore = create<Store>()(
+  persist(
+    (set) => ({ /* store */ }),
+    { name: 'storage-name' }
+  )
+)
+```
+
+### Storage Options
+
+```typescript
+// localStorage (default)
+storage: createJSONStorage(() => localStorage)
+
+// sessionStorage
+storage: createJSONStorage(() => sessionStorage)
+
+// Custom storage
+storage: createJSONStorage(() => customStorage)
+```
+
+### Partial Persistence
+
+```typescript
+persist(
+  (set) => ({ /* store */ }),
+  {
+    name: 'storage',
+    partialize: (state) => ({
+      theme: state.theme,
+      // Don't persist sensitive data
+    }),
+  }
+)
+```
+
+### Schema Migration
+
+```typescript
+persist(
+  (set) => ({ /* store */ }),
+  {
+    name: 'storage',
+    version: 2,
+    migrate: (persistedState: any, version) => {
+      if (version === 0) {
+        // v0 → v1
+        persistedState.newField = 'default'
+      }
+      if (version === 1) {
+        // v1 → v2
+        delete persistedState.oldField
+      }
+      return persistedState
+    },
+  }
+)
+```
+
+---
+
+## Devtools Middleware
+
+### Basic Usage
+
+```typescript
+import { devtools } from 'zustand/middleware'
+
+const useStore = create<Store>()(
+  devtools(
+    (set) => ({ /* store */ }),
+    { name: 'StoreName' }
+  )
+)
+```
+
+### Named Actions
+
+```typescript
+increment: () => set(
+  (state) => ({ count: state.count + 1 }),
+  undefined,
+  'counter/increment' // Shows in DevTools
+)
+```
+
+### Production Toggle
+
+```typescript
+devtools(
+  (set) => ({ /* store */ }),
+  {
+    name: 'Store',
+    enabled: process.env.NODE_ENV === 'development'
+  }
+)
+```
+
+---
+
+## Immer Middleware
+
+Allows mutable state updates (Immer handles immutability):
+
+```typescript
+import { immer } from 'zustand/middleware/immer'
+
+const useStore = create<Store>()(
+  immer((set) => ({
+    todos: [],
+    addTodo: (text) => set((state) => {
+      // Mutate directly!
+      state.todos.push({ id: Date.now(), text })
+    }),
+  }))
+)
+```
+
+**When to use**: Complex nested state updates
+
+---
+
+## Combining Middlewares
+
+### Order Matters
+
+```typescript
+// ✅ CORRECT: devtools wraps persist
+const useStore = create<Store>()(
+  devtools(
+    persist(
+      (set) => ({ /* store */ }),
+      { name: 'storage' }
+    ),
+    { name: 'Store' }
+  )
+)
+
+// Shows persist actions in DevTools
+```
+
+### Common Combinations
+
+```typescript
+// Persist + Devtools
+devtools(persist(...), { name: 'Store' })
+
+// Persist + Immer
+persist(immer(...), { name: 'storage' })
+
+// All three
+devtools(
+  persist(
+    immer(...),
+    { name: 'storage' }
+  ),
+  { name: 'Store' }
+)
+```
+
+---
+
+## Custom Middleware
+
+### Logger Example
+
+```typescript
+const logger = (config) => (set, get, api) => {
+  return config(
+    (...args) => {
+      console.log('Before:', get())
+      set(...args)
+      console.log('After:', get())
+    },
+    get,
+    api
+  )
+}
+
+const useStore = create(logger((set) => ({ /* store */ })))
+```
+
+### TypeScript Logger
+
+```typescript
+import { StateCreator } from 'zustand'
+
+type Logger = <T>(
+  f: StateCreator<T, [], []>,
+  name?: string
+) => StateCreator<T, [], []>
+
+const logger: Logger = (f, name) => (set, get, store) => {
+  const loggedSet: typeof set = (...a) => {
+    set(...(a as Parameters<typeof set>))
+    console.log(`[${name}]:`, get())
+  }
+  return f(loggedSet, get, store)
+}
+```
+
+---
+
+## Middleware API Reference
+
+### persist()
+
+```typescript
+persist<T>(
+  stateCreator: StateCreator<T>,
+  options: {
+    name: string                    // Storage key (required)
+    storage?: PersistStorage<T>     // Storage engine
+    partialize?: (state: T) => Partial<T>  // Select what to persist
+    version?: number                // Schema version
+    migrate?: (state: any, version: number) => T  // Migration function
+    merge?: (persisted: any, current: T) => T     // Custom merge
+    onRehydrateStorage?: (state: T) => void       // Hydration callback
+  }
+)
+```
+
+### devtools()
+
+```typescript
+devtools<T>(
+  stateCreator: StateCreator<T>,
+  options?: {
+    name?: string      // Store name in DevTools
+    enabled?: boolean  // Enable/disable
+  }
+)
+```
+
+### immer()
+
+```typescript
+immer<T>(
+  stateCreator: StateCreator<T>
+)
+```
+
+---
+
+## Common Patterns
+
+### Reset Store
+
+```typescript
+const initialState = { count: 0 }
+
+const useStore = create<Store>()(
+  persist(
+    (set) => ({
+      ...initialState,
+      reset: () => set(initialState),
+    }),
+    { name: 'storage' }
+  )
+)
+```
+
+### Clear Persisted Data
+
+```typescript
+// Clear localStorage
+localStorage.removeItem('storage-name')
+
+// Or programmatically
+const useStore = create<Store>()(
+  persist(
+    (set) => ({
+      clearStorage: () => {
+        localStorage.removeItem('storage-name')
+        set(initialState)
+      },
+    }),
+    { name: 'storage-name' }
+  )
+)
+```
+
+---
+
+## Official Documentation
+
+- **Persist**: https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md
+- **Devtools**: https://github.com/pmndrs/zustand/blob/main/docs/middlewares/devtools.md
+- **Immer**: https://github.com/pmndrs/zustand/blob/main/docs/middlewares/immer.md
diff --git a/.cursor/skills/zustand-state-management/references/migration-guide.md b/.cursor/skills/zustand-state-management/references/migration-guide.md
new file mode 100644
index 0000000..b52f9fc
--- /dev/null
+++ b/.cursor/skills/zustand-state-management/references/migration-guide.md
@@ -0,0 +1,302 @@
+# Migrating to Zustand
+
+Guide for migrating from Redux, Context API, or Zustand v4. Load when user is migrating state management.
+
+---
+
+## From Redux to Zustand
+
+### Before (Redux)
+
+```typescript
+// Action types
+const INCREMENT = 'INCREMENT'
+const DECREMENT = 'DECREMENT'
+
+// Actions
+const increment = () => ({ type: INCREMENT })
+const decrement = () => ({ type: DECREMENT })
+
+// Reducer
+const reducer = (state = { count: 0 }, action) => {
+  switch (action.type) {
+    case INCREMENT:
+      return { count: state.count + 1 }
+    case DECREMENT:
+      return { count: state.count - 1 }
+    default:
+      return state
+  }
+}
+
+// Store
+const store = createStore(reducer)
+
+// Provider
+<Provider store={store}>
+  <App />
+</Provider>
+
+// Component
+const count = useSelector((state) => state.count)
+const dispatch = useDispatch()
+<button onClick={() => dispatch(increment())}>Increment</button>
+```
+
+### After (Zustand)
+
+```typescript
+// Store (all in one!)
+import { create } from 'zustand'
+
+interface Store {
+  count: number
+  increment: () => void
+  decrement: () => void
+}
+
+const useStore = create<Store>()((set) => ({
+  count: 0,
+  increment: () => set((state) => ({ count: state.count + 1 })),
+  decrement: () => set((state) => ({ count: state.count - 1 })),
+}))
+
+// No provider needed!
+
+// Component
+const count = useStore((state) => state.count)
+const increment = useStore((state) => state.increment)
+<button onClick={increment}>Increment</button>
+```
+
+**Benefits**:
+- ~90% less boilerplate
+- No provider wrapper
+- No action types/creators
+- No reducer switch
+- Built-in TypeScript support
+
+---
+
+## From Context API to Zustand
+
+### Before (Context)
+
+```typescript
+// Context
+const CountContext = createContext(null)
+
+// Provider
+function CountProvider({ children }) {
+  const [count, setCount] = useState(0)
+
+  const increment = () => setCount((c) => c + 1)
+  const decrement = () => setCount((c) => c - 1)
+
+  return (
+    <CountContext.Provider value={{ count, increment, decrement }}>
+      {children}
+    </CountContext.Provider>
+  )
+}
+
+// Hook
+function useCount() {
+  const context = useContext(CountContext)
+  if (!context) throw new Error('useCount must be within CountProvider')
+  return context
+}
+
+// App
+<CountProvider>
+  <App />
+</CountProvider>
+
+// Component
+const { count, increment } = useCount()
+```
+
+### After (Zustand)
+
+```typescript
+// Store
+const useStore = create<Store>()((set) => ({
+  count: 0,
+  increment: () => set((state) => ({ count: state.count + 1 })),
+  decrement: () => set((state) => ({ count: state.count - 1 })),
+}))
+
+// Component (no provider needed!)
+const count = useStore((state) => state.count)
+const increment = useStore((state) => state.increment)
+```
+
+**Benefits**:
+- No provider needed
+- No context null checks
+- No wrapper components
+- Better performance (no context re-renders)
+- Persistent by default (with middleware)
+
+---
+
+## From Zustand v4 to v5
+
+### Breaking Changes
+
+#### 1. TypeScript Syntax
+
+```typescript
+// ❌ v4
+const useStore = create<Store>((set) => ({ /* ... */ }))
+
+// ✅ v5
+const useStore = create<Store>()((set) => ({ /* ... */ }))
+//                            ^^ Double parentheses required
+```
+
+#### 2. Persist Middleware Imports
+
+```typescript
+// ❌ v4
+import { persist } from 'zustand/middleware'
+
+const useStore = create(
+  persist((set) => ({ /* ... */ }), { name: 'storage' })
+)
+
+// ✅ v5
+import { persist, createJSONStorage } from 'zustand/middleware'
+
+const useStore = create<Store>()(
+  persist(
+    (set) => ({ /* ... */ }),
+    {
+      name: 'storage',
+      storage: createJSONStorage(() => localStorage),
+    }
+  )
+)
+```
+
+#### 3. Shallow Import
+
+```typescript
+// ❌ v4
+import shallow from 'zustand/shallow'
+
+// ✅ v5
+import { shallow } from 'zustand/shallow'
+```
+
+---
+
+## Migration Strategies
+
+### Gradual Migration
+
+1. **Install Zustand** alongside existing solution
+2. **Migrate one feature** at a time
+3. **Test thoroughly** before moving to next
+4. **Remove old code** once stable
+
+### Big Bang Migration
+
+1. **Create Zustand stores** for all state
+2. **Update all components** at once
+3. **Remove old state management** entirely
+4. **Test everything**
+
+**Recommendation**: Gradual migration for large apps.
+
+---
+
+## Code Mapping
+
+### Redux → Zustand
+
+| Redux | Zustand |
+|-------|---------|
+| Actions | Direct functions in store |
+| Action types | Not needed |
+| Reducers | Inline in `set()` calls |
+| `useSelector` | Direct store selectors |
+| `useDispatch` | Direct function calls |
+| Provider | Not needed |
+| Middleware | Built-in (`persist`, `devtools`) |
+| DevTools | `devtools` middleware |
+
+### Context → Zustand
+
+| Context | Zustand |
+|---------|---------|
+| `createContext` | `create()` |
+| Provider | Not needed |
+| `useContext` | Direct store access |
+| State | Store state |
+| Updaters | Store actions |
+
+---
+
+## Common Pitfalls
+
+### 1. Forgetting Double Parentheses (v5)
+
+```typescript
+// ❌ WRONG
+create<Store>((set) => ({ /* ... */ }))
+
+// ✅ CORRECT
+create<Store>()((set) => ({ /* ... */ }))
+```
+
+### 2. Creating Objects in Selectors
+
+```typescript
+// ❌ WRONG - Causes infinite renders
+const { a, b } = useStore((state) => ({ a: state.a, b: state.b }))
+
+// ✅ CORRECT
+const a = useStore((state) => state.a)
+const b = useStore((state) => state.b)
+```
+
+### 3. Not Using Persist Correctly
+
+```typescript
+// ❌ WRONG - Missing createJSONStorage
+persist((set) => ({ /* ... */ }), { name: 'storage' })
+
+// ✅ CORRECT
+persist(
+  (set) => ({ /* ... */ }),
+  {
+    name: 'storage',
+    storage: createJSONStorage(() => localStorage),
+  }
+)
+```
+
+---
+
+## Checklist
+
+- [ ] Installed Zustand v5+
+- [ ] Created store with `create<T>()()`
+- [ ] Removed Context providers (if migrating from Context)
+- [ ] Removed Redux boilerplate (if migrating from Redux)
+- [ ] Updated all `useSelector` to Zustand selectors
+- [ ] Updated all `useDispatch` to direct function calls
+- [ ] Added `persist` if state needs persistence
+- [ ] Added `devtools` if using Redux DevTools
+- [ ] Tested all components
+- [ ] Verified no hydration errors (Next.js)
+- [ ] Removed old state management code
+
+---
+
+## Official Resources
+
+- **Zustand Docs**: https://zustand.docs.pmnd.rs/
+- **Migration Guide**: https://github.com/pmndrs/zustand/wiki/Migrating-to-v4
+- **TypeScript Guide**: https://zustand.docs.pmnd.rs/guides/typescript
diff --git a/.cursor/skills/zustand-state-management/references/nextjs-hydration.md b/.cursor/skills/zustand-state-management/references/nextjs-hydration.md
new file mode 100644
index 0000000..7b848b7
--- /dev/null
+++ b/.cursor/skills/zustand-state-management/references/nextjs-hydration.md
@@ -0,0 +1,274 @@
+# Zustand + Next.js Hydration Guide
+
+Complete guide for using Zustand with Next.js SSR. Load for Next.js-specific problems.
+
+---
+
+## The Hydration Problem
+
+**Error**: `"Text content does not match server-rendered HTML"`
+
+**Why it happens**:
+- Server renders with default state
+- Client loads persisted state from localStorage
+- Content doesn't match → hydration error
+
+---
+
+## Solution: Hydration Flag Pattern
+
+### Store Setup
+
+```typescript
+'use client'
+
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+interface Store {
+  _hasHydrated: boolean  // Track hydration
+  count: number
+  setHasHydrated: (hydrated: boolean) => void
+  increment: () => void
+}
+
+export const useStore = create<Store>()(
+  persist(
+    (set) => ({
+      _hasHydrated: false,
+      count: 0,
+      setHasHydrated: (hydrated) => set({ _hasHydrated: hydrated }),
+      increment: () => set((state) => ({ count: state.count + 1 })),
+    }),
+    {
+      name: 'storage',
+      onRehydrateStorage: () => (state) => {
+        state?.setHasHydrated(true)  // Set true when done
+      },
+    },
+  ),
+)
+```
+
+### Component Usage
+
+```typescript
+'use client'
+
+function Component() {
+  const hasHydrated = useStore((state) => state._hasHydrated)
+  const count = useStore((state) => state.count)
+
+  if (!hasHydrated) {
+    return <div>Loading...</div>
+  }
+
+  return <div>Count: {count}</div>
+}
+```
+
+---
+
+## Alternative: Accept Flash
+
+If loading state is unacceptable, accept brief flash:
+
+```typescript
+'use client'
+
+function Component() {
+  const count = useStore((state) => state.count)
+
+  // Will show default (0) briefly, then correct value
+  return <div>Count: {count}</div>
+}
+```
+
+**Trade-off**: Simpler code, but user sees flash.
+
+---
+
+## App Router vs Pages Router
+
+### App Router (Recommended)
+
+```typescript
+// app/layout.tsx
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
+
+// app/page.tsx
+'use client'
+
+import { useStore } from './store'
+
+export default function Page() {
+  return <Component />
+}
+```
+
+**Note**: Add `'use client'` to components using Zustand.
+
+### Pages Router
+
+```typescript
+// pages/_app.tsx
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+// pages/index.tsx
+import { useStore } from '../store'
+
+export default function Page() {
+  return <Component />
+}
+```
+
+**Note**: No `'use client'` needed in Pages Router.
+
+---
+
+## Server Components
+
+**NEVER** use Zustand in Server Components:
+
+```typescript
+// ❌ WRONG - Server Component
+export default async function ServerComponent() {
+  const count = useStore((state) => state.count)  // Error!
+  return <div>{count}</div>
+}
+
+// ✅ CORRECT - Client Component
+'use client'
+
+export default function ClientComponent() {
+  const count = useStore((state) => state.count)
+  return <div>{count}</div>
+}
+```
+
+---
+
+## SSR with getServerSideProps
+
+```typescript
+// pages/index.tsx
+import { GetServerSideProps } from 'next'
+
+export const getServerSideProps: GetServerSideProps = async () => {
+  // Fetch data on server
+  const data = await fetchData()
+
+  return {
+    props: { data },
+  }
+}
+
+export default function Page({ data }) {
+  const setData = useStore((state) => state.setData)
+
+  // Sync server data to store
+  useEffect(() => {
+    setData(data)
+  }, [data, setData])
+
+  return <Component />
+}
+```
+
+---
+
+## Common Patterns
+
+### Initialize Store from Props
+
+```typescript
+'use client'
+
+function Page({ serverData }) {
+  const setData = useStore((state) => state.setData)
+
+  useEffect(() => {
+    setData(serverData)
+  }, [serverData, setData])
+
+  return <Component />
+}
+```
+
+### Conditional Rendering
+
+```typescript
+'use client'
+
+function Component() {
+  const hasHydrated = useStore((state) => state._hasHydrated)
+  const theme = useStore((state) => state.theme)
+
+  return (
+    <div className={hasHydrated ? theme : 'default'}>
+      {hasHydrated ? <Content /> : <Skeleton />}
+    </div>
+  )
+}
+```
+
+### Progressive Enhancement
+
+```typescript
+'use client'
+
+function Component() {
+  const hasHydrated = useStore((state) => state._hasHydrated)
+  const preferences = useStore((state) => state.preferences)
+
+  // Always render, but enhance after hydration
+  return (
+    <div>
+      <DefaultUI />
+      {hasHydrated && <EnhancedUI preferences={preferences} />}
+    </div>
+  )
+}
+```
+
+---
+
+## Debugging Hydration Errors
+
+### Enable Strict Mode
+
+```typescript
+// next.config.js
+module.exports = {
+  reactStrictMode: true,
+}
+```
+
+### Check for Differences
+
+```typescript
+useEffect(() => {
+  console.log('Server state:', defaultState)
+  console.log('Client state:', persistedState)
+}, [])
+```
+
+### Use React DevTools
+
+Look for red warnings about hydration mismatches.
+
+---
+
+## Official Resources
+
+- **Next.js Hydration**: https://nextjs.org/docs/messages/react-hydration-error
+- **Zustand Persist**: https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md
+- **DEV.to Guide**: https://dev.to/abdulsamad/how-to-use-zustands-persist-middleware-in-nextjs-4lb5
diff --git a/.cursor/skills/zustand-state-management/references/typescript-patterns.md b/.cursor/skills/zustand-state-management/references/typescript-patterns.md
new file mode 100644
index 0000000..8fbb52d
--- /dev/null
+++ b/.cursor/skills/zustand-state-management/references/typescript-patterns.md
@@ -0,0 +1,281 @@
+# Zustand TypeScript Advanced Patterns
+
+Advanced TypeScript patterns and troubleshooting. Load when encountering complex type inference issues.
+
+---
+
+## Basic TypeScript Setup
+
+### The Golden Rule: Double Parentheses
+
+```typescript
+// ✅ CORRECT
+const useStore = create<Store>()((set) => ({ /* ... */ }))
+
+// ❌ WRONG
+const useStore = create<Store>((set) => ({ /* ... */ }))
+```
+
+**Why**: Currying syntax enables middleware type inference.
+
+---
+
+## Store Interface Pattern
+
+```typescript
+// Define types
+interface BearState {
+  bears: number
+}
+
+interface BearActions {
+  increase: (by: number) => void
+  decrease: (by: number) => void
+}
+
+// Combine
+type BearStore = BearState & BearActions
+
+// Use
+const useBearStore = create<BearStore>()((set) => ({
+  bears: 0,
+  increase: (by) => set((state) => ({ bears: state.bears + by })),
+  decrease: (by) => set((state) => ({ bears: state.bears - by })),
+}))
+```
+
+---
+
+## Slices Pattern Types
+
+```typescript
+import { StateCreator } from 'zustand'
+
+// Define slice type
+interface BearSlice {
+  bears: number
+  addBear: () => void
+}
+
+// Create slice with proper types
+const createBearSlice: StateCreator<
+  BearSlice & FishSlice,  // Combined store type
+  [],                      // Middleware mutators
+  [],                      // Chained middleware
+  BearSlice               // This slice
+> = (set) => ({
+  bears: 0,
+  addBear: () => set((state) => ({ bears: state.bears + 1 })),
+})
+```
+
+---
+
+## Middleware Types
+
+### With Devtools
+
+```typescript
+import { StateCreator } from 'zustand'
+import { devtools } from 'zustand/middleware'
+
+interface Store {
+  count: number
+  increment: () => void
+}
+
+const useStore = create<Store>()(
+  devtools(
+    (set) => ({
+      count: 0,
+      increment: () =>
+        set(
+          (state) => ({ count: state.count + 1 }),
+          undefined,
+          'increment'
+        ),
+    }),
+    { name: 'Store' }
+  )
+)
+```
+
+### With Persist
+
+```typescript
+import { persist } from 'zustand/middleware'
+
+const useStore = create<Store>()(
+  persist(
+    (set) => ({ /* ... */ }),
+    { name: 'storage' }
+  )
+)
+```
+
+### With Multiple Middlewares
+
+```typescript
+const useStore = create<Store>()(
+  devtools(
+    persist(
+      (set) => ({ /* ... */ }),
+      { name: 'storage' }
+    ),
+    { name: 'Store' }
+  )
+)
+```
+
+---
+
+## Slices with Middleware
+
+```typescript
+import { StateCreator } from 'zustand'
+import { devtools } from 'zustand/middleware'
+
+const createBearSlice: StateCreator<
+  BearSlice & FishSlice,
+  [['zustand/devtools', never]],  // Add devtools mutator
+  [],
+  BearSlice
+> = (set) => ({
+  bears: 0,
+  addBear: () =>
+    set(
+      (state) => ({ bears: state.bears + 1 }),
+      undefined,
+      'bear/add'
+    ),
+})
+```
+
+---
+
+## Selector Types
+
+### Basic Selector
+
+```typescript
+const bears = useStore((state) => state.bears)
+// Type: number
+```
+
+### Computed Selector
+
+```typescript
+const selectTotal = (state: Store) => state.items.reduce((sum, item) => sum + item.price, 0)
+
+const total = useStore(selectTotal)
+// Type: number
+```
+
+### Parameterized Selector
+
+```typescript
+const selectById = (id: string) => (state: Store) =>
+  state.items.find((item) => item.id === id)
+
+const item = useStore(selectById('123'))
+// Type: Item | undefined
+```
+
+---
+
+## Vanilla Store Types
+
+```typescript
+import { createStore } from 'zustand/vanilla'
+
+const store = createStore<Store>()((set) => ({
+  count: 0,
+  increment: () => set((state) => ({ count: state.count + 1 })),
+}))
+
+// Get state
+const state = store.getState()
+// Type: Store
+
+// Subscribe
+const unsubscribe = store.subscribe((state) => {
+  // state is typed as Store
+})
+```
+
+---
+
+## Custom Hook with Types
+
+```typescript
+import { useStore } from 'zustand'
+
+const bearStore = createStore<BearStore>()((set) => ({
+  bears: 0,
+  increase: () => set((state) => ({ bears: state.bears + 1 })),
+}))
+
+// Create custom hook
+function useBearStore<T>(selector: (state: BearStore) => T): T {
+  return useStore(bearStore, selector)
+}
+```
+
+---
+
+## Common Type Errors
+
+### Error: Type inference breaks
+
+**Problem**: Using single parentheses
+
+```typescript
+// ❌ WRONG
+const useStore = create<Store>((set) => ({ /* ... */ }))
+```
+
+**Solution**: Use double parentheses
+
+```typescript
+// ✅ CORRECT
+const useStore = create<Store>()((set) => ({ /* ... */ }))
+```
+
+### Error: StateCreator types fail
+
+**Problem**: Missing middleware mutators
+
+```typescript
+// ❌ WRONG
+const createSlice: StateCreator<CombinedStore, [], [], MySlice>
+```
+
+**Solution**: Add middleware mutators
+
+```typescript
+// ✅ CORRECT
+const createSlice: StateCreator<
+  CombinedStore,
+  [['zustand/devtools', never]],  // Add this
+  [],
+  MySlice
+>
+```
+
+### Error: Circular reference
+
+**Problem**: Slices referencing each other
+
+**Solution**: Define combined type first, then reference in slices
+
+```typescript
+type AllSlices = BearSlice & FishSlice & SharedSlice
+
+const createBearSlice: StateCreator<AllSlices, [], [], BearSlice> = ...
+```
+
+---
+
+## Official TypeScript Guide
+
+https://zustand.docs.pmnd.rs/guides/typescript
diff --git a/.cursor/skills/zustand-state-management/rules/zustand-state-management.md b/.cursor/skills/zustand-state-management/rules/zustand-state-management.md
new file mode 100644
index 0000000..c90ffac
--- /dev/null
+++ b/.cursor/skills/zustand-state-management/rules/zustand-state-management.md
@@ -0,0 +1,130 @@
+---
+paths: "**/*.ts", "**/*.tsx", "**/*store*.ts", "**/*state*.ts"
+---
+
+# Zustand v5 Corrections
+
+Claude's training may reference v4 patterns. This project uses **Zustand v5**.
+
+## TypeScript: Double Parentheses Required
+
+```typescript
+/* ❌ v4 syntax (breaks middleware types) */
+const useStore = create<MyState>((set) => ({
+  count: 0,
+  increment: () => set((s) => ({ count: s.count + 1 })),
+}))
+
+/* ✅ v5 syntax: create<T>()(...) */
+const useStore = create<MyState>()((set) => ({
+  count: 0,
+  increment: () => set((s) => ({ count: s.count + 1 })),
+}))
+```
+
+## Persist: Import from Middleware
+
+```typescript
+/* ❌ Wrong import */
+import { persist, createJSONStorage } from 'zustand'
+
+/* ✅ Import from middleware */
+import { create } from 'zustand'
+import { persist, createJSONStorage } from 'zustand/middleware'
+
+const useStore = create<MyState>()(
+  persist(
+    (set) => ({ /* ... */ }),
+    {
+      name: 'my-store',
+      storage: createJSONStorage(() => localStorage),
+    }
+  )
+)
+```
+
+## Selectors: Don't Create Objects
+
+```typescript
+/* ❌ Creates new object every render (infinite re-renders) */
+const { count, increment } = useStore((s) => ({
+  count: s.count,
+  increment: s.increment,
+}))
+
+/* ✅ Option 1: Select separately */
+const count = useStore((s) => s.count)
+const increment = useStore((s) => s.increment)
+
+/* ✅ Option 2: Use shallow comparator */
+import { useShallow } from 'zustand/shallow'
+const { count, increment } = useStore(
+  useShallow((s) => ({ count: s.count, increment: s.increment }))
+)
+```
+
+## Next.js Hydration Mismatch
+
+```typescript
+/* ❌ "Text content does not match" error */
+// Persist reads localStorage on client, not server
+
+/* ✅ Add hydration check */
+interface MyState {
+  count: number
+  _hasHydrated: boolean
+  setHasHydrated: (state: boolean) => void
+}
+
+const useStore = create<MyState>()(
+  persist(
+    (set) => ({
+      count: 0,
+      _hasHydrated: false,
+      setHasHydrated: (state) => set({ _hasHydrated: state }),
+    }),
+    {
+      name: 'my-store',
+      onRehydrateStorage: () => (state) => {
+        state?.setHasHydrated(true)
+      },
+    }
+  )
+)
+
+// In component:
+const hasHydrated = useStore((s) => s._hasHydrated)
+if (!hasHydrated) return <Loading />
+```
+
+## Slices Pattern: Explicit Types
+
+```typescript
+/* ✅ Complex but necessary for middleware */
+import { StateCreator } from 'zustand'
+
+interface BearSlice {
+  bears: number
+  addBear: () => void
+}
+
+const createBearSlice: StateCreator<
+  BearSlice & FishSlice, // Combined state
+  [],
+  [],
+  BearSlice // This slice
+> = (set) => ({
+  bears: 0,
+  addBear: () => set((s) => ({ bears: s.bears + 1 })),
+})
+```
+
+## Quick Fixes
+
+| If Claude suggests... | Use instead... |
+|----------------------|----------------|
+| `create<T>((set) => ...)` | `create<T>()((set) => ...)` |
+| Import persist from 'zustand' | Import from 'zustand/middleware' |
+| Object in selector | Select separately or use `useShallow` |
+| Next.js hydration error | Add `_hasHydrated` pattern |
+| Simple slices types | Use explicit `StateCreator` types |
diff --git a/.cursor/skills/zustand-state-management/scripts/check-versions.sh b/.cursor/skills/zustand-state-management/scripts/check-versions.sh
new file mode 100755
index 0000000..617c793
--- /dev/null
+++ b/.cursor/skills/zustand-state-management/scripts/check-versions.sh
@@ -0,0 +1,141 @@
+#!/bin/bash
+
+# Zustand Version Checker
+# Verifies installed versions and compatibility
+# Usage: ./scripts/check-versions.sh
+
+set -e
+
+echo "🐻 Zustand Version Checker"
+echo "=========================="
+echo ""
+
+# Check if package.json exists
+if [ ! -f "package.json" ]; then
+  echo "❌ No package.json found in current directory"
+  echo "   Run this script from your project root"
+  exit 1
+fi
+
+# Function to get installed version
+get_version() {
+  local package=$1
+  if [ -f "node_modules/$package/package.json" ]; then
+    node -p "require('./node_modules/$package/package.json').version" 2>/dev/null || echo "not installed"
+  else
+    echo "not installed"
+  fi
+}
+
+# Function to get latest version from npm
+get_latest() {
+  local package=$1
+  npm view "$package" version 2>/dev/null || echo "unknown"
+}
+
+# Check Zustand
+echo "📦 Zustand"
+zustand_installed=$(get_version "zustand")
+zustand_latest=$(get_latest "zustand")
+
+if [ "$zustand_installed" = "not installed" ]; then
+  echo "   Status: ❌ Not installed"
+  echo "   Install: npm install zustand"
+else
+  echo "   Installed: $zustand_installed"
+  echo "   Latest:    $zustand_latest"
+
+  # Check if major version is 5
+  major=$(echo "$zustand_installed" | cut -d'.' -f1)
+  if [ "$major" -ge 5 ]; then
+    echo "   Status: ✅ v5+ (recommended)"
+  elif [ "$major" -eq 4 ]; then
+    echo "   Status: ⚠️  v4 (upgrade recommended)"
+    echo "   Migration: See references/migration-guide.md"
+  else
+    echo "   Status: ❌ v$major (unsupported)"
+    echo "   Action: Upgrade to v5+"
+  fi
+fi
+
+echo ""
+
+# Check React
+echo "📦 React"
+react_installed=$(get_version "react")
+react_latest=$(get_latest "react")
+
+if [ "$react_installed" = "not installed" ]; then
+  echo "   Status: ❌ Not installed"
+else
+  echo "   Installed: $react_installed"
+  echo "   Latest:    $react_latest"
+
+  # Check if version is 18+
+  major=$(echo "$react_installed" | cut -d'.' -f1)
+  if [ "$major" -ge 18 ]; then
+    echo "   Status: ✅ v18+ (compatible)"
+  else
+    echo "   Status: ⚠️  v$major (Zustand works, but upgrade recommended)"
+  fi
+fi
+
+echo ""
+
+# Check TypeScript (optional)
+echo "📦 TypeScript (optional)"
+ts_installed=$(get_version "typescript")
+
+if [ "$ts_installed" = "not installed" ]; then
+  echo "   Status: ℹ️  Not installed (optional)"
+else
+  echo "   Installed: $ts_installed"
+
+  # Check if version is 5+
+  major=$(echo "$ts_installed" | cut -d'.' -f1)
+  if [ "$major" -ge 5 ]; then
+    echo "   Status: ✅ v5+ (recommended)"
+  else
+    echo "   Status: ⚠️  v$major (upgrade recommended for better types)"
+  fi
+fi
+
+echo ""
+
+# Check Next.js (if using persist)
+if grep -q '"next"' package.json 2>/dev/null; then
+  echo "📦 Next.js (detected)"
+  next_installed=$(get_version "next")
+  echo "   Installed: $next_installed"
+
+  # Check if major version is 14+
+  major=$(echo "$next_installed" | cut -d'.' -f1)
+  if [ "$major" -ge 14 ]; then
+    echo "   Status: ✅ v14+ (App Router supported)"
+  elif [ "$major" -eq 13 ]; then
+    echo "   Status: ✅ v13 (supported)"
+  else
+    echo "   Status: ⚠️  v$major (upgrade recommended)"
+  fi
+
+  echo "   Note: See references/nextjs-hydration.md for SSR setup"
+  echo ""
+fi
+
+# Summary
+echo "=========================="
+echo "✅ Version check complete"
+echo ""
+
+if [ "$zustand_installed" = "not installed" ]; then
+  echo "Next steps:"
+  echo "  npm install zustand"
+  echo "  See SKILL.md for setup instructions"
+elif [ "$major" -lt 5 ]; then
+  echo "Recommended upgrade:"
+  echo "  npm install zustand@latest"
+  echo "  See references/migration-guide.md for v4→v5 changes"
+else
+  echo "All versions compatible! 🎉"
+  echo "See SKILL.md for usage patterns"
+fi
diff --git a/.cursor/skills/zustand-state-management/scripts/example-script.sh b/.cursor/skills/zustand-state-management/scripts/example-script.sh
new file mode 100755
index 0000000..1c0c72e
--- /dev/null
+++ b/.cursor/skills/zustand-state-management/scripts/example-script.sh
@@ -0,0 +1,15 @@
+#!/bin/bash
+
+# [TODO: Script Name]
+# [TODO: Brief description of what this script does]
+
+# Example script structure - delete if not needed
+
+set -e  # Exit on error
+
+# [TODO: Add your script logic here]
+
+echo "Example script - replace or delete this file"
+
+# Usage:
+# ./scripts/example-script.sh [args]
diff --git a/.cursor/skills/zustand-state-management/templates/async-actions-store.ts b/.cursor/skills/zustand-state-management/templates/async-actions-store.ts
new file mode 100644
index 0000000..fdd8d4c
--- /dev/null
+++ b/.cursor/skills/zustand-state-management/templates/async-actions-store.ts
@@ -0,0 +1,309 @@
+/**
+ * Zustand Store with Async Actions
+ *
+ * Use when:
+ * - Fetching data from APIs
+ * - Need loading/error states
+ * - Handling async operations
+ *
+ * Pattern: Actions can be async, just call set() when done
+ *
+ * Features:
+ * - Loading states
+ * - Error handling
+ * - Optimistic updates
+ * - Request cancellation
+ *
+ * NOTE: For server state (data fetching), consider TanStack Query instead!
+ * Zustand is better for client state. But this pattern works for simple cases.
+ *
+ * Learn more: See SKILL.md Common Patterns section
+ */
+
+import { create } from 'zustand'
+
+interface User {
+  id: string
+  name: string
+  email: string
+}
+
+interface Post {
+  id: string
+  title: string
+  body: string
+  userId: string
+}
+
+interface AsyncStore {
+  // Data state
+  user: User | null
+  posts: Post[]
+
+  // Loading states
+  isLoadingUser: boolean
+  isLoadingPosts: boolean
+  isSavingPost: boolean
+
+  // Error states
+  userError: string | null
+  postsError: string | null
+  saveError: string | null
+
+  // Actions
+  fetchUser: (userId: string) => Promise<void>
+  fetchPosts: (userId: string) => Promise<void>
+  createPost: (post: Omit<Post, 'id'>) => Promise<void>
+  deletePost: (postId: string) => Promise<void>
+  reset: () => void
+}
+
+export const useAsyncStore = create<AsyncStore>()((set, get) => ({
+  // Initial state
+  user: null,
+  posts: [],
+  isLoadingUser: false,
+  isLoadingPosts: false,
+  isSavingPost: false,
+  userError: null,
+  postsError: null,
+  saveError: null,
+
+  // Fetch user
+  fetchUser: async (userId) => {
+    set({ isLoadingUser: true, userError: null })
+
+    try {
+      const response = await fetch(`https://api.example.com/users/${userId}`)
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch user: ${response.statusText}`)
+      }
+
+      const user = await response.json()
+      set({ user, isLoadingUser: false })
+    } catch (error) {
+      set({
+        userError: (error as Error).message,
+        isLoadingUser: false,
+        user: null,
+      })
+    }
+  },
+
+  // Fetch posts
+  fetchPosts: async (userId) => {
+    set({ isLoadingPosts: true, postsError: null })
+
+    try {
+      const response = await fetch(`https://api.example.com/users/${userId}/posts`)
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch posts: ${response.statusText}`)
+      }
+
+      const posts = await response.json()
+      set({ posts, isLoadingPosts: false })
+    } catch (error) {
+      set({
+        postsError: (error as Error).message,
+        isLoadingPosts: false,
+      })
+    }
+  },
+
+  // Create post with optimistic update
+  createPost: async (post) => {
+    const tempId = `temp-${Date.now()}`
+    const optimisticPost = { ...post, id: tempId }
+
+    // Optimistic update
+    set((state) => ({
+      posts: [...state.posts, optimisticPost],
+      isSavingPost: true,
+      saveError: null,
+    }))
+
+    try {
+      const response = await fetch('https://api.example.com/posts', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(post),
+      })
+
+      if (!response.ok) {
+        throw new Error(`Failed to create post: ${response.statusText}`)
+      }
+
+      const savedPost = await response.json()
+
+      // Replace optimistic post with real one
+      set((state) => ({
+        posts: state.posts.map((p) =>
+          p.id === tempId ? savedPost : p
+        ),
+        isSavingPost: false,
+      }))
+    } catch (error) {
+      // Rollback optimistic update
+      set((state) => ({
+        posts: state.posts.filter((p) => p.id !== tempId),
+        saveError: (error as Error).message,
+        isSavingPost: false,
+      }))
+    }
+  },
+
+  // Delete post
+  deletePost: async (postId) => {
+    // Store original posts for rollback
+    const originalPosts = get().posts
+
+    // Optimistic update
+    set((state) => ({
+      posts: state.posts.filter((p) => p.id !== postId),
+    }))
+
+    try {
+      const response = await fetch(`https://api.example.com/posts/${postId}`, {
+        method: 'DELETE',
+      })
+
+      if (!response.ok) {
+        throw new Error(`Failed to delete post: ${response.statusText}`)
+      }
+    } catch (error) {
+      // Rollback on error
+      set({
+        posts: originalPosts,
+        saveError: (error as Error).message,
+      })
+    }
+  },
+
+  // Reset
+  reset: () =>
+    set({
+      user: null,
+      posts: [],
+      isLoadingUser: false,
+      isLoadingPosts: false,
+      isSavingPost: false,
+      userError: null,
+      postsError: null,
+      saveError: null,
+    }),
+}))
+
+/**
+ * Usage in components:
+ *
+ * function UserProfile({ userId }: { userId: string }) {
+ *   const user = useAsyncStore((state) => state.user)
+ *   const isLoading = useAsyncStore((state) => state.isLoadingUser)
+ *   const error = useAsyncStore((state) => state.userError)
+ *   const fetchUser = useAsyncStore((state) => state.fetchUser)
+ *
+ *   useEffect(() => {
+ *     fetchUser(userId)
+ *   }, [userId, fetchUser])
+ *
+ *   if (isLoading) return <div>Loading...</div>
+ *   if (error) return <div>Error: {error}</div>
+ *   if (!user) return <div>No user found</div>
+ *
+ *   return (
+ *     <div>
+ *       <h1>{user.name}</h1>
+ *       <p>{user.email}</p>
+ *     </div>
+ *   )
+ * }
+ *
+ * function PostsList({ userId }: { userId: string }) {
+ *   const posts = useAsyncStore((state) => state.posts)
+ *   const isLoading = useAsyncStore((state) => state.isLoadingPosts)
+ *   const error = useAsyncStore((state) => state.postsError)
+ *   const fetchPosts = useAsyncStore((state) => state.fetchPosts)
+ *   const deletePost = useAsyncStore((state) => state.deletePost)
+ *
+ *   useEffect(() => {
+ *     fetchPosts(userId)
+ *   }, [userId, fetchPosts])
+ *
+ *   if (isLoading) return <div>Loading posts...</div>
+ *   if (error) return <div>Error: {error}</div>
+ *
+ *   return (
+ *     <ul>
+ *       {posts.map((post) => (
+ *         <li key={post.id}>
+ *           <h3>{post.title}</h3>
+ *           <p>{post.body}</p>
+ *           <button onClick={() => deletePost(post.id)}>Delete</button>
+ *         </li>
+ *       ))}
+ *     </ul>
+ *   )
+ * }
+ *
+ * function CreatePostForm({ userId }: { userId: string }) {
+ *   const [title, setTitle] = useState('')
+ *   const [body, setBody] = useState('')
+ *   const createPost = useAsyncStore((state) => state.createPost)
+ *   const isSaving = useAsyncStore((state) => state.isSavingPost)
+ *   const error = useAsyncStore((state) => state.saveError)
+ *
+ *   const handleSubmit = async (e: FormEvent) => {
+ *     e.preventDefault()
+ *     await createPost({ title, body, userId })
+ *     setTitle('')
+ *     setBody('')
+ *   }
+ *
+ *   return (
+ *     <form onSubmit={handleSubmit}>
+ *       <input
+ *         value={title}
+ *         onChange={(e) => setTitle(e.target.value)}
+ *         placeholder="Title"
+ *       />
+ *       <textarea
+ *         value={body}
+ *         onChange={(e) => setBody(e.target.value)}
+ *         placeholder="Body"
+ *       />
+ *       <button type="submit" disabled={isSaving}>
+ *         {isSaving ? 'Creating...' : 'Create Post'}
+ *       </button>
+ *       {error && <div>Error: {error}</div>}
+ *     </form>
+ *   )
+ * }
+ *
+ * ADVANCED: Request Cancellation with AbortController
+ *
+ * let abortController: AbortController | null = null
+ *
+ * fetchUserWithCancellation: async (userId) => {
+ *   // Cancel previous request
+ *   abortController?.abort()
+ *   abortController = new AbortController()
+ *
+ *   set({ isLoadingUser: true, userError: null })
+ *
+ *   try {
+ *     const response = await fetch(
+ *       `https://api.example.com/users/${userId}`,
+ *       { signal: abortController.signal }
+ *     )
+ *     // ... rest of fetch logic
+ *   } catch (error) {
+ *     if (error.name === 'AbortError') {
+ *       // Request was cancelled
+ *       return
+ *     }
+ *     // ... handle other errors
+ *   }
+ * }
+ */
diff --git a/.cursor/skills/zustand-state-management/templates/basic-store.ts b/.cursor/skills/zustand-state-management/templates/basic-store.ts
new file mode 100644
index 0000000..e87d1ea
--- /dev/null
+++ b/.cursor/skills/zustand-state-management/templates/basic-store.ts
@@ -0,0 +1,41 @@
+/**
+ * Basic Zustand Store (JavaScript style, no TypeScript)
+ *
+ * Use when:
+ * - Prototyping quickly
+ * - Small applications
+ * - No TypeScript in project
+ *
+ * Learn more: See SKILL.md for TypeScript version
+ */
+
+import { create } from 'zustand'
+
+// Create store with minimal setup
+export const useStore = create((set) => ({
+  // State
+  count: 0,
+  user: null,
+
+  // Actions
+  increment: () => set((state) => ({ count: state.count + 1 })),
+  decrement: () => set((state) => ({ count: state.count - 1 })),
+  setUser: (user) => set({ user }),
+  reset: () => set({ count: 0, user: null }),
+}))
+
+/**
+ * Usage in component:
+ *
+ * function Counter() {
+ *   const count = useStore((state) => state.count)
+ *   const increment = useStore((state) => state.increment)
+ *
+ *   return (
+ *     <div>
+ *       <p>Count: {count}</p>
+ *       <button onClick={increment}>Increment</button>
+ *     </div>
+ *   )
+ * }
+ */
diff --git a/.cursor/skills/zustand-state-management/templates/computed-store.ts b/.cursor/skills/zustand-state-management/templates/computed-store.ts
new file mode 100644
index 0000000..c22a928
--- /dev/null
+++ b/.cursor/skills/zustand-state-management/templates/computed-store.ts
@@ -0,0 +1,214 @@
+/**
+ * Zustand Store with Computed/Derived Values
+ *
+ * Use when:
+ * - Need values calculated from state
+ * - Want to avoid storing redundant data
+ * - Need efficient memoization
+ *
+ * Pattern: Compute in selectors, not in store
+ *
+ * Benefits:
+ * - Cleaner state (only source data)
+ * - Automatic recomputation when dependencies change
+ * - Components only re-render when result changes
+ *
+ * Learn more: See SKILL.md Common Patterns section
+ */
+
+import { create } from 'zustand'
+
+interface Product {
+  id: string
+  name: string
+  price: number
+  category: string
+  inStock: boolean
+}
+
+interface CartItem {
+  productId: string
+  quantity: number
+}
+
+interface ComputedStore {
+  // Source state (stored)
+  products: Product[]
+  cart: CartItem[]
+  taxRate: number
+  discountPercent: number
+
+  // Actions
+  addProduct: (product: Product) => void
+  addToCart: (productId: string, quantity: number) => void
+  removeFromCart: (productId: string) => void
+  setTaxRate: (rate: number) => void
+  setDiscount: (percent: number) => void
+}
+
+export const useComputedStore = create<ComputedStore>()((set) => ({
+  // Initial state
+  products: [],
+  cart: [],
+  taxRate: 0.1, // 10%
+  discountPercent: 0,
+
+  // Actions
+  addProduct: (product) =>
+    set((state) => ({
+      products: [...state.products, product],
+    })),
+
+  addToCart: (productId, quantity) =>
+    set((state) => {
+      const existing = state.cart.find((item) => item.productId === productId)
+      if (existing) {
+        return {
+          cart: state.cart.map((item) =>
+            item.productId === productId
+              ? { ...item, quantity: item.quantity + quantity }
+              : item
+          ),
+        }
+      }
+      return {
+        cart: [...state.cart, { productId, quantity }],
+      }
+    }),
+
+  removeFromCart: (productId) =>
+    set((state) => ({
+      cart: state.cart.filter((item) => item.productId !== productId),
+    })),
+
+  setTaxRate: (rate) => set({ taxRate: rate }),
+
+  setDiscount: (percent) => set({ discountPercent: percent }),
+}))
+
+// ============================================================================
+// COMPUTED/DERIVED SELECTORS (put these in separate file for reuse)
+// ============================================================================
+
+/**
+ * Selector: Get cart items with product details
+ */
+export const selectCartWithDetails = (state: ComputedStore) =>
+  state.cart.map((item) => {
+    const product = state.products.find((p) => p.id === item.productId)
+    return {
+      ...item,
+      product,
+      subtotal: product ? product.price * item.quantity : 0,
+    }
+  })
+
+/**
+ * Selector: Calculate subtotal (before tax and discount)
+ */
+export const selectSubtotal = (state: ComputedStore) =>
+  state.cart.reduce((sum, item) => {
+    const product = state.products.find((p) => p.id === item.productId)
+    return sum + (product ? product.price * item.quantity : 0)
+  }, 0)
+
+/**
+ * Selector: Calculate discount amount
+ */
+export const selectDiscountAmount = (state: ComputedStore) => {
+  const subtotal = selectSubtotal(state)
+  return subtotal * (state.discountPercent / 100)
+}
+
+/**
+ * Selector: Calculate tax amount
+ */
+export const selectTaxAmount = (state: ComputedStore) => {
+  const subtotal = selectSubtotal(state)
+  const discountAmount = selectDiscountAmount(state)
+  const afterDiscount = subtotal - discountAmount
+  return afterDiscount * state.taxRate
+}
+
+/**
+ * Selector: Calculate final total
+ */
+export const selectTotal = (state: ComputedStore) => {
+  const subtotal = selectSubtotal(state)
+  const discountAmount = selectDiscountAmount(state)
+  const taxAmount = selectTaxAmount(state)
+  return subtotal - discountAmount + taxAmount
+}
+
+/**
+ * Selector: Get products by category
+ */
+export const selectProductsByCategory = (category: string) => (state: ComputedStore) =>
+  state.products.filter((product) => product.category === category)
+
+/**
+ * Selector: Get in-stock products only
+ */
+export const selectInStockProducts = (state: ComputedStore) =>
+  state.products.filter((product) => product.inStock)
+
+/**
+ * Selector: Count items in cart
+ */
+export const selectCartItemCount = (state: ComputedStore) =>
+  state.cart.reduce((sum, item) => sum + item.quantity, 0)
+
+/**
+ * Usage in components:
+ *
+ * function CartSummary() {
+ *   // Each selector only causes re-render when its result changes
+ *   const subtotal = useComputedStore(selectSubtotal)
+ *   const discount = useComputedStore(selectDiscountAmount)
+ *   const tax = useComputedStore(selectTaxAmount)
+ *   const total = useComputedStore(selectTotal)
+ *   const itemCount = useComputedStore(selectCartItemCount)
+ *
+ *   return (
+ *     <div>
+ *       <h3>Cart ({itemCount} items)</h3>
+ *       <p>Subtotal: ${subtotal.toFixed(2)}</p>
+ *       <p>Discount: -${discount.toFixed(2)}</p>
+ *       <p>Tax: ${tax.toFixed(2)}</p>
+ *       <h4>Total: ${total.toFixed(2)}</h4>
+ *     </div>
+ *   )
+ * }
+ *
+ * function ProductList() {
+ *   const inStockProducts = useComputedStore(selectInStockProducts)
+ *
+ *   return (
+ *     <ul>
+ *       {inStockProducts.map((product) => (
+ *         <li key={product.id}>{product.name} - ${product.price}</li>
+ *       ))}
+ *     </ul>
+ *   )
+ * }
+ *
+ * function CategoryFilter() {
+ *   const electronicsProducts = useComputedStore(selectProductsByCategory('electronics'))
+ *
+ *   return <div>{electronicsProducts.length} electronics</div>
+ * }
+ *
+ * PERFORMANCE TIP:
+ * For expensive computations, use useMemo in the component:
+ *
+ * function ExpensiveComputation() {
+ *   const data = useComputedStore((state) => state.products)
+ *
+ *   const result = useMemo(() => {
+ *     // Expensive calculation
+ *     return data.map(...).filter(...).reduce(...)
+ *   }, [data])
+ *
+ *   return <div>{result}</div>
+ * }
+ */
diff --git a/.cursor/skills/zustand-state-management/templates/devtools-store.ts b/.cursor/skills/zustand-state-management/templates/devtools-store.ts
new file mode 100644
index 0000000..b3d7324
--- /dev/null
+++ b/.cursor/skills/zustand-state-management/templates/devtools-store.ts
@@ -0,0 +1,141 @@
+/**
+ * Zustand Store with Redux DevTools Integration
+ *
+ * Use when:
+ * - Need debugging capabilities
+ * - Want to track state changes
+ * - Inspecting actions and state history
+ * - Time-travel debugging (with Redux DevTools Extension)
+ *
+ * Setup:
+ * 1. Install Redux DevTools Extension in browser
+ * 2. Use this template
+ * 3. Open DevTools → Redux tab
+ *
+ * Learn more: See SKILL.md for combining with other middleware
+ */
+
+import { create } from 'zustand'
+import { devtools } from 'zustand/middleware'
+
+interface Todo {
+  id: string
+  text: string
+  done: boolean
+}
+
+interface DevtoolsStore {
+  // State
+  todos: Todo[]
+  filter: 'all' | 'active' | 'completed'
+
+  // Actions
+  addTodo: (text: string) => void
+  toggleTodo: (id: string) => void
+  deleteTodo: (id: string) => void
+  setFilter: (filter: DevtoolsStore['filter']) => void
+  clearCompleted: () => void
+}
+
+export const useDevtoolsStore = create<DevtoolsStore>()(
+  devtools(
+    (set) => ({
+      // Initial state
+      todos: [],
+      filter: 'all',
+
+      // Actions with named actions for DevTools
+      addTodo: (text) =>
+        set(
+          (state) => ({
+            todos: [
+              ...state.todos,
+              { id: Date.now().toString(), text, done: false },
+            ],
+          }),
+          undefined,
+          'todos/add', // Action name in DevTools
+        ),
+
+      toggleTodo: (id) =>
+        set(
+          (state) => ({
+            todos: state.todos.map((todo) =>
+              todo.id === id ? { ...todo, done: !todo.done } : todo
+            ),
+          }),
+          undefined,
+          'todos/toggle',
+        ),
+
+      deleteTodo: (id) =>
+        set(
+          (state) => ({
+            todos: state.todos.filter((todo) => todo.id !== id),
+          }),
+          undefined,
+          'todos/delete',
+        ),
+
+      setFilter: (filter) =>
+        set(
+          { filter },
+          undefined,
+          'filter/set',
+        ),
+
+      clearCompleted: () =>
+        set(
+          (state) => ({
+            todos: state.todos.filter((todo) => !todo.done),
+          }),
+          undefined,
+          'todos/clearCompleted',
+        ),
+    }),
+    {
+      name: 'TodoStore', // Store name in DevTools
+      enabled: process.env.NODE_ENV === 'development', // Optional: only in dev
+    },
+  ),
+)
+
+/**
+ * Usage in component:
+ *
+ * function TodoList() {
+ *   const todos = useDevtoolsStore((state) => state.todos)
+ *   const filter = useDevtoolsStore((state) => state.filter)
+ *   const toggleTodo = useDevtoolsStore((state) => state.toggleTodo)
+ *   const deleteTodo = useDevtoolsStore((state) => state.deleteTodo)
+ *
+ *   const filteredTodos = todos.filter((todo) => {
+ *     if (filter === 'active') return !todo.done
+ *     if (filter === 'completed') return todo.done
+ *     return true
+ *   })
+ *
+ *   return (
+ *     <ul>
+ *       {filteredTodos.map((todo) => (
+ *         <li key={todo.id}>
+ *           <input
+ *             type="checkbox"
+ *             checked={todo.done}
+ *             onChange={() => toggleTodo(todo.id)}
+ *           />
+ *           <span>{todo.text}</span>
+ *           <button onClick={() => deleteTodo(todo.id)}>Delete</button>
+ *         </li>
+ *       ))}
+ *     </ul>
+ *   )
+ * }
+ *
+ * DevTools Features:
+ * - See all actions in order
+ * - Inspect state before/after each action
+ * - Time-travel through state changes
+ * - Export/import state for debugging
+ * - Track which components caused updates
+ */
diff --git a/.cursor/skills/zustand-state-management/templates/nextjs-store.ts b/.cursor/skills/zustand-state-management/templates/nextjs-store.ts
new file mode 100644
index 0000000..03378b6
--- /dev/null
+++ b/.cursor/skills/zustand-state-management/templates/nextjs-store.ts
@@ -0,0 +1,109 @@
+/**
+ * Next.js SSR-Safe Zustand Store with Hydration Handling
+ *
+ * Use when:
+ * - Using persist middleware in Next.js
+ * - Getting hydration mismatch errors
+ * - Need SSR compatibility
+ *
+ * This template solves:
+ * - "Text content does not match server-rendered HTML"
+ * - "Hydration failed" errors
+ * - Flashing content during hydration
+ *
+ * Learn more: See SKILL.md Issue #1 for detailed explanation
+ */
+
+'use client' // Required for Next.js App Router
+
+import { create } from 'zustand'
+import { persist, createJSONStorage } from 'zustand/middleware'
+
+interface User {
+  id: string
+  name: string
+}
+
+interface NextJsStore {
+  // State
+  _hasHydrated: boolean // CRITICAL: Track hydration status
+  count: number
+  user: User | null
+
+  // Actions
+  setHasHydrated: (hydrated: boolean) => void
+  increment: () => void
+  setUser: (user: User | null) => void
+  reset: () => void
+}
+
+export const useNextJsStore = create<NextJsStore>()(
+  persist(
+    (set) => ({
+      // Initial state
+      _hasHydrated: false, // Start false
+      count: 0,
+      user: null,
+
+      // Hydration action
+      setHasHydrated: (hydrated) => set({ _hasHydrated: hydrated }),
+
+      // Regular actions
+      increment: () => set((state) => ({ count: state.count + 1 })),
+
+      setUser: (user) => set({ user }),
+
+      reset: () => set({ count: 0, user: null }),
+    }),
+    {
+      name: 'nextjs-storage',
+
+      // CRITICAL: Call setHasHydrated when rehydration completes
+      onRehydrateStorage: () => (state) => {
+        state?.setHasHydrated(true)
+      },
+    },
+  ),
+)
+
+/**
+ * Usage in Next.js component:
+ *
+ * 'use client'
+ *
+ * import { useNextJsStore } from './store'
+ *
+ * function Counter() {
+ *   const hasHydrated = useNextJsStore((state) => state._hasHydrated)
+ *   const count = useNextJsStore((state) => state.count)
+ *   const increment = useNextJsStore((state) => state.increment)
+ *
+ *   // Show loading state during hydration
+ *   if (!hasHydrated) {
+ *     return <div>Loading...</div>
+ *   }
+ *
+ *   // Now safe to render with persisted state
+ *   return (
+ *     <div>
+ *       <p>Count: {count}</p>
+ *       <button onClick={increment}>Increment</button>
+ *     </div>
+ *   )
+ * }
+ *
+ * Alternative: Skip hydration check if flashing is acceptable
+ *
+ * function CounterNoLoadingState() {
+ *   const count = useNextJsStore((state) => state.count)
+ *   const increment = useNextJsStore((state) => state.increment)
+ *
+ *   // Will show default value (0) until hydration, then correct value
+ *   return (
+ *     <div>
+ *       <p>Count: {count}</p>
+ *       <button onClick={increment}>Increment</button>
+ *     </div>
+ *   )
+ * }
+ */
diff --git a/.cursor/skills/zustand-state-management/templates/persist-store.ts b/.cursor/skills/zustand-state-management/templates/persist-store.ts
new file mode 100644
index 0000000..6711ef9
--- /dev/null
+++ b/.cursor/skills/zustand-state-management/templates/persist-store.ts
@@ -0,0 +1,119 @@
+/**
+ * Persistent Zustand Store (localStorage/sessionStorage)
+ *
+ * Use when:
+ * - State needs to survive page reloads
+ * - User preferences (theme, language, etc.)
+ * - Shopping carts, draft forms
+ *
+ * Features:
+ * - Automatic save to localStorage
+ * - Automatic restore on load
+ * - Migration support for schema changes
+ * - Partial persistence (only save some fields)
+ *
+ * Learn more: See SKILL.md Issue #1 for Next.js hydration handling
+ */
+
+import { create } from 'zustand'
+import { persist, createJSONStorage } from 'zustand/middleware'
+
+interface User {
+  id: string
+  name: string
+  email: string
+}
+
+interface PersistedStore {
+  // State
+  theme: 'light' | 'dark' | 'system'
+  language: string
+  user: User | null
+  preferences: {
+    notifications: boolean
+    emailUpdates: boolean
+  }
+
+  // Actions
+  setTheme: (theme: PersistedStore['theme']) => void
+  setLanguage: (language: string) => void
+  setUser: (user: User | null) => void
+  updatePreferences: (prefs: Partial<PersistedStore['preferences']>) => void
+  reset: () => void
+}
+
+const initialState = {
+  theme: 'system' as const,
+  language: 'en',
+  user: null,
+  preferences: {
+    notifications: true,
+    emailUpdates: false,
+  },
+}
+
+export const usePersistedStore = create<PersistedStore>()(
+  persist(
+    (set) => ({
+      ...initialState,
+
+      // Actions
+      setTheme: (theme) => set({ theme }),
+
+      setLanguage: (language) => set({ language }),
+
+      setUser: (user) => set({ user }),
+
+      updatePreferences: (prefs) =>
+        set((state) => ({
+          preferences: { ...state.preferences, ...prefs },
+        })),
+
+      reset: () => set(initialState),
+    }),
+    {
+      name: 'app-storage', // unique name in localStorage
+
+      // Optional: use sessionStorage instead
+      // storage: createJSONStorage(() => sessionStorage),
+
+      // Optional: only persist specific fields
+      // partialize: (state) => ({
+      //   theme: state.theme,
+      //   language: state.language,
+      //   preferences: state.preferences,
+      //   // Don't persist user (privacy)
+      // }),
+
+      // Optional: version and migration for schema changes
+      version: 1,
+      migrate: (persistedState: any, version) => {
+        if (version === 0) {
+          // Migration from version 0 to 1
+          // Example: rename field
+          persistedState.language = persistedState.lang || 'en'
+          delete persistedState.lang
+        }
+        return persistedState
+      },
+    },
+  ),
+)
+
+/**
+ * Usage in component:
+ *
+ * function ThemeToggle() {
+ *   const theme = usePersistedStore((state) => state.theme)
+ *   const setTheme = usePersistedStore((state) => state.setTheme)
+ *
+ *   return (
+ *     <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
+ *       Toggle theme
+ *     </button>
+ *   )
+ * }
+ *
+ * NEXT.JS WARNING:
+ * For Next.js with SSR, see nextjs-store.ts template for hydration handling!
+ */
diff --git a/.cursor/skills/zustand-state-management/templates/slices-pattern.ts b/.cursor/skills/zustand-state-management/templates/slices-pattern.ts
new file mode 100644
index 0000000..70f99b3
--- /dev/null
+++ b/.cursor/skills/zustand-state-management/templates/slices-pattern.ts
@@ -0,0 +1,217 @@
+/**
+ * Zustand Slices Pattern (Modular Store Architecture)
+ *
+ * Use when:
+ * - Store is getting large (100+ lines)
+ * - Multiple developers working on store
+ * - Need to organize state by domain/feature
+ *
+ * Benefits:
+ * - Each slice is independent and testable
+ * - Slices can access each other's state/actions
+ * - Easy to add/remove features
+ * - Better code organization
+ *
+ * Learn more: See SKILL.md Issue #5 for TypeScript complexity handling
+ */
+
+import { create, StateCreator } from 'zustand'
+import { devtools } from 'zustand/middleware'
+
+// ============================================================================
+// SLICE 1: User Management
+// ============================================================================
+
+interface User {
+  id: string
+  name: string
+  email: string
+}
+
+interface UserSlice {
+  user: User | null
+  isAuthenticated: boolean
+  setUser: (user: User) => void
+  logout: () => void
+}
+
+const createUserSlice: StateCreator<
+  UserSlice & CartSlice & NotificationSlice,  // Combined type
+  [['zustand/devtools', never]],               // Middleware mutators
+  [],                                          // Chained middleware
+  UserSlice                                     // This slice's type
+> = (set) => ({
+  user: null,
+  isAuthenticated: false,
+
+  setUser: (user) =>
+    set(
+      { user, isAuthenticated: true },
+      undefined,
+      'user/setUser',
+    ),
+
+  logout: () =>
+    set(
+      { user: null, isAuthenticated: false },
+      undefined,
+      'user/logout',
+    ),
+})
+
+// ============================================================================
+// SLICE 2: Shopping Cart
+// ============================================================================
+
+interface CartItem {
+  id: string
+  name: string
+  price: number
+  quantity: number
+}
+
+interface CartSlice {
+  items: CartItem[]
+  addItem: (item: CartItem) => void
+  removeItem: (id: string) => void
+  clearCart: () => void
+  // Access other slices
+  eatFish: () => void // Example: cross-slice action
+}
+
+const createCartSlice: StateCreator<
+  UserSlice & CartSlice & NotificationSlice,
+  [['zustand/devtools', never]],
+  [],
+  CartSlice
+> = (set, get) => ({
+  items: [],
+
+  addItem: (item) =>
+    set(
+      (state) => ({
+        items: [...state.items, item],
+      }),
+      undefined,
+      'cart/addItem',
+    ),
+
+  removeItem: (id) =>
+    set(
+      (state) => ({
+        items: state.items.filter((item) => item.id !== id),
+      }),
+      undefined,
+      'cart/removeItem',
+    ),
+
+  clearCart: () =>
+    set(
+      { items: [] },
+      undefined,
+      'cart/clearCart',
+    ),
+
+  // Example: Action that accesses another slice
+  eatFish: () =>
+    set(
+      (state) => ({
+        // Access notification slice
+        notifications: state.notifications + 1,
+      }),
+      undefined,
+      'cart/eatFish',
+    ),
+})
+
+// ============================================================================
+// SLICE 3: Notifications
+// ============================================================================
+
+interface NotificationSlice {
+  notifications: number
+  messages: string[]
+  addNotification: (message: string) => void
+  clearNotifications: () => void
+}
+
+const createNotificationSlice: StateCreator<
+  UserSlice & CartSlice & NotificationSlice,
+  [['zustand/devtools', never]],
+  [],
+  NotificationSlice
+> = (set) => ({
+  notifications: 0,
+  messages: [],
+
+  addNotification: (message) =>
+    set(
+      (state) => ({
+        notifications: state.notifications + 1,
+        messages: [...state.messages, message],
+      }),
+      undefined,
+      'notifications/add',
+    ),
+
+  clearNotifications: () =>
+    set(
+      { notifications: 0, messages: [] },
+      undefined,
+      'notifications/clear',
+    ),
+})
+
+// ============================================================================
+// COMBINE SLICES
+// ============================================================================
+
+export const useAppStore = create<UserSlice & CartSlice & NotificationSlice>()(
+  devtools(
+    (...a) => ({
+      ...createUserSlice(...a),
+      ...createCartSlice(...a),
+      ...createNotificationSlice(...a),
+    }),
+    { name: 'AppStore' },
+  ),
+)
+
+/**
+ * Usage in components:
+ *
+ * function UserProfile() {
+ *   const user = useAppStore((state) => state.user)
+ *   const logout = useAppStore((state) => state.logout)
+ *
+ *   if (!user) return <div>Not logged in</div>
+ *
+ *   return (
+ *     <div>
+ *       <p>Welcome, {user.name}!</p>
+ *       <button onClick={logout}>Logout</button>
+ *     </div>
+ *   )
+ * }
+ *
+ * function Cart() {
+ *   const items = useAppStore((state) => state.items)
+ *   const clearCart = useAppStore((state) => state.clearCart)
+ *
+ *   return (
+ *     <div>
+ *       <h2>Cart ({items.length} items)</h2>
+ *       <button onClick={clearCart}>Clear</button>
+ *     </div>
+ *   )
+ * }
+ *
+ * ORGANIZATION TIP:
+ * In larger projects, put each slice in its own file:
+ *
+ * src/store/
+ *   ├── index.ts           (combines slices)
+ *   ├── userSlice.ts
+ *   ├── cartSlice.ts
+ *   └── notificationSlice.ts
+ */
diff --git a/.cursor/skills/zustand-state-management/templates/typescript-store.ts b/.cursor/skills/zustand-state-management/templates/typescript-store.ts
new file mode 100644
index 0000000..2760916
--- /dev/null
+++ b/.cursor/skills/zustand-state-management/templates/typescript-store.ts
@@ -0,0 +1,84 @@
+/**
+ * TypeScript Zustand Store (Recommended for production)
+ *
+ * Use when:
+ * - Production applications
+ * - Need type safety
+ * - Want IDE autocomplete
+ *
+ * CRITICAL: Notice the double parentheses `create<T>()()` - required for TypeScript
+ *
+ * Learn more: See SKILL.md for middleware and advanced patterns
+ */
+
+import { create } from 'zustand'
+
+// Define state interface
+interface User {
+  id: string
+  name: string
+  email: string
+}
+
+// Define store interface (state + actions)
+interface AppStore {
+  // State
+  count: number
+  user: User | null
+  isLoading: boolean
+
+  // Actions
+  increment: () => void
+  decrement: () => void
+  reset: () => void
+  setUser: (user: User) => void
+  clearUser: () => void
+  setLoading: (loading: boolean) => void
+}
+
+// Create typed store with double parentheses
+export const useAppStore = create<AppStore>()((set) => ({
+  // Initial state
+  count: 0,
+  user: null,
+  isLoading: false,
+
+  // Actions
+  increment: () => set((state) => ({ count: state.count + 1 })),
+
+  decrement: () => set((state) => ({ count: state.count - 1 })),
+
+  reset: () => set({ count: 0, user: null }),
+
+  setUser: (user) => set({ user }),
+
+  clearUser: () => set({ user: null }),
+
+  setLoading: (loading) => set({ isLoading: loading }),
+}))
+
+/**
+ * Usage in component:
+ *
+ * function Counter() {
+ *   // Select single value (component only re-renders when count changes)
+ *   const count = useAppStore((state) => state.count)
+ *   const increment = useAppStore((state) => state.increment)
+ *
+ *   return (
+ *     <div>
+ *       <p>Count: {count}</p>
+ *       <button onClick={increment}>Increment</button>
+ *     </div>
+ *   )
+ * }
+ *
+ * function UserProfile() {
+ *   const user = useAppStore((state) => state.user)
+ *   const setUser = useAppStore((state) => state.setUser)
+ *
+ *   if (!user) return <div>No user</div>
+ *
+ *   return <div>Hello, {user.name}!</div>
+ * }
+ */
diff --git a/.github/workflows/ci-pipeline.yaml b/.github/workflows/ci-pipeline.yaml
new file mode 100644
index 0000000..936c4cb
--- /dev/null
+++ b/.github/workflows/ci-pipeline.yaml
@@ -0,0 +1,59 @@
+name: CI Pipeline
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+  workflow_dispatch:
+
+permissions:
+  checks: write
+  contents: read
+  pull-requests: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          cache: pnpm
+          cache-dependency-path: pnpm-lock.yaml
+          node-version: "20"
+
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Lint
+        run: pnpm lint
+
+      - name: Test
+        run: pnpm test
+
+      - name: Publish Test Results
+        if: success() || failure()
+        uses: dorny/test-reporter@v1.9.1
+        with:
+          name: Unit & Integration Tests
+          path: reports/test-results.xml
+          reporter: java-junit
+
+      - name: Upload coverage reports to Codecov
+        uses: codecov/codecov-action@v5
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          slug: growteer/webapp
+
+      - name: Build
+        run: pnpm build
diff --git a/.gitignore b/.gitignore
index 45c1abc..189b29b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,11 +2,16 @@
 
 # dependencies
 /node_modules
-/.pnp
-.pnp.js
+/.pnp*
+.pnpm*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
 
 # testing
-/coverage
+/reports
 
 # next.js
 /.next/
@@ -23,10 +28,10 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
 
-# local env files
-.env*.local
-.env
+# env files (can opt-in for committing if needed)
+.env*
 
 # vercel
 .vercel
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..23fd35f
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "editor.formatOnSave": true
+}
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..f424e04
--- /dev/null
+++ b/README.md
@@ -0,0 +1,32 @@
+[![codecov](https://codecov.io/gh/growteer/webapp/graph/badge.svg?token=XW113W2X01)](https://codecov.io/gh/growteer/webapp)
+
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
diff --git a/components.json b/components.json
new file mode 100644
index 0000000..667dbb3
--- /dev/null
+++ b/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}
\ No newline at end of file
diff --git a/docs/adr/001-feature-sliced-architecture.md b/docs/adr/001-feature-sliced-architecture.md
new file mode 100644
index 0000000..1d1a80f
--- /dev/null
+++ b/docs/adr/001-feature-sliced-architecture.md
@@ -0,0 +1,84 @@
+# ADR-001: Feature-Sliced Architecture
+
+## Status
+Accepted
+
+## Context
+
+The Growteer web application is expected to grow significantly in complexity, with features including:
+- Social feeds with different media types
+- User and company profiles
+- Job board
+- Marketplace
+- Chat functionality
+- AI-based features
+- Blockchain integration
+
+We need a scalable folder structure that:
+- Supports team collaboration (multiple developers working on different features)
+- Enables feature independence and reusability
+- Makes it easy to locate code related to a specific feature
+- Prevents circular dependencies between features
+- Allows easy extraction to micro-frontends later if needed
+
+Traditional organization by file type (all components together, all hooks together) becomes difficult to navigate as the codebase grows and makes it harder to understand feature boundaries.
+
+## Decision
+
+We will adopt a **Feature-Sliced Architecture** pattern where:
+
+1. **Feature modules** are self-contained in `src/features/{feature-name}/` with:
+   - `api/` - API client functions for this feature
+   - `components/` - Feature-specific UI components
+   - `hooks/` - Feature-specific React hooks
+   - `lib/` - Feature-specific utilities/logic
+   - `types/` - Feature-specific TypeScript types
+
+2. **Shared infrastructure** lives in `src/lib/`:
+   - `api/` - Centralized API client
+   - `i18n/` - Internationalization configuration
+   - `react-query/` - React Query provider
+   - `validation/` - Zod schemas and form helpers
+   - `pwa/` - PWA utilities
+
+3. **Shared UI components** live in `src/components/`:
+   - `ui/` - Shadcn primitive components
+   - `layout/` - Layout components (Header, Footer, Sidebar)
+   - `forms/` - Reusable form components
+   - `features/` - Feature-specific shared components
+
+4. **Global concerns** are separate:
+   - `src/store/` - Zustand stores (global state)
+   - `src/types/` - Global TypeScript types
+   - `src/hooks/` - Shared React hooks (not feature-specific)
+   - `src/locales/` - Translation files
+
+5. **Routes** follow Next.js App Router conventions in `src/app/[locale]/` with route groups using parentheses: `(auth)`, `(dashboard)`
+
+## Consequences
+
+### Positive
+
+- **Clear feature boundaries**: Each feature is self-contained, making it easy to understand what code belongs to which feature
+- **Team collaboration**: Multiple developers can work on different features without conflicts
+- **Reusability**: Features can be reused or extracted independently
+- **Scalability**: Easy to add new features without affecting existing ones
+- **Discoverability**: Developers can quickly locate all code related to a feature in one place
+- **Maintainability**: Changes to one feature are less likely to affect others
+
+### Negative
+
+- **Learning curve**: Team members need to understand the pattern
+- **Initial setup**: More folders to create initially, but this is offset by the benefits as the project grows
+- **Potential code duplication**: Features might have similar code, but this is intentional to maintain independence
+
+### Risks
+
+- **Feature coupling**: Must be careful not to create dependencies between features. Shared utilities should go in `lib/`, not in feature folders.
+- **Over-abstraction**: Risk of creating too many layers. The pattern should be pragmatic, not dogmatic.
+
+## Implementation Notes
+
+- Each feature module should have a `README.md` explaining its purpose and usage
+- Features should import from `lib/` and `components/`, not from other features directly
+- When code is needed by multiple features, it should be promoted to `lib/` or `components/`
diff --git a/docs/adr/002-state-management-strategy.md b/docs/adr/002-state-management-strategy.md
new file mode 100644
index 0000000..d1d9e8e
--- /dev/null
+++ b/docs/adr/002-state-management-strategy.md
@@ -0,0 +1,80 @@
+# ADR-002: State Management Strategy
+
+## Status
+Accepted
+
+## Context
+
+The application needs to manage multiple types of state:
+- **Server state**: Data fetched from APIs (users, posts, jobs, etc.)
+- **Global client state**: Authentication, UI preferences, real-time connections
+- **Component state**: Local UI state (form inputs, modals, toggles)
+
+Traditional approaches like:
+- **Redux Toolkit**: Overkill for the expected complexity, adds boilerplate, larger bundle size
+- **Context API**: Performance issues with frequent updates, difficult to persist
+- **localState only**: Doesn't scale for complex shared state
+
+We need a solution that:
+- Handles server state efficiently (caching, refetching, synchronization)
+- Manages global client state without excessive boilerplate
+- Supports persistence for auth and preferences
+- Keeps bundle size minimal
+- Provides good developer experience
+
+## Decision
+
+We will use a **hybrid approach** combining multiple state management solutions:
+
+### 1. TanStack Query (React Query) - Server State
+- Use for ALL server/API data
+- Provides automatic caching, refetching, background updates
+- Handles optimistic updates
+- Manages loading and error states
+- Use in Client Components only
+
+### 2. Zustand - Global Client State
+- Use for auth state, UI preferences, real-time features
+- Lightweight (~1KB), minimal boilerplate
+- Supports persistence via middleware
+- Simpler than Redux Toolkit
+- Stores in `src/store/` (e.g., `authStore.ts`, `uiStore.ts`)
+
+### 3. React Context - App-Wide Providers Only
+- Use ONLY for truly app-wide providers (theme, i18n context)
+- Avoid for feature-specific state
+
+### 4. useState - Component-Scoped State
+- Use for component-only state that doesn't need sharing
+- Simple form state, UI toggles, etc.
+
+## Consequences
+
+### Positive
+
+- **Separation of concerns**: Server state and client state are clearly separated
+- **Automatic caching**: TanStack Query handles cache management automatically
+- **Reduced boilerplate**: Zustand is much simpler than Redux
+- **Type safety**: Both solutions work well with TypeScript
+- **Performance**: TanStack Query optimizes API calls, Zustand is performant for client state
+- **Persistence**: Zustand's persist middleware handles auth and preferences easily
+- **Small bundle size**: Zustand is ~1KB, TanStack Query is tree-shakeable
+
+### Negative
+
+- **Multiple libraries**: Need to understand two different APIs (TanStack Query and Zustand)
+- **Learning curve**: Team needs to know when to use which solution
+- **Potential confusion**: Need clear guidelines on when to use what
+
+### Risks
+
+- **State duplication**: Risk of duplicating server state in Zustand. Must use TanStack Query for server state.
+- **Over-engineering**: Could use too many state solutions. We limit to these four.
+
+## Implementation Notes
+
+- React Query provider is added to the locale layout (`src/app/[locale]/layout.tsx`)
+- Zustand stores use TypeScript with strict typing
+- Auth state is persisted using Zustand's `persist` middleware
+- Clear cache on logout using `queryClient.clear()`
+- See `.cursor/rules/state-management.mdc` for detailed usage patterns
diff --git a/docs/adr/003-internationalization-next-intl.md b/docs/adr/003-internationalization-next-intl.md
new file mode 100644
index 0000000..c68d40f
--- /dev/null
+++ b/docs/adr/003-internationalization-next-intl.md
@@ -0,0 +1,67 @@
+# ADR-003: Internationalization with next-intl
+
+## Status
+Accepted
+
+## Context
+
+The application needs to support multiple languages (starting with English and German, with potential for more). We need an i18n solution that:
+- Works seamlessly with Next.js 15 App Router
+- Supports Server Components (default in Next.js App Router)
+- Provides type-safe translations
+- Supports SSR/SSG for SEO
+- Handles locale-based routing
+- Is actively maintained and compatible with Next.js 15
+
+Alternative solutions considered:
+- **react-i18next**: More complex setup, less optimized for Next.js App Router
+- **next-i18next**: Designed for Pages Router, not ideal for App Router
+- **Custom solution**: Too much maintenance overhead
+
+## Decision
+
+We will use **next-intl** for internationalization because:
+
+1. **Built for Next.js App Router**: Native support for Server Components and App Router patterns
+2. **Type-safe translations**: TypeScript support with autocomplete for translation keys
+3. **SSR/SSG compatible**: Works with server-side rendering and static generation
+4. **Route-based localization**: Supports locale-based routing (e.g., `/en/`, `/de/`)
+5. **Active maintenance**: Regularly updated and compatible with Next.js 15
+6. **Simple API**: Easy to use in both Server and Client Components
+
+Implementation:
+- Translation files in `src/locales/{locale}/common.json`
+- Locale-based routing via `app/[locale]/` dynamic segment
+- Middleware at `middleware.ts` handles locale detection and routing
+- Use `getTranslations` in Server Components, `useTranslations` in Client Components
+- Navigation uses `Link` from `@/lib/i18n/routing` (not Next.js Link) for locale awareness
+
+## Consequences
+
+### Positive
+
+- **Seamless Next.js integration**: Designed specifically for App Router
+- **Server Component support**: Works with the default Next.js pattern
+- **Type safety**: Autocomplete and type checking for translation keys
+- **SEO friendly**: SSR/SSG support for proper internationalization
+- **Developer experience**: Simple, intuitive API
+- **Performance**: Efficient bundle size, tree-shakeable
+
+### Negative
+
+- **Library dependency**: Additional dependency to maintain
+- **Translation file management**: Need to keep JSON files in sync across locales
+- **Navigation changes**: Must use next-intl's `Link` instead of Next.js `Link`
+
+### Risks
+
+- **Translation completeness**: Risk of missing translations for some locales. Use TypeScript to catch missing keys.
+- **Performance**: Large translation files could impact bundle size, but JSON is efficiently tree-shaken.
+
+## Implementation Notes
+
+- Supported locales: `en` (default), `de`
+- Translations organized by namespace: `common.*`, `navigation.*`, `footer.*`, `landing.*`
+- Middleware redirects root to `/en/` by default
+- All routes must be under `app/[locale]/` for proper locale handling
+- See `.cursor/rules/i18n.mdc` for detailed usage patterns
diff --git a/docs/adr/004-centralized-api-client.md b/docs/adr/004-centralized-api-client.md
new file mode 100644
index 0000000..0ce6183
--- /dev/null
+++ b/docs/adr/004-centralized-api-client.md
@@ -0,0 +1,70 @@
+# ADR-004: Centralized API Client
+
+## Status
+Accepted
+
+## Context
+
+The application will make many API calls to the backend. We need a consistent approach for:
+- Making HTTP requests
+- Handling authentication tokens
+- Managing request/response interceptors
+- Error handling and retries
+- Request/response transformation
+- Timeout handling
+
+Without a centralized client, each API call would need to:
+- Manually add authentication headers
+- Handle errors individually
+- Manage base URLs and endpoints
+- Implement timeout logic
+- Handle 401 redirects
+
+This leads to code duplication and inconsistent error handling.
+
+## Decision
+
+We will use a **centralized API client** (`ApiClient` class) located in `src/lib/api/client.ts`:
+
+1. **Single source of truth** for all API communication
+2. **Automatic token injection**: Reads auth token from Zustand store
+3. **Consistent error handling**: Standardized error response format
+4. **401 handling**: Automatically clears auth and redirects to login
+5. **Type safety**: Generic methods with TypeScript types for request/response
+6. **Configurable**: Supports custom base URLs, headers, timeouts
+
+All API calls must use `apiClient` from `@/lib/api`:
+- Feature-specific API functions in `features/{feature}/api/` import and use `apiClient`
+- Methods: `get()`, `post()`, `put()`, `patch()`, `delete()`
+- Returns `ApiResponse<T>` with `success` and `error` fields
+
+## Consequences
+
+### Positive
+
+- **Consistency**: All API calls follow the same pattern
+- **DRY principle**: No duplication of request/response handling code
+- **Centralized auth**: Token handling in one place
+- **Error handling**: Consistent error responses across the app
+- **Type safety**: TypeScript generics ensure type-safe API calls
+- **Easy to modify**: Changes to auth/error handling affect all calls automatically
+- **Testability**: Can mock the client easily for testing
+
+### Negative
+
+- **Abstraction layer**: Additional layer between features and the API
+- **Learning curve**: Team needs to understand the client API
+
+### Risks
+
+- **Over-abstraction**: Risk of making the client too complex. Keep it simple and focused.
+- **Flexibility**: Some requests might need special handling. The client should be extensible.
+
+## Implementation Notes
+
+- API client uses `fetch` under the hood (native browser API)
+- Auth token is read from Zustand store (`auth-storage` in localStorage)
+- 401 errors trigger automatic logout and redirect
+- Base URL configured via `API_BASE_URL` constant in `lib/constants/`
+- Timeout defaults to 30 seconds, configurable per request
+- See `.cursor/rules/api-layer.mdc` for detailed usage patterns
diff --git a/docs/adr/005-api-type-generation.md b/docs/adr/005-api-type-generation.md
new file mode 100644
index 0000000..dcda04b
--- /dev/null
+++ b/docs/adr/005-api-type-generation.md
@@ -0,0 +1,60 @@
+# ADR-005: API Type Generation from Schema
+
+## Status
+Accepted
+
+## Context
+
+The backend provides either an OpenAPI specification or a GraphQL schema. We need TypeScript types for:
+- API request/response types
+- Error types
+- Schema validation
+
+Options:
+1. **Manual types**: Write types manually and keep them in sync with backend
+2. **Generate from schema**: Auto-generate types from OpenAPI/GraphQL schema
+3. **Runtime validation**: Use Zod schemas and infer types from them
+
+Manual types are error-prone and don't scale. Runtime validation with Zod is useful for forms but redundant for API types if we have a schema.
+
+## Decision
+
+We will **auto-generate TypeScript types** from the backend schema:
+
+1. **OpenAPI**: Use `openapi-typescript` or `@hey-api/openapi-ts` to generate types from OpenAPI spec
+2. **GraphQL**: Use `@graphql-codegen/cli` with TypeScript plugins to generate types from GraphQL schema
+3. **Generated types location**: `src/lib/api/generated/`
+4. **Export**: Generated types exported from `src/lib/api/index.ts`
+5. **CI/CD integration**: Type generation runs in CI to ensure types stay in sync with backend
+
+For runtime validation (forms, user input), we still use Zod schemas. API types are primarily for type safety, not runtime validation.
+
+## Consequences
+
+### Positive
+
+- **Type safety**: Types automatically match backend schema
+- **Reduced errors**: No manual synchronization between frontend and backend types
+- **Scalability**: Works well as API grows
+- **Single source of truth**: Backend schema is the source of truth
+- **Developer experience**: Autocomplete and type checking in IDE
+- **CI safety**: Types regenerated on backend changes catch breaking changes early
+
+### Negative
+
+- **Build step**: Requires running generation script during development
+- **Dependency on schema**: If backend doesn't provide schema, can't generate types
+- **Schema quality**: Generated types only as good as the schema
+
+### Risks
+
+- **Schema changes**: Breaking schema changes require frontend updates. CI will catch this.
+- **Missing schema**: If backend doesn't provide schema, fall back to manual types or runtime validation.
+
+## Implementation Notes
+
+- Setup documentation in `scripts/generate-api-types.md`
+- Generated types are committed to repository (or generated in CI)
+- `src/lib/api/generated/.gitkeep` ensures directory exists
+- Feature API functions import types from `@/lib/api` (generated types)
+- See `.cursor/rules/typescript.mdc` for type generation patterns
diff --git a/docs/adr/006-validation-zod-react-hook-form.md b/docs/adr/006-validation-zod-react-hook-form.md
new file mode 100644
index 0000000..dc02d8d
--- /dev/null
+++ b/docs/adr/006-validation-zod-react-hook-form.md
@@ -0,0 +1,73 @@
+# ADR-006: Validation with Zod and React Hook Form
+
+## Status
+Accepted
+
+## Context
+
+The application needs form validation for:
+- User registration and login
+- Profile updates
+- Job postings
+- Other user input forms
+
+Requirements:
+- Type-safe validation
+- Good developer experience
+- Integration with form handling
+- Runtime validation (not just compile-time)
+- Reusable validation schemas
+
+Alternative approaches:
+- **HTML5 validation**: Not sufficient for complex validation rules
+- **Yup**: Similar to Zod, but Zod has better TypeScript inference
+- **Joi**: Server-side focused, larger bundle
+- **Manual validation**: Too much boilerplate, error-prone
+
+## Decision
+
+We will use **Zod for schema validation** and **React Hook Form for form handling**:
+
+1. **Zod schemas**: Define validation rules in `src/lib/validation/schemas.ts`
+   - Reusable schemas (email, password, etc.)
+   - Feature-specific schemas can live in feature folders
+   - Type inference: `z.infer<typeof schema>` for TypeScript types
+
+2. **React Hook Form**: Form state management and handling
+   - Integrates with Zod via `@hookform/resolvers/zod`
+   - Provides `useTypedForm` helper in `lib/validation/form-helpers.tsx`
+   - Handles form state, validation, error display
+
+3. **Validation utilities**: Helper functions in `lib/validation/`
+   - `getFieldError()` - Get error message for specific field
+   - `formatZodErrors()` - Format Zod errors for display
+
+## Consequences
+
+### Positive
+
+- **Type safety**: Schema validation with TypeScript inference
+- **Reusability**: Common schemas (email, password) can be reused
+- **Runtime validation**: Validates actual user input, not just types
+- **Developer experience**: Good integration between Zod and React Hook Form
+- **Bundle size**: Zod is lightweight (~10KB)
+- **Composability**: Schemas can be composed and extended
+
+### Negative
+
+- **Two libraries**: Need to understand both Zod and React Hook Form
+- **Learning curve**: Team needs to learn Zod schema syntax
+- **Schema duplication**: If API types are generated, validation schemas are separate (but necessary for runtime validation)
+
+### Risks
+
+- **Schema drift**: Validation schemas might drift from API types. This is acceptable as they serve different purposes (runtime validation vs type safety).
+- **Over-validation**: Risk of too many validation rules making forms difficult. Keep validation focused on essential rules.
+
+## Implementation Notes
+
+- Use `useTypedForm` from `@/lib/validation/form-helpers` for type-safe forms
+- Common schemas exported from `lib/validation/schemas.ts`
+- Types inferred from schemas: `type LoginFormData = z.infer<typeof loginSchema>`
+- Validation happens on blur by default (configurable)
+- See `.cursor/rules/validation.mdc` for detailed usage patterns
diff --git a/docs/adr/007-component-organization.md b/docs/adr/007-component-organization.md
new file mode 100644
index 0000000..efbbe6a
--- /dev/null
+++ b/docs/adr/007-component-organization.md
@@ -0,0 +1,72 @@
+# ADR-007: Component Organization Patterns
+
+## Status
+Accepted
+
+## Context
+
+We need clear rules for where components should live:
+- Shared UI components (buttons, inputs)
+- Layout components (header, footer)
+- Feature-specific components
+- Page-level components
+
+Without clear organization:
+- Components become hard to find
+- Developers duplicate components unnecessarily
+- No clear distinction between shared and feature-specific code
+- Difficult to understand component hierarchy
+
+## Decision
+
+We will organize components into clear categories:
+
+### 1. Shared Components (`src/components/`)
+- **`ui/`**: Shadcn primitive components (Button, Input, Label, etc.)
+- **`layout/`**: Layout components used across routes (Header, Footer, Sidebar)
+- **`forms/`**: Reusable form components (not feature-specific)
+- **`features/`**: Feature-specific shared components that are reused (e.g., landing page components)
+
+### 2. Feature Components (`src/features/{feature}/components/`)
+- Feature-specific UI components
+- Only imported within the feature or promoted to `components/features/` if shared
+- Should not import from other features directly
+
+### 3. Page Components
+- Can live in route folders if truly page-specific
+- Usually thin wrappers that compose feature components
+
+### Default to Server Components
+- Server Components are the default in Next.js App Router
+- Use Client Components (`"use client"`) only when needed:
+  - Interactive features (onClick, useState, useEffect)
+  - Browser APIs
+  - React Query hooks (Client Components only)
+
+## Consequences
+
+### Positive
+
+- **Clear hierarchy**: Easy to understand where components belong
+- **Reusability**: Shared components are easy to find and reuse
+- **Feature isolation**: Feature components are self-contained
+- **Discoverability**: Developers know where to look for components
+- **Server-first**: Defaulting to Server Components reduces bundle size
+
+### Negative
+
+- **Decisions required**: Developers need to decide where components belong
+- **Potential duplication**: Similar components might exist in multiple features (acceptable for independence)
+
+### Risks
+
+- **Over-sharing**: Risk of making components too generic. Prefer composition over abstraction.
+- **Under-sharing**: Risk of duplicating components. If used by 3+ features, promote to `components/`.
+
+## Implementation Notes
+
+- Shadcn components installed via CLI go to `components/ui/`
+- Feature components should be self-contained
+- Use composition: prefer small, focused components over large monolithic ones
+- Server Components can't use hooks or browser APIs - convert to Client Components when needed
+- See `.cursor/rules/components.mdc` for detailed usage patterns
diff --git a/docs/adr/008-data-fetching-strategy.md b/docs/adr/008-data-fetching-strategy.md
new file mode 100644
index 0000000..aeffded
--- /dev/null
+++ b/docs/adr/008-data-fetching-strategy.md
@@ -0,0 +1,83 @@
+# ADR-008: Data Fetching Strategy
+
+## Status
+Accepted
+
+## Context
+
+Next.js 15 App Router uses Server Components by default, which can fetch data directly. However, we also need:
+- Client-side data fetching for interactive features
+- Caching and refetching capabilities
+- Optimistic updates
+- Real-time data updates
+
+We need clear guidance on when to use:
+- Server Components with direct `fetch()`
+- TanStack Query in Client Components
+- Hybrid approaches
+
+## Decision
+
+We will use a **hybrid data fetching strategy**:
+
+### Server Components (Default)
+
+Use for:
+- **Initial page data**: SEO-critical content, public data
+- **Server-rendered content**: Data that benefits from SSR
+- **Static/rarely changing data**: Can use `revalidate` for ISR
+- **Parallel fetching**: Fetch multiple independent sources in parallel with `Promise.all()`
+
+```typescript
+// ✅ Server Component - fetch directly
+export default async function Page() {
+  const posts = await fetch("https://api.example.com/posts").then(r => r.json());
+  return <PostsList posts={posts} />;
+}
+```
+
+### TanStack Query (Client Components)
+
+Use for:
+- **User-specific data**: After hydration, user-specific content
+- **Interactive features**: Data that needs reactivity, real-time updates
+- **Optimistic updates**: When users perform actions (create, update, delete)
+- **Caching/refetching**: Data that needs automatic background refetching
+- **Pagination/infinite scroll**: Dynamic data loading
+
+```typescript
+// ✅ Client Component - use TanStack Query
+"use client";
+const { data } = useQuery({
+  queryKey: ["user", userId],
+  queryFn: () => apiClient.get(`/users/${userId}`),
+});
+```
+
+## Consequences
+
+### Positive
+
+- **Performance**: Server Components reduce client bundle size
+- **SEO**: Server-rendered content improves SEO
+- **Flexibility**: Can use the right tool for each use case
+- **Caching**: TanStack Query provides excellent caching for client data
+- **Developer experience**: Clear guidance on when to use what
+
+### Negative
+
+- **Complexity**: Need to understand two different patterns
+- **Decision overhead**: Developers need to decide which approach to use
+
+### Risks
+
+- **Over-fetching on client**: Risk of fetching in Client Components when Server Components would suffice. Default to Server Components.
+- **Server/client mismatch**: Hydration errors if server and client data differ. Use TanStack Query for client-specific data.
+
+## Implementation Notes
+
+- Default to Server Components - convert to Client Components only when needed
+- Use consistent query keys: `["resource", id, ...filters]`
+- Fetch in parallel in Server Components: `Promise.all([fetch1(), fetch2()])`
+- Invalidate queries after mutations for cache consistency
+- See `.cursor/rules/data-fetching.mdc` for detailed patterns
diff --git a/docs/adr/009-progressive-web-app.md b/docs/adr/009-progressive-web-app.md
new file mode 100644
index 0000000..94ebd85
--- /dev/null
+++ b/docs/adr/009-progressive-web-app.md
@@ -0,0 +1,75 @@
+# ADR-009: Progressive Web App Support
+
+## Status
+Accepted
+
+## Context
+
+The application targets mobile-first PWA experience:
+- Must work well on mobile devices (primary platform)
+- Should also perform well on desktop
+- Needs offline capabilities for basic functionality
+- Should be installable on mobile devices
+- Avoid native mobile apps in short/mid-term
+
+We need:
+- PWA manifest for installability
+- Service Worker for offline support and caching
+- Proper icons and metadata
+- Install prompt functionality
+
+## Decision
+
+We will implement **Progressive Web App (PWA)** support:
+
+1. **Manifest**: `public/manifest.json`
+   - App name, icons, theme colors
+   - Display mode: `standalone`
+   - Linked in root layout
+
+2. **Service Worker**: `public/sw.js`
+   - Basic caching strategy for static assets
+   - Can be enhanced with Workbox for production
+   - Registered via `registerServiceWorker()` from `lib/pwa/service-worker.ts`
+
+3. **Icons**: Required at `public/icon-192.png` and `public/icon-512.png`
+
+4. **Install Prompt**: `usePWAInstallPrompt()` hook in `lib/pwa/install-prompt.ts`
+   - Detects when app is installable
+   - Provides install prompt functionality
+
+5. **Metadata**: Root layout includes PWA metadata
+   - Theme color, viewport settings
+   - Apple-specific meta tags for iOS
+
+## Consequences
+
+### Positive
+
+- **Mobile-first**: Excellent experience on mobile devices
+- **Installable**: Users can install app like a native app
+- **Offline support**: Basic functionality works offline
+- **Performance**: Service Worker caching improves load times
+- **No app stores**: Avoids app store approval process
+- **Single codebase**: No need for separate native apps
+
+### Negative
+
+- **Limited offline features**: Basic service worker only caches static assets
+- **iOS limitations**: iOS has some limitations for PWAs (less than Android)
+- **Icon generation**: Need to create multiple icon sizes
+
+### Risks
+
+- **Service Worker complexity**: Advanced caching strategies can be complex. Start simple, enhance later.
+- **Cache invalidation**: Risk of serving stale content. Service Worker handles cache versioning.
+- **Offline experience**: Current implementation is basic. Enhance with Workbox and IndexedDB for advanced offline features.
+
+## Implementation Notes
+
+- Manifest is automatically linked in root layout
+- Basic service worker caches static assets
+- For production, consider Workbox for advanced caching strategies
+- Install prompt hook available for "Add to Home Screen" functionality
+- Icons must be added before deploying (192x192 and 512x512)
+- See `.cursor/rules/pwa.mdc` for detailed implementation patterns
diff --git a/docs/adr/README.md b/docs/adr/README.md
new file mode 100644
index 0000000..4a97d62
--- /dev/null
+++ b/docs/adr/README.md
@@ -0,0 +1,47 @@
+# Architecture Decision Records
+
+This directory contains Architecture Decision Records (ADRs) for the Growteer web application.
+
+## What are ADRs?
+
+Architecture Decision Records are documents that capture important architectural decisions made during the development of a software project. Each ADR describes:
+- The context and problem being addressed
+- The decision that was made
+- The consequences of that decision
+
+## ADR Index
+
+- [ADR-001: Feature-Sliced Architecture](./001-feature-sliced-architecture.md)
+- [ADR-002: State Management Strategy](./002-state-management-strategy.md)
+- [ADR-003: Internationalization with next-intl](./003-internationalization-next-intl.md)
+- [ADR-004: Centralized API Client](./004-centralized-api-client.md)
+- [ADR-005: API Type Generation from Schema](./005-api-type-generation.md)
+- [ADR-006: Validation with Zod and React Hook Form](./006-validation-zod-react-hook-form.md)
+- [ADR-007: Component Organization Patterns](./007-component-organization.md)
+- [ADR-008: Data Fetching Strategy](./008-data-fetching-strategy.md)
+- [ADR-009: Progressive Web App Support](./009-progressive-web-app.md)
+
+## Format
+
+Each ADR follows this structure:
+
+```
+# [Short title of solved problem]
+
+## Status
+[Proposed | Accepted | Deprecated | Superseded by ADR-XXX]
+
+## Context
+[Description of the issue motivating this decision]
+
+## Decision
+[The change that we're proposing or have agreed to implement]
+
+## Consequences
+[What becomes easier or more difficult to do and any risks introduced]
+```
+
+## References
+
+- [Documenting Architecture Decisions](https://cognitect.com/blog/2011/11/15/documenting-architecture-decisions) by Michael Nygard
+- [ADR GitHub Template](https://github.com/joelparkerhenderson/architecture-decision-record)
diff --git a/eslint.config.ts b/eslint.config.ts
new file mode 100644
index 0000000..24581af
--- /dev/null
+++ b/eslint.config.ts
@@ -0,0 +1,18 @@
+import { defineConfig } from "eslint/config";
+import nextCoreWebVitals from "eslint-config-next/core-web-vitals";
+
+export default defineConfig([
+  ...nextCoreWebVitals,
+  {
+    ignores: [
+      "node_modules/**",
+      ".next/**",
+      "out/**",
+      "build/**",
+      "next-env.d.ts",
+      "reports/**",
+      "*.config.ts",
+      ".cursor/**",
+    ],
+  },
+]);
diff --git a/jest.config.ts b/jest.config.ts
new file mode 100644
index 0000000..5eed5d3
--- /dev/null
+++ b/jest.config.ts
@@ -0,0 +1,38 @@
+import type { Config } from "jest";
+import nextJest from "next/jest";
+
+const createJestConfig = nextJest({
+  dir: "./",
+});
+
+const config: Config = {
+  testEnvironment: "jsdom",
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
+  moduleNameMapper: {
+    "^@/(.*)$": "<rootDir>/src/$1",
+  },
+  testMatch: ["**/*.test.[tj]s?(x)"],
+  clearMocks: true,
+  collectCoverage: true,
+  coverageDirectory: "<rootDir>/reports/coverage",
+  coverageReporters: ["text", "lcov"],
+  reporters: [
+    "default",
+    [
+      "jest-junit",
+      {
+        outputDirectory: "<rootDir>/reports",
+        outputName: "test-results.xml",
+        addFileAttribute: "true",
+        ancestorSeparator: " › ",
+      },
+    ],
+  ],
+};
+
+const jestConfig = createJestConfig(config);
+
+export default async () => ({
+  ...(await jestConfig()),
+  transformIgnorePatterns: ["node_modules/(?!next-intl)/"],
+});
diff --git a/jest.setup.ts b/jest.setup.ts
new file mode 100644
index 0000000..d0de870
--- /dev/null
+++ b/jest.setup.ts
@@ -0,0 +1 @@
+import "@testing-library/jest-dom";
diff --git a/next.config.ts b/next.config.ts
new file mode 100644
index 0000000..820fcf5
--- /dev/null
+++ b/next.config.ts
@@ -0,0 +1,10 @@
+import type { NextConfig } from "next";
+import createNextIntlPlugin from "next-intl/plugin";
+
+const withNextIntl = createNextIntlPlugin("./src/lib/i18n/config.ts");
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default withNextIntl(nextConfig);
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..e99745a
--- /dev/null
+++ b/package.json
@@ -0,0 +1,53 @@
+{
+  "name": "webapp",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "postinstall": "pnpm install -g shadcn@latest",
+    "dev": "next dev --turbopack",
+    "build": "next build --turbopack",
+    "start": "next start",
+    "lint": "eslint",
+    "test": "jest"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@tanstack/react-query": "^5.90.18",
+    "@tanstack/react-query-devtools": "^5.91.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.546.0",
+    "next": "^16.1.6",
+    "next-intl": "^4.7.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-hook-form": "^7.71.1",
+    "tailwind-merge": "^3.3.1",
+    "zod": "^4.3.5",
+    "zustand": "^5.0.10"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "^16.1.5",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "jest-junit": "^16.0.0",
+    "shadcn": "^3.7.0",
+    "tailwindcss": "^4",
+    "ts-node": "^10.9.2",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5"
+  },
+  "packageManager": "pnpm@10.15.0+sha512.486ebc259d3e999a4e8691ce03b5cac4a71cbeca39372a9b762cb500cfdf0873e2cb16abe3d951b1ee2cf012503f027b98b6584e4df22524e0c7450d9ec7aa7b"
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..3575e7e
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,8983 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      '@hookform/resolvers':
+        specifier: ^5.2.2
+        version: 5.2.2(react-hook-form@7.71.1(react@19.2.4))
+      '@radix-ui/react-label':
+        specifier: ^2.1.8
+        version: 2.1.8(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-separator':
+        specifier: ^1.1.8
+        version: 1.1.8(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-slot':
+        specifier: ^1.2.4
+        version: 1.2.4(@types/react@19.2.2)(react@19.2.4)
+      '@tanstack/react-query':
+        specifier: ^5.90.18
+        version: 5.90.18(react@19.2.4)
+      '@tanstack/react-query-devtools':
+        specifier: ^5.91.2
+        version: 5.91.2(@tanstack/react-query@5.90.18(react@19.2.4))(react@19.2.4)
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      lucide-react:
+        specifier: ^0.546.0
+        version: 0.546.0(react@19.2.4)
+      next:
+        specifier: ^16.1.6
+        version: 16.1.6(@babel/core@7.28.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      next-intl:
+        specifier: ^4.7.0
+        version: 4.7.0(next@16.1.6(@babel/core@7.28.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
+      react:
+        specifier: ^19.2.0
+        version: 19.2.4
+      react-dom:
+        specifier: ^19.2.0
+        version: 19.2.4(react@19.2.4)
+      react-hook-form:
+        specifier: ^7.71.1
+        version: 7.71.1(react@19.2.4)
+      tailwind-merge:
+        specifier: ^3.3.1
+        version: 3.3.1
+      zod:
+        specifier: ^4.3.5
+        version: 4.3.5
+      zustand:
+        specifier: ^5.0.10
+        version: 5.0.10(@types/react@19.2.2)(react@19.2.4)
+    devDependencies:
+      '@eslint/eslintrc':
+        specifier: ^3
+        version: 3.3.1
+      '@tailwindcss/postcss':
+        specifier: ^4
+        version: 4.1.14
+      '@testing-library/jest-dom':
+        specifier: ^6.9.1
+        version: 6.9.1
+      '@testing-library/react':
+        specifier: ^16.3.0
+        version: 16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@types/jest':
+        specifier: ^30.0.0
+        version: 30.0.0
+      '@types/node':
+        specifier: ^20
+        version: 20.19.22
+      '@types/react':
+        specifier: ^19
+        version: 19.2.2
+      '@types/react-dom':
+        specifier: ^19
+        version: 19.2.2(@types/react@19.2.2)
+      eslint:
+        specifier: ^9
+        version: 9.38.0(jiti@2.6.1)
+      eslint-config-next:
+        specifier: ^16.1.5
+        version: 16.1.5(@typescript-eslint/parser@8.54.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      jest:
+        specifier: ^30.2.0
+        version: 30.2.0(@types/node@20.19.22)(ts-node@10.9.2(@swc/core@1.15.8)(@types/node@20.19.22)(typescript@5.9.3))
+      jest-environment-jsdom:
+        specifier: ^30.2.0
+        version: 30.2.0
+      jest-junit:
+        specifier: ^16.0.0
+        version: 16.0.0
+      shadcn:
+        specifier: ^3.7.0
+        version: 3.7.0(@types/node@20.19.22)(hono@4.11.7)(typescript@5.9.3)
+      tailwindcss:
+        specifier: ^4
+        version: 4.1.14
+      ts-node:
+        specifier: ^10.9.2
+        version: 10.9.2(@swc/core@1.15.8)(@types/node@20.19.22)(typescript@5.9.3)
+      tw-animate-css:
+        specifier: ^1.4.0
+        version: 1.4.0
+      typescript:
+        specifier: ^5
+        version: 5.9.3
+
+packages:
+
+  '@adobe/css-tools@4.4.4':
+    resolution: {integrity: sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==}
+
+  '@alloc/quick-lru@5.2.0':
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
+  '@antfu/ni@25.0.0':
+    resolution: {integrity: sha512-9q/yCljni37pkMr4sPrI3G4jqdIk074+iukc5aFJl7kmDCCsiJrbZ6zKxnES1Gwg+i9RcDZwvktl23puGslmvA==}
+    hasBin: true
+
+  '@asamuzakjp/css-color@3.2.0':
+    resolution: {integrity: sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==}
+
+  '@babel/code-frame@7.27.1':
+    resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/code-frame@7.28.6':
+    resolution: {integrity: sha512-JYgintcMjRiCvS8mMECzaEn+m3PfoQiyqukOMCCVQtoJGYJw8j/8LBJEiqkHLkfwCcs74E3pbAUFNg7d9VNJ+Q==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/compat-data@7.28.4':
+    resolution: {integrity: sha512-YsmSKC29MJwf0gF8Rjjrg5LQCmyh+j/nD8/eP7f+BeoQTKYqs9RoWbjGOdy0+1Ekr68RJZMUOPVQaQisnIo4Rw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/core@7.28.4':
+    resolution: {integrity: sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.28.3':
+    resolution: {integrity: sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-annotate-as-pure@7.27.3':
+    resolution: {integrity: sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-compilation-targets@7.27.2':
+    resolution: {integrity: sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-create-class-features-plugin@7.28.3':
+    resolution: {integrity: sha512-V9f6ZFIYSLNEbuGA/92uOvYsGCJNsuA8ESZ4ldc09bWk/j8H8TKiPw8Mk1eG6olpnO0ALHJmYfZvF4MEE4gajg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-globals@7.28.0':
+    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-member-expression-to-functions@7.27.1':
+    resolution: {integrity: sha512-E5chM8eWjTp/aNoVpcbfM7mLxu9XGLWYise2eBKGQomAk/Mb4XoxyqXTZbuTohbsl8EKqdlMhnDI2CCLfcs9wA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.27.1':
+    resolution: {integrity: sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-transforms@7.28.3':
+    resolution: {integrity: sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-optimise-call-expression@7.27.1':
+    resolution: {integrity: sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-plugin-utils@7.27.1':
+    resolution: {integrity: sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-replace-supers@7.27.1':
+    resolution: {integrity: sha512-7EHz6qDZc8RYS5ElPoShMheWvEgERonFCs7IAonWLLUTXW59DP14bCZt89/GKyreYn8g3S83m21FelHKbeDCKA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
+    resolution: {integrity: sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-string-parser@7.27.1':
+    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.27.1':
+    resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.28.5':
+    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-option@7.27.1':
+    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helpers@7.28.4':
+    resolution: {integrity: sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.28.4':
+    resolution: {integrity: sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/plugin-syntax-async-generators@7.8.4':
+    resolution: {integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-bigint@7.8.3':
+    resolution: {integrity: sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-class-properties@7.12.13':
+    resolution: {integrity: sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-class-static-block@7.14.5':
+    resolution: {integrity: sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-import-attributes@7.27.1':
+    resolution: {integrity: sha512-oFT0FrKHgF53f4vOsZGi2Hh3I35PfSmVs4IBFLFj4dnafP+hIWDLg3VyKmUHfLoLHlyxY4C7DGtmHuJgn+IGww==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-import-meta@7.10.4':
+    resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-json-strings@7.8.3':
+    resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-jsx@7.27.1':
+    resolution: {integrity: sha512-y8YTNIeKoyhGd9O0Jiyzyyqk8gdjnumGTQPsz0xOZOQ2RmkVJeZ1vmmfIvFEKqucBG6axJGBZDE/7iI5suUI/w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-logical-assignment-operators@7.10.4':
+    resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3':
+    resolution: {integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-numeric-separator@7.10.4':
+    resolution: {integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-object-rest-spread@7.8.3':
+    resolution: {integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-optional-catch-binding@7.8.3':
+    resolution: {integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-optional-chaining@7.8.3':
+    resolution: {integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-private-property-in-object@7.14.5':
+    resolution: {integrity: sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-top-level-await@7.14.5':
+    resolution: {integrity: sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-typescript@7.27.1':
+    resolution: {integrity: sha512-xfYCBMxveHrRMnAWl1ZlPXOZjzkN82THFvLhQhFXFt81Z5HnN+EtUkZhv/zcKpmT3fzmWZB0ywiBrbC3vogbwQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-modules-commonjs@7.27.1':
+    resolution: {integrity: sha512-OJguuwlTYlN0gBZFRPqwOGNWssZjfIUdS7HMYtN8c1KmwpwHFBwTeFZrg9XZa+DFTitWOW5iTAG7tyCUPsCCyw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-typescript@7.28.0':
+    resolution: {integrity: sha512-4AEiDEBPIZvLQaWlc9liCavE0xRM0dNca41WtBeM3jgFptfUOSG9z0uteLhq6+3rq+WB6jIvUwKDTpXEHPJ2Vg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/preset-typescript@7.27.1':
+    resolution: {integrity: sha512-l7WfQfX0WK4M0v2RudjuQK4u99BS6yLHYEmdtVPP7lKV013zr9DygFuWNlnbvQ9LR+LS0Egz/XAvGx5U9MX0fQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/runtime@7.28.4':
+    resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/runtime@7.28.6':
+    resolution: {integrity: sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/template@7.27.2':
+    resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.28.4':
+    resolution: {integrity: sha512-YEzuboP2qvQavAcjgQNVgsvHIDv6ZpwXvcvjmyySP2DIMuByS/6ioU5G9pYrWHM6T2YDfc7xga9iNzYOs12CFQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.28.4':
+    resolution: {integrity: sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==}
+    engines: {node: '>=6.9.0'}
+
+  '@bcoe/v8-coverage@0.2.3':
+    resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
+
+  '@cspotcode/source-map-support@0.8.1':
+    resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
+    engines: {node: '>=12'}
+
+  '@csstools/color-helpers@5.1.0':
+    resolution: {integrity: sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==}
+    engines: {node: '>=18'}
+
+  '@csstools/css-calc@2.1.4':
+    resolution: {integrity: sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-color-parser@3.1.0':
+    resolution: {integrity: sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-parser-algorithms@3.0.5':
+    resolution: {integrity: sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-tokenizer@3.0.4':
+    resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
+    engines: {node: '>=18'}
+
+  '@dotenvx/dotenvx@1.51.0':
+    resolution: {integrity: sha512-CbMGzyOYSyFF7d4uaeYwO9gpSBzLTnMmSmTVpCZjvpJFV69qYbjYPpzNnCz1mb2wIvEhjWjRwQWuBzTO0jITww==}
+    hasBin: true
+
+  '@ecies/ciphers@0.2.4':
+    resolution: {integrity: sha512-t+iX+Wf5nRKyNzk8dviW3Ikb/280+aEJAnw9YXvCp2tYGPSkMki+NRY+8aNLmVFv3eNtMdvViPNOPxS8SZNP+w==}
+    engines: {bun: '>=1', deno: '>=2', node: '>=16'}
+    peerDependencies:
+      '@noble/ciphers': ^1.0.0
+
+  '@emnapi/core@1.5.0':
+    resolution: {integrity: sha512-sbP8GzB1WDzacS8fgNPpHlp6C9VZe+SJP3F90W9rLemaQj2PzIuTEl1qDOYQf58YIpyjViI24y9aPWCjEzY2cg==}
+
+  '@emnapi/runtime@1.8.1':
+    resolution: {integrity: sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==}
+
+  '@emnapi/wasi-threads@1.1.0':
+    resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
+
+  '@eslint-community/eslint-utils@4.9.1':
+    resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+
+  '@eslint-community/regexpp@4.12.2':
+    resolution: {integrity: sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+
+  '@eslint/config-array@0.21.1':
+    resolution: {integrity: sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/config-helpers@0.4.1':
+    resolution: {integrity: sha512-csZAzkNhsgwb0I/UAV6/RGFTbiakPCf0ZrGmrIxQpYvGZ00PhTkSnyKNolphgIvmnJeGw6rcGVEXfTzUnFuEvw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/core@0.16.0':
+    resolution: {integrity: sha512-nmC8/totwobIiFcGkDza3GIKfAw1+hLiYVrh3I1nIomQ8PEr5cxg34jnkmGawul/ep52wGRAcyeDCNtWKSOj4Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/eslintrc@3.3.1':
+    resolution: {integrity: sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/js@9.38.0':
+    resolution: {integrity: sha512-UZ1VpFvXf9J06YG9xQBdnzU+kthors6KjhMAl6f4gH4usHyh31rUf2DLGInT8RFYIReYXNSydgPY0V2LuWgl7A==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/object-schema@2.1.7':
+    resolution: {integrity: sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/plugin-kit@0.4.0':
+    resolution: {integrity: sha512-sB5uyeq+dwCWyPi31B2gQlVlo+j5brPlWx4yZBrEaRo/nhdDE8Xke1gsGgtiBdaBTxuTkceLVuVt/pclrasb0A==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@formatjs/ecma402-abstract@2.3.6':
+    resolution: {integrity: sha512-HJnTFeRM2kVFVr5gr5kH1XP6K0JcJtE7Lzvtr3FS/so5f1kpsqqqxy5JF+FRaO6H2qmcMfAUIox7AJteieRtVw==}
+
+  '@formatjs/fast-memoize@2.2.7':
+    resolution: {integrity: sha512-Yabmi9nSvyOMrlSeGGWDiH7rf3a7sIwplbvo/dlz9WCIjzIQAfy1RMf4S0X3yG724n5Ghu2GmEl5NJIV6O9sZQ==}
+
+  '@formatjs/icu-messageformat-parser@2.11.4':
+    resolution: {integrity: sha512-7kR78cRrPNB4fjGFZg3Rmj5aah8rQj9KPzuLsmcSn4ipLXQvC04keycTI1F7kJYDwIXtT2+7IDEto842CfZBtw==}
+
+  '@formatjs/icu-skeleton-parser@1.8.16':
+    resolution: {integrity: sha512-H13E9Xl+PxBd8D5/6TVUluSpxGNvFSlN/b3coUp0e0JpuWXXnQDiavIpY3NnvSp4xhEMoXyyBvVfdFX8jglOHQ==}
+
+  '@formatjs/intl-localematcher@0.5.10':
+    resolution: {integrity: sha512-af3qATX+m4Rnd9+wHcjJ4w2ijq+rAVP3CCinJQvFv1kgSu1W6jypUmvleJxcewdxmutM8dmIRZFxO/IQBZmP2Q==}
+
+  '@formatjs/intl-localematcher@0.6.2':
+    resolution: {integrity: sha512-XOMO2Hupl0wdd172Y06h6kLpBz6Dv+J4okPLl4LPtzbr8f66WbIoy4ev98EBuZ6ZK4h5ydTN6XneT4QVpD7cdA==}
+
+  '@hono/node-server@1.19.9':
+    resolution: {integrity: sha512-vHL6w3ecZsky+8P5MD+eFfaGTyCeOHUIFYMGpQGbrBTSmNNoxv0if69rEZ5giu36weC5saFuznL411gRX7bJDw==}
+    engines: {node: '>=18.14.1'}
+    peerDependencies:
+      hono: ^4
+
+  '@hookform/resolvers@5.2.2':
+    resolution: {integrity: sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA==}
+    peerDependencies:
+      react-hook-form: ^7.55.0
+
+  '@humanfs/core@0.19.1':
+    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/node@0.16.7':
+    resolution: {integrity: sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanwhocodes/module-importer@1.0.1':
+    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
+    engines: {node: '>=12.22'}
+
+  '@humanwhocodes/retry@0.4.3':
+    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
+    engines: {node: '>=18.18'}
+
+  '@img/colour@1.0.0':
+    resolution: {integrity: sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==}
+    engines: {node: '>=18'}
+
+  '@img/sharp-darwin-arm64@0.34.5':
+    resolution: {integrity: sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-darwin-x64@0.34.5':
+    resolution: {integrity: sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-arm64@1.2.4':
+    resolution: {integrity: sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-x64@1.2.4':
+    resolution: {integrity: sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-linux-arm64@1.2.4':
+    resolution: {integrity: sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-arm@1.2.4':
+    resolution: {integrity: sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==}
+    cpu: [arm]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-ppc64@1.2.4':
+    resolution: {integrity: sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-riscv64@1.2.4':
+    resolution: {integrity: sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-s390x@1.2.4':
+    resolution: {integrity: sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-x64@1.2.4':
+    resolution: {integrity: sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
+    resolution: {integrity: sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-libvips-linuxmusl-x64@1.2.4':
+    resolution: {integrity: sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-linux-arm64@0.34.5':
+    resolution: {integrity: sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-linux-arm@0.34.5':
+    resolution: {integrity: sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@img/sharp-linux-ppc64@0.34.5':
+    resolution: {integrity: sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@img/sharp-linux-riscv64@0.34.5':
+    resolution: {integrity: sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@img/sharp-linux-s390x@0.34.5':
+    resolution: {integrity: sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [s390x]
+    os: [linux]
+
+  '@img/sharp-linux-x64@0.34.5':
+    resolution: {integrity: sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-linuxmusl-arm64@0.34.5':
+    resolution: {integrity: sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-linuxmusl-x64@0.34.5':
+    resolution: {integrity: sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-wasm32@0.34.5':
+    resolution: {integrity: sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [wasm32]
+
+  '@img/sharp-win32-arm64@0.34.5':
+    resolution: {integrity: sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@img/sharp-win32-ia32@0.34.5':
+    resolution: {integrity: sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@img/sharp-win32-x64@0.34.5':
+    resolution: {integrity: sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@inquirer/ansi@1.0.1':
+    resolution: {integrity: sha512-yqq0aJW/5XPhi5xOAL1xRCpe1eh8UFVgYFpFsjEqmIR8rKLyP+HINvFXwUaxYICflJrVlxnp7lLN6As735kVpw==}
+    engines: {node: '>=18'}
+
+  '@inquirer/confirm@5.1.19':
+    resolution: {integrity: sha512-wQNz9cfcxrtEnUyG5PndC8g3gZ7lGDBzmWiXZkX8ot3vfZ+/BLjR8EvyGX4YzQLeVqtAlY/YScZpW7CW8qMoDQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/core@10.3.0':
+    resolution: {integrity: sha512-Uv2aPPPSK5jeCplQmQ9xadnFx2Zhj9b5Dj7bU6ZeCdDNNY11nhYy4btcSdtDguHqCT2h5oNeQTcUNSGGLA7NTA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/figures@1.0.14':
+    resolution: {integrity: sha512-DbFgdt+9/OZYFM+19dbpXOSeAstPy884FPy1KjDu4anWwymZeOYhMY1mdFri172htv6mvc/uvIAAi7b7tvjJBQ==}
+    engines: {node: '>=18'}
+
+  '@inquirer/type@3.0.9':
+    resolution: {integrity: sha512-QPaNt/nmE2bLGQa9b7wwyRJoLZ7pN6rcyXvzU0YCmivmJyq1BVo94G98tStRWkoD1RgDX5C+dPlhhHzNdu/W/w==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@isaacs/balanced-match@4.0.1':
+    resolution: {integrity: sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==}
+    engines: {node: 20 || >=22}
+
+  '@isaacs/brace-expansion@5.0.0':
+    resolution: {integrity: sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==}
+    engines: {node: 20 || >=22}
+
+  '@isaacs/cliui@8.0.2':
+    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
+    engines: {node: '>=12'}
+
+  '@isaacs/fs-minipass@4.0.1':
+    resolution: {integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==}
+    engines: {node: '>=18.0.0'}
+
+  '@istanbuljs/load-nyc-config@1.1.0':
+    resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==}
+    engines: {node: '>=8'}
+
+  '@istanbuljs/schema@0.1.3':
+    resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==}
+    engines: {node: '>=8'}
+
+  '@jest/console@30.2.0':
+    resolution: {integrity: sha512-+O1ifRjkvYIkBqASKWgLxrpEhQAAE7hY77ALLUufSk5717KfOShg6IbqLmdsLMPdUiFvA2kTs0R7YZy+l0IzZQ==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/core@30.2.0':
+    resolution: {integrity: sha512-03W6IhuhjqTlpzh/ojut/pDB2LPRygyWX8ExpgHtQA8H/3K7+1vKmcINx5UzeOX1se6YEsBsOHQ1CRzf3fOwTQ==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+    peerDependencies:
+      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+    peerDependenciesMeta:
+      node-notifier:
+        optional: true
+
+  '@jest/diff-sequences@30.0.1':
+    resolution: {integrity: sha512-n5H8QLDJ47QqbCNn5SuFjCRDrOLEZ0h8vAHCK5RL9Ls7Xa8AQLa/YxAc9UjFqoEDM48muwtBGjtMY5cr0PLDCw==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/environment-jsdom-abstract@30.2.0':
+    resolution: {integrity: sha512-kazxw2L9IPuZpQ0mEt9lu9Z98SqR74xcagANmMBU16X0lS23yPc0+S6hGLUz8kVRlomZEs/5S/Zlpqwf5yu6OQ==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+    peerDependencies:
+      canvas: ^3.0.0
+      jsdom: '*'
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
+  '@jest/environment@30.2.0':
+    resolution: {integrity: sha512-/QPTL7OBJQ5ac09UDRa3EQes4gt1FTEG/8jZ/4v5IVzx+Cv7dLxlVIvfvSVRiiX2drWyXeBjkMSR8hvOWSog5g==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/expect-utils@30.2.0':
+    resolution: {integrity: sha512-1JnRfhqpD8HGpOmQp180Fo9Zt69zNtC+9lR+kT7NVL05tNXIi+QC8Csz7lfidMoVLPD3FnOtcmp0CEFnxExGEA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/expect@30.2.0':
+    resolution: {integrity: sha512-V9yxQK5erfzx99Sf+7LbhBwNWEZ9eZay8qQ9+JSC0TrMR1pMDHLMY+BnVPacWU6Jamrh252/IKo4F1Xn/zfiqA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/fake-timers@30.2.0':
+    resolution: {integrity: sha512-HI3tRLjRxAbBy0VO8dqqm7Hb2mIa8d5bg/NJkyQcOk7V118ObQML8RC5luTF/Zsg4474a+gDvhce7eTnP4GhYw==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/get-type@30.1.0':
+    resolution: {integrity: sha512-eMbZE2hUnx1WV0pmURZY9XoXPkUYjpc55mb0CrhtdWLtzMQPFvu/rZkTLZFTsdaVQa+Tr4eWAteqcUzoawq/uA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/globals@30.2.0':
+    resolution: {integrity: sha512-b63wmnKPaK+6ZZfpYhz9K61oybvbI1aMcIs80++JI1O1rR1vaxHUCNqo3ITu6NU0d4V34yZFoHMn/uoKr/Rwfw==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/pattern@30.0.1':
+    resolution: {integrity: sha512-gWp7NfQW27LaBQz3TITS8L7ZCQ0TLvtmI//4OwlQRx4rnWxcPNIYjxZpDcN4+UlGxgm3jS5QPz8IPTCkb59wZA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/reporters@30.2.0':
+    resolution: {integrity: sha512-DRyW6baWPqKMa9CzeiBjHwjd8XeAyco2Vt8XbcLFjiwCOEKOvy82GJ8QQnJE9ofsxCMPjH4MfH8fCWIHHDKpAQ==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+    peerDependencies:
+      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+    peerDependenciesMeta:
+      node-notifier:
+        optional: true
+
+  '@jest/schemas@30.0.5':
+    resolution: {integrity: sha512-DmdYgtezMkh3cpU8/1uyXakv3tJRcmcXxBOcO0tbaozPwpmh4YMsnWrQm9ZmZMfa5ocbxzbFk6O4bDPEc/iAnA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/snapshot-utils@30.2.0':
+    resolution: {integrity: sha512-0aVxM3RH6DaiLcjj/b0KrIBZhSX1373Xci4l3cW5xiUWPctZ59zQ7jj4rqcJQ/Z8JuN/4wX3FpJSa3RssVvCug==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/source-map@30.0.1':
+    resolution: {integrity: sha512-MIRWMUUR3sdbP36oyNyhbThLHyJ2eEDClPCiHVbrYAe5g3CHRArIVpBw7cdSB5fr+ofSfIb2Tnsw8iEHL0PYQg==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/test-result@30.2.0':
+    resolution: {integrity: sha512-RF+Z+0CCHkARz5HT9mcQCBulb1wgCP3FBvl9VFokMX27acKphwyQsNuWH3c+ojd1LeWBLoTYoxF0zm6S/66mjg==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/test-sequencer@30.2.0':
+    resolution: {integrity: sha512-wXKgU/lk8fKXMu/l5Hog1R61bL4q5GCdT6OJvdAFz1P+QrpoFuLU68eoKuVc4RbrTtNnTL5FByhWdLgOPSph+Q==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/transform@30.2.0':
+    resolution: {integrity: sha512-XsauDV82o5qXbhalKxD7p4TZYYdwcaEXC77PPD2HixEFF+6YGppjrAAQurTl2ECWcEomHBMMNS9AH3kcCFx8jA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jest/types@30.2.0':
+    resolution: {integrity: sha512-H9xg1/sfVvyfU7o3zMfBEjQ1gcsdeTMgqHoYdN79tuLqfTtuu7WckRA1R5whDwOzxaZAeMKTYWqP+WCAi0CHsg==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
+  '@jridgewell/trace-mapping@0.3.9':
+    resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
+
+  '@modelcontextprotocol/sdk@1.25.3':
+    resolution: {integrity: sha512-vsAMBMERybvYgKbg/l4L1rhS7VXV1c0CtyJg72vwxONVX0l4ZfKVAnZEWTQixJGTzKnELjQ59e4NbdFDALRiAQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@cfworker/json-schema': ^4.1.1
+      zod: ^3.25 || ^4.0
+    peerDependenciesMeta:
+      '@cfworker/json-schema':
+        optional: true
+
+  '@mswjs/interceptors@0.39.8':
+    resolution: {integrity: sha512-2+BzZbjRO7Ct61k8fMNHEtoKjeWI9pIlHFTqBwZ5icHpqszIgEZbjb1MW5Z0+bITTCTl3gk4PDBxs9tA/csXvA==}
+    engines: {node: '>=18'}
+
+  '@napi-rs/wasm-runtime@0.2.12':
+    resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
+
+  '@next/env@16.1.6':
+    resolution: {integrity: sha512-N1ySLuZjnAtN3kFnwhAwPvZah8RJxKasD7x1f8shFqhncnWZn4JMfg37diLNuoHsLAlrDfM3g4mawVdtAG8XLQ==}
+
+  '@next/eslint-plugin-next@16.1.5':
+    resolution: {integrity: sha512-gUWcEsOl+1W7XakmouClcJ0TNFCkblvDUho31wulbDY9na0C6mGtBTSXGRU5GXJY65GjGj0zNaCD/GaBp888Mg==}
+
+  '@next/swc-darwin-arm64@16.1.6':
+    resolution: {integrity: sha512-wTzYulosJr/6nFnqGW7FrG3jfUUlEf8UjGA0/pyypJl42ExdVgC6xJgcXQ+V8QFn6niSG2Pb8+MIG1mZr2vczw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@next/swc-darwin-x64@16.1.6':
+    resolution: {integrity: sha512-BLFPYPDO+MNJsiDWbeVzqvYd4NyuRrEYVB5k2N3JfWncuHAy2IVwMAOlVQDFjj+krkWzhY2apvmekMkfQR0CUQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@next/swc-linux-arm64-gnu@16.1.6':
+    resolution: {integrity: sha512-OJYkCd5pj/QloBvoEcJ2XiMnlJkRv9idWA/j0ugSuA34gMT6f5b7vOiCQHVRpvStoZUknhl6/UxOXL4OwtdaBw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@next/swc-linux-arm64-musl@16.1.6':
+    resolution: {integrity: sha512-S4J2v+8tT3NIO9u2q+S0G5KdvNDjXfAv06OhfOzNDaBn5rw84DGXWndOEB7d5/x852A20sW1M56vhC/tRVbccQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@next/swc-linux-x64-gnu@16.1.6':
+    resolution: {integrity: sha512-2eEBDkFlMMNQnkTyPBhQOAyn2qMxyG2eE7GPH2WIDGEpEILcBPI/jdSv4t6xupSP+ot/jkfrCShLAa7+ZUPcJQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@next/swc-linux-x64-musl@16.1.6':
+    resolution: {integrity: sha512-oicJwRlyOoZXVlxmIMaTq7f8pN9QNbdes0q2FXfRsPhfCi8n8JmOZJm5oo1pwDaFbnnD421rVU409M3evFbIqg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@next/swc-win32-arm64-msvc@16.1.6':
+    resolution: {integrity: sha512-gQmm8izDTPgs+DCWH22kcDmuUp7NyiJgEl18bcr8irXA5N2m2O+JQIr6f3ct42GOs9c0h8QF3L5SzIxcYAAXXw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@next/swc-win32-x64-msvc@16.1.6':
+    resolution: {integrity: sha512-NRfO39AIrzBnixKbjuo2YiYhB6o9d8v/ymU9m/Xk8cyVk+k7XylniXkHwjs4s70wedVffc6bQNbufk5v0xEm0A==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@noble/ciphers@1.3.0':
+    resolution: {integrity: sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==}
+    engines: {node: ^14.21.3 || >=16}
+
+  '@noble/curves@1.9.7':
+    resolution: {integrity: sha512-gbKGcRUYIjA3/zCCNaWDciTMFI0dCkvou3TL8Zmy5Nc7sJ47a0jtOeZoTaMxkuqRo9cRhjOdZJXegxYE5FN/xw==}
+    engines: {node: ^14.21.3 || >=16}
+
+  '@noble/hashes@1.8.0':
+    resolution: {integrity: sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==}
+    engines: {node: ^14.21.3 || >=16}
+
+  '@nodelib/fs.scandir@2.1.5':
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.stat@2.0.5':
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.walk@1.2.8':
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+
+  '@nolyfill/is-core-module@1.0.39':
+    resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
+    engines: {node: '>=12.4.0'}
+
+  '@open-draft/deferred-promise@2.2.0':
+    resolution: {integrity: sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==}
+
+  '@open-draft/logger@0.3.0':
+    resolution: {integrity: sha512-X2g45fzhxH238HKO4xbSr7+wBS8Fvw6ixhTDuvLd5mqh6bJJCFAPwU9mPDxbcrRtfxv4u5IHCEH77BmxvXmmxQ==}
+
+  '@open-draft/until@2.1.0':
+    resolution: {integrity: sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==}
+
+  '@parcel/watcher-android-arm64@2.5.4':
+    resolution: {integrity: sha512-hoh0vx4v+b3BNI7Cjoy2/B0ARqcwVNrzN/n7DLq9ZB4I3lrsvhrkCViJyfTj/Qi5xM9YFiH4AmHGK6pgH1ss7g==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  '@parcel/watcher-darwin-arm64@2.5.4':
+    resolution: {integrity: sha512-kphKy377pZiWpAOyTgQYPE5/XEKVMaj6VUjKT5VkNyUJlr2qZAn8gIc7CPzx+kbhvqHDT9d7EqdOqRXT6vk0zw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@parcel/watcher-darwin-x64@2.5.4':
+    resolution: {integrity: sha512-UKaQFhCtNJW1A9YyVz3Ju7ydf6QgrpNQfRZ35wNKUhTQ3dxJ/3MULXN5JN/0Z80V/KUBDGa3RZaKq1EQT2a2gg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@parcel/watcher-freebsd-x64@2.5.4':
+    resolution: {integrity: sha512-Dib0Wv3Ow/m2/ttvLdeI2DBXloO7t3Z0oCp4bAb2aqyqOjKPPGrg10pMJJAQ7tt8P4V2rwYwywkDhUia/FgS+Q==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@parcel/watcher-linux-arm-glibc@2.5.4':
+    resolution: {integrity: sha512-I5Vb769pdf7Q7Sf4KNy8Pogl/URRCKu9ImMmnVKYayhynuyGYMzuI4UOWnegQNa2sGpsPSbzDsqbHNMyeyPCgw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  '@parcel/watcher-linux-arm-musl@2.5.4':
+    resolution: {integrity: sha512-kGO8RPvVrcAotV4QcWh8kZuHr9bXi9a3bSZw7kFarYR0+fGliU7hd/zevhjw8fnvIKG3J9EO5G6sXNGCSNMYPQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  '@parcel/watcher-linux-arm64-glibc@2.5.4':
+    resolution: {integrity: sha512-KU75aooXhqGFY2W5/p8DYYHt4hrjHZod8AhcGAmhzPn/etTa+lYCDB2b1sJy3sWJ8ahFVTdy+EbqSBvMx3iFlw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@parcel/watcher-linux-arm64-musl@2.5.4':
+    resolution: {integrity: sha512-Qx8uNiIekVutnzbVdrgSanM+cbpDD3boB1f8vMtnuG5Zau4/bdDbXyKwIn0ToqFhIuob73bcxV9NwRm04/hzHQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@parcel/watcher-linux-x64-glibc@2.5.4':
+    resolution: {integrity: sha512-UYBQvhYmgAv61LNUn24qGQdjtycFBKSK3EXr72DbJqX9aaLbtCOO8+1SkKhD/GNiJ97ExgcHBrukcYhVjrnogA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  '@parcel/watcher-linux-x64-musl@2.5.4':
+    resolution: {integrity: sha512-YoRWCVgxv8akZrMhdyVi6/TyoeeMkQ0PGGOf2E4omODrvd1wxniXP+DBynKoHryStks7l+fDAMUBRzqNHrVOpg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  '@parcel/watcher-win32-arm64@2.5.4':
+    resolution: {integrity: sha512-iby+D/YNXWkiQNYcIhg8P5hSjzXEHaQrk2SLrWOUD7VeC4Ohu0WQvmV+HDJokZVJ2UjJ4AGXW3bx7Lls9Ln4TQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@parcel/watcher-win32-ia32@2.5.4':
+    resolution: {integrity: sha512-vQN+KIReG0a2ZDpVv8cgddlf67J8hk1WfZMMP7sMeZmJRSmEax5xNDNWKdgqSe2brOKTQQAs3aCCUal2qBHAyg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@parcel/watcher-win32-x64@2.5.4':
+    resolution: {integrity: sha512-3A6efb6BOKwyw7yk9ro2vus2YTt2nvcd56AuzxdMiVOxL9umDyN5PKkKfZ/gZ9row41SjVmTVQNWQhaRRGpOKw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  '@parcel/watcher@2.5.4':
+    resolution: {integrity: sha512-WYa2tUVV5HiArWPB3ydlOc4R2ivq0IDrlqhMi3l7mVsFEXNcTfxYFPIHXHXIh/ca/y/V5N4E1zecyxdIBjYnkQ==}
+    engines: {node: '>= 10.0.0'}
+
+  '@pkgjs/parseargs@0.11.0':
+    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
+    engines: {node: '>=14'}
+
+  '@pkgr/core@0.2.9':
+    resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+
+  '@radix-ui/react-compose-refs@1.1.2':
+    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-label@2.1.8':
+    resolution: {integrity: sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.4':
+    resolution: {integrity: sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-separator@1.1.8':
+    resolution: {integrity: sha512-sDvqVY4itsKwwSMEe0jtKgfTh+72Sy3gPmQpjqcQneqQ4PFmr/1I0YA+2/puilhggCe2gJcx5EBAYFkWkdpa5g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slot@1.2.4':
+    resolution: {integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@rtsao/scc@1.1.0':
+    resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
+
+  '@schummar/icu-type-parser@1.21.5':
+    resolution: {integrity: sha512-bXHSaW5jRTmke9Vd0h5P7BtWZG9Znqb8gSDxZnxaGSJnGwPLDPfS+3g0BKzeWqzgZPsIVZkM7m2tbo18cm5HBw==}
+
+  '@sec-ant/readable-stream@0.4.1':
+    resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
+
+  '@sinclair/typebox@0.34.41':
+    resolution: {integrity: sha512-6gS8pZzSXdyRHTIqoqSVknxolr1kzfy4/CeDnrzsVz8TTIWUbOBr6gnzOmTYJ3eXQNh4IYHIGi5aIL7sOZ2G/g==}
+
+  '@sindresorhus/merge-streams@4.0.0':
+    resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
+    engines: {node: '>=18'}
+
+  '@sinonjs/commons@3.0.1':
+    resolution: {integrity: sha512-K3mCHKQ9sVh8o1C9cxkwxaOmXoAMlDxC1mYyHrjqOWEcBjYr76t96zL2zlj5dUGZ3HSw240X1qgH3Mjf1yJWpQ==}
+
+  '@sinonjs/fake-timers@13.0.5':
+    resolution: {integrity: sha512-36/hTbH2uaWuGVERyC6da9YwGWnzUZXuPro/F2LfsdOsLnCojz/iSH8MxUt/FD2S5XBSVPhmArFUXcpCQ2Hkiw==}
+
+  '@standard-schema/utils@0.3.0':
+    resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
+
+  '@swc/core-darwin-arm64@1.15.8':
+    resolution: {integrity: sha512-M9cK5GwyWWRkRGwwCbREuj6r8jKdES/haCZ3Xckgkl8MUQJZA3XB7IXXK1IXRNeLjg6m7cnoMICpXv1v1hlJOg==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@swc/core-darwin-x64@1.15.8':
+    resolution: {integrity: sha512-j47DasuOvXl80sKJHSi2X25l44CMc3VDhlJwA7oewC1nV1VsSzwX+KOwE5tLnfORvVJJyeiXgJORNYg4jeIjYQ==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@swc/core-linux-arm-gnueabihf@1.15.8':
+    resolution: {integrity: sha512-siAzDENu2rUbwr9+fayWa26r5A9fol1iORG53HWxQL1J8ym4k7xt9eME0dMPXlYZDytK5r9sW8zEA10F2U3Xwg==}
+    engines: {node: '>=10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@swc/core-linux-arm64-gnu@1.15.8':
+    resolution: {integrity: sha512-o+1y5u6k2FfPYbTRUPvurwzNt5qd0NTumCTFscCNuBksycloXY16J8L+SMW5QRX59n4Hp9EmFa3vpvNHRVv1+Q==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@swc/core-linux-arm64-musl@1.15.8':
+    resolution: {integrity: sha512-koiCqL09EwOP1S2RShCI7NbsQuG6r2brTqUYE7pV7kZm9O17wZ0LSz22m6gVibpwEnw8jI3IE1yYsQTVpluALw==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@swc/core-linux-x64-gnu@1.15.8':
+    resolution: {integrity: sha512-4p6lOMU3bC+Vd5ARtKJ/FxpIC5G8v3XLoPEZ5s7mLR8h7411HWC/LmTXDHcrSXRC55zvAVia1eldy6zDLz8iFQ==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@swc/core-linux-x64-musl@1.15.8':
+    resolution: {integrity: sha512-z3XBnbrZAL+6xDGAhJoN4lOueIxC/8rGrJ9tg+fEaeqLEuAtHSW2QHDHxDwkxZMjuF/pZ6MUTjHjbp8wLbuRLA==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@swc/core-win32-arm64-msvc@1.15.8':
+    resolution: {integrity: sha512-djQPJ9Rh9vP8GTS/Df3hcc6XP6xnG5c8qsngWId/BLA9oX6C7UzCPAn74BG/wGb9a6j4w3RINuoaieJB3t+7iQ==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@swc/core-win32-ia32-msvc@1.15.8':
+    resolution: {integrity: sha512-/wfAgxORg2VBaUoFdytcVBVCgf1isWZIEXB9MZEUty4wwK93M/PxAkjifOho9RN3WrM3inPLabICRCEgdHpKKQ==}
+    engines: {node: '>=10'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@swc/core-win32-x64-msvc@1.15.8':
+    resolution: {integrity: sha512-GpMePrh9Sl4d61o4KAHOOv5is5+zt6BEXCOCgs/H0FLGeii7j9bWDE8ExvKFy2GRRZVNR1ugsnzaGWHKM6kuzA==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@swc/core@1.15.8':
+    resolution: {integrity: sha512-T8keoJjXaSUoVBCIjgL6wAnhADIb09GOELzKg10CjNg+vLX48P93SME6jTfte9MZIm5m+Il57H3rTSk/0kzDUw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@swc/helpers': '>=0.5.17'
+    peerDependenciesMeta:
+      '@swc/helpers':
+        optional: true
+
+  '@swc/counter@0.1.3':
+    resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
+
+  '@swc/helpers@0.5.15':
+    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
+
+  '@swc/types@0.1.25':
+    resolution: {integrity: sha512-iAoY/qRhNH8a/hBvm3zKj9qQ4oc2+3w1unPJa2XvTK3XjeLXtzcCingVPw/9e5mn1+0yPqxcBGp9Jf0pkfMb1g==}
+
+  '@tailwindcss/node@4.1.14':
+    resolution: {integrity: sha512-hpz+8vFk3Ic2xssIA3e01R6jkmsAhvkQdXlEbRTk6S10xDAtiQiM3FyvZVGsucefq764euO/b8WUW9ysLdThHw==}
+
+  '@tailwindcss/oxide-android-arm64@4.1.14':
+    resolution: {integrity: sha512-a94ifZrGwMvbdeAxWoSuGcIl6/DOP5cdxagid7xJv6bwFp3oebp7y2ImYsnZBMTwjn5Ev5xESvS3FFYUGgPODQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.14':
+    resolution: {integrity: sha512-HkFP/CqfSh09xCnrPJA7jud7hij5ahKyWomrC3oiO2U9i0UjP17o9pJbxUN0IJ471GTQQmzwhp0DEcpbp4MZTA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.1.14':
+    resolution: {integrity: sha512-eVNaWmCgdLf5iv6Qd3s7JI5SEFBFRtfm6W0mphJYXgvnDEAZ5sZzqmI06bK6xo0IErDHdTA5/t7d4eTfWbWOFw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.14':
+    resolution: {integrity: sha512-QWLoRXNikEuqtNb0dhQN6wsSVVjX6dmUFzuuiL09ZeXju25dsei2uIPl71y2Ic6QbNBsB4scwBoFnlBfabHkEw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.14':
+    resolution: {integrity: sha512-VB4gjQni9+F0VCASU+L8zSIyjrLLsy03sjcR3bM0V2g4SNamo0FakZFKyUQ96ZVwGK4CaJsc9zd/obQy74o0Fw==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.14':
+    resolution: {integrity: sha512-qaEy0dIZ6d9vyLnmeg24yzA8XuEAD9WjpM5nIM1sUgQ/Zv7cVkharPDQcmm/t/TvXoKo/0knI3me3AGfdx6w1w==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.14':
+    resolution: {integrity: sha512-ISZjT44s59O8xKsPEIesiIydMG/sCXoMBCqsphDm/WcbnuWLxxb+GcvSIIA5NjUw6F8Tex7s5/LM2yDy8RqYBQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.14':
+    resolution: {integrity: sha512-02c6JhLPJj10L2caH4U0zF8Hji4dOeahmuMl23stk0MU1wfd1OraE7rOloidSF8W5JTHkFdVo/O7uRUJJnUAJg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.14':
+    resolution: {integrity: sha512-TNGeLiN1XS66kQhxHG/7wMeQDOoL0S33x9BgmydbrWAb9Qw0KYdd8o1ifx4HOGDWhVmJ+Ul+JQ7lyknQFilO3Q==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.14':
+    resolution: {integrity: sha512-uZYAsaW/jS/IYkd6EWPJKW/NlPNSkWkBlaeVBi/WsFQNP05/bzkebUL8FH1pdsqx4f2fH/bWFcUABOM9nfiJkQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.14':
+    resolution: {integrity: sha512-Az0RnnkcvRqsuoLH2Z4n3JfAef0wElgzHD5Aky/e+0tBUxUhIeIqFBTMNQvmMRSP15fWwmvjBxZ3Q8RhsDnxAA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.14':
+    resolution: {integrity: sha512-ttblVGHgf68kEE4om1n/n44I0yGPkCPbLsqzjvybhpwa6mKKtgFfAzy6btc3HRmuW7nHe0OOrSeNP9sQmmH9XA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.1.14':
+    resolution: {integrity: sha512-23yx+VUbBwCg2x5XWdB8+1lkPajzLmALEfMb51zZUBYaYVPDQvBSD/WYDqiVyBIo2BZFa3yw1Rpy3G2Jp+K0dw==}
+    engines: {node: '>= 10'}
+
+  '@tailwindcss/postcss@4.1.14':
+    resolution: {integrity: sha512-BdMjIxy7HUNThK87C7BC8I1rE8BVUsfNQSI5siQ4JK3iIa3w0XyVvVL9SXLWO//CtYTcp1v7zci0fYwJOjB+Zg==}
+
+  '@tanstack/query-core@5.90.18':
+    resolution: {integrity: sha512-rbGx6bHgPNVzutP7BEr+53UPKohpckqlMAad+To9UxTbeaQ+kC/1SDRj+QzkwbQ7qhLT/1IKp34yS6thda6fzA==}
+
+  '@tanstack/query-devtools@5.92.0':
+    resolution: {integrity: sha512-N8D27KH1vEpVacvZgJL27xC6yPFUy0Zkezn5gnB3L3gRCxlDeSuiya7fKge8Y91uMTnC8aSxBQhcK6ocY7alpQ==}
+
+  '@tanstack/react-query-devtools@5.91.2':
+    resolution: {integrity: sha512-ZJ1503ay5fFeEYFUdo7LMNFzZryi6B0Cacrgr2h1JRkvikK1khgIq6Nq2EcblqEdIlgB/r7XDW8f8DQ89RuUgg==}
+    peerDependencies:
+      '@tanstack/react-query': ^5.90.14
+      react: ^18 || ^19
+
+  '@tanstack/react-query@5.90.18':
+    resolution: {integrity: sha512-KqNZX0C5IFz4639zR1ilnQ288tQdJrMNLtzmlzyJ14xauBkhtLEy3mPU/V4KiHsr41eL1ILZbDP36TB12lYfCQ==}
+    peerDependencies:
+      react: ^18 || ^19
+
+  '@testing-library/dom@10.4.1':
+    resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
+    engines: {node: '>=18'}
+
+  '@testing-library/jest-dom@6.9.1':
+    resolution: {integrity: sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==}
+    engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
+
+  '@testing-library/react@16.3.0':
+    resolution: {integrity: sha512-kFSyxiEDwv1WLl2fgsq6pPBbw5aWKrsY2/noi1Id0TK0UParSF62oFQFGHXIyaG4pp2tEub/Zlel+fjjZILDsw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@testing-library/dom': ^10.0.0
+      '@types/react': ^18.0.0 || ^19.0.0
+      '@types/react-dom': ^18.0.0 || ^19.0.0
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@ts-morph/common@0.27.0':
+    resolution: {integrity: sha512-Wf29UqxWDpc+i61k3oIOzcUfQt79PIT9y/MWfAGlrkjg6lBC1hwDECLXPVJAhWjiGbfBCxZd65F/LIZF3+jeJQ==}
+
+  '@tsconfig/node10@1.0.11':
+    resolution: {integrity: sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==}
+
+  '@tsconfig/node12@1.0.11':
+    resolution: {integrity: sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==}
+
+  '@tsconfig/node14@1.0.3':
+    resolution: {integrity: sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==}
+
+  '@tsconfig/node16@1.0.4':
+    resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==}
+
+  '@tybys/wasm-util@0.10.1':
+    resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
+
+  '@types/aria-query@5.0.4':
+    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
+
+  '@types/babel__core@7.20.5':
+    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
+
+  '@types/babel__generator@7.27.0':
+    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
+
+  '@types/babel__template@7.4.4':
+    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
+
+  '@types/babel__traverse@7.28.0':
+    resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
+
+  '@types/estree@1.0.8':
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
+
+  '@types/istanbul-lib-coverage@2.0.6':
+    resolution: {integrity: sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==}
+
+  '@types/istanbul-lib-report@3.0.3':
+    resolution: {integrity: sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==}
+
+  '@types/istanbul-reports@3.0.4':
+    resolution: {integrity: sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==}
+
+  '@types/jest@30.0.0':
+    resolution: {integrity: sha512-XTYugzhuwqWjws0CVz8QpM36+T+Dz5mTEBKhNs/esGLnCIlGdRy+Dq78NRjd7ls7r8BC8ZRMOrKlkO1hU0JOwA==}
+
+  '@types/jsdom@21.1.7':
+    resolution: {integrity: sha512-yOriVnggzrnQ3a9OKOCxaVuSug3w3/SbOj5i7VwXWZEyUNl3bLF9V3MfxGbZKuwqJOQyRfqXyROBB1CoZLFWzA==}
+
+  '@types/json-schema@7.0.15':
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+
+  '@types/json5@0.0.29':
+    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
+
+  '@types/node@20.19.22':
+    resolution: {integrity: sha512-hRnu+5qggKDSyWHlnmThnUqg62l29Aj/6vcYgUaSFL9oc7DVjeWEQN3PRgdSc6F8d9QRMWkf36CLMch1Do/+RQ==}
+
+  '@types/react-dom@19.2.2':
+    resolution: {integrity: sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==}
+    peerDependencies:
+      '@types/react': ^19.2.0
+
+  '@types/react@19.2.2':
+    resolution: {integrity: sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==}
+
+  '@types/stack-utils@2.0.3':
+    resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==}
+
+  '@types/statuses@2.0.6':
+    resolution: {integrity: sha512-xMAgYwceFhRA2zY+XbEA7mxYbA093wdiW8Vu6gZPGWy9cmOyU9XesH1tNcEWsKFd5Vzrqx5T3D38PWx1FIIXkA==}
+
+  '@types/tough-cookie@4.0.5':
+    resolution: {integrity: sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==}
+
+  '@types/validate-npm-package-name@4.0.2':
+    resolution: {integrity: sha512-lrpDziQipxCEeK5kWxvljWYhUvOiB2A9izZd9B2AFarYAkqZshb4lPbRs7zKEic6eGtH8V/2qJW+dPp9OtF6bw==}
+
+  '@types/yargs-parser@21.0.3':
+    resolution: {integrity: sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==}
+
+  '@types/yargs@17.0.33':
+    resolution: {integrity: sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==}
+
+  '@typescript-eslint/eslint-plugin@8.54.0':
+    resolution: {integrity: sha512-hAAP5io/7csFStuOmR782YmTthKBJ9ND3WVL60hcOjvtGFb+HJxH4O5huAcmcZ9v9G8P+JETiZ/G1B8MALnWZQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^8.54.0
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/parser@8.54.0':
+    resolution: {integrity: sha512-BtE0k6cjwjLZoZixN0t5AKP0kSzlGu7FctRXYuPAm//aaiZhmfq1JwdYpYr1brzEspYyFeF+8XF5j2VK6oalrA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/project-service@8.54.0':
+    resolution: {integrity: sha512-YPf+rvJ1s7MyiWM4uTRhE4DvBXrEV+d8oC3P9Y2eT7S+HBS0clybdMIPnhiATi9vZOYDc7OQ1L/i6ga6NFYK/g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/scope-manager@8.54.0':
+    resolution: {integrity: sha512-27rYVQku26j/PbHYcVfRPonmOlVI6gihHtXFbTdB5sb6qA0wdAQAbyXFVarQ5t4HRojIz64IV90YtsjQSSGlQg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/tsconfig-utils@8.54.0':
+    resolution: {integrity: sha512-dRgOyT2hPk/JwxNMZDsIXDgyl9axdJI3ogZ2XWhBPsnZUv+hPesa5iuhdYt2gzwA9t8RE5ytOJ6xB0moV0Ujvw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/type-utils@8.54.0':
+    resolution: {integrity: sha512-hiLguxJWHjjwL6xMBwD903ciAwd7DmK30Y9Axs/etOkftC3ZNN9K44IuRD/EB08amu+Zw6W37x9RecLkOo3pMA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/types@8.54.0':
+    resolution: {integrity: sha512-PDUI9R1BVjqu7AUDsRBbKMtwmjWcn4J3le+5LpcFgWULN3LvHC5rkc9gCVxbrsrGmO1jfPybN5s6h4Jy+OnkAA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/typescript-estree@8.54.0':
+    resolution: {integrity: sha512-BUwcskRaPvTk6fzVWgDPdUndLjB87KYDrN5EYGetnktoeAvPtO4ONHlAZDnj5VFnUANg0Sjm7j4usBlnoVMHwA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/utils@8.54.0':
+    resolution: {integrity: sha512-9Cnda8GS57AQakvRyG0PTejJNlA2xhvyNtEVIMlDWOOeEyBkYWhGPnfrIAnqxLMTSTo6q8g12XVjjev5l1NvMA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/visitor-keys@8.54.0':
+    resolution: {integrity: sha512-VFlhGSl4opC0bprJiItPQ1RfUhGDIBokcPwaFH4yiBCaNPeld/9VeXbiPO1cLyorQi1G1vL+ecBk1x8o1axORA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@ungap/structured-clone@1.3.0':
+    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
+
+  '@unrs/resolver-binding-android-arm-eabi@1.11.1':
+    resolution: {integrity: sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==}
+    cpu: [arm]
+    os: [android]
+
+  '@unrs/resolver-binding-android-arm64@1.11.1':
+    resolution: {integrity: sha512-lCxkVtb4wp1v+EoN+HjIG9cIIzPkX5OtM03pQYkG+U5O/wL53LC4QbIeazgiKqluGeVEeBlZahHalCaBvU1a2g==}
+    cpu: [arm64]
+    os: [android]
+
+  '@unrs/resolver-binding-darwin-arm64@1.11.1':
+    resolution: {integrity: sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@unrs/resolver-binding-darwin-x64@1.11.1':
+    resolution: {integrity: sha512-cFzP7rWKd3lZaCsDze07QX1SC24lO8mPty9vdP+YVa3MGdVgPmFc59317b2ioXtgCMKGiCLxJ4HQs62oz6GfRQ==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@unrs/resolver-binding-freebsd-x64@1.11.1':
+    resolution: {integrity: sha512-fqtGgak3zX4DCB6PFpsH5+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1':
+    resolution: {integrity: sha512-u92mvlcYtp9MRKmP+ZvMmtPN34+/3lMHlyMj7wXJDeXxuM0Vgzz0+PPJNsro1m3IZPYChIkn944wW8TYgGKFHw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-arm-musleabihf@1.11.1':
+    resolution: {integrity: sha512-cINaoY2z7LVCrfHkIcmvj7osTOtm6VVT16b5oQdS4beibX2SYBwgYLmqhBjA1t51CarSaBuX5YNsWLjsqfW5Cw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-arm64-gnu@1.11.1':
+    resolution: {integrity: sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
+    resolution: {integrity: sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
+    resolution: {integrity: sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
+    resolution: {integrity: sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
+    resolution: {integrity: sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
+    resolution: {integrity: sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
+    resolution: {integrity: sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==}
+    cpu: [x64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-x64-musl@1.11.1':
+    resolution: {integrity: sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==}
+    cpu: [x64]
+    os: [linux]
+
+  '@unrs/resolver-binding-wasm32-wasi@1.11.1':
+    resolution: {integrity: sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@unrs/resolver-binding-win32-arm64-msvc@1.11.1':
+    resolution: {integrity: sha512-nRcz5Il4ln0kMhfL8S3hLkxI85BXs3o8EYoattsJNdsX4YUU89iOkVn7g0VHSRxFuVMdM4Q1jEpIId1Ihim/Uw==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@unrs/resolver-binding-win32-ia32-msvc@1.11.1':
+    resolution: {integrity: sha512-DCEI6t5i1NmAZp6pFonpD5m7i6aFrpofcp4LA2i8IIq60Jyo28hamKBxNrZcyOwVOZkgsRp9O2sXWBWP8MnvIQ==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
+    resolution: {integrity: sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==}
+    cpu: [x64]
+    os: [win32]
+
+  accepts@2.0.0:
+    resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
+    engines: {node: '>= 0.6'}
+
+  acorn-jsx@5.3.2:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  acorn-walk@8.3.4:
+    resolution: {integrity: sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==}
+    engines: {node: '>=0.4.0'}
+
+  acorn@8.15.0:
+    resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  agent-base@7.1.4:
+    resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
+    engines: {node: '>= 14'}
+
+  ajv-formats@3.0.1:
+    resolution: {integrity: sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==}
+    peerDependencies:
+      ajv: ^8.0.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+
+  ajv@6.12.6:
+    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+
+  ajv@8.17.1:
+    resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
+
+  ansi-escapes@4.3.2:
+    resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
+    engines: {node: '>=8'}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-regex@6.2.2:
+    resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==}
+    engines: {node: '>=12'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
+  ansi-styles@5.2.0:
+    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
+    engines: {node: '>=10'}
+
+  ansi-styles@6.2.3:
+    resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
+    engines: {node: '>=12'}
+
+  ansis@4.2.0:
+    resolution: {integrity: sha512-HqZ5rWlFjGiV0tDm3UxxgNRqsOTniqoKZu0pIAfh7TZQMGuZK+hH0drySty0si0QXj1ieop4+SkSfPZBPPkHig==}
+    engines: {node: '>=14'}
+
+  anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+
+  arg@4.1.3:
+    resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
+
+  argparse@1.0.10:
+    resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
+
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+
+  aria-query@5.3.0:
+    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
+
+  aria-query@5.3.2:
+    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
+    engines: {node: '>= 0.4'}
+
+  array-buffer-byte-length@1.0.2:
+    resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
+    engines: {node: '>= 0.4'}
+
+  array-includes@3.1.9:
+    resolution: {integrity: sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.findlast@1.2.5:
+    resolution: {integrity: sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.findlastindex@1.2.6:
+    resolution: {integrity: sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.flat@1.3.3:
+    resolution: {integrity: sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.flatmap@1.3.3:
+    resolution: {integrity: sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.tosorted@1.1.4:
+    resolution: {integrity: sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==}
+    engines: {node: '>= 0.4'}
+
+  arraybuffer.prototype.slice@1.0.4:
+    resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==}
+    engines: {node: '>= 0.4'}
+
+  ast-types-flow@0.0.8:
+    resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
+
+  ast-types@0.16.1:
+    resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
+    engines: {node: '>=4'}
+
+  async-function@1.0.0:
+    resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
+    engines: {node: '>= 0.4'}
+
+  available-typed-arrays@1.0.7:
+    resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
+    engines: {node: '>= 0.4'}
+
+  axe-core@4.11.0:
+    resolution: {integrity: sha512-ilYanEU8vxxBexpJd8cWM4ElSQq4QctCLKih0TSfjIfCQTeyH/6zVrmIJfLPrKTKJRbiG+cfnZbQIjAlJmF1jQ==}
+    engines: {node: '>=4'}
+
+  axobject-query@4.1.0:
+    resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
+    engines: {node: '>= 0.4'}
+
+  babel-jest@30.2.0:
+    resolution: {integrity: sha512-0YiBEOxWqKkSQWL9nNGGEgndoeL0ZpWrbLMNL5u/Kaxrli3Eaxlt3ZtIDktEvXt4L/R9r3ODr2zKwGM/2BjxVw==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+    peerDependencies:
+      '@babel/core': ^7.11.0 || ^8.0.0-0
+
+  babel-plugin-istanbul@7.0.1:
+    resolution: {integrity: sha512-D8Z6Qm8jCvVXtIRkBnqNHX0zJ37rQcFJ9u8WOS6tkYOsRdHBzypCstaxWiu5ZIlqQtviRYbgnRLSoCEvjqcqbA==}
+    engines: {node: '>=12'}
+
+  babel-plugin-jest-hoist@30.2.0:
+    resolution: {integrity: sha512-ftzhzSGMUnOzcCXd6WHdBGMyuwy15Wnn0iyyWGKgBDLxf9/s5ABuraCSpBX2uG0jUg4rqJnxsLc5+oYBqoxVaA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  babel-preset-current-node-syntax@1.2.0:
+    resolution: {integrity: sha512-E/VlAEzRrsLEb2+dv8yp3bo4scof3l9nR4lrld+Iy5NyVqgVYUJnDAmunkhPMisRI32Qc4iRiz425d8vM++2fg==}
+    peerDependencies:
+      '@babel/core': ^7.0.0 || ^8.0.0-0
+
+  babel-preset-jest@30.2.0:
+    resolution: {integrity: sha512-US4Z3NOieAQumwFnYdUWKvUKh8+YSnS/gB3t6YBiz0bskpu7Pine8pPCheNxlPEW4wnUkma2a94YuW2q3guvCQ==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+    peerDependencies:
+      '@babel/core': ^7.11.0 || ^8.0.0-beta.1
+
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  baseline-browser-mapping@2.9.19:
+    resolution: {integrity: sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==}
+    hasBin: true
+
+  body-parser@2.2.2:
+    resolution: {integrity: sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==}
+    engines: {node: '>=18'}
+
+  brace-expansion@1.1.12:
+    resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
+
+  brace-expansion@2.0.2:
+    resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==}
+
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
+  browserslist@4.26.3:
+    resolution: {integrity: sha512-lAUU+02RFBuCKQPj/P6NgjlbCnLBMp4UtgTx7vNHd3XSIJF87s9a5rA3aH2yw3GS9DqZAUbOtZdCCiZeVRqt0w==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  bser@2.1.1:
+    resolution: {integrity: sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==}
+
+  buffer-from@1.1.2:
+    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+
+  bundle-name@4.1.0:
+    resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
+    engines: {node: '>=18'}
+
+  bytes@3.1.2:
+    resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
+    engines: {node: '>= 0.8'}
+
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
+  call-bind@1.0.8:
+    resolution: {integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==}
+    engines: {node: '>= 0.4'}
+
+  call-bound@1.0.4:
+    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
+    engines: {node: '>= 0.4'}
+
+  callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+
+  camelcase@5.3.1:
+    resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
+    engines: {node: '>=6'}
+
+  camelcase@6.3.0:
+    resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
+    engines: {node: '>=10'}
+
+  caniuse-lite@1.0.30001766:
+    resolution: {integrity: sha512-4C0lfJ0/YPjJQHagaE9x2Elb69CIqEPZeG0anQt9SIvIoOH4a4uaRl73IavyO+0qZh6MDLH//DrXThEYKHkmYA==}
+
+  chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+
+  chalk@5.6.2:
+    resolution: {integrity: sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+
+  char-regex@1.0.2:
+    resolution: {integrity: sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==}
+    engines: {node: '>=10'}
+
+  chownr@3.0.0:
+    resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
+    engines: {node: '>=18'}
+
+  ci-info@4.3.1:
+    resolution: {integrity: sha512-Wdy2Igu8OcBpI2pZePZ5oWjPC38tmDVx5WKUXKwlLYkA0ozo85sLsLvkBbBn/sZaSCMFOGZJ14fvW9t5/d7kdA==}
+    engines: {node: '>=8'}
+
+  cjs-module-lexer@2.1.0:
+    resolution: {integrity: sha512-UX0OwmYRYQQetfrLEZeewIFFI+wSTofC+pMBLNuH3RUuu/xzG1oz84UCEDOSoQlN3fZ4+AzmV50ZYvGqkMh9yA==}
+
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
+  cli-cursor@5.0.0:
+    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
+    engines: {node: '>=18'}
+
+  cli-spinners@2.9.2:
+    resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==}
+    engines: {node: '>=6'}
+
+  cli-width@4.1.0:
+    resolution: {integrity: sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==}
+    engines: {node: '>= 12'}
+
+  client-only@0.0.1:
+    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
+
+  cliui@8.0.1:
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
+    engines: {node: '>=12'}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
+  co@4.6.0:
+    resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
+    engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
+
+  code-block-writer@13.0.3:
+    resolution: {integrity: sha512-Oofo0pq3IKnsFtuHqSF7TqBfr71aeyZDVJ0HpmqB7FBM2qEigL0iPONSCZSO9pE9dZTAxANe5XHG9Uy0YMv8cg==}
+
+  collect-v8-coverage@1.0.3:
+    resolution: {integrity: sha512-1L5aqIkwPfiodaMgQunkF1zRhNqifHBmtbbbxcr6yVxxBnliw4TDOW6NxpO8DJLgJ16OT+Y4ztZqP6p/FtXnAw==}
+
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  commander@11.1.0:
+    resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
+    engines: {node: '>=16'}
+
+  commander@14.0.1:
+    resolution: {integrity: sha512-2JkV3gUZUVrbNA+1sjBOYLsMZ5cEEl8GTFP2a4AVz5hvasAMCQ1D2l2le/cX+pV4N6ZU17zjUahLpIXRrnWL8A==}
+    engines: {node: '>=20'}
+
+  concat-map@0.0.1:
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+
+  content-disposition@1.0.0:
+    resolution: {integrity: sha512-Au9nRL8VNUut/XSzbQA38+M78dzP4D+eqg3gfJHMIHHYa3bg067xj1KxMUWj+VULbiZMowKngFFbKczUrNJ1mg==}
+    engines: {node: '>= 0.6'}
+
+  content-type@1.0.5:
+    resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
+    engines: {node: '>= 0.6'}
+
+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+
+  cookie-signature@1.2.2:
+    resolution: {integrity: sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==}
+    engines: {node: '>=6.6.0'}
+
+  cookie@0.7.2:
+    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
+    engines: {node: '>= 0.6'}
+
+  cookie@1.0.2:
+    resolution: {integrity: sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==}
+    engines: {node: '>=18'}
+
+  cors@2.8.5:
+    resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
+    engines: {node: '>= 0.10'}
+
+  cosmiconfig@9.0.0:
+    resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      typescript: '>=4.9.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  create-require@1.1.1:
+    resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
+
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+
+  css.escape@1.5.1:
+    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
+
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  cssstyle@4.6.0:
+    resolution: {integrity: sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==}
+    engines: {node: '>=18'}
+
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
+  damerau-levenshtein@1.0.8:
+    resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
+
+  data-uri-to-buffer@4.0.1:
+    resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
+    engines: {node: '>= 12'}
+
+  data-urls@5.0.0:
+    resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
+    engines: {node: '>=18'}
+
+  data-view-buffer@1.0.2:
+    resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
+    engines: {node: '>= 0.4'}
+
+  data-view-byte-length@1.0.2:
+    resolution: {integrity: sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==}
+    engines: {node: '>= 0.4'}
+
+  data-view-byte-offset@1.0.1:
+    resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
+    engines: {node: '>= 0.4'}
+
+  debug@3.2.7:
+    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  decimal.js@10.6.0:
+    resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
+
+  dedent@1.7.0:
+    resolution: {integrity: sha512-HGFtf8yhuhGhqO07SV79tRp+br4MnbdjeVxotpn1QBl30pcLLCQjX5b2295ll0fv8RKDKsmWYrl05usHM9CewQ==}
+    peerDependencies:
+      babel-plugin-macros: ^3.1.0
+    peerDependenciesMeta:
+      babel-plugin-macros:
+        optional: true
+
+  deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+
+  deepmerge@4.3.1:
+    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
+    engines: {node: '>=0.10.0'}
+
+  default-browser-id@5.0.1:
+    resolution: {integrity: sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==}
+    engines: {node: '>=18'}
+
+  default-browser@5.4.0:
+    resolution: {integrity: sha512-XDuvSq38Hr1MdN47EDvYtx3U0MTqpCEn+F6ft8z2vYDzMrvQhVp0ui9oQdqW3MvK3vqUETglt1tVGgjLuJ5izg==}
+    engines: {node: '>=18'}
+
+  define-data-property@1.1.4:
+    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
+    engines: {node: '>= 0.4'}
+
+  define-lazy-prop@3.0.0:
+    resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
+    engines: {node: '>=12'}
+
+  define-properties@1.2.1:
+    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
+    engines: {node: '>= 0.4'}
+
+  depd@2.0.0:
+    resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
+    engines: {node: '>= 0.8'}
+
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
+  detect-newline@3.1.0:
+    resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==}
+    engines: {node: '>=8'}
+
+  diff@4.0.4:
+    resolution: {integrity: sha512-X07nttJQkwkfKfvTPG/KSnE2OMdcUCao6+eXF3wmnIQRn2aPAHH3VxDbDOdegkd6JbPsXqShpvEOHfAT+nCNwQ==}
+    engines: {node: '>=0.3.1'}
+
+  diff@8.0.3:
+    resolution: {integrity: sha512-qejHi7bcSD4hQAZE0tNAawRK1ZtafHDmMTMkrrIGgSLl7hTnQHmKCeB45xAcbfTqK2zowkM3j3bHt/4b/ARbYQ==}
+    engines: {node: '>=0.3.1'}
+
+  doctrine@2.1.0:
+    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
+    engines: {node: '>=0.10.0'}
+
+  dom-accessibility-api@0.5.16:
+    resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
+
+  dom-accessibility-api@0.6.3:
+    resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
+
+  dotenv@17.2.3:
+    resolution: {integrity: sha512-JVUnt+DUIzu87TABbhPmNfVdBDt18BLOWjMUFJMSi/Qqg7NTYtabbvSNJGOJ7afbRuv9D/lngizHtP7QyLQ+9w==}
+    engines: {node: '>=12'}
+
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
+  eastasianwidth@0.2.0:
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+
+  eciesjs@0.4.16:
+    resolution: {integrity: sha512-dS5cbA9rA2VR4Ybuvhg6jvdmp46ubLn3E+px8cG/35aEDNclrqoCjg6mt0HYZ/M+OoESS3jSkCrqk1kWAEhWAw==}
+    engines: {bun: '>=1', deno: '>=2', node: '>=16'}
+
+  ee-first@1.1.1:
+    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
+
+  electron-to-chromium@1.5.237:
+    resolution: {integrity: sha512-icUt1NvfhGLar5lSWH3tHNzablaA5js3HVHacQimfP8ViEBOQv+L7DKEuHdbTZ0SKCO1ogTJTIL1Gwk9S6Qvcg==}
+
+  emittery@0.13.1:
+    resolution: {integrity: sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==}
+    engines: {node: '>=12'}
+
+  emoji-regex@10.6.0:
+    resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
+
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+
+  encodeurl@2.0.0:
+    resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
+    engines: {node: '>= 0.8'}
+
+  enhanced-resolve@5.18.3:
+    resolution: {integrity: sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==}
+    engines: {node: '>=10.13.0'}
+
+  entities@6.0.1:
+    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
+    engines: {node: '>=0.12'}
+
+  env-paths@2.2.1:
+    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
+    engines: {node: '>=6'}
+
+  error-ex@1.3.4:
+    resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
+
+  es-abstract@1.24.0:
+    resolution: {integrity: sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==}
+    engines: {node: '>= 0.4'}
+
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
+  es-iterator-helpers@1.2.1:
+    resolution: {integrity: sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==}
+    engines: {node: '>= 0.4'}
+
+  es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
+    engines: {node: '>= 0.4'}
+
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
+
+  es-shim-unscopables@1.1.0:
+    resolution: {integrity: sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==}
+    engines: {node: '>= 0.4'}
+
+  es-to-primitive@1.3.0:
+    resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
+    engines: {node: '>= 0.4'}
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
+  escape-html@1.0.3:
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
+
+  escape-string-regexp@2.0.0:
+    resolution: {integrity: sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==}
+    engines: {node: '>=8'}
+
+  escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+
+  eslint-config-next@16.1.5:
+    resolution: {integrity: sha512-XwXyv65DC1HXI3gMxm13jvgx0IxKu6XhZhIWTfCDt4c45njHYUM2pk1Y8QXMAWMMnqPy94I2OLMmvIrNGcwLwQ==}
+    peerDependencies:
+      eslint: '>=9.0.0'
+      typescript: '>=3.3.1'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  eslint-import-resolver-node@0.3.9:
+    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
+
+  eslint-import-resolver-typescript@3.10.1:
+    resolution: {integrity: sha512-A1rHYb06zjMGAxdLSkN2fXPBwuSaQ0iO5M/hdyS0Ajj1VBaRp0sPD3dn1FhME3c/JluGFbwSxyCfqdSbtQLAHQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '*'
+      eslint-plugin-import: '*'
+      eslint-plugin-import-x: '*'
+    peerDependenciesMeta:
+      eslint-plugin-import:
+        optional: true
+      eslint-plugin-import-x:
+        optional: true
+
+  eslint-module-utils@2.12.1:
+    resolution: {integrity: sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+      eslint:
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
+
+  eslint-plugin-import@2.32.0:
+    resolution: {integrity: sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+
+  eslint-plugin-jsx-a11y@6.10.2:
+    resolution: {integrity: sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9
+
+  eslint-plugin-react-hooks@7.0.1:
+    resolution: {integrity: sha512-O0d0m04evaNzEPoSW+59Mezf8Qt0InfgGIBJnpC0h3NH/WjUAR7BIKUfysC6todmtiZ/A0oUVS8Gce0WhBrHsA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
+
+  eslint-plugin-react@7.37.5:
+    resolution: {integrity: sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
+
+  eslint-scope@8.4.0:
+    resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint-visitor-keys@3.4.3:
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  eslint-visitor-keys@4.2.1:
+    resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint@9.38.0:
+    resolution: {integrity: sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    hasBin: true
+    peerDependencies:
+      jiti: '*'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+
+  espree@10.4.0:
+    resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  esprima@4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  esquery@1.6.0:
+    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
+    engines: {node: '>=0.10'}
+
+  esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
+
+  estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+
+  esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+
+  etag@1.8.1:
+    resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
+    engines: {node: '>= 0.6'}
+
+  eventsource-parser@3.0.6:
+    resolution: {integrity: sha512-Vo1ab+QXPzZ4tCa8SwIHJFaSzy4R6SHf7BY79rFBDf0idraZWAkYrDjDj8uWaSm3S2TK+hJ7/t1CEmZ7jXw+pg==}
+    engines: {node: '>=18.0.0'}
+
+  eventsource@3.0.7:
+    resolution: {integrity: sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==}
+    engines: {node: '>=18.0.0'}
+
+  execa@5.1.1:
+    resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
+    engines: {node: '>=10'}
+
+  execa@9.6.0:
+    resolution: {integrity: sha512-jpWzZ1ZhwUmeWRhS7Qv3mhpOhLfwI+uAX4e5fOcXqwMR7EcJ0pj2kV1CVzHVMX/LphnKWD3LObjZCoJ71lKpHw==}
+    engines: {node: ^18.19.0 || >=20.5.0}
+
+  exit-x@0.2.2:
+    resolution: {integrity: sha512-+I6B/IkJc1o/2tiURyz/ivu/O0nKNEArIUB5O7zBrlDVJr22SCLH3xTeEry428LvFhRzIA1g8izguxJ/gbNcVQ==}
+    engines: {node: '>= 0.8.0'}
+
+  expect@30.2.0:
+    resolution: {integrity: sha512-u/feCi0GPsI+988gU2FLcsHyAHTU0MX1Wg68NhAnN7z/+C5wqG+CY8J53N9ioe8RXgaoz0nBR/TYMf3AycUuPw==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  express-rate-limit@7.5.1:
+    resolution: {integrity: sha512-7iN8iPMDzOMHPUYllBEsQdWVB6fPDMPqwjBaFrgr4Jgr/+okjvzAy+UHlYYL/Vs0OsOrMkwS6PJDkFlJwoxUnw==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      express: '>= 4.11'
+
+  express@5.1.0:
+    resolution: {integrity: sha512-DT9ck5YIRU+8GYzzU5kT3eHGA5iL+1Zd0EutOmTE9Dtk+Tvuzd23VBU+ec7HPNSTxXYO55gPV/hq4pSBJDjFpA==}
+    engines: {node: '>= 18'}
+
+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+
+  fast-glob@3.3.1:
+    resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
+    engines: {node: '>=8.6.0'}
+
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+
+  fast-json-stable-stringify@2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+
+  fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+
+  fast-uri@3.1.0:
+    resolution: {integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==}
+
+  fastq@1.19.1:
+    resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
+
+  fb-watchman@2.0.2:
+    resolution: {integrity: sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==}
+
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  fetch-blob@3.2.0:
+    resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==}
+    engines: {node: ^12.20 || >= 14.13}
+
+  figures@6.1.0:
+    resolution: {integrity: sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==}
+    engines: {node: '>=18'}
+
+  file-entry-cache@8.0.0:
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}
+
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
+  finalhandler@2.1.0:
+    resolution: {integrity: sha512-/t88Ty3d5JWQbWYgaOGCCYfXRwV1+be02WqYYlL6h0lEiUAMPM8o8qKGO01YIkOHzka2up08wvgYD0mDiI+q3Q==}
+    engines: {node: '>= 0.8'}
+
+  find-up@4.1.0:
+    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
+    engines: {node: '>=8'}
+
+  find-up@5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+
+  flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
+
+  flatted@3.3.3:
+    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
+
+  for-each@0.3.5:
+    resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
+    engines: {node: '>= 0.4'}
+
+  foreground-child@3.3.1:
+    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
+    engines: {node: '>=14'}
+
+  formdata-polyfill@4.0.10:
+    resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==}
+    engines: {node: '>=12.20.0'}
+
+  forwarded@0.2.0:
+    resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
+    engines: {node: '>= 0.6'}
+
+  fresh@2.0.0:
+    resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
+    engines: {node: '>= 0.8'}
+
+  fs-extra@11.3.2:
+    resolution: {integrity: sha512-Xr9F6z6up6Ws+NjzMCZc6WXg2YFRlrLP9NQDO3VQrWrfiojdhS56TzueT88ze0uBdCTwEIhQ3ptnmKeWGFAe0A==}
+    engines: {node: '>=14.14'}
+
+  fs.realpath@1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  function.prototype.name@1.1.8:
+    resolution: {integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==}
+    engines: {node: '>= 0.4'}
+
+  functions-have-names@1.2.3:
+    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
+
+  fuzzysort@3.1.0:
+    resolution: {integrity: sha512-sR9BNCjBg6LNgwvxlBd0sBABvQitkLzoVY9MYYROQVX/FvfJ4Mai9LsGhDgd8qYdds0bY77VzYd5iuB+v5rwQQ==}
+
+  fzf@0.5.2:
+    resolution: {integrity: sha512-Tt4kuxLXFKHy8KT40zwsUPUkg1CrsgY25FxA2U/j/0WgEDCk3ddc/zLTCCcbSHX9FcKtLuVaDGtGE/STWC+j3Q==}
+
+  generator-function@2.0.1:
+    resolution: {integrity: sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==}
+    engines: {node: '>= 0.4'}
+
+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+
+  get-east-asian-width@1.4.0:
+    resolution: {integrity: sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==}
+    engines: {node: '>=18'}
+
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+
+  get-own-enumerable-keys@1.0.0:
+    resolution: {integrity: sha512-PKsK2FSrQCyxcGHsGrLDcK0lx+0Ke+6e8KFFozA9/fIQLhQzPaRvJFdcz7+Axg3jUH/Mq+NI4xa5u/UT2tQskA==}
+    engines: {node: '>=14.16'}
+
+  get-package-type@0.1.0:
+    resolution: {integrity: sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==}
+    engines: {node: '>=8.0.0'}
+
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+
+  get-stream@6.0.1:
+    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
+    engines: {node: '>=10'}
+
+  get-stream@9.0.1:
+    resolution: {integrity: sha512-kVCxPF3vQM/N0B1PmoqVUqgHP+EeVjmZSQn+1oCRPxd2P21P2F19lIgbR3HBosbB1PUhOAoctJnfEn2GbN2eZA==}
+    engines: {node: '>=18'}
+
+  get-symbol-description@1.1.0:
+    resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
+    engines: {node: '>= 0.4'}
+
+  get-tsconfig@4.12.0:
+    resolution: {integrity: sha512-LScr2aNr2FbjAjZh2C6X6BxRx1/x+aTDExct/xyq2XKbYOiG5c0aK7pMsSuyc0brz3ibr/lbQiHD9jzt4lccJw==}
+
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+
+  glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+
+  glob@10.4.5:
+    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
+    hasBin: true
+
+  glob@7.2.3:
+    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Glob versions prior to v9 are no longer supported
+
+  globals@14.0.0:
+    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
+    engines: {node: '>=18'}
+
+  globals@16.4.0:
+    resolution: {integrity: sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw==}
+    engines: {node: '>=18'}
+
+  globalthis@1.0.4:
+    resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
+    engines: {node: '>= 0.4'}
+
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  graphql@16.11.0:
+    resolution: {integrity: sha512-mS1lbMsxgQj6hge1XZ6p7GPhbrtFwUFYi3wRzXAC/FmYnyXMTvvI3td3rjmQ2u8ewXueaSvRPWaEcgVVOT9Jnw==}
+    engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0}
+
+  has-bigints@1.1.0:
+    resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
+    engines: {node: '>= 0.4'}
+
+  has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+
+  has-property-descriptors@1.0.2:
+    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
+
+  has-proto@1.2.0:
+    resolution: {integrity: sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==}
+    engines: {node: '>= 0.4'}
+
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+
+  has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+
+  hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
+
+  headers-polyfill@4.0.3:
+    resolution: {integrity: sha512-IScLbePpkvO846sIwOtOTDjutRMWdXdJmXdMvk6gCBHxFO8d+QKOQedyZSxFTTFYRSmlgSTDtXqqq4pcenBXLQ==}
+
+  hermes-estree@0.25.1:
+    resolution: {integrity: sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==}
+
+  hermes-parser@0.25.1:
+    resolution: {integrity: sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==}
+
+  hono@4.11.7:
+    resolution: {integrity: sha512-l7qMiNee7t82bH3SeyUCt9UF15EVmaBvsppY2zQtrbIhl/yzBTny+YUxsVjSjQ6gaqaeVtZmGocom8TzBlA4Yw==}
+    engines: {node: '>=16.9.0'}
+
+  html-encoding-sniffer@4.0.0:
+    resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
+    engines: {node: '>=18'}
+
+  html-escaper@2.0.2:
+    resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
+
+  http-errors@2.0.0:
+    resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==}
+    engines: {node: '>= 0.8'}
+
+  http-proxy-agent@7.0.2:
+    resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
+    engines: {node: '>= 14'}
+
+  https-proxy-agent@7.0.6:
+    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
+    engines: {node: '>= 14'}
+
+  human-signals@2.1.0:
+    resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
+    engines: {node: '>=10.17.0'}
+
+  human-signals@8.0.1:
+    resolution: {integrity: sha512-eKCa6bwnJhvxj14kZk5NCPc6Hb6BdsU9DZcOnmQKSnO1VKrfV0zCvtttPZUsBvjmNDn8rpcJfpwSYnHBjc95MQ==}
+    engines: {node: '>=18.18.0'}
+
+  iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+
+  iconv-lite@0.7.0:
+    resolution: {integrity: sha512-cf6L2Ds3h57VVmkZe+Pn+5APsT7FpqJtEhhieDCvrE2MK5Qk9MyffgQyuxQTm6BChfeZNtcOLHp9IcWRVcIcBQ==}
+    engines: {node: '>=0.10.0'}
+
+  iconv-lite@0.7.2:
+    resolution: {integrity: sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==}
+    engines: {node: '>=0.10.0'}
+
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+
+  ignore@7.0.5:
+    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
+    engines: {node: '>= 4'}
+
+  import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
+
+  import-local@3.2.0:
+    resolution: {integrity: sha512-2SPlun1JUPWoM6t3F0dw0FkCF/jWY8kttcY4f599GLTSjh2OCuuhdTkJQsEcZzBqbXZGKMK2OqW1oZsjtf/gQA==}
+    engines: {node: '>=8'}
+    hasBin: true
+
+  imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+
+  indent-string@4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
+
+  inflight@1.0.6:
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
+
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
+  internal-slot@1.1.0:
+    resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
+    engines: {node: '>= 0.4'}
+
+  intl-messageformat@10.7.18:
+    resolution: {integrity: sha512-m3Ofv/X/tV8Y3tHXLohcuVuhWKo7BBq62cqY15etqmLxg2DZ34AGGgQDeR+SCta2+zICb1NX83af0GJmbQ1++g==}
+
+  ipaddr.js@1.9.1:
+    resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
+    engines: {node: '>= 0.10'}
+
+  is-array-buffer@3.0.5:
+    resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
+    engines: {node: '>= 0.4'}
+
+  is-arrayish@0.2.1:
+    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
+
+  is-async-function@2.1.1:
+    resolution: {integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==}
+    engines: {node: '>= 0.4'}
+
+  is-bigint@1.1.0:
+    resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
+    engines: {node: '>= 0.4'}
+
+  is-boolean-object@1.2.2:
+    resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
+    engines: {node: '>= 0.4'}
+
+  is-bun-module@2.0.0:
+    resolution: {integrity: sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==}
+
+  is-callable@1.2.7:
+    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
+    engines: {node: '>= 0.4'}
+
+  is-core-module@2.16.1:
+    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
+    engines: {node: '>= 0.4'}
+
+  is-data-view@1.0.2:
+    resolution: {integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==}
+    engines: {node: '>= 0.4'}
+
+  is-date-object@1.1.0:
+    resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
+    engines: {node: '>= 0.4'}
+
+  is-docker@3.0.0:
+    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    hasBin: true
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-finalizationregistry@1.1.1:
+    resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
+    engines: {node: '>= 0.4'}
+
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
+  is-generator-fn@2.1.0:
+    resolution: {integrity: sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==}
+    engines: {node: '>=6'}
+
+  is-generator-function@1.1.2:
+    resolution: {integrity: sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==}
+    engines: {node: '>= 0.4'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-in-ssh@1.0.0:
+    resolution: {integrity: sha512-jYa6Q9rH90kR1vKB6NM7qqd1mge3Fx4Dhw5TVlK1MUBqhEOuCagrEHMevNuCcbECmXZ0ThXkRm+Ymr51HwEPAw==}
+    engines: {node: '>=20'}
+
+  is-inside-container@1.0.0:
+    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
+    engines: {node: '>=14.16'}
+    hasBin: true
+
+  is-interactive@2.0.0:
+    resolution: {integrity: sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==}
+    engines: {node: '>=12'}
+
+  is-map@2.0.3:
+    resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
+    engines: {node: '>= 0.4'}
+
+  is-negative-zero@2.0.3:
+    resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
+    engines: {node: '>= 0.4'}
+
+  is-node-process@1.2.0:
+    resolution: {integrity: sha512-Vg4o6/fqPxIjtxgUH5QLJhwZ7gW5diGCVlXpuUfELC62CuxM1iHcRe51f2W1FDy04Ai4KJkagKjx3XaqyfRKXw==}
+
+  is-number-object@1.1.1:
+    resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
+    engines: {node: '>= 0.4'}
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  is-obj@3.0.0:
+    resolution: {integrity: sha512-IlsXEHOjtKhpN8r/tRFj2nDyTmHvcfNeu/nrRIcXE17ROeatXchkojffa1SpdqW4cr/Fj6QkEf/Gn4zf6KKvEQ==}
+    engines: {node: '>=12'}
+
+  is-plain-obj@4.1.0:
+    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
+    engines: {node: '>=12'}
+
+  is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+
+  is-promise@4.0.0:
+    resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
+
+  is-regex@1.2.1:
+    resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
+    engines: {node: '>= 0.4'}
+
+  is-regexp@3.1.0:
+    resolution: {integrity: sha512-rbku49cWloU5bSMI+zaRaXdQHXnthP6DZ/vLnfdSKyL4zUzuWnomtOEiZZOd+ioQ+avFo/qau3KPTc7Fjy1uPA==}
+    engines: {node: '>=12'}
+
+  is-set@2.0.3:
+    resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
+    engines: {node: '>= 0.4'}
+
+  is-shared-array-buffer@1.0.4:
+    resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==}
+    engines: {node: '>= 0.4'}
+
+  is-stream@2.0.1:
+    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
+    engines: {node: '>=8'}
+
+  is-stream@4.0.1:
+    resolution: {integrity: sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A==}
+    engines: {node: '>=18'}
+
+  is-string@1.1.1:
+    resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
+    engines: {node: '>= 0.4'}
+
+  is-symbol@1.1.1:
+    resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==}
+    engines: {node: '>= 0.4'}
+
+  is-typed-array@1.1.15:
+    resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
+    engines: {node: '>= 0.4'}
+
+  is-unicode-supported@1.3.0:
+    resolution: {integrity: sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==}
+    engines: {node: '>=12'}
+
+  is-unicode-supported@2.1.0:
+    resolution: {integrity: sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ==}
+    engines: {node: '>=18'}
+
+  is-weakmap@2.0.2:
+    resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
+    engines: {node: '>= 0.4'}
+
+  is-weakref@1.1.1:
+    resolution: {integrity: sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==}
+    engines: {node: '>= 0.4'}
+
+  is-weakset@2.0.4:
+    resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
+    engines: {node: '>= 0.4'}
+
+  is-wsl@3.1.0:
+    resolution: {integrity: sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==}
+    engines: {node: '>=16'}
+
+  isarray@2.0.5:
+    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
+
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  isexe@3.1.1:
+    resolution: {integrity: sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==}
+    engines: {node: '>=16'}
+
+  istanbul-lib-coverage@3.2.2:
+    resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
+    engines: {node: '>=8'}
+
+  istanbul-lib-instrument@6.0.3:
+    resolution: {integrity: sha512-Vtgk7L/R2JHyyGW07spoFlB8/lpjiOLTjMdms6AFMraYt3BaJauod/NGrfnVG/y4Ix1JEuMRPDPEj2ua+zz1/Q==}
+    engines: {node: '>=10'}
+
+  istanbul-lib-report@3.0.1:
+    resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==}
+    engines: {node: '>=10'}
+
+  istanbul-lib-source-maps@5.0.6:
+    resolution: {integrity: sha512-yg2d+Em4KizZC5niWhQaIomgf5WlL4vOOjZ5xGCmF8SnPE/mDWWXgvRExdcpCgh9lLRRa1/fSYp2ymmbJ1pI+A==}
+    engines: {node: '>=10'}
+
+  istanbul-reports@3.2.0:
+    resolution: {integrity: sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==}
+    engines: {node: '>=8'}
+
+  iterator.prototype@1.1.5:
+    resolution: {integrity: sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==}
+    engines: {node: '>= 0.4'}
+
+  jackspeak@3.4.3:
+    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
+
+  jest-changed-files@30.2.0:
+    resolution: {integrity: sha512-L8lR1ChrRnSdfeOvTrwZMlnWV8G/LLjQ0nG9MBclwWZidA2N5FviRki0Bvh20WRMOX31/JYvzdqTJrk5oBdydQ==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-circus@30.2.0:
+    resolution: {integrity: sha512-Fh0096NC3ZkFx05EP2OXCxJAREVxj1BcW/i6EWqqymcgYKWjyyDpral3fMxVcHXg6oZM7iULer9wGRFvfpl+Tg==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-cli@30.2.0:
+    resolution: {integrity: sha512-Os9ukIvADX/A9sLt6Zse3+nmHtHaE6hqOsjQtNiugFTbKRHYIYtZXNGNK9NChseXy7djFPjndX1tL0sCTlfpAA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+    hasBin: true
+    peerDependencies:
+      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+    peerDependenciesMeta:
+      node-notifier:
+        optional: true
+
+  jest-config@30.2.0:
+    resolution: {integrity: sha512-g4WkyzFQVWHtu6uqGmQR4CQxz/CH3yDSlhzXMWzNjDx843gYjReZnMRanjRCq5XZFuQrGDxgUaiYWE8BRfVckA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+    peerDependencies:
+      '@types/node': '*'
+      esbuild-register: '>=3.4.0'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      esbuild-register:
+        optional: true
+      ts-node:
+        optional: true
+
+  jest-diff@30.2.0:
+    resolution: {integrity: sha512-dQHFo3Pt4/NLlG5z4PxZ/3yZTZ1C7s9hveiOj+GCN+uT109NC2QgsoVZsVOAvbJ3RgKkvyLGXZV9+piDpWbm6A==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-docblock@30.2.0:
+    resolution: {integrity: sha512-tR/FFgZKS1CXluOQzZvNH3+0z9jXr3ldGSD8bhyuxvlVUwbeLOGynkunvlTMxchC5urrKndYiwCFC0DLVjpOCA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-each@30.2.0:
+    resolution: {integrity: sha512-lpWlJlM7bCUf1mfmuqTA8+j2lNURW9eNafOy99knBM01i5CQeY5UH1vZjgT9071nDJac1M4XsbyI44oNOdhlDQ==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-environment-jsdom@30.2.0:
+    resolution: {integrity: sha512-zbBTiqr2Vl78pKp/laGBREYzbZx9ZtqPjOK4++lL4BNDhxRnahg51HtoDrk9/VjIy9IthNEWdKVd7H5bqBhiWQ==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+    peerDependencies:
+      canvas: ^3.0.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
+  jest-environment-node@30.2.0:
+    resolution: {integrity: sha512-ElU8v92QJ9UrYsKrxDIKCxu6PfNj4Hdcktcn0JX12zqNdqWHB0N+hwOnnBBXvjLd2vApZtuLUGs1QSY+MsXoNA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-haste-map@30.2.0:
+    resolution: {integrity: sha512-sQA/jCb9kNt+neM0anSj6eZhLZUIhQgwDt7cPGjumgLM4rXsfb9kpnlacmvZz3Q5tb80nS+oG/if+NBKrHC+Xw==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-junit@16.0.0:
+    resolution: {integrity: sha512-A94mmw6NfJab4Fg/BlvVOUXzXgF0XIH6EmTgJ5NDPp4xoKq0Kr7sErb+4Xs9nZvu58pJojz5RFGpqnZYJTrRfQ==}
+    engines: {node: '>=10.12.0'}
+
+  jest-leak-detector@30.2.0:
+    resolution: {integrity: sha512-M6jKAjyzjHG0SrQgwhgZGy9hFazcudwCNovY/9HPIicmNSBuockPSedAP9vlPK6ONFJ1zfyH/M2/YYJxOz5cdQ==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-matcher-utils@30.2.0:
+    resolution: {integrity: sha512-dQ94Nq4dbzmUWkQ0ANAWS9tBRfqCrn0bV9AMYdOi/MHW726xn7eQmMeRTpX2ViC00bpNaWXq+7o4lIQ3AX13Hg==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-message-util@30.2.0:
+    resolution: {integrity: sha512-y4DKFLZ2y6DxTWD4cDe07RglV88ZiNEdlRfGtqahfbIjfsw1nMCPx49Uev4IA/hWn3sDKyAnSPwoYSsAEdcimw==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-mock@30.2.0:
+    resolution: {integrity: sha512-JNNNl2rj4b5ICpmAcq+WbLH83XswjPbjH4T7yvGzfAGCPh1rw+xVNbtk+FnRslvt9lkCcdn9i1oAoKUuFsOxRw==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-pnp-resolver@1.2.3:
+    resolution: {integrity: sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==}
+    engines: {node: '>=6'}
+    peerDependencies:
+      jest-resolve: '*'
+    peerDependenciesMeta:
+      jest-resolve:
+        optional: true
+
+  jest-regex-util@30.0.1:
+    resolution: {integrity: sha512-jHEQgBXAgc+Gh4g0p3bCevgRCVRkB4VB70zhoAE48gxeSr1hfUOsM/C2WoJgVL7Eyg//hudYENbm3Ne+/dRVVA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-resolve-dependencies@30.2.0:
+    resolution: {integrity: sha512-xTOIGug/0RmIe3mmCqCT95yO0vj6JURrn1TKWlNbhiAefJRWINNPgwVkrVgt/YaerPzY3iItufd80v3lOrFJ2w==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-resolve@30.2.0:
+    resolution: {integrity: sha512-TCrHSxPlx3tBY3hWNtRQKbtgLhsXa1WmbJEqBlTBrGafd5fiQFByy2GNCEoGR+Tns8d15GaL9cxEzKOO3GEb2A==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-runner@30.2.0:
+    resolution: {integrity: sha512-PqvZ2B2XEyPEbclp+gV6KO/F1FIFSbIwewRgmROCMBo/aZ6J1w8Qypoj2pEOcg3G2HzLlaP6VUtvwCI8dM3oqQ==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-runtime@30.2.0:
+    resolution: {integrity: sha512-p1+GVX/PJqTucvsmERPMgCPvQJpFt4hFbM+VN3n8TMo47decMUcJbt+rgzwrEme0MQUA/R+1de2axftTHkKckg==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-snapshot@30.2.0:
+    resolution: {integrity: sha512-5WEtTy2jXPFypadKNpbNkZ72puZCa6UjSr/7djeecHWOu7iYhSXSnHScT8wBz3Rn8Ena5d5RYRcsyKIeqG1IyA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-util@30.2.0:
+    resolution: {integrity: sha512-QKNsM0o3Xe6ISQU869e+DhG+4CK/48aHYdJZGlFQVTjnbvgpcKyxpzk29fGiO7i/J8VENZ+d2iGnSsvmuHywlA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-validate@30.2.0:
+    resolution: {integrity: sha512-FBGWi7dP2hpdi8nBoWxSsLvBFewKAg0+uSQwBaof4Y4DPgBabXgpSYC5/lR7VmnIlSpASmCi/ntRWPbv7089Pw==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-watcher@30.2.0:
+    resolution: {integrity: sha512-PYxa28dxJ9g777pGm/7PrbnMeA0Jr7osHP9bS7eJy9DuAjMgdGtxgf0uKMyoIsTWAkIbUW5hSDdJ3urmgXBqxg==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest-worker@30.2.0:
+    resolution: {integrity: sha512-0Q4Uk8WF7BUwqXHuAjc23vmopWJw5WH7w2tqBoUOZpOjW/ZnR44GXXd1r82RvnmI2GZge3ivrYXk/BE2+VtW2g==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  jest@30.2.0:
+    resolution: {integrity: sha512-F26gjC0yWN8uAA5m5Ss8ZQf5nDHWGlN/xWZIh8S5SRbsEKBovwZhxGd6LJlbZYxBgCYOtreSUyb8hpXyGC5O4A==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+    hasBin: true
+    peerDependencies:
+      node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+    peerDependenciesMeta:
+      node-notifier:
+        optional: true
+
+  jiti@2.6.1:
+    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
+    hasBin: true
+
+  jose@6.1.3:
+    resolution: {integrity: sha512-0TpaTfihd4QMNwrz/ob2Bp7X04yuxJkjRGi4aKmOqwhov54i6u79oCv7T+C7lo70MKH6BesI3vscD1yb/yzKXQ==}
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  js-yaml@3.14.2:
+    resolution: {integrity: sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==}
+    hasBin: true
+
+  js-yaml@4.1.1:
+    resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
+    hasBin: true
+
+  jsdom@26.1.0:
+    resolution: {integrity: sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      canvas: ^3.0.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  json-buffer@3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+
+  json-parse-even-better-errors@2.3.1:
+    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+
+  json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+
+  json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+
+  json-schema-typed@8.0.2:
+    resolution: {integrity: sha512-fQhoXdcvc3V28x7C7BMs4P5+kNlgUURe2jmUT1T//oBRMDrqy1QPelJimwZGo7Hg9VPV3EQV5Bnq4hbFy2vetA==}
+
+  json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+
+  json5@1.0.2:
+    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
+    hasBin: true
+
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  jsonfile@6.2.0:
+    resolution: {integrity: sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==}
+
+  jsx-ast-utils@3.3.5:
+    resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
+    engines: {node: '>=4.0'}
+
+  keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+
+  kleur@3.0.3:
+    resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
+    engines: {node: '>=6'}
+
+  kleur@4.1.5:
+    resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
+    engines: {node: '>=6'}
+
+  language-subtag-registry@0.3.23:
+    resolution: {integrity: sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==}
+
+  language-tags@1.0.9:
+    resolution: {integrity: sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==}
+    engines: {node: '>=0.10'}
+
+  leven@3.1.0:
+    resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
+    engines: {node: '>=6'}
+
+  levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+
+  lightningcss-darwin-arm64@1.30.1:
+    resolution: {integrity: sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.30.1:
+    resolution: {integrity: sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.30.1:
+    resolution: {integrity: sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.30.1:
+    resolution: {integrity: sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.30.1:
+    resolution: {integrity: sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.30.1:
+    resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.30.1:
+    resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.30.1:
+    resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.30.1:
+    resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.30.1:
+    resolution: {integrity: sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.30.1:
+    resolution: {integrity: sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==}
+    engines: {node: '>= 12.0.0'}
+
+  lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
+  locate-path@5.0.0:
+    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
+    engines: {node: '>=8'}
+
+  locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+
+  lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+
+  log-symbols@6.0.0:
+    resolution: {integrity: sha512-i24m8rpwhmPIS4zscNzK6MSEhk0DUWa/8iYQWxhffV8jkI4Phvs3F+quL5xvS0gdQR0FyTCMMH33Y78dDTzzIw==}
+    engines: {node: '>=18'}
+
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
+  lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+
+  lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+
+  lucide-react@0.546.0:
+    resolution: {integrity: sha512-Z94u6fKT43lKeYHiVyvyR8fT7pwCzDu7RyMPpTvh054+xahSgj4HFQ+NmflvzdXsoAjYGdCguGaFKYuvq0ThCQ==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  lz-string@1.5.0:
+    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
+    hasBin: true
+
+  magic-string@0.30.19:
+    resolution: {integrity: sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==}
+
+  make-dir@4.0.0:
+    resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
+    engines: {node: '>=10'}
+
+  make-error@1.3.6:
+    resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
+
+  makeerror@1.0.12:
+    resolution: {integrity: sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==}
+
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
+  media-typer@1.1.0:
+    resolution: {integrity: sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==}
+    engines: {node: '>= 0.8'}
+
+  merge-descriptors@2.0.0:
+    resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
+    engines: {node: '>=18'}
+
+  merge-stream@2.0.0:
+    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
+
+  merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
+  mime-db@1.54.0:
+    resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@3.0.1:
+    resolution: {integrity: sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==}
+    engines: {node: '>= 0.6'}
+
+  mimic-fn@2.1.0:
+    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
+    engines: {node: '>=6'}
+
+  mimic-function@5.0.1:
+    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
+    engines: {node: '>=18'}
+
+  min-indent@1.0.1:
+    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
+    engines: {node: '>=4'}
+
+  minimatch@10.0.3:
+    resolution: {integrity: sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw==}
+    engines: {node: 20 || >=22}
+
+  minimatch@3.1.2:
+    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+
+  minimatch@9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
+  minipass@7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minizlib@3.1.0:
+    resolution: {integrity: sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==}
+    engines: {node: '>= 18'}
+
+  mkdirp@1.0.4:
+    resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  msw@2.11.5:
+    resolution: {integrity: sha512-atFI4GjKSJComxcigz273honh8h4j5zzpk5kwG4tGm0TPcYne6bqmVrufeRll6auBeouIkXqZYXxVbWSWxM3RA==}
+    engines: {node: '>=18'}
+    hasBin: true
+    peerDependencies:
+      typescript: '>= 4.8.x'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  mute-stream@2.0.0:
+    resolution: {integrity: sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA==}
+    engines: {node: ^18.17.0 || >=20.5.0}
+
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  napi-postinstall@0.3.4:
+    resolution: {integrity: sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+    hasBin: true
+
+  natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+
+  negotiator@1.0.0:
+    resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
+    engines: {node: '>= 0.6'}
+
+  next-intl-swc-plugin-extractor@4.7.0:
+    resolution: {integrity: sha512-iAqflu2FWdQMWhwB0B2z52X7LmEpvnMNJXqVERZQ7bK5p9iqQLu70ur6Ka6NfiXLxfb+AeAkUX5qIciQOg+87A==}
+
+  next-intl@4.7.0:
+    resolution: {integrity: sha512-gvROzcNr/HM0jTzQlKWQxUNk8jrZ0bREz+bht3wNbv+uzlZ5Kn3J+m+viosub18QJ72S08UJnVK50PXWcUvwpQ==}
+    peerDependencies:
+      next: ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 || ^19.0.0
+      typescript: ^5.0.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  next@16.1.6:
+    resolution: {integrity: sha512-hkyRkcu5x/41KoqnROkfTm2pZVbKxvbZRuNvKXLRXxs3VfyO0WhY50TQS40EuKO9SW3rBj/sF3WbVwDACeMZyw==}
+    engines: {node: '>=20.9.0'}
+    hasBin: true
+    peerDependencies:
+      '@opentelemetry/api': ^1.1.0
+      '@playwright/test': ^1.51.1
+      babel-plugin-react-compiler: '*'
+      react: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
+      react-dom: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
+      sass: ^1.3.0
+    peerDependenciesMeta:
+      '@opentelemetry/api':
+        optional: true
+      '@playwright/test':
+        optional: true
+      babel-plugin-react-compiler:
+        optional: true
+      sass:
+        optional: true
+
+  node-addon-api@7.1.1:
+    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
+
+  node-domexception@1.0.0:
+    resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
+    engines: {node: '>=10.5.0'}
+    deprecated: Use your platform's native DOMException instead
+
+  node-fetch@3.3.2:
+    resolution: {integrity: sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  node-int64@0.4.0:
+    resolution: {integrity: sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==}
+
+  node-releases@2.0.25:
+    resolution: {integrity: sha512-4auku8B/vw5psvTiiN9j1dAOsXvMoGqJuKJcR+dTdqiXEK20mMTk1UEo3HS16LeGQsVG6+qKTPM9u/qQ2LqATA==}
+
+  normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+
+  npm-run-path@4.0.1:
+    resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
+    engines: {node: '>=8'}
+
+  npm-run-path@6.0.0:
+    resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
+    engines: {node: '>=18'}
+
+  nwsapi@2.2.22:
+    resolution: {integrity: sha512-ujSMe1OWVn55euT1ihwCI1ZcAaAU3nxUiDwfDQldc51ZXaB9m2AyOn6/jh1BLe2t/G8xd6uKG1UBF2aZJeg2SQ==}
+
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  object-inspect@1.13.4:
+    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
+    engines: {node: '>= 0.4'}
+
+  object-keys@1.1.1:
+    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
+    engines: {node: '>= 0.4'}
+
+  object-treeify@1.1.33:
+    resolution: {integrity: sha512-EFVjAYfzWqWsBMRHPMAXLCDIJnpMhdWAqR7xG6M6a2cs6PMFpl/+Z20w9zDW4vkxOFfddegBKq9Rehd0bxWE7A==}
+    engines: {node: '>= 10'}
+
+  object.assign@4.1.7:
+    resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
+    engines: {node: '>= 0.4'}
+
+  object.entries@1.1.9:
+    resolution: {integrity: sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==}
+    engines: {node: '>= 0.4'}
+
+  object.fromentries@2.0.8:
+    resolution: {integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==}
+    engines: {node: '>= 0.4'}
+
+  object.groupby@1.0.3:
+    resolution: {integrity: sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==}
+    engines: {node: '>= 0.4'}
+
+  object.values@1.2.1:
+    resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
+    engines: {node: '>= 0.4'}
+
+  on-finished@2.4.1:
+    resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
+    engines: {node: '>= 0.8'}
+
+  once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+
+  onetime@5.1.2:
+    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
+    engines: {node: '>=6'}
+
+  onetime@7.0.0:
+    resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
+    engines: {node: '>=18'}
+
+  open@11.0.0:
+    resolution: {integrity: sha512-smsWv2LzFjP03xmvFoJ331ss6h+jixfA4UUV/Bsiyuu4YJPfN+FIQGOIiv4w9/+MoHkfkJ22UIaQWRVFRfH6Vw==}
+    engines: {node: '>=20'}
+
+  optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
+    engines: {node: '>= 0.8.0'}
+
+  ora@8.2.0:
+    resolution: {integrity: sha512-weP+BZ8MVNnlCm8c0Qdc1WSWq4Qn7I+9CJGm7Qali6g44e/PUzbjNqJX5NJ9ljlNMosfJvg1fKEGILklK9cwnw==}
+    engines: {node: '>=18'}
+
+  outvariant@1.4.3:
+    resolution: {integrity: sha512-+Sl2UErvtsoajRDKCE5/dBz4DIvHXQQnAxtQTF04OJxY0+DyZXSo5P5Bb7XYWOh81syohlYL24hbDwxedPUJCA==}
+
+  own-keys@1.0.1:
+    resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
+    engines: {node: '>= 0.4'}
+
+  p-limit@2.3.0:
+    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
+    engines: {node: '>=6'}
+
+  p-limit@3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+
+  p-locate@4.1.0:
+    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
+    engines: {node: '>=8'}
+
+  p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+
+  p-try@2.2.0:
+    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
+    engines: {node: '>=6'}
+
+  package-json-from-dist@1.0.1:
+    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
+
+  package-manager-detector@1.4.1:
+    resolution: {integrity: sha512-dSMiVLBEA4XaNJ0PRb4N5cV/SEP4BWrWZKBmfF+OUm2pQTiZ6DDkKeWaltwu3JRhLoy59ayIkJ00cx9K9CaYTg==}
+
+  parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+
+  parse-json@5.2.0:
+    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
+    engines: {node: '>=8'}
+
+  parse-ms@4.0.0:
+    resolution: {integrity: sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==}
+    engines: {node: '>=18'}
+
+  parse5@7.3.0:
+    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
+
+  parseurl@1.3.3:
+    resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
+    engines: {node: '>= 0.8'}
+
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+
+  path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+
+  path-is-absolute@1.0.1:
+    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
+    engines: {node: '>=0.10.0'}
+
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
+  path-key@4.0.0:
+    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
+    engines: {node: '>=12'}
+
+  path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
+  path-scurry@1.11.1:
+    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
+    engines: {node: '>=16 || 14 >=14.18'}
+
+  path-to-regexp@6.3.0:
+    resolution: {integrity: sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==}
+
+  path-to-regexp@8.3.0:
+    resolution: {integrity: sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
+  picomatch@4.0.3:
+    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+    engines: {node: '>=12'}
+
+  pirates@4.0.7:
+    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
+    engines: {node: '>= 6'}
+
+  pkce-challenge@5.0.0:
+    resolution: {integrity: sha512-ueGLflrrnvwB3xuo/uGob5pd5FN7l0MsLf0Z87o/UQmRtwjvfylfc9MurIxRAWywCYTgrvpXBcqjV4OfCYGCIQ==}
+    engines: {node: '>=16.20.0'}
+
+  pkg-dir@4.2.0:
+    resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
+    engines: {node: '>=8'}
+
+  po-parser@2.1.1:
+    resolution: {integrity: sha512-ECF4zHLbUItpUgE3OTtLKlPjeBN+fKEczj2zYjDfCGOzicNs0GK3Vg2IoAYwx7LH/XYw43fZQP6xnZ4TkNxSLQ==}
+
+  possible-typed-array-names@1.1.0:
+    resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
+    engines: {node: '>= 0.4'}
+
+  postcss-selector-parser@7.1.1:
+    resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==}
+    engines: {node: '>=4'}
+
+  postcss@8.4.31:
+    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  postcss@8.5.6:
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  powershell-utils@0.1.0:
+    resolution: {integrity: sha512-dM0jVuXJPsDN6DvRpea484tCUaMiXWjuCn++HGTqUWzGDjv5tZkEZldAJ/UMlqRYGFrD/etByo4/xOuC/snX2A==}
+    engines: {node: '>=20'}
+
+  prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+
+  pretty-format@27.5.1:
+    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  pretty-format@30.2.0:
+    resolution: {integrity: sha512-9uBdv/B4EefsuAL+pWqueZyZS2Ba+LxfFeQ9DN14HU4bN8bhaxKdkpjpB6fs9+pSjIBu+FXQHImEg8j/Lw0+vA==}
+    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
+
+  pretty-ms@9.3.0:
+    resolution: {integrity: sha512-gjVS5hOP+M3wMm5nmNOucbIrqudzs9v/57bWRHQWLYklXqoXKrVfYW2W9+glfGsqtPgpiz5WwyEEB+ksXIx3gQ==}
+    engines: {node: '>=18'}
+
+  prompts@2.4.2:
+    resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
+    engines: {node: '>= 6'}
+
+  prop-types@15.8.1:
+    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+
+  proxy-addr@2.0.7:
+    resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
+    engines: {node: '>= 0.10'}
+
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+
+  pure-rand@7.0.1:
+    resolution: {integrity: sha512-oTUZM/NAZS8p7ANR3SHh30kXB+zK2r2BPcEn/awJIbOvq82WoMN4p62AWWp3Hhw50G0xMsw1mhIBLqHw64EcNQ==}
+
+  qs@6.14.1:
+    resolution: {integrity: sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==}
+    engines: {node: '>=0.6'}
+
+  queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  range-parser@1.2.1:
+    resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
+    engines: {node: '>= 0.6'}
+
+  raw-body@3.0.1:
+    resolution: {integrity: sha512-9G8cA+tuMS75+6G/TzW8OtLzmBDMo8p1JRxN5AZ+LAp8uxGA8V8GZm4GQ4/N5QNQEnLmg6SS7wyuSmbKepiKqA==}
+    engines: {node: '>= 0.10'}
+
+  react-dom@19.2.4:
+    resolution: {integrity: sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==}
+    peerDependencies:
+      react: ^19.2.4
+
+  react-hook-form@7.71.1:
+    resolution: {integrity: sha512-9SUJKCGKo8HUSsCO+y0CtqkqI5nNuaDqTxyqPsZPqIwudpj4rCrAz/jZV+jn57bx5gtZKOh3neQu94DXMc+w5w==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18 || ^19
+
+  react-is@16.13.1:
+    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+
+  react-is@17.0.2:
+    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
+
+  react-is@18.3.1:
+    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
+
+  react@19.2.4:
+    resolution: {integrity: sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==}
+    engines: {node: '>=0.10.0'}
+
+  recast@0.23.11:
+    resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==}
+    engines: {node: '>= 4'}
+
+  redent@3.0.0:
+    resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
+    engines: {node: '>=8'}
+
+  reflect.getprototypeof@1.0.10:
+    resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
+    engines: {node: '>= 0.4'}
+
+  regexp.prototype.flags@1.5.4:
+    resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
+    engines: {node: '>= 0.4'}
+
+  require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+
+  require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+
+  resolve-cwd@3.0.0:
+    resolution: {integrity: sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==}
+    engines: {node: '>=8'}
+
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
+  resolve-from@5.0.0:
+    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
+    engines: {node: '>=8'}
+
+  resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+
+  resolve@1.22.10:
+    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
+    engines: {node: '>= 0.4'}
+    hasBin: true
+
+  resolve@2.0.0-next.5:
+    resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==}
+    hasBin: true
+
+  restore-cursor@5.1.0:
+    resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
+    engines: {node: '>=18'}
+
+  rettime@0.7.0:
+    resolution: {integrity: sha512-LPRKoHnLKd/r3dVxcwO7vhCW+orkOGj9ViueosEBK6ie89CijnfRlhaDhHq/3Hxu4CkWQtxwlBG0mzTQY6uQjw==}
+
+  reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  router@2.2.0:
+    resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
+    engines: {node: '>= 18'}
+
+  rrweb-cssom@0.8.0:
+    resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==}
+
+  run-applescript@7.1.0:
+    resolution: {integrity: sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==}
+    engines: {node: '>=18'}
+
+  run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+
+  safe-array-concat@1.1.3:
+    resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
+    engines: {node: '>=0.4'}
+
+  safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+
+  safe-push-apply@1.0.0:
+    resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
+    engines: {node: '>= 0.4'}
+
+  safe-regex-test@1.1.0:
+    resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
+    engines: {node: '>= 0.4'}
+
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  saxes@6.0.0:
+    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+    engines: {node: '>=v12.22.7'}
+
+  scheduler@0.27.0:
+    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
+
+  semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+
+  semver@7.7.3:
+    resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  send@1.2.0:
+    resolution: {integrity: sha512-uaW0WwXKpL9blXE2o0bRhoL2EGXIrZxQ2ZQ4mgcfoBxdFmQold+qWsD2jLrfZ0trjKL6vOw0j//eAwcALFjKSw==}
+    engines: {node: '>= 18'}
+
+  serve-static@2.2.0:
+    resolution: {integrity: sha512-61g9pCh0Vnh7IutZjtLGGpTA355+OPn2TyDv/6ivP2h/AdAVX9azsoxmg2/M6nZeQZNYBEwIcsne1mJd9oQItQ==}
+    engines: {node: '>= 18'}
+
+  set-function-length@1.2.2:
+    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
+    engines: {node: '>= 0.4'}
+
+  set-function-name@2.0.2:
+    resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
+    engines: {node: '>= 0.4'}
+
+  set-proto@1.0.0:
+    resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
+    engines: {node: '>= 0.4'}
+
+  setprototypeof@1.2.0:
+    resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
+
+  shadcn@3.7.0:
+    resolution: {integrity: sha512-zOXNAIFclguSYmmoibyXyKiYA6qjEJtXDSvloAMziSREW9Q0R/dLqBUYdb81lOejmZkDYuZApGabbMLH7G8qvQ==}
+    hasBin: true
+
+  sharp@0.34.5:
+    resolution: {integrity: sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  side-channel-list@1.0.0:
+    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-map@1.0.1:
+    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-weakmap@1.0.2:
+    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
+    engines: {node: '>= 0.4'}
+
+  side-channel@1.1.0:
+    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
+    engines: {node: '>= 0.4'}
+
+  signal-exit@3.0.7:
+    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
+  sisteransi@1.0.5:
+    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
+
+  slash@3.0.0:
+    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    engines: {node: '>=8'}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  source-map-support@0.5.13:
+    resolution: {integrity: sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==}
+
+  source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  sprintf-js@1.0.3:
+    resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
+
+  stable-hash@0.0.5:
+    resolution: {integrity: sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==}
+
+  stack-utils@2.0.6:
+    resolution: {integrity: sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==}
+    engines: {node: '>=10'}
+
+  statuses@2.0.1:
+    resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
+    engines: {node: '>= 0.8'}
+
+  statuses@2.0.2:
+    resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
+    engines: {node: '>= 0.8'}
+
+  stdin-discarder@0.2.2:
+    resolution: {integrity: sha512-UhDfHmA92YAlNnCfhmq0VeNL5bDbiZGg7sZ2IvPsXubGkiNa9EC+tUTsjBRsYUAz87btI6/1wf4XoVvQ3uRnmQ==}
+    engines: {node: '>=18'}
+
+  stop-iteration-iterator@1.1.0:
+    resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
+    engines: {node: '>= 0.4'}
+
+  strict-event-emitter@0.5.1:
+    resolution: {integrity: sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ==}
+
+  string-length@4.0.2:
+    resolution: {integrity: sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==}
+    engines: {node: '>=10'}
+
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  string-width@5.1.2:
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    engines: {node: '>=12'}
+
+  string-width@7.2.0:
+    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
+    engines: {node: '>=18'}
+
+  string.prototype.includes@2.0.1:
+    resolution: {integrity: sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.matchall@4.0.12:
+    resolution: {integrity: sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.repeat@1.0.0:
+    resolution: {integrity: sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==}
+
+  string.prototype.trim@1.2.10:
+    resolution: {integrity: sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.trimend@1.0.9:
+    resolution: {integrity: sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.trimstart@1.0.8:
+    resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
+    engines: {node: '>= 0.4'}
+
+  stringify-object@5.0.0:
+    resolution: {integrity: sha512-zaJYxz2FtcMb4f+g60KsRNFOpVMUyuJgA51Zi5Z1DOTC3S59+OQiVOzE9GZt0x72uBGWKsQIuBKeF9iusmKFsg==}
+    engines: {node: '>=14.16'}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  strip-ansi@7.1.2:
+    resolution: {integrity: sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==}
+    engines: {node: '>=12'}
+
+  strip-bom@3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
+
+  strip-bom@4.0.0:
+    resolution: {integrity: sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==}
+    engines: {node: '>=8'}
+
+  strip-final-newline@2.0.0:
+    resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
+    engines: {node: '>=6'}
+
+  strip-final-newline@4.0.0:
+    resolution: {integrity: sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==}
+    engines: {node: '>=18'}
+
+  strip-indent@3.0.0:
+    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
+    engines: {node: '>=8'}
+
+  strip-json-comments@3.1.1:
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
+
+  styled-jsx@5.1.6:
+    resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
+    engines: {node: '>= 12.0.0'}
+    peerDependencies:
+      '@babel/core': '*'
+      babel-plugin-macros: '*'
+      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      babel-plugin-macros:
+        optional: true
+
+  supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+
+  supports-color@8.1.1:
+    resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
+    engines: {node: '>=10'}
+
+  supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
+  symbol-tree@3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+
+  synckit@0.11.11:
+    resolution: {integrity: sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+
+  tailwind-merge@3.3.1:
+    resolution: {integrity: sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==}
+
+  tailwindcss@4.1.14:
+    resolution: {integrity: sha512-b7pCxjGO98LnxVkKjaZSDeNuljC4ueKUddjENJOADtubtdo8llTaJy7HwBMeLNSSo2N5QIAgklslK1+Ir8r6CA==}
+
+  tapable@2.3.0:
+    resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
+    engines: {node: '>=6'}
+
+  tar@7.5.7:
+    resolution: {integrity: sha512-fov56fJiRuThVFXD6o6/Q354S7pnWMJIVlDBYijsTNx6jKSE4pvrDTs6lUnmGvNyfJwFQQwWy3owKz1ucIhveQ==}
+    engines: {node: '>=18'}
+
+  test-exclude@6.0.0:
+    resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
+    engines: {node: '>=8'}
+
+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+
+  tinyexec@1.0.1:
+    resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}
+
+  tinyglobby@0.2.15:
+    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
+    engines: {node: '>=12.0.0'}
+
+  tldts-core@6.1.86:
+    resolution: {integrity: sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==}
+
+  tldts-core@7.0.17:
+    resolution: {integrity: sha512-DieYoGrP78PWKsrXr8MZwtQ7GLCUeLxihtjC1jZsW1DnvSMdKPitJSe8OSYDM2u5H6g3kWJZpePqkp43TfLh0g==}
+
+  tldts@6.1.86:
+    resolution: {integrity: sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==}
+    hasBin: true
+
+  tldts@7.0.17:
+    resolution: {integrity: sha512-Y1KQBgDd/NUc+LfOtKS6mNsC9CCaH+m2P1RoIZy7RAPo3C3/t8X45+zgut31cRZtZ3xKPjfn3TkGTrctC2TQIQ==}
+    hasBin: true
+
+  tmpl@1.0.5:
+    resolution: {integrity: sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==}
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  toidentifier@1.0.1:
+    resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
+    engines: {node: '>=0.6'}
+
+  tough-cookie@5.1.2:
+    resolution: {integrity: sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==}
+    engines: {node: '>=16'}
+
+  tough-cookie@6.0.0:
+    resolution: {integrity: sha512-kXuRi1mtaKMrsLUxz3sQYvVl37B0Ns6MzfrtV5DvJceE9bPyspOqk9xxv7XbZWcfLWbFmm997vl83qUWVJA64w==}
+    engines: {node: '>=16'}
+
+  tr46@5.1.1:
+    resolution: {integrity: sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==}
+    engines: {node: '>=18'}
+
+  ts-api-utils@2.4.0:
+    resolution: {integrity: sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==}
+    engines: {node: '>=18.12'}
+    peerDependencies:
+      typescript: '>=4.8.4'
+
+  ts-morph@26.0.0:
+    resolution: {integrity: sha512-ztMO++owQnz8c/gIENcM9XfCEzgoGphTv+nKpYNM1bgsdOVC/jRZuEBf6N+mLLDNg68Kl+GgUZfOySaRiG1/Ug==}
+
+  ts-node@10.9.2:
+    resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
+    hasBin: true
+    peerDependencies:
+      '@swc/core': '>=1.2.50'
+      '@swc/wasm': '>=1.2.50'
+      '@types/node': '*'
+      typescript: '>=2.7'
+    peerDependenciesMeta:
+      '@swc/core':
+        optional: true
+      '@swc/wasm':
+        optional: true
+
+  tsconfig-paths@3.15.0:
+    resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
+
+  tsconfig-paths@4.2.0:
+    resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
+    engines: {node: '>=6'}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  tw-animate-css@1.4.0:
+    resolution: {integrity: sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==}
+
+  type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+
+  type-detect@4.0.8:
+    resolution: {integrity: sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==}
+    engines: {node: '>=4'}
+
+  type-fest@0.21.3:
+    resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
+    engines: {node: '>=10'}
+
+  type-fest@4.41.0:
+    resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
+    engines: {node: '>=16'}
+
+  type-is@2.0.1:
+    resolution: {integrity: sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==}
+    engines: {node: '>= 0.6'}
+
+  typed-array-buffer@1.0.3:
+    resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-byte-length@1.0.3:
+    resolution: {integrity: sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-byte-offset@1.0.4:
+    resolution: {integrity: sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-length@1.0.7:
+    resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
+    engines: {node: '>= 0.4'}
+
+  typescript-eslint@8.54.0:
+    resolution: {integrity: sha512-CKsJ+g53QpsNPqbzUsfKVgd3Lny4yKZ1pP4qN3jdMOg/sisIDLGyDMezycquXLE5JsEU0wp3dGNdzig0/fmSVQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  typescript@5.9.3:
+    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  unbox-primitive@1.1.0:
+    resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
+    engines: {node: '>= 0.4'}
+
+  undici-types@6.21.0:
+    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+
+  unicorn-magic@0.3.0:
+    resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
+    engines: {node: '>=18'}
+
+  universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
+
+  unpipe@1.0.0:
+    resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
+    engines: {node: '>= 0.8'}
+
+  unrs-resolver@1.11.1:
+    resolution: {integrity: sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==}
+
+  until-async@3.0.2:
+    resolution: {integrity: sha512-IiSk4HlzAMqTUseHHe3VhIGyuFmN90zMTpD3Z3y8jeQbzLIq500MVM7Jq2vUAnTKAFPJrqwkzr6PoTcPhGcOiw==}
+
+  update-browserslist-db@1.1.3:
+    resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
+  uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+
+  use-intl@4.7.0:
+    resolution: {integrity: sha512-jyd8nSErVRRsSlUa+SDobKHo9IiWs5fjcPl9VBUnzUyEQpVM5mwJCgw8eUiylhvBpLQzUGox1KN0XlRivSID9A==}
+    peerDependencies:
+      react: ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 || ^19.0.0
+
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  uuid@8.3.2:
+    resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
+    hasBin: true
+
+  v8-compile-cache-lib@3.0.1:
+    resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
+
+  v8-to-istanbul@9.3.0:
+    resolution: {integrity: sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA==}
+    engines: {node: '>=10.12.0'}
+
+  validate-npm-package-name@7.0.2:
+    resolution: {integrity: sha512-hVDIBwsRruT73PbK7uP5ebUt+ezEtCmzZz3F59BSr2F6OVFnJ/6h8liuvdLrQ88Xmnk6/+xGGuq+pG9WwTuy3A==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  vary@1.1.2:
+    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
+    engines: {node: '>= 0.8'}
+
+  w3c-xmlserializer@5.0.0:
+    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
+    engines: {node: '>=18'}
+
+  walker@1.0.8:
+    resolution: {integrity: sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==}
+
+  web-streams-polyfill@3.3.3:
+    resolution: {integrity: sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==}
+    engines: {node: '>= 8'}
+
+  webidl-conversions@7.0.0:
+    resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
+    engines: {node: '>=12'}
+
+  whatwg-encoding@3.1.1:
+    resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
+    engines: {node: '>=18'}
+    deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation
+
+  whatwg-mimetype@4.0.0:
+    resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
+    engines: {node: '>=18'}
+
+  whatwg-url@14.2.0:
+    resolution: {integrity: sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==}
+    engines: {node: '>=18'}
+
+  which-boxed-primitive@1.1.1:
+    resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
+    engines: {node: '>= 0.4'}
+
+  which-builtin-type@1.2.1:
+    resolution: {integrity: sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==}
+    engines: {node: '>= 0.4'}
+
+  which-collection@1.0.2:
+    resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
+    engines: {node: '>= 0.4'}
+
+  which-typed-array@1.1.19:
+    resolution: {integrity: sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==}
+    engines: {node: '>= 0.4'}
+
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
+  which@4.0.0:
+    resolution: {integrity: sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==}
+    engines: {node: ^16.13.0 || >=18.0.0}
+    hasBin: true
+
+  word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+
+  wrap-ansi@6.2.0:
+    resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
+    engines: {node: '>=8'}
+
+  wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+
+  wrap-ansi@8.1.0:
+    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
+    engines: {node: '>=12'}
+
+  wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+
+  write-file-atomic@5.0.1:
+    resolution: {integrity: sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
+  ws@8.18.3:
+    resolution: {integrity: sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
+  wsl-utils@0.3.1:
+    resolution: {integrity: sha512-g/eziiSUNBSsdDJtCLB8bdYEUMj4jR7AGeUo96p/3dTafgjHhpF4RiCFPiRILwjQoDXx5MqkBr4fwWtR3Ky4Wg==}
+    engines: {node: '>=20'}
+
+  xml-name-validator@5.0.0:
+    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
+    engines: {node: '>=18'}
+
+  xml@1.0.1:
+    resolution: {integrity: sha512-huCv9IH9Tcf95zuYCsQraZtWnJvBtLVE0QHMOs8bWyZAFZNDcYjsPq1nEx8jKA9y+Beo9v+7OBPRisQTjinQMw==}
+
+  xmlchars@2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+
+  y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+
+  yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
+  yallist@5.0.0:
+    resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
+    engines: {node: '>=18'}
+
+  yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+
+  yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
+    engines: {node: '>=12'}
+
+  yn@3.1.1:
+    resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
+    engines: {node: '>=6'}
+
+  yocto-queue@0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+
+  yoctocolors-cjs@2.1.3:
+    resolution: {integrity: sha512-U/PBtDf35ff0D8X8D0jfdzHYEPFxAI7jJlxZXwCSez5M3190m+QobIfh+sWDWSHMCWWJN2AWamkegn6vr6YBTw==}
+    engines: {node: '>=18'}
+
+  yoctocolors@2.1.2:
+    resolution: {integrity: sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==}
+    engines: {node: '>=18'}
+
+  zod-to-json-schema@3.24.6:
+    resolution: {integrity: sha512-h/z3PKvcTcTetyjl1fkj79MHNEjm+HpD6NXheWjzOekY7kV+lwDYnHw+ivHkijnCSMz1yJaWBD9vu/Fcmk+vEg==}
+    peerDependencies:
+      zod: ^3.24.1
+
+  zod-to-json-schema@3.25.1:
+    resolution: {integrity: sha512-pM/SU9d3YAggzi6MtR4h7ruuQlqKtad8e9S0fmxcMi+ueAK5Korys/aWcV9LIIHTVbj01NdzxcnXSN+O74ZIVA==}
+    peerDependencies:
+      zod: ^3.25 || ^4
+
+  zod-validation-error@4.0.2:
+    resolution: {integrity: sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      zod: ^3.25.0 || ^4.0.0
+
+  zod@3.25.76:
+    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+
+  zod@4.3.5:
+    resolution: {integrity: sha512-k7Nwx6vuWx1IJ9Bjuf4Zt1PEllcwe7cls3VNzm4CQ1/hgtFUK2bRNG3rvnpPUhFjmqJKAKtjV576KnUkHocg/g==}
+
+  zustand@5.0.10:
+    resolution: {integrity: sha512-U1AiltS1O9hSy3rul+Ub82ut2fqIAefiSuwECWt6jlMVUGejvf+5omLcRBSzqbRagSM3hQZbtzdeRc6QVScXTg==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      '@types/react': '>=18.0.0'
+      immer: '>=9.0.6'
+      react: '>=18.0.0'
+      use-sync-external-store: '>=1.2.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+      use-sync-external-store:
+        optional: true
+
+snapshots:
+
+  '@adobe/css-tools@4.4.4': {}
+
+  '@alloc/quick-lru@5.2.0': {}
+
+  '@antfu/ni@25.0.0':
+    dependencies:
+      ansis: 4.2.0
+      fzf: 0.5.2
+      package-manager-detector: 1.4.1
+      tinyexec: 1.0.1
+
+  '@asamuzakjp/css-color@3.2.0':
+    dependencies:
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      lru-cache: 10.4.3
+
+  '@babel/code-frame@7.27.1':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.27.1
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/code-frame@7.28.6':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.28.5
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/compat-data@7.28.4': {}
+
+  '@babel/core@7.28.4':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/generator': 7.28.3
+      '@babel/helper-compilation-targets': 7.27.2
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.4)
+      '@babel/helpers': 7.28.4
+      '@babel/parser': 7.28.4
+      '@babel/template': 7.27.2
+      '@babel/traverse': 7.28.4
+      '@babel/types': 7.28.4
+      '@jridgewell/remapping': 2.3.5
+      convert-source-map: 2.0.0
+      debug: 4.4.3
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/generator@7.28.3':
+    dependencies:
+      '@babel/parser': 7.28.4
+      '@babel/types': 7.28.4
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
+
+  '@babel/helper-annotate-as-pure@7.27.3':
+    dependencies:
+      '@babel/types': 7.28.4
+
+  '@babel/helper-compilation-targets@7.27.2':
+    dependencies:
+      '@babel/compat-data': 7.28.4
+      '@babel/helper-validator-option': 7.27.1
+      browserslist: 4.26.3
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-create-class-features-plugin@7.28.3(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-member-expression-to-functions': 7.27.1
+      '@babel/helper-optimise-call-expression': 7.27.1
+      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.4)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/traverse': 7.28.4
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-globals@7.28.0': {}
+
+  '@babel/helper-member-expression-to-functions@7.27.1':
+    dependencies:
+      '@babel/traverse': 7.28.4
+      '@babel/types': 7.28.4
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-imports@7.27.1':
+    dependencies:
+      '@babel/traverse': 7.28.4
+      '@babel/types': 7.28.4
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.28.3(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/helper-validator-identifier': 7.27.1
+      '@babel/traverse': 7.28.4
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-optimise-call-expression@7.27.1':
+    dependencies:
+      '@babel/types': 7.28.4
+
+  '@babel/helper-plugin-utils@7.27.1': {}
+
+  '@babel/helper-replace-supers@7.27.1(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-member-expression-to-functions': 7.27.1
+      '@babel/helper-optimise-call-expression': 7.27.1
+      '@babel/traverse': 7.28.4
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
+    dependencies:
+      '@babel/traverse': 7.28.4
+      '@babel/types': 7.28.4
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-string-parser@7.27.1': {}
+
+  '@babel/helper-validator-identifier@7.27.1': {}
+
+  '@babel/helper-validator-identifier@7.28.5': {}
+
+  '@babel/helper-validator-option@7.27.1': {}
+
+  '@babel/helpers@7.28.4':
+    dependencies:
+      '@babel/template': 7.27.2
+      '@babel/types': 7.28.4
+
+  '@babel/parser@7.28.4':
+    dependencies:
+      '@babel/types': 7.28.4
+
+  '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-import-attributes@7.27.1(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-jsx@7.27.1(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-typescript@7.27.1(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-modules-commonjs@7.27.1(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.4)
+      '@babel/helper-plugin-utils': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-typescript@7.28.0(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-create-class-features-plugin': 7.28.3(@babel/core@7.28.4)
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.4)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/preset-typescript@7.27.1(@babel/core@7.28.4)':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-validator-option': 7.27.1
+      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.4)
+      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.4)
+      '@babel/plugin-transform-typescript': 7.28.0(@babel/core@7.28.4)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/runtime@7.28.4': {}
+
+  '@babel/runtime@7.28.6': {}
+
+  '@babel/template@7.27.2':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/parser': 7.28.4
+      '@babel/types': 7.28.4
+
+  '@babel/traverse@7.28.4':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/generator': 7.28.3
+      '@babel/helper-globals': 7.28.0
+      '@babel/parser': 7.28.4
+      '@babel/template': 7.27.2
+      '@babel/types': 7.28.4
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/types@7.28.4':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.27.1
+
+  '@bcoe/v8-coverage@0.2.3': {}
+
+  '@cspotcode/source-map-support@0.8.1':
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.9
+
+  '@csstools/color-helpers@5.1.0': {}
+
+  '@csstools/css-calc@2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-color-parser@3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/color-helpers': 5.1.0
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-tokenizer@3.0.4': {}
+
+  '@dotenvx/dotenvx@1.51.0':
+    dependencies:
+      commander: 11.1.0
+      dotenv: 17.2.3
+      eciesjs: 0.4.16
+      execa: 5.1.1
+      fdir: 6.5.0(picomatch@4.0.3)
+      ignore: 5.3.2
+      object-treeify: 1.1.33
+      picomatch: 4.0.3
+      which: 4.0.0
+
+  '@ecies/ciphers@0.2.4(@noble/ciphers@1.3.0)':
+    dependencies:
+      '@noble/ciphers': 1.3.0
+
+  '@emnapi/core@1.5.0':
+    dependencies:
+      '@emnapi/wasi-threads': 1.1.0
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.8.1':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/wasi-threads@1.1.0':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@eslint-community/eslint-utils@4.9.1(eslint@9.38.0(jiti@2.6.1))':
+    dependencies:
+      eslint: 9.38.0(jiti@2.6.1)
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/regexpp@4.12.2': {}
+
+  '@eslint/config-array@0.21.1':
+    dependencies:
+      '@eslint/object-schema': 2.1.7
+      debug: 4.4.3
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/config-helpers@0.4.1':
+    dependencies:
+      '@eslint/core': 0.16.0
+
+  '@eslint/core@0.16.0':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
+  '@eslint/eslintrc@3.3.1':
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.4.3
+      espree: 10.4.0
+      globals: 14.0.0
+      ignore: 5.3.2
+      import-fresh: 3.3.1
+      js-yaml: 4.1.1
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/js@9.38.0': {}
+
+  '@eslint/object-schema@2.1.7': {}
+
+  '@eslint/plugin-kit@0.4.0':
+    dependencies:
+      '@eslint/core': 0.16.0
+      levn: 0.4.1
+
+  '@formatjs/ecma402-abstract@2.3.6':
+    dependencies:
+      '@formatjs/fast-memoize': 2.2.7
+      '@formatjs/intl-localematcher': 0.6.2
+      decimal.js: 10.6.0
+      tslib: 2.8.1
+
+  '@formatjs/fast-memoize@2.2.7':
+    dependencies:
+      tslib: 2.8.1
+
+  '@formatjs/icu-messageformat-parser@2.11.4':
+    dependencies:
+      '@formatjs/ecma402-abstract': 2.3.6
+      '@formatjs/icu-skeleton-parser': 1.8.16
+      tslib: 2.8.1
+
+  '@formatjs/icu-skeleton-parser@1.8.16':
+    dependencies:
+      '@formatjs/ecma402-abstract': 2.3.6
+      tslib: 2.8.1
+
+  '@formatjs/intl-localematcher@0.5.10':
+    dependencies:
+      tslib: 2.8.1
+
+  '@formatjs/intl-localematcher@0.6.2':
+    dependencies:
+      tslib: 2.8.1
+
+  '@hono/node-server@1.19.9(hono@4.11.7)':
+    dependencies:
+      hono: 4.11.7
+
+  '@hookform/resolvers@5.2.2(react-hook-form@7.71.1(react@19.2.4))':
+    dependencies:
+      '@standard-schema/utils': 0.3.0
+      react-hook-form: 7.71.1(react@19.2.4)
+
+  '@humanfs/core@0.19.1': {}
+
+  '@humanfs/node@0.16.7':
+    dependencies:
+      '@humanfs/core': 0.19.1
+      '@humanwhocodes/retry': 0.4.3
+
+  '@humanwhocodes/module-importer@1.0.1': {}
+
+  '@humanwhocodes/retry@0.4.3': {}
+
+  '@img/colour@1.0.0':
+    optional: true
+
+  '@img/sharp-darwin-arm64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-arm64': 1.2.4
+    optional: true
+
+  '@img/sharp-darwin-x64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-x64': 1.2.4
+    optional: true
+
+  '@img/sharp-libvips-darwin-arm64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-darwin-x64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-ppc64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-riscv64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-s390x@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-x64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-x64@1.2.4':
+    optional: true
+
+  '@img/sharp-linux-arm64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm64': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-arm@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-ppc64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-ppc64': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-riscv64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-riscv64': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-s390x@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-s390x': 1.2.4
+    optional: true
+
+  '@img/sharp-linux-x64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-x64': 1.2.4
+    optional: true
+
+  '@img/sharp-linuxmusl-arm64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.4
+    optional: true
+
+  '@img/sharp-linuxmusl-x64@0.34.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.4
+    optional: true
+
+  '@img/sharp-wasm32@0.34.5':
+    dependencies:
+      '@emnapi/runtime': 1.8.1
+    optional: true
+
+  '@img/sharp-win32-arm64@0.34.5':
+    optional: true
+
+  '@img/sharp-win32-ia32@0.34.5':
+    optional: true
+
+  '@img/sharp-win32-x64@0.34.5':
+    optional: true
+
+  '@inquirer/ansi@1.0.1': {}
+
+  '@inquirer/confirm@5.1.19(@types/node@20.19.22)':
+    dependencies:
+      '@inquirer/core': 10.3.0(@types/node@20.19.22)
+      '@inquirer/type': 3.0.9(@types/node@20.19.22)
+    optionalDependencies:
+      '@types/node': 20.19.22
+
+  '@inquirer/core@10.3.0(@types/node@20.19.22)':
+    dependencies:
+      '@inquirer/ansi': 1.0.1
+      '@inquirer/figures': 1.0.14
+      '@inquirer/type': 3.0.9(@types/node@20.19.22)
+      cli-width: 4.1.0
+      mute-stream: 2.0.0
+      signal-exit: 4.1.0
+      wrap-ansi: 6.2.0
+      yoctocolors-cjs: 2.1.3
+    optionalDependencies:
+      '@types/node': 20.19.22
+
+  '@inquirer/figures@1.0.14': {}
+
+  '@inquirer/type@3.0.9(@types/node@20.19.22)':
+    optionalDependencies:
+      '@types/node': 20.19.22
+
+  '@isaacs/balanced-match@4.0.1': {}
+
+  '@isaacs/brace-expansion@5.0.0':
+    dependencies:
+      '@isaacs/balanced-match': 4.0.1
+
+  '@isaacs/cliui@8.0.2':
+    dependencies:
+      string-width: 5.1.2
+      string-width-cjs: string-width@4.2.3
+      strip-ansi: 7.1.2
+      strip-ansi-cjs: strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: wrap-ansi@7.0.0
+
+  '@isaacs/fs-minipass@4.0.1':
+    dependencies:
+      minipass: 7.1.2
+
+  '@istanbuljs/load-nyc-config@1.1.0':
+    dependencies:
+      camelcase: 5.3.1
+      find-up: 4.1.0
+      get-package-type: 0.1.0
+      js-yaml: 3.14.2
+      resolve-from: 5.0.0
+
+  '@istanbuljs/schema@0.1.3': {}
+
+  '@jest/console@30.2.0':
+    dependencies:
+      '@jest/types': 30.2.0
+      '@types/node': 20.19.22
+      chalk: 4.1.2
+      jest-message-util: 30.2.0
+      jest-util: 30.2.0
+      slash: 3.0.0
+
+  '@jest/core@30.2.0(ts-node@10.9.2(@swc/core@1.15.8)(@types/node@20.19.22)(typescript@5.9.3))':
+    dependencies:
+      '@jest/console': 30.2.0
+      '@jest/pattern': 30.0.1
+      '@jest/reporters': 30.2.0
+      '@jest/test-result': 30.2.0
+      '@jest/transform': 30.2.0
+      '@jest/types': 30.2.0
+      '@types/node': 20.19.22
+      ansi-escapes: 4.3.2
+      chalk: 4.1.2
+      ci-info: 4.3.1
+      exit-x: 0.2.2
+      graceful-fs: 4.2.11
+      jest-changed-files: 30.2.0
+      jest-config: 30.2.0(@types/node@20.19.22)(ts-node@10.9.2(@swc/core@1.15.8)(@types/node@20.19.22)(typescript@5.9.3))
+      jest-haste-map: 30.2.0
+      jest-message-util: 30.2.0
+      jest-regex-util: 30.0.1
+      jest-resolve: 30.2.0
+      jest-resolve-dependencies: 30.2.0
+      jest-runner: 30.2.0
+      jest-runtime: 30.2.0
+      jest-snapshot: 30.2.0
+      jest-util: 30.2.0
+      jest-validate: 30.2.0
+      jest-watcher: 30.2.0
+      micromatch: 4.0.8
+      pretty-format: 30.2.0
+      slash: 3.0.0
+    transitivePeerDependencies:
+      - babel-plugin-macros
+      - esbuild-register
+      - supports-color
+      - ts-node
+
+  '@jest/diff-sequences@30.0.1': {}
+
+  '@jest/environment-jsdom-abstract@30.2.0(jsdom@26.1.0)':
+    dependencies:
+      '@jest/environment': 30.2.0
+      '@jest/fake-timers': 30.2.0
+      '@jest/types': 30.2.0
+      '@types/jsdom': 21.1.7
+      '@types/node': 20.19.22
+      jest-mock: 30.2.0
+      jest-util: 30.2.0
+      jsdom: 26.1.0
+
+  '@jest/environment@30.2.0':
+    dependencies:
+      '@jest/fake-timers': 30.2.0
+      '@jest/types': 30.2.0
+      '@types/node': 20.19.22
+      jest-mock: 30.2.0
+
+  '@jest/expect-utils@30.2.0':
+    dependencies:
+      '@jest/get-type': 30.1.0
+
+  '@jest/expect@30.2.0':
+    dependencies:
+      expect: 30.2.0
+      jest-snapshot: 30.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@jest/fake-timers@30.2.0':
+    dependencies:
+      '@jest/types': 30.2.0
+      '@sinonjs/fake-timers': 13.0.5
+      '@types/node': 20.19.22
+      jest-message-util: 30.2.0
+      jest-mock: 30.2.0
+      jest-util: 30.2.0
+
+  '@jest/get-type@30.1.0': {}
+
+  '@jest/globals@30.2.0':
+    dependencies:
+      '@jest/environment': 30.2.0
+      '@jest/expect': 30.2.0
+      '@jest/types': 30.2.0
+      jest-mock: 30.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@jest/pattern@30.0.1':
+    dependencies:
+      '@types/node': 20.19.22
+      jest-regex-util: 30.0.1
+
+  '@jest/reporters@30.2.0':
+    dependencies:
+      '@bcoe/v8-coverage': 0.2.3
+      '@jest/console': 30.2.0
+      '@jest/test-result': 30.2.0
+      '@jest/transform': 30.2.0
+      '@jest/types': 30.2.0
+      '@jridgewell/trace-mapping': 0.3.31
+      '@types/node': 20.19.22
+      chalk: 4.1.2
+      collect-v8-coverage: 1.0.3
+      exit-x: 0.2.2
+      glob: 10.4.5
+      graceful-fs: 4.2.11
+      istanbul-lib-coverage: 3.2.2
+      istanbul-lib-instrument: 6.0.3
+      istanbul-lib-report: 3.0.1
+      istanbul-lib-source-maps: 5.0.6
+      istanbul-reports: 3.2.0
+      jest-message-util: 30.2.0
+      jest-util: 30.2.0
+      jest-worker: 30.2.0
+      slash: 3.0.0
+      string-length: 4.0.2
+      v8-to-istanbul: 9.3.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@jest/schemas@30.0.5':
+    dependencies:
+      '@sinclair/typebox': 0.34.41
+
+  '@jest/snapshot-utils@30.2.0':
+    dependencies:
+      '@jest/types': 30.2.0
+      chalk: 4.1.2
+      graceful-fs: 4.2.11
+      natural-compare: 1.4.0
+
+  '@jest/source-map@30.0.1':
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      callsites: 3.1.0
+      graceful-fs: 4.2.11
+
+  '@jest/test-result@30.2.0':
+    dependencies:
+      '@jest/console': 30.2.0
+      '@jest/types': 30.2.0
+      '@types/istanbul-lib-coverage': 2.0.6
+      collect-v8-coverage: 1.0.3
+
+  '@jest/test-sequencer@30.2.0':
+    dependencies:
+      '@jest/test-result': 30.2.0
+      graceful-fs: 4.2.11
+      jest-haste-map: 30.2.0
+      slash: 3.0.0
+
+  '@jest/transform@30.2.0':
+    dependencies:
+      '@babel/core': 7.28.4
+      '@jest/types': 30.2.0
+      '@jridgewell/trace-mapping': 0.3.31
+      babel-plugin-istanbul: 7.0.1
+      chalk: 4.1.2
+      convert-source-map: 2.0.0
+      fast-json-stable-stringify: 2.1.0
+      graceful-fs: 4.2.11
+      jest-haste-map: 30.2.0
+      jest-regex-util: 30.0.1
+      jest-util: 30.2.0
+      micromatch: 4.0.8
+      pirates: 4.0.7
+      slash: 3.0.0
+      write-file-atomic: 5.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@jest/types@30.2.0':
+    dependencies:
+      '@jest/pattern': 30.0.1
+      '@jest/schemas': 30.0.5
+      '@types/istanbul-lib-coverage': 2.0.6
+      '@types/istanbul-reports': 3.0.4
+      '@types/node': 20.19.22
+      '@types/yargs': 17.0.33
+      chalk: 4.1.2
+
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@jridgewell/trace-mapping@0.3.9':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@modelcontextprotocol/sdk@1.25.3(hono@4.11.7)(zod@3.25.76)':
+    dependencies:
+      '@hono/node-server': 1.19.9(hono@4.11.7)
+      ajv: 8.17.1
+      ajv-formats: 3.0.1(ajv@8.17.1)
+      content-type: 1.0.5
+      cors: 2.8.5
+      cross-spawn: 7.0.6
+      eventsource: 3.0.7
+      eventsource-parser: 3.0.6
+      express: 5.1.0
+      express-rate-limit: 7.5.1(express@5.1.0)
+      jose: 6.1.3
+      json-schema-typed: 8.0.2
+      pkce-challenge: 5.0.0
+      raw-body: 3.0.1
+      zod: 3.25.76
+      zod-to-json-schema: 3.25.1(zod@3.25.76)
+    transitivePeerDependencies:
+      - hono
+      - supports-color
+
+  '@mswjs/interceptors@0.39.8':
+    dependencies:
+      '@open-draft/deferred-promise': 2.2.0
+      '@open-draft/logger': 0.3.0
+      '@open-draft/until': 2.1.0
+      is-node-process: 1.2.0
+      outvariant: 1.4.3
+      strict-event-emitter: 0.5.1
+
+  '@napi-rs/wasm-runtime@0.2.12':
+    dependencies:
+      '@emnapi/core': 1.5.0
+      '@emnapi/runtime': 1.8.1
+      '@tybys/wasm-util': 0.10.1
+    optional: true
+
+  '@next/env@16.1.6': {}
+
+  '@next/eslint-plugin-next@16.1.5':
+    dependencies:
+      fast-glob: 3.3.1
+
+  '@next/swc-darwin-arm64@16.1.6':
+    optional: true
+
+  '@next/swc-darwin-x64@16.1.6':
+    optional: true
+
+  '@next/swc-linux-arm64-gnu@16.1.6':
+    optional: true
+
+  '@next/swc-linux-arm64-musl@16.1.6':
+    optional: true
+
+  '@next/swc-linux-x64-gnu@16.1.6':
+    optional: true
+
+  '@next/swc-linux-x64-musl@16.1.6':
+    optional: true
+
+  '@next/swc-win32-arm64-msvc@16.1.6':
+    optional: true
+
+  '@next/swc-win32-x64-msvc@16.1.6':
+    optional: true
+
+  '@noble/ciphers@1.3.0': {}
+
+  '@noble/curves@1.9.7':
+    dependencies:
+      '@noble/hashes': 1.8.0
+
+  '@noble/hashes@1.8.0': {}
+
+  '@nodelib/fs.scandir@2.1.5':
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.stat@2.0.5': {}
+
+  '@nodelib/fs.walk@1.2.8':
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.19.1
+
+  '@nolyfill/is-core-module@1.0.39': {}
+
+  '@open-draft/deferred-promise@2.2.0': {}
+
+  '@open-draft/logger@0.3.0':
+    dependencies:
+      is-node-process: 1.2.0
+      outvariant: 1.4.3
+
+  '@open-draft/until@2.1.0': {}
+
+  '@parcel/watcher-android-arm64@2.5.4':
+    optional: true
+
+  '@parcel/watcher-darwin-arm64@2.5.4':
+    optional: true
+
+  '@parcel/watcher-darwin-x64@2.5.4':
+    optional: true
+
+  '@parcel/watcher-freebsd-x64@2.5.4':
+    optional: true
+
+  '@parcel/watcher-linux-arm-glibc@2.5.4':
+    optional: true
+
+  '@parcel/watcher-linux-arm-musl@2.5.4':
+    optional: true
+
+  '@parcel/watcher-linux-arm64-glibc@2.5.4':
+    optional: true
+
+  '@parcel/watcher-linux-arm64-musl@2.5.4':
+    optional: true
+
+  '@parcel/watcher-linux-x64-glibc@2.5.4':
+    optional: true
+
+  '@parcel/watcher-linux-x64-musl@2.5.4':
+    optional: true
+
+  '@parcel/watcher-win32-arm64@2.5.4':
+    optional: true
+
+  '@parcel/watcher-win32-ia32@2.5.4':
+    optional: true
+
+  '@parcel/watcher-win32-x64@2.5.4':
+    optional: true
+
+  '@parcel/watcher@2.5.4':
+    dependencies:
+      detect-libc: 2.1.2
+      is-glob: 4.0.3
+      node-addon-api: 7.1.1
+      picomatch: 4.0.3
+    optionalDependencies:
+      '@parcel/watcher-android-arm64': 2.5.4
+      '@parcel/watcher-darwin-arm64': 2.5.4
+      '@parcel/watcher-darwin-x64': 2.5.4
+      '@parcel/watcher-freebsd-x64': 2.5.4
+      '@parcel/watcher-linux-arm-glibc': 2.5.4
+      '@parcel/watcher-linux-arm-musl': 2.5.4
+      '@parcel/watcher-linux-arm64-glibc': 2.5.4
+      '@parcel/watcher-linux-arm64-musl': 2.5.4
+      '@parcel/watcher-linux-x64-glibc': 2.5.4
+      '@parcel/watcher-linux-x64-musl': 2.5.4
+      '@parcel/watcher-win32-arm64': 2.5.4
+      '@parcel/watcher-win32-ia32': 2.5.4
+      '@parcel/watcher-win32-x64': 2.5.4
+
+  '@pkgjs/parseargs@0.11.0':
+    optional: true
+
+  '@pkgr/core@0.2.9': {}
+
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.2)(react@19.2.4)':
+    dependencies:
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.2
+
+  '@radix-ui/react-label@2.1.8(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
+  '@radix-ui/react-primitive@2.1.4(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.4(@types/react@19.2.2)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
+  '@radix-ui/react-separator@1.1.8(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
+  '@radix-ui/react-slot@1.2.4(@types/react@19.2.2)(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.4)
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.2
+
+  '@rtsao/scc@1.1.0': {}
+
+  '@schummar/icu-type-parser@1.21.5': {}
+
+  '@sec-ant/readable-stream@0.4.1': {}
+
+  '@sinclair/typebox@0.34.41': {}
+
+  '@sindresorhus/merge-streams@4.0.0': {}
+
+  '@sinonjs/commons@3.0.1':
+    dependencies:
+      type-detect: 4.0.8
+
+  '@sinonjs/fake-timers@13.0.5':
+    dependencies:
+      '@sinonjs/commons': 3.0.1
+
+  '@standard-schema/utils@0.3.0': {}
+
+  '@swc/core-darwin-arm64@1.15.8':
+    optional: true
+
+  '@swc/core-darwin-x64@1.15.8':
+    optional: true
+
+  '@swc/core-linux-arm-gnueabihf@1.15.8':
+    optional: true
+
+  '@swc/core-linux-arm64-gnu@1.15.8':
+    optional: true
+
+  '@swc/core-linux-arm64-musl@1.15.8':
+    optional: true
+
+  '@swc/core-linux-x64-gnu@1.15.8':
+    optional: true
+
+  '@swc/core-linux-x64-musl@1.15.8':
+    optional: true
+
+  '@swc/core-win32-arm64-msvc@1.15.8':
+    optional: true
+
+  '@swc/core-win32-ia32-msvc@1.15.8':
+    optional: true
+
+  '@swc/core-win32-x64-msvc@1.15.8':
+    optional: true
+
+  '@swc/core@1.15.8':
+    dependencies:
+      '@swc/counter': 0.1.3
+      '@swc/types': 0.1.25
+    optionalDependencies:
+      '@swc/core-darwin-arm64': 1.15.8
+      '@swc/core-darwin-x64': 1.15.8
+      '@swc/core-linux-arm-gnueabihf': 1.15.8
+      '@swc/core-linux-arm64-gnu': 1.15.8
+      '@swc/core-linux-arm64-musl': 1.15.8
+      '@swc/core-linux-x64-gnu': 1.15.8
+      '@swc/core-linux-x64-musl': 1.15.8
+      '@swc/core-win32-arm64-msvc': 1.15.8
+      '@swc/core-win32-ia32-msvc': 1.15.8
+      '@swc/core-win32-x64-msvc': 1.15.8
+
+  '@swc/counter@0.1.3': {}
+
+  '@swc/helpers@0.5.15':
+    dependencies:
+      tslib: 2.8.1
+
+  '@swc/types@0.1.25':
+    dependencies:
+      '@swc/counter': 0.1.3
+
+  '@tailwindcss/node@4.1.14':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.18.3
+      jiti: 2.6.1
+      lightningcss: 1.30.1
+      magic-string: 0.30.19
+      source-map-js: 1.2.1
+      tailwindcss: 4.1.14
+
+  '@tailwindcss/oxide-android-arm64@4.1.14':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.14':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.1.14':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.14':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.14':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.14':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.14':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.14':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.14':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.14':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.14':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.14':
+    optional: true
+
+  '@tailwindcss/oxide@4.1.14':
+    dependencies:
+      detect-libc: 2.1.2
+      tar: 7.5.7
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.1.14
+      '@tailwindcss/oxide-darwin-arm64': 4.1.14
+      '@tailwindcss/oxide-darwin-x64': 4.1.14
+      '@tailwindcss/oxide-freebsd-x64': 4.1.14
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.14
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.14
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.14
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.14
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.14
+      '@tailwindcss/oxide-wasm32-wasi': 4.1.14
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.14
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.14
+
+  '@tailwindcss/postcss@4.1.14':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.1.14
+      '@tailwindcss/oxide': 4.1.14
+      postcss: 8.5.6
+      tailwindcss: 4.1.14
+
+  '@tanstack/query-core@5.90.18': {}
+
+  '@tanstack/query-devtools@5.92.0': {}
+
+  '@tanstack/react-query-devtools@5.91.2(@tanstack/react-query@5.90.18(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@tanstack/query-devtools': 5.92.0
+      '@tanstack/react-query': 5.90.18(react@19.2.4)
+      react: 19.2.4
+
+  '@tanstack/react-query@5.90.18(react@19.2.4)':
+    dependencies:
+      '@tanstack/query-core': 5.90.18
+      react: 19.2.4
+
+  '@testing-library/dom@10.4.1':
+    dependencies:
+      '@babel/code-frame': 7.28.6
+      '@babel/runtime': 7.28.6
+      '@types/aria-query': 5.0.4
+      aria-query: 5.3.0
+      dom-accessibility-api: 0.5.16
+      lz-string: 1.5.0
+      picocolors: 1.1.1
+      pretty-format: 27.5.1
+
+  '@testing-library/jest-dom@6.9.1':
+    dependencies:
+      '@adobe/css-tools': 4.4.4
+      aria-query: 5.3.2
+      css.escape: 1.5.1
+      dom-accessibility-api: 0.6.3
+      picocolors: 1.1.1
+      redent: 3.0.0
+
+  '@testing-library/react@16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@testing-library/dom': 10.4.1
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
+  '@ts-morph/common@0.27.0':
+    dependencies:
+      fast-glob: 3.3.3
+      minimatch: 10.0.3
+      path-browserify: 1.0.1
+
+  '@tsconfig/node10@1.0.11': {}
+
+  '@tsconfig/node12@1.0.11': {}
+
+  '@tsconfig/node14@1.0.3': {}
+
+  '@tsconfig/node16@1.0.4': {}
+
+  '@tybys/wasm-util@0.10.1':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@types/aria-query@5.0.4': {}
+
+  '@types/babel__core@7.20.5':
+    dependencies:
+      '@babel/parser': 7.28.4
+      '@babel/types': 7.28.4
+      '@types/babel__generator': 7.27.0
+      '@types/babel__template': 7.4.4
+      '@types/babel__traverse': 7.28.0
+
+  '@types/babel__generator@7.27.0':
+    dependencies:
+      '@babel/types': 7.28.4
+
+  '@types/babel__template@7.4.4':
+    dependencies:
+      '@babel/parser': 7.28.4
+      '@babel/types': 7.28.4
+
+  '@types/babel__traverse@7.28.0':
+    dependencies:
+      '@babel/types': 7.28.4
+
+  '@types/estree@1.0.8': {}
+
+  '@types/istanbul-lib-coverage@2.0.6': {}
+
+  '@types/istanbul-lib-report@3.0.3':
+    dependencies:
+      '@types/istanbul-lib-coverage': 2.0.6
+
+  '@types/istanbul-reports@3.0.4':
+    dependencies:
+      '@types/istanbul-lib-report': 3.0.3
+
+  '@types/jest@30.0.0':
+    dependencies:
+      expect: 30.2.0
+      pretty-format: 30.2.0
+
+  '@types/jsdom@21.1.7':
+    dependencies:
+      '@types/node': 20.19.22
+      '@types/tough-cookie': 4.0.5
+      parse5: 7.3.0
+
+  '@types/json-schema@7.0.15': {}
+
+  '@types/json5@0.0.29': {}
+
+  '@types/node@20.19.22':
+    dependencies:
+      undici-types: 6.21.0
+
+  '@types/react-dom@19.2.2(@types/react@19.2.2)':
+    dependencies:
+      '@types/react': 19.2.2
+
+  '@types/react@19.2.2':
+    dependencies:
+      csstype: 3.1.3
+
+  '@types/stack-utils@2.0.3': {}
+
+  '@types/statuses@2.0.6': {}
+
+  '@types/tough-cookie@4.0.5': {}
+
+  '@types/validate-npm-package-name@4.0.2': {}
+
+  '@types/yargs-parser@21.0.3': {}
+
+  '@types/yargs@17.0.33':
+    dependencies:
+      '@types/yargs-parser': 21.0.3
+
+  '@typescript-eslint/eslint-plugin@8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 8.54.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.54.0
+      '@typescript-eslint/type-utils': 8.54.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.54.0
+      eslint: 9.38.0(jiti@2.6.1)
+      ignore: 7.0.5
+      natural-compare: 1.4.0
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/parser@8.54.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.54.0
+      '@typescript-eslint/types': 8.54.0
+      '@typescript-eslint/typescript-estree': 8.54.0(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.54.0
+      debug: 4.4.3
+      eslint: 9.38.0(jiti@2.6.1)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/project-service@8.54.0(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/tsconfig-utils': 8.54.0(typescript@5.9.3)
+      '@typescript-eslint/types': 8.54.0
+      debug: 4.4.3
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/scope-manager@8.54.0':
+    dependencies:
+      '@typescript-eslint/types': 8.54.0
+      '@typescript-eslint/visitor-keys': 8.54.0
+
+  '@typescript-eslint/tsconfig-utils@8.54.0(typescript@5.9.3)':
+    dependencies:
+      typescript: 5.9.3
+
+  '@typescript-eslint/type-utils@8.54.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.54.0
+      '@typescript-eslint/typescript-estree': 8.54.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      debug: 4.4.3
+      eslint: 9.38.0(jiti@2.6.1)
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/types@8.54.0': {}
+
+  '@typescript-eslint/typescript-estree@8.54.0(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/project-service': 8.54.0(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.54.0(typescript@5.9.3)
+      '@typescript-eslint/types': 8.54.0
+      '@typescript-eslint/visitor-keys': 8.54.0
+      debug: 4.4.3
+      minimatch: 9.0.5
+      semver: 7.7.3
+      tinyglobby: 0.2.15
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/utils@8.54.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.38.0(jiti@2.6.1))
+      '@typescript-eslint/scope-manager': 8.54.0
+      '@typescript-eslint/types': 8.54.0
+      '@typescript-eslint/typescript-estree': 8.54.0(typescript@5.9.3)
+      eslint: 9.38.0(jiti@2.6.1)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/visitor-keys@8.54.0':
+    dependencies:
+      '@typescript-eslint/types': 8.54.0
+      eslint-visitor-keys: 4.2.1
+
+  '@ungap/structured-clone@1.3.0': {}
+
+  '@unrs/resolver-binding-android-arm-eabi@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-android-arm64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-darwin-arm64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-darwin-x64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-freebsd-x64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm-musleabihf@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-x64-musl@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-wasm32-wasi@1.11.1':
+    dependencies:
+      '@napi-rs/wasm-runtime': 0.2.12
+    optional: true
+
+  '@unrs/resolver-binding-win32-arm64-msvc@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-win32-ia32-msvc@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
+    optional: true
+
+  accepts@2.0.0:
+    dependencies:
+      mime-types: 3.0.1
+      negotiator: 1.0.0
+
+  acorn-jsx@5.3.2(acorn@8.15.0):
+    dependencies:
+      acorn: 8.15.0
+
+  acorn-walk@8.3.4:
+    dependencies:
+      acorn: 8.15.0
+
+  acorn@8.15.0: {}
+
+  agent-base@7.1.4: {}
+
+  ajv-formats@3.0.1(ajv@8.17.1):
+    optionalDependencies:
+      ajv: 8.17.1
+
+  ajv@6.12.6:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+
+  ajv@8.17.1:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-uri: 3.1.0
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+
+  ansi-escapes@4.3.2:
+    dependencies:
+      type-fest: 0.21.3
+
+  ansi-regex@5.0.1: {}
+
+  ansi-regex@6.2.2: {}
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
+  ansi-styles@5.2.0: {}
+
+  ansi-styles@6.2.3: {}
+
+  ansis@4.2.0: {}
+
+  anymatch@3.1.3:
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+
+  arg@4.1.3: {}
+
+  argparse@1.0.10:
+    dependencies:
+      sprintf-js: 1.0.3
+
+  argparse@2.0.1: {}
+
+  aria-query@5.3.0:
+    dependencies:
+      dequal: 2.0.3
+
+  aria-query@5.3.2: {}
+
+  array-buffer-byte-length@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      is-array-buffer: 3.0.5
+
+  array-includes@3.1.9:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      is-string: 1.1.1
+      math-intrinsics: 1.1.0
+
+  array.prototype.findlast@1.2.5:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      es-shim-unscopables: 1.1.0
+
+  array.prototype.findlastindex@1.2.6:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      es-shim-unscopables: 1.1.0
+
+  array.prototype.flat@1.3.3:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-shim-unscopables: 1.1.0
+
+  array.prototype.flatmap@1.3.3:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-shim-unscopables: 1.1.0
+
+  array.prototype.tosorted@1.1.4:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-shim-unscopables: 1.1.0
+
+  arraybuffer.prototype.slice@1.0.4:
+    dependencies:
+      array-buffer-byte-length: 1.0.2
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      is-array-buffer: 3.0.5
+
+  ast-types-flow@0.0.8: {}
+
+  ast-types@0.16.1:
+    dependencies:
+      tslib: 2.8.1
+
+  async-function@1.0.0: {}
+
+  available-typed-arrays@1.0.7:
+    dependencies:
+      possible-typed-array-names: 1.1.0
+
+  axe-core@4.11.0: {}
+
+  axobject-query@4.1.0: {}
+
+  babel-jest@30.2.0(@babel/core@7.28.4):
+    dependencies:
+      '@babel/core': 7.28.4
+      '@jest/transform': 30.2.0
+      '@types/babel__core': 7.20.5
+      babel-plugin-istanbul: 7.0.1
+      babel-preset-jest: 30.2.0(@babel/core@7.28.4)
+      chalk: 4.1.2
+      graceful-fs: 4.2.11
+      slash: 3.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  babel-plugin-istanbul@7.0.1:
+    dependencies:
+      '@babel/helper-plugin-utils': 7.27.1
+      '@istanbuljs/load-nyc-config': 1.1.0
+      '@istanbuljs/schema': 0.1.3
+      istanbul-lib-instrument: 6.0.3
+      test-exclude: 6.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  babel-plugin-jest-hoist@30.2.0:
+    dependencies:
+      '@types/babel__core': 7.20.5
+
+  babel-preset-current-node-syntax@1.2.0(@babel/core@7.28.4):
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.28.4)
+      '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.28.4)
+      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.28.4)
+      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.28.4)
+      '@babel/plugin-syntax-import-attributes': 7.27.1(@babel/core@7.28.4)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.28.4)
+      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.28.4)
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.28.4)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.28.4)
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.28.4)
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.28.4)
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.28.4)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.28.4)
+      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.28.4)
+      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.28.4)
+
+  babel-preset-jest@30.2.0(@babel/core@7.28.4):
+    dependencies:
+      '@babel/core': 7.28.4
+      babel-plugin-jest-hoist: 30.2.0
+      babel-preset-current-node-syntax: 1.2.0(@babel/core@7.28.4)
+
+  balanced-match@1.0.2: {}
+
+  baseline-browser-mapping@2.9.19: {}
+
+  body-parser@2.2.2:
+    dependencies:
+      bytes: 3.1.2
+      content-type: 1.0.5
+      debug: 4.4.3
+      http-errors: 2.0.0
+      iconv-lite: 0.7.2
+      on-finished: 2.4.1
+      qs: 6.14.1
+      raw-body: 3.0.1
+      type-is: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  brace-expansion@1.1.12:
+    dependencies:
+      balanced-match: 1.0.2
+      concat-map: 0.0.1
+
+  brace-expansion@2.0.2:
+    dependencies:
+      balanced-match: 1.0.2
+
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
+  browserslist@4.26.3:
+    dependencies:
+      baseline-browser-mapping: 2.9.19
+      caniuse-lite: 1.0.30001766
+      electron-to-chromium: 1.5.237
+      node-releases: 2.0.25
+      update-browserslist-db: 1.1.3(browserslist@4.26.3)
+
+  bser@2.1.1:
+    dependencies:
+      node-int64: 0.4.0
+
+  buffer-from@1.1.2: {}
+
+  bundle-name@4.1.0:
+    dependencies:
+      run-applescript: 7.1.0
+
+  bytes@3.1.2: {}
+
+  call-bind-apply-helpers@1.0.2:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
+  call-bind@1.0.8:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      get-intrinsic: 1.3.0
+      set-function-length: 1.2.2
+
+  call-bound@1.0.4:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      get-intrinsic: 1.3.0
+
+  callsites@3.1.0: {}
+
+  camelcase@5.3.1: {}
+
+  camelcase@6.3.0: {}
+
+  caniuse-lite@1.0.30001766: {}
+
+  chalk@4.1.2:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
+  chalk@5.6.2: {}
+
+  char-regex@1.0.2: {}
+
+  chownr@3.0.0: {}
+
+  ci-info@4.3.1: {}
+
+  cjs-module-lexer@2.1.0: {}
+
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
+  cli-cursor@5.0.0:
+    dependencies:
+      restore-cursor: 5.1.0
+
+  cli-spinners@2.9.2: {}
+
+  cli-width@4.1.0: {}
+
+  client-only@0.0.1: {}
+
+  cliui@8.0.1:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+
+  clsx@2.1.1: {}
+
+  co@4.6.0: {}
+
+  code-block-writer@13.0.3: {}
+
+  collect-v8-coverage@1.0.3: {}
+
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.4: {}
+
+  commander@11.1.0: {}
+
+  commander@14.0.1: {}
+
+  concat-map@0.0.1: {}
+
+  content-disposition@1.0.0:
+    dependencies:
+      safe-buffer: 5.2.1
+
+  content-type@1.0.5: {}
+
+  convert-source-map@2.0.0: {}
+
+  cookie-signature@1.2.2: {}
+
+  cookie@0.7.2: {}
+
+  cookie@1.0.2: {}
+
+  cors@2.8.5:
+    dependencies:
+      object-assign: 4.1.1
+      vary: 1.1.2
+
+  cosmiconfig@9.0.0(typescript@5.9.3):
+    dependencies:
+      env-paths: 2.2.1
+      import-fresh: 3.3.1
+      js-yaml: 4.1.1
+      parse-json: 5.2.0
+    optionalDependencies:
+      typescript: 5.9.3
+
+  create-require@1.1.1: {}
+
+  cross-spawn@7.0.6:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
+  css.escape@1.5.1: {}
+
+  cssesc@3.0.0: {}
+
+  cssstyle@4.6.0:
+    dependencies:
+      '@asamuzakjp/css-color': 3.2.0
+      rrweb-cssom: 0.8.0
+
+  csstype@3.1.3: {}
+
+  damerau-levenshtein@1.0.8: {}
+
+  data-uri-to-buffer@4.0.1: {}
+
+  data-urls@5.0.0:
+    dependencies:
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.2.0
+
+  data-view-buffer@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  data-view-byte-length@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  data-view-byte-offset@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  debug@3.2.7:
+    dependencies:
+      ms: 2.1.3
+
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
+  decimal.js@10.6.0: {}
+
+  dedent@1.7.0: {}
+
+  deep-is@0.1.4: {}
+
+  deepmerge@4.3.1: {}
+
+  default-browser-id@5.0.1: {}
+
+  default-browser@5.4.0:
+    dependencies:
+      bundle-name: 4.1.0
+      default-browser-id: 5.0.1
+
+  define-data-property@1.1.4:
+    dependencies:
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  define-lazy-prop@3.0.0: {}
+
+  define-properties@1.2.1:
+    dependencies:
+      define-data-property: 1.1.4
+      has-property-descriptors: 1.0.2
+      object-keys: 1.1.1
+
+  depd@2.0.0: {}
+
+  dequal@2.0.3: {}
+
+  detect-libc@2.1.2: {}
+
+  detect-newline@3.1.0: {}
+
+  diff@4.0.4: {}
+
+  diff@8.0.3: {}
+
+  doctrine@2.1.0:
+    dependencies:
+      esutils: 2.0.3
+
+  dom-accessibility-api@0.5.16: {}
+
+  dom-accessibility-api@0.6.3: {}
+
+  dotenv@17.2.3: {}
+
+  dunder-proto@1.0.1:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  eastasianwidth@0.2.0: {}
+
+  eciesjs@0.4.16:
+    dependencies:
+      '@ecies/ciphers': 0.2.4(@noble/ciphers@1.3.0)
+      '@noble/ciphers': 1.3.0
+      '@noble/curves': 1.9.7
+      '@noble/hashes': 1.8.0
+
+  ee-first@1.1.1: {}
+
+  electron-to-chromium@1.5.237: {}
+
+  emittery@0.13.1: {}
+
+  emoji-regex@10.6.0: {}
+
+  emoji-regex@8.0.0: {}
+
+  emoji-regex@9.2.2: {}
+
+  encodeurl@2.0.0: {}
+
+  enhanced-resolve@5.18.3:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.0
+
+  entities@6.0.1: {}
+
+  env-paths@2.2.1: {}
+
+  error-ex@1.3.4:
+    dependencies:
+      is-arrayish: 0.2.1
+
+  es-abstract@1.24.0:
+    dependencies:
+      array-buffer-byte-length: 1.0.2
+      arraybuffer.prototype.slice: 1.0.4
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      data-view-buffer: 1.0.2
+      data-view-byte-length: 1.0.2
+      data-view-byte-offset: 1.0.1
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      es-set-tostringtag: 2.1.0
+      es-to-primitive: 1.3.0
+      function.prototype.name: 1.1.8
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      get-symbol-description: 1.1.0
+      globalthis: 1.0.4
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+      has-proto: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      internal-slot: 1.1.0
+      is-array-buffer: 3.0.5
+      is-callable: 1.2.7
+      is-data-view: 1.0.2
+      is-negative-zero: 2.0.3
+      is-regex: 1.2.1
+      is-set: 2.0.3
+      is-shared-array-buffer: 1.0.4
+      is-string: 1.1.1
+      is-typed-array: 1.1.15
+      is-weakref: 1.1.1
+      math-intrinsics: 1.1.0
+      object-inspect: 1.13.4
+      object-keys: 1.1.1
+      object.assign: 4.1.7
+      own-keys: 1.0.1
+      regexp.prototype.flags: 1.5.4
+      safe-array-concat: 1.1.3
+      safe-push-apply: 1.0.0
+      safe-regex-test: 1.1.0
+      set-proto: 1.0.0
+      stop-iteration-iterator: 1.1.0
+      string.prototype.trim: 1.2.10
+      string.prototype.trimend: 1.0.9
+      string.prototype.trimstart: 1.0.8
+      typed-array-buffer: 1.0.3
+      typed-array-byte-length: 1.0.3
+      typed-array-byte-offset: 1.0.4
+      typed-array-length: 1.0.7
+      unbox-primitive: 1.1.0
+      which-typed-array: 1.1.19
+
+  es-define-property@1.0.1: {}
+
+  es-errors@1.3.0: {}
+
+  es-iterator-helpers@1.2.1:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-set-tostringtag: 2.1.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.3.0
+      globalthis: 1.0.4
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+      has-proto: 1.2.0
+      has-symbols: 1.1.0
+      internal-slot: 1.1.0
+      iterator.prototype: 1.1.5
+      safe-array-concat: 1.1.3
+
+  es-object-atoms@1.1.1:
+    dependencies:
+      es-errors: 1.3.0
+
+  es-set-tostringtag@2.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
+  es-shim-unscopables@1.1.0:
+    dependencies:
+      hasown: 2.0.2
+
+  es-to-primitive@1.3.0:
+    dependencies:
+      is-callable: 1.2.7
+      is-date-object: 1.1.0
+      is-symbol: 1.1.1
+
+  escalade@3.2.0: {}
+
+  escape-html@1.0.3: {}
+
+  escape-string-regexp@2.0.0: {}
+
+  escape-string-regexp@4.0.0: {}
+
+  eslint-config-next@16.1.5(@typescript-eslint/parser@8.54.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3):
+    dependencies:
+      '@next/eslint-plugin-next': 16.1.5
+      eslint: 9.38.0(jiti@2.6.1)
+      eslint-import-resolver-node: 0.3.9
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.38.0(jiti@2.6.1))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.54.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.38.0(jiti@2.6.1))
+      eslint-plugin-jsx-a11y: 6.10.2(eslint@9.38.0(jiti@2.6.1))
+      eslint-plugin-react: 7.37.5(eslint@9.38.0(jiti@2.6.1))
+      eslint-plugin-react-hooks: 7.0.1(eslint@9.38.0(jiti@2.6.1))
+      globals: 16.4.0
+      typescript-eslint: 8.54.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+    optionalDependencies:
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - '@typescript-eslint/parser'
+      - eslint-import-resolver-webpack
+      - eslint-plugin-import-x
+      - supports-color
+
+  eslint-import-resolver-node@0.3.9:
+    dependencies:
+      debug: 3.2.7
+      is-core-module: 2.16.1
+      resolve: 1.22.10
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.38.0(jiti@2.6.1)):
+    dependencies:
+      '@nolyfill/is-core-module': 1.0.39
+      debug: 4.4.3
+      eslint: 9.38.0(jiti@2.6.1)
+      get-tsconfig: 4.12.0
+      is-bun-module: 2.0.0
+      stable-hash: 0.0.5
+      tinyglobby: 0.2.15
+      unrs-resolver: 1.11.1
+    optionalDependencies:
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.54.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.38.0(jiti@2.6.1))
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.54.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.38.0(jiti@2.6.1)):
+    dependencies:
+      debug: 3.2.7
+    optionalDependencies:
+      '@typescript-eslint/parser': 8.54.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.38.0(jiti@2.6.1)
+      eslint-import-resolver-node: 0.3.9
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.38.0(jiti@2.6.1))
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.54.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.38.0(jiti@2.6.1)):
+    dependencies:
+      '@rtsao/scc': 1.1.0
+      array-includes: 3.1.9
+      array.prototype.findlastindex: 1.2.6
+      array.prototype.flat: 1.3.3
+      array.prototype.flatmap: 1.3.3
+      debug: 3.2.7
+      doctrine: 2.1.0
+      eslint: 9.38.0(jiti@2.6.1)
+      eslint-import-resolver-node: 0.3.9
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.54.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.38.0(jiti@2.6.1))
+      hasown: 2.0.2
+      is-core-module: 2.16.1
+      is-glob: 4.0.3
+      minimatch: 3.1.2
+      object.fromentries: 2.0.8
+      object.groupby: 1.0.3
+      object.values: 1.2.1
+      semver: 6.3.1
+      string.prototype.trimend: 1.0.9
+      tsconfig-paths: 3.15.0
+    optionalDependencies:
+      '@typescript-eslint/parser': 8.54.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+    transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
+
+  eslint-plugin-jsx-a11y@6.10.2(eslint@9.38.0(jiti@2.6.1)):
+    dependencies:
+      aria-query: 5.3.2
+      array-includes: 3.1.9
+      array.prototype.flatmap: 1.3.3
+      ast-types-flow: 0.0.8
+      axe-core: 4.11.0
+      axobject-query: 4.1.0
+      damerau-levenshtein: 1.0.8
+      emoji-regex: 9.2.2
+      eslint: 9.38.0(jiti@2.6.1)
+      hasown: 2.0.2
+      jsx-ast-utils: 3.3.5
+      language-tags: 1.0.9
+      minimatch: 3.1.2
+      object.fromentries: 2.0.8
+      safe-regex-test: 1.1.0
+      string.prototype.includes: 2.0.1
+
+  eslint-plugin-react-hooks@7.0.1(eslint@9.38.0(jiti@2.6.1)):
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/parser': 7.28.4
+      eslint: 9.38.0(jiti@2.6.1)
+      hermes-parser: 0.25.1
+      zod: 4.3.5
+      zod-validation-error: 4.0.2(zod@4.3.5)
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-plugin-react@7.37.5(eslint@9.38.0(jiti@2.6.1)):
+    dependencies:
+      array-includes: 3.1.9
+      array.prototype.findlast: 1.2.5
+      array.prototype.flatmap: 1.3.3
+      array.prototype.tosorted: 1.1.4
+      doctrine: 2.1.0
+      es-iterator-helpers: 1.2.1
+      eslint: 9.38.0(jiti@2.6.1)
+      estraverse: 5.3.0
+      hasown: 2.0.2
+      jsx-ast-utils: 3.3.5
+      minimatch: 3.1.2
+      object.entries: 1.1.9
+      object.fromentries: 2.0.8
+      object.values: 1.2.1
+      prop-types: 15.8.1
+      resolve: 2.0.0-next.5
+      semver: 6.3.1
+      string.prototype.matchall: 4.0.12
+      string.prototype.repeat: 1.0.0
+
+  eslint-scope@8.4.0:
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
+  eslint-visitor-keys@3.4.3: {}
+
+  eslint-visitor-keys@4.2.1: {}
+
+  eslint@9.38.0(jiti@2.6.1):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.38.0(jiti@2.6.1))
+      '@eslint-community/regexpp': 4.12.2
+      '@eslint/config-array': 0.21.1
+      '@eslint/config-helpers': 0.4.1
+      '@eslint/core': 0.16.0
+      '@eslint/eslintrc': 3.3.1
+      '@eslint/js': 9.38.0
+      '@eslint/plugin-kit': 0.4.0
+      '@humanfs/node': 0.16.7
+      '@humanwhocodes/module-importer': 1.0.1
+      '@humanwhocodes/retry': 0.4.3
+      '@types/estree': 1.0.8
+      ajv: 6.12.6
+      chalk: 4.1.2
+      cross-spawn: 7.0.6
+      debug: 4.4.3
+      escape-string-regexp: 4.0.0
+      eslint-scope: 8.4.0
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
+      esquery: 1.6.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 8.0.0
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      ignore: 5.3.2
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      json-stable-stringify-without-jsonify: 1.0.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.2
+      natural-compare: 1.4.0
+      optionator: 0.9.4
+    optionalDependencies:
+      jiti: 2.6.1
+    transitivePeerDependencies:
+      - supports-color
+
+  espree@10.4.0:
+    dependencies:
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
+      eslint-visitor-keys: 4.2.1
+
+  esprima@4.0.1: {}
+
+  esquery@1.6.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  esrecurse@4.3.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  estraverse@5.3.0: {}
+
+  esutils@2.0.3: {}
+
+  etag@1.8.1: {}
+
+  eventsource-parser@3.0.6: {}
+
+  eventsource@3.0.7:
+    dependencies:
+      eventsource-parser: 3.0.6
+
+  execa@5.1.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      get-stream: 6.0.1
+      human-signals: 2.1.0
+      is-stream: 2.0.1
+      merge-stream: 2.0.0
+      npm-run-path: 4.0.1
+      onetime: 5.1.2
+      signal-exit: 3.0.7
+      strip-final-newline: 2.0.0
+
+  execa@9.6.0:
+    dependencies:
+      '@sindresorhus/merge-streams': 4.0.0
+      cross-spawn: 7.0.6
+      figures: 6.1.0
+      get-stream: 9.0.1
+      human-signals: 8.0.1
+      is-plain-obj: 4.1.0
+      is-stream: 4.0.1
+      npm-run-path: 6.0.0
+      pretty-ms: 9.3.0
+      signal-exit: 4.1.0
+      strip-final-newline: 4.0.0
+      yoctocolors: 2.1.2
+
+  exit-x@0.2.2: {}
+
+  expect@30.2.0:
+    dependencies:
+      '@jest/expect-utils': 30.2.0
+      '@jest/get-type': 30.1.0
+      jest-matcher-utils: 30.2.0
+      jest-message-util: 30.2.0
+      jest-mock: 30.2.0
+      jest-util: 30.2.0
+
+  express-rate-limit@7.5.1(express@5.1.0):
+    dependencies:
+      express: 5.1.0
+
+  express@5.1.0:
+    dependencies:
+      accepts: 2.0.0
+      body-parser: 2.2.2
+      content-disposition: 1.0.0
+      content-type: 1.0.5
+      cookie: 0.7.2
+      cookie-signature: 1.2.2
+      debug: 4.4.3
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      finalhandler: 2.1.0
+      fresh: 2.0.0
+      http-errors: 2.0.0
+      merge-descriptors: 2.0.0
+      mime-types: 3.0.1
+      on-finished: 2.4.1
+      once: 1.4.0
+      parseurl: 1.3.3
+      proxy-addr: 2.0.7
+      qs: 6.14.1
+      range-parser: 1.2.1
+      router: 2.2.0
+      send: 1.2.0
+      serve-static: 2.2.0
+      statuses: 2.0.2
+      type-is: 2.0.1
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  fast-deep-equal@3.1.3: {}
+
+  fast-glob@3.3.1:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
+  fast-glob@3.3.3:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
+  fast-json-stable-stringify@2.1.0: {}
+
+  fast-levenshtein@2.0.6: {}
+
+  fast-uri@3.1.0: {}
+
+  fastq@1.19.1:
+    dependencies:
+      reusify: 1.1.0
+
+  fb-watchman@2.0.2:
+    dependencies:
+      bser: 2.1.1
+
+  fdir@6.5.0(picomatch@4.0.3):
+    optionalDependencies:
+      picomatch: 4.0.3
+
+  fetch-blob@3.2.0:
+    dependencies:
+      node-domexception: 1.0.0
+      web-streams-polyfill: 3.3.3
+
+  figures@6.1.0:
+    dependencies:
+      is-unicode-supported: 2.1.0
+
+  file-entry-cache@8.0.0:
+    dependencies:
+      flat-cache: 4.0.1
+
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
+  finalhandler@2.1.0:
+    dependencies:
+      debug: 4.4.3
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  find-up@4.1.0:
+    dependencies:
+      locate-path: 5.0.0
+      path-exists: 4.0.0
+
+  find-up@5.0.0:
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+
+  flat-cache@4.0.1:
+    dependencies:
+      flatted: 3.3.3
+      keyv: 4.5.4
+
+  flatted@3.3.3: {}
+
+  for-each@0.3.5:
+    dependencies:
+      is-callable: 1.2.7
+
+  foreground-child@3.3.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      signal-exit: 4.1.0
+
+  formdata-polyfill@4.0.10:
+    dependencies:
+      fetch-blob: 3.2.0
+
+  forwarded@0.2.0: {}
+
+  fresh@2.0.0: {}
+
+  fs-extra@11.3.2:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.0
+      universalify: 2.0.1
+
+  fs.realpath@1.0.0: {}
+
+  fsevents@2.3.3:
+    optional: true
+
+  function-bind@1.1.2: {}
+
+  function.prototype.name@1.1.8:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      functions-have-names: 1.2.3
+      hasown: 2.0.2
+      is-callable: 1.2.7
+
+  functions-have-names@1.2.3: {}
+
+  fuzzysort@3.1.0: {}
+
+  fzf@0.5.2: {}
+
+  generator-function@2.0.1: {}
+
+  gensync@1.0.0-beta.2: {}
+
+  get-caller-file@2.0.5: {}
+
+  get-east-asian-width@1.4.0: {}
+
+  get-intrinsic@1.3.0:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      math-intrinsics: 1.1.0
+
+  get-own-enumerable-keys@1.0.0: {}
+
+  get-package-type@0.1.0: {}
+
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.1
+
+  get-stream@6.0.1: {}
+
+  get-stream@9.0.1:
+    dependencies:
+      '@sec-ant/readable-stream': 0.4.1
+      is-stream: 4.0.1
+
+  get-symbol-description@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+
+  get-tsconfig@4.12.0:
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+
+  glob-parent@5.1.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob-parent@6.0.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob@10.4.5:
+    dependencies:
+      foreground-child: 3.3.1
+      jackspeak: 3.4.3
+      minimatch: 9.0.5
+      minipass: 7.1.2
+      package-json-from-dist: 1.0.1
+      path-scurry: 1.11.1
+
+  glob@7.2.3:
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.2
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+
+  globals@14.0.0: {}
+
+  globals@16.4.0: {}
+
+  globalthis@1.0.4:
+    dependencies:
+      define-properties: 1.2.1
+      gopd: 1.2.0
+
+  gopd@1.2.0: {}
+
+  graceful-fs@4.2.11: {}
+
+  graphql@16.11.0: {}
+
+  has-bigints@1.1.0: {}
+
+  has-flag@4.0.0: {}
+
+  has-property-descriptors@1.0.2:
+    dependencies:
+      es-define-property: 1.0.1
+
+  has-proto@1.2.0:
+    dependencies:
+      dunder-proto: 1.0.1
+
+  has-symbols@1.1.0: {}
+
+  has-tostringtag@1.0.2:
+    dependencies:
+      has-symbols: 1.1.0
+
+  hasown@2.0.2:
+    dependencies:
+      function-bind: 1.1.2
+
+  headers-polyfill@4.0.3: {}
+
+  hermes-estree@0.25.1: {}
+
+  hermes-parser@0.25.1:
+    dependencies:
+      hermes-estree: 0.25.1
+
+  hono@4.11.7: {}
+
+  html-encoding-sniffer@4.0.0:
+    dependencies:
+      whatwg-encoding: 3.1.1
+
+  html-escaper@2.0.2: {}
+
+  http-errors@2.0.0:
+    dependencies:
+      depd: 2.0.0
+      inherits: 2.0.4
+      setprototypeof: 1.2.0
+      statuses: 2.0.1
+      toidentifier: 1.0.1
+
+  http-proxy-agent@7.0.2:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  https-proxy-agent@7.0.6:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  human-signals@2.1.0: {}
+
+  human-signals@8.0.1: {}
+
+  iconv-lite@0.6.3:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  iconv-lite@0.7.0:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  iconv-lite@0.7.2:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  ignore@5.3.2: {}
+
+  ignore@7.0.5: {}
+
+  import-fresh@3.3.1:
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+
+  import-local@3.2.0:
+    dependencies:
+      pkg-dir: 4.2.0
+      resolve-cwd: 3.0.0
+
+  imurmurhash@0.1.4: {}
+
+  indent-string@4.0.0: {}
+
+  inflight@1.0.6:
+    dependencies:
+      once: 1.4.0
+      wrappy: 1.0.2
+
+  inherits@2.0.4: {}
+
+  internal-slot@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      hasown: 2.0.2
+      side-channel: 1.1.0
+
+  intl-messageformat@10.7.18:
+    dependencies:
+      '@formatjs/ecma402-abstract': 2.3.6
+      '@formatjs/fast-memoize': 2.2.7
+      '@formatjs/icu-messageformat-parser': 2.11.4
+      tslib: 2.8.1
+
+  ipaddr.js@1.9.1: {}
+
+  is-array-buffer@3.0.5:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+
+  is-arrayish@0.2.1: {}
+
+  is-async-function@2.1.1:
+    dependencies:
+      async-function: 1.0.0
+      call-bound: 1.0.4
+      get-proto: 1.0.1
+      has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
+
+  is-bigint@1.1.0:
+    dependencies:
+      has-bigints: 1.1.0
+
+  is-boolean-object@1.2.2:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-bun-module@2.0.0:
+    dependencies:
+      semver: 7.7.3
+
+  is-callable@1.2.7: {}
+
+  is-core-module@2.16.1:
+    dependencies:
+      hasown: 2.0.2
+
+  is-data-view@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+      is-typed-array: 1.1.15
+
+  is-date-object@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-docker@3.0.0: {}
+
+  is-extglob@2.1.1: {}
+
+  is-finalizationregistry@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+
+  is-fullwidth-code-point@3.0.0: {}
+
+  is-generator-fn@2.1.0: {}
+
+  is-generator-function@1.1.2:
+    dependencies:
+      call-bound: 1.0.4
+      generator-function: 2.0.1
+      get-proto: 1.0.1
+      has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+
+  is-in-ssh@1.0.0: {}
+
+  is-inside-container@1.0.0:
+    dependencies:
+      is-docker: 3.0.0
+
+  is-interactive@2.0.0: {}
+
+  is-map@2.0.3: {}
+
+  is-negative-zero@2.0.3: {}
+
+  is-node-process@1.2.0: {}
+
+  is-number-object@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-number@7.0.0: {}
+
+  is-obj@3.0.0: {}
+
+  is-plain-obj@4.1.0: {}
+
+  is-potential-custom-element-name@1.0.1: {}
+
+  is-promise@4.0.0: {}
+
+  is-regex@1.2.1:
+    dependencies:
+      call-bound: 1.0.4
+      gopd: 1.2.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
+  is-regexp@3.1.0: {}
+
+  is-set@2.0.3: {}
+
+  is-shared-array-buffer@1.0.4:
+    dependencies:
+      call-bound: 1.0.4
+
+  is-stream@2.0.1: {}
+
+  is-stream@4.0.1: {}
+
+  is-string@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-symbol@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+      has-symbols: 1.1.0
+      safe-regex-test: 1.1.0
+
+  is-typed-array@1.1.15:
+    dependencies:
+      which-typed-array: 1.1.19
+
+  is-unicode-supported@1.3.0: {}
+
+  is-unicode-supported@2.1.0: {}
+
+  is-weakmap@2.0.2: {}
+
+  is-weakref@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+
+  is-weakset@2.0.4:
+    dependencies:
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+
+  is-wsl@3.1.0:
+    dependencies:
+      is-inside-container: 1.0.0
+
+  isarray@2.0.5: {}
+
+  isexe@2.0.0: {}
+
+  isexe@3.1.1: {}
+
+  istanbul-lib-coverage@3.2.2: {}
+
+  istanbul-lib-instrument@6.0.3:
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/parser': 7.28.4
+      '@istanbuljs/schema': 0.1.3
+      istanbul-lib-coverage: 3.2.2
+      semver: 7.7.3
+    transitivePeerDependencies:
+      - supports-color
+
+  istanbul-lib-report@3.0.1:
+    dependencies:
+      istanbul-lib-coverage: 3.2.2
+      make-dir: 4.0.0
+      supports-color: 7.2.0
+
+  istanbul-lib-source-maps@5.0.6:
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      debug: 4.4.3
+      istanbul-lib-coverage: 3.2.2
+    transitivePeerDependencies:
+      - supports-color
+
+  istanbul-reports@3.2.0:
+    dependencies:
+      html-escaper: 2.0.2
+      istanbul-lib-report: 3.0.1
+
+  iterator.prototype@1.1.5:
+    dependencies:
+      define-data-property: 1.1.4
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      has-symbols: 1.1.0
+      set-function-name: 2.0.2
+
+  jackspeak@3.4.3:
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    optionalDependencies:
+      '@pkgjs/parseargs': 0.11.0
+
+  jest-changed-files@30.2.0:
+    dependencies:
+      execa: 5.1.1
+      jest-util: 30.2.0
+      p-limit: 3.1.0
+
+  jest-circus@30.2.0:
+    dependencies:
+      '@jest/environment': 30.2.0
+      '@jest/expect': 30.2.0
+      '@jest/test-result': 30.2.0
+      '@jest/types': 30.2.0
+      '@types/node': 20.19.22
+      chalk: 4.1.2
+      co: 4.6.0
+      dedent: 1.7.0
+      is-generator-fn: 2.1.0
+      jest-each: 30.2.0
+      jest-matcher-utils: 30.2.0
+      jest-message-util: 30.2.0
+      jest-runtime: 30.2.0
+      jest-snapshot: 30.2.0
+      jest-util: 30.2.0
+      p-limit: 3.1.0
+      pretty-format: 30.2.0
+      pure-rand: 7.0.1
+      slash: 3.0.0
+      stack-utils: 2.0.6
+    transitivePeerDependencies:
+      - babel-plugin-macros
+      - supports-color
+
+  jest-cli@30.2.0(@types/node@20.19.22)(ts-node@10.9.2(@swc/core@1.15.8)(@types/node@20.19.22)(typescript@5.9.3)):
+    dependencies:
+      '@jest/core': 30.2.0(ts-node@10.9.2(@swc/core@1.15.8)(@types/node@20.19.22)(typescript@5.9.3))
+      '@jest/test-result': 30.2.0
+      '@jest/types': 30.2.0
+      chalk: 4.1.2
+      exit-x: 0.2.2
+      import-local: 3.2.0
+      jest-config: 30.2.0(@types/node@20.19.22)(ts-node@10.9.2(@swc/core@1.15.8)(@types/node@20.19.22)(typescript@5.9.3))
+      jest-util: 30.2.0
+      jest-validate: 30.2.0
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - '@types/node'
+      - babel-plugin-macros
+      - esbuild-register
+      - supports-color
+      - ts-node
+
+  jest-config@30.2.0(@types/node@20.19.22)(ts-node@10.9.2(@swc/core@1.15.8)(@types/node@20.19.22)(typescript@5.9.3)):
+    dependencies:
+      '@babel/core': 7.28.4
+      '@jest/get-type': 30.1.0
+      '@jest/pattern': 30.0.1
+      '@jest/test-sequencer': 30.2.0
+      '@jest/types': 30.2.0
+      babel-jest: 30.2.0(@babel/core@7.28.4)
+      chalk: 4.1.2
+      ci-info: 4.3.1
+      deepmerge: 4.3.1
+      glob: 10.4.5
+      graceful-fs: 4.2.11
+      jest-circus: 30.2.0
+      jest-docblock: 30.2.0
+      jest-environment-node: 30.2.0
+      jest-regex-util: 30.0.1
+      jest-resolve: 30.2.0
+      jest-runner: 30.2.0
+      jest-util: 30.2.0
+      jest-validate: 30.2.0
+      micromatch: 4.0.8
+      parse-json: 5.2.0
+      pretty-format: 30.2.0
+      slash: 3.0.0
+      strip-json-comments: 3.1.1
+    optionalDependencies:
+      '@types/node': 20.19.22
+      ts-node: 10.9.2(@swc/core@1.15.8)(@types/node@20.19.22)(typescript@5.9.3)
+    transitivePeerDependencies:
+      - babel-plugin-macros
+      - supports-color
+
+  jest-diff@30.2.0:
+    dependencies:
+      '@jest/diff-sequences': 30.0.1
+      '@jest/get-type': 30.1.0
+      chalk: 4.1.2
+      pretty-format: 30.2.0
+
+  jest-docblock@30.2.0:
+    dependencies:
+      detect-newline: 3.1.0
+
+  jest-each@30.2.0:
+    dependencies:
+      '@jest/get-type': 30.1.0
+      '@jest/types': 30.2.0
+      chalk: 4.1.2
+      jest-util: 30.2.0
+      pretty-format: 30.2.0
+
+  jest-environment-jsdom@30.2.0:
+    dependencies:
+      '@jest/environment': 30.2.0
+      '@jest/environment-jsdom-abstract': 30.2.0(jsdom@26.1.0)
+      '@types/jsdom': 21.1.7
+      '@types/node': 20.19.22
+      jsdom: 26.1.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  jest-environment-node@30.2.0:
+    dependencies:
+      '@jest/environment': 30.2.0
+      '@jest/fake-timers': 30.2.0
+      '@jest/types': 30.2.0
+      '@types/node': 20.19.22
+      jest-mock: 30.2.0
+      jest-util: 30.2.0
+      jest-validate: 30.2.0
+
+  jest-haste-map@30.2.0:
+    dependencies:
+      '@jest/types': 30.2.0
+      '@types/node': 20.19.22
+      anymatch: 3.1.3
+      fb-watchman: 2.0.2
+      graceful-fs: 4.2.11
+      jest-regex-util: 30.0.1
+      jest-util: 30.2.0
+      jest-worker: 30.2.0
+      micromatch: 4.0.8
+      walker: 1.0.8
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  jest-junit@16.0.0:
+    dependencies:
+      mkdirp: 1.0.4
+      strip-ansi: 6.0.1
+      uuid: 8.3.2
+      xml: 1.0.1
+
+  jest-leak-detector@30.2.0:
+    dependencies:
+      '@jest/get-type': 30.1.0
+      pretty-format: 30.2.0
+
+  jest-matcher-utils@30.2.0:
+    dependencies:
+      '@jest/get-type': 30.1.0
+      chalk: 4.1.2
+      jest-diff: 30.2.0
+      pretty-format: 30.2.0
+
+  jest-message-util@30.2.0:
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@jest/types': 30.2.0
+      '@types/stack-utils': 2.0.3
+      chalk: 4.1.2
+      graceful-fs: 4.2.11
+      micromatch: 4.0.8
+      pretty-format: 30.2.0
+      slash: 3.0.0
+      stack-utils: 2.0.6
+
+  jest-mock@30.2.0:
+    dependencies:
+      '@jest/types': 30.2.0
+      '@types/node': 20.19.22
+      jest-util: 30.2.0
+
+  jest-pnp-resolver@1.2.3(jest-resolve@30.2.0):
+    optionalDependencies:
+      jest-resolve: 30.2.0
+
+  jest-regex-util@30.0.1: {}
+
+  jest-resolve-dependencies@30.2.0:
+    dependencies:
+      jest-regex-util: 30.0.1
+      jest-snapshot: 30.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  jest-resolve@30.2.0:
+    dependencies:
+      chalk: 4.1.2
+      graceful-fs: 4.2.11
+      jest-haste-map: 30.2.0
+      jest-pnp-resolver: 1.2.3(jest-resolve@30.2.0)
+      jest-util: 30.2.0
+      jest-validate: 30.2.0
+      slash: 3.0.0
+      unrs-resolver: 1.11.1
+
+  jest-runner@30.2.0:
+    dependencies:
+      '@jest/console': 30.2.0
+      '@jest/environment': 30.2.0
+      '@jest/test-result': 30.2.0
+      '@jest/transform': 30.2.0
+      '@jest/types': 30.2.0
+      '@types/node': 20.19.22
+      chalk: 4.1.2
+      emittery: 0.13.1
+      exit-x: 0.2.2
+      graceful-fs: 4.2.11
+      jest-docblock: 30.2.0
+      jest-environment-node: 30.2.0
+      jest-haste-map: 30.2.0
+      jest-leak-detector: 30.2.0
+      jest-message-util: 30.2.0
+      jest-resolve: 30.2.0
+      jest-runtime: 30.2.0
+      jest-util: 30.2.0
+      jest-watcher: 30.2.0
+      jest-worker: 30.2.0
+      p-limit: 3.1.0
+      source-map-support: 0.5.13
+    transitivePeerDependencies:
+      - supports-color
+
+  jest-runtime@30.2.0:
+    dependencies:
+      '@jest/environment': 30.2.0
+      '@jest/fake-timers': 30.2.0
+      '@jest/globals': 30.2.0
+      '@jest/source-map': 30.0.1
+      '@jest/test-result': 30.2.0
+      '@jest/transform': 30.2.0
+      '@jest/types': 30.2.0
+      '@types/node': 20.19.22
+      chalk: 4.1.2
+      cjs-module-lexer: 2.1.0
+      collect-v8-coverage: 1.0.3
+      glob: 10.4.5
+      graceful-fs: 4.2.11
+      jest-haste-map: 30.2.0
+      jest-message-util: 30.2.0
+      jest-mock: 30.2.0
+      jest-regex-util: 30.0.1
+      jest-resolve: 30.2.0
+      jest-snapshot: 30.2.0
+      jest-util: 30.2.0
+      slash: 3.0.0
+      strip-bom: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  jest-snapshot@30.2.0:
+    dependencies:
+      '@babel/core': 7.28.4
+      '@babel/generator': 7.28.3
+      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.4)
+      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.4)
+      '@babel/types': 7.28.4
+      '@jest/expect-utils': 30.2.0
+      '@jest/get-type': 30.1.0
+      '@jest/snapshot-utils': 30.2.0
+      '@jest/transform': 30.2.0
+      '@jest/types': 30.2.0
+      babel-preset-current-node-syntax: 1.2.0(@babel/core@7.28.4)
+      chalk: 4.1.2
+      expect: 30.2.0
+      graceful-fs: 4.2.11
+      jest-diff: 30.2.0
+      jest-matcher-utils: 30.2.0
+      jest-message-util: 30.2.0
+      jest-util: 30.2.0
+      pretty-format: 30.2.0
+      semver: 7.7.3
+      synckit: 0.11.11
+    transitivePeerDependencies:
+      - supports-color
+
+  jest-util@30.2.0:
+    dependencies:
+      '@jest/types': 30.2.0
+      '@types/node': 20.19.22
+      chalk: 4.1.2
+      ci-info: 4.3.1
+      graceful-fs: 4.2.11
+      picomatch: 4.0.3
+
+  jest-validate@30.2.0:
+    dependencies:
+      '@jest/get-type': 30.1.0
+      '@jest/types': 30.2.0
+      camelcase: 6.3.0
+      chalk: 4.1.2
+      leven: 3.1.0
+      pretty-format: 30.2.0
+
+  jest-watcher@30.2.0:
+    dependencies:
+      '@jest/test-result': 30.2.0
+      '@jest/types': 30.2.0
+      '@types/node': 20.19.22
+      ansi-escapes: 4.3.2
+      chalk: 4.1.2
+      emittery: 0.13.1
+      jest-util: 30.2.0
+      string-length: 4.0.2
+
+  jest-worker@30.2.0:
+    dependencies:
+      '@types/node': 20.19.22
+      '@ungap/structured-clone': 1.3.0
+      jest-util: 30.2.0
+      merge-stream: 2.0.0
+      supports-color: 8.1.1
+
+  jest@30.2.0(@types/node@20.19.22)(ts-node@10.9.2(@swc/core@1.15.8)(@types/node@20.19.22)(typescript@5.9.3)):
+    dependencies:
+      '@jest/core': 30.2.0(ts-node@10.9.2(@swc/core@1.15.8)(@types/node@20.19.22)(typescript@5.9.3))
+      '@jest/types': 30.2.0
+      import-local: 3.2.0
+      jest-cli: 30.2.0(@types/node@20.19.22)(ts-node@10.9.2(@swc/core@1.15.8)(@types/node@20.19.22)(typescript@5.9.3))
+    transitivePeerDependencies:
+      - '@types/node'
+      - babel-plugin-macros
+      - esbuild-register
+      - supports-color
+      - ts-node
+
+  jiti@2.6.1: {}
+
+  jose@6.1.3: {}
+
+  js-tokens@4.0.0: {}
+
+  js-yaml@3.14.2:
+    dependencies:
+      argparse: 1.0.10
+      esprima: 4.0.1
+
+  js-yaml@4.1.1:
+    dependencies:
+      argparse: 2.0.1
+
+  jsdom@26.1.0:
+    dependencies:
+      cssstyle: 4.6.0
+      data-urls: 5.0.0
+      decimal.js: 10.6.0
+      html-encoding-sniffer: 4.0.0
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
+      is-potential-custom-element-name: 1.0.1
+      nwsapi: 2.2.22
+      parse5: 7.3.0
+      rrweb-cssom: 0.8.0
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 5.1.2
+      w3c-xmlserializer: 5.0.0
+      webidl-conversions: 7.0.0
+      whatwg-encoding: 3.1.1
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.2.0
+      ws: 8.18.3
+      xml-name-validator: 5.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  jsesc@3.1.0: {}
+
+  json-buffer@3.0.1: {}
+
+  json-parse-even-better-errors@2.3.1: {}
+
+  json-schema-traverse@0.4.1: {}
+
+  json-schema-traverse@1.0.0: {}
+
+  json-schema-typed@8.0.2: {}
+
+  json-stable-stringify-without-jsonify@1.0.1: {}
+
+  json5@1.0.2:
+    dependencies:
+      minimist: 1.2.8
+
+  json5@2.2.3: {}
+
+  jsonfile@6.2.0:
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+
+  jsx-ast-utils@3.3.5:
+    dependencies:
+      array-includes: 3.1.9
+      array.prototype.flat: 1.3.3
+      object.assign: 4.1.7
+      object.values: 1.2.1
+
+  keyv@4.5.4:
+    dependencies:
+      json-buffer: 3.0.1
+
+  kleur@3.0.3: {}
+
+  kleur@4.1.5: {}
+
+  language-subtag-registry@0.3.23: {}
+
+  language-tags@1.0.9:
+    dependencies:
+      language-subtag-registry: 0.3.23
+
+  leven@3.1.0: {}
+
+  levn@0.4.1:
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+
+  lightningcss-darwin-arm64@1.30.1:
+    optional: true
+
+  lightningcss-darwin-x64@1.30.1:
+    optional: true
+
+  lightningcss-freebsd-x64@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.30.1:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.30.1:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.30.1:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.30.1:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.30.1:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.30.1:
+    optional: true
+
+  lightningcss@1.30.1:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-darwin-arm64: 1.30.1
+      lightningcss-darwin-x64: 1.30.1
+      lightningcss-freebsd-x64: 1.30.1
+      lightningcss-linux-arm-gnueabihf: 1.30.1
+      lightningcss-linux-arm64-gnu: 1.30.1
+      lightningcss-linux-arm64-musl: 1.30.1
+      lightningcss-linux-x64-gnu: 1.30.1
+      lightningcss-linux-x64-musl: 1.30.1
+      lightningcss-win32-arm64-msvc: 1.30.1
+      lightningcss-win32-x64-msvc: 1.30.1
+
+  lines-and-columns@1.2.4: {}
+
+  locate-path@5.0.0:
+    dependencies:
+      p-locate: 4.1.0
+
+  locate-path@6.0.0:
+    dependencies:
+      p-locate: 5.0.0
+
+  lodash.merge@4.6.2: {}
+
+  log-symbols@6.0.0:
+    dependencies:
+      chalk: 5.6.2
+      is-unicode-supported: 1.3.0
+
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+
+  lru-cache@10.4.3: {}
+
+  lru-cache@5.1.1:
+    dependencies:
+      yallist: 3.1.1
+
+  lucide-react@0.546.0(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+
+  lz-string@1.5.0: {}
+
+  magic-string@0.30.19:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  make-dir@4.0.0:
+    dependencies:
+      semver: 7.7.3
+
+  make-error@1.3.6: {}
+
+  makeerror@1.0.12:
+    dependencies:
+      tmpl: 1.0.5
+
+  math-intrinsics@1.1.0: {}
+
+  media-typer@1.1.0: {}
+
+  merge-descriptors@2.0.0: {}
+
+  merge-stream@2.0.0: {}
+
+  merge2@1.4.1: {}
+
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.1
+
+  mime-db@1.54.0: {}
+
+  mime-types@3.0.1:
+    dependencies:
+      mime-db: 1.54.0
+
+  mimic-fn@2.1.0: {}
+
+  mimic-function@5.0.1: {}
+
+  min-indent@1.0.1: {}
+
+  minimatch@10.0.3:
+    dependencies:
+      '@isaacs/brace-expansion': 5.0.0
+
+  minimatch@3.1.2:
+    dependencies:
+      brace-expansion: 1.1.12
+
+  minimatch@9.0.5:
+    dependencies:
+      brace-expansion: 2.0.2
+
+  minimist@1.2.8: {}
+
+  minipass@7.1.2: {}
+
+  minizlib@3.1.0:
+    dependencies:
+      minipass: 7.1.2
+
+  mkdirp@1.0.4: {}
+
+  ms@2.1.3: {}
+
+  msw@2.11.5(@types/node@20.19.22)(typescript@5.9.3):
+    dependencies:
+      '@inquirer/confirm': 5.1.19(@types/node@20.19.22)
+      '@mswjs/interceptors': 0.39.8
+      '@open-draft/deferred-promise': 2.2.0
+      '@types/statuses': 2.0.6
+      cookie: 1.0.2
+      graphql: 16.11.0
+      headers-polyfill: 4.0.3
+      is-node-process: 1.2.0
+      outvariant: 1.4.3
+      path-to-regexp: 6.3.0
+      picocolors: 1.1.1
+      rettime: 0.7.0
+      statuses: 2.0.2
+      strict-event-emitter: 0.5.1
+      tough-cookie: 6.0.0
+      type-fest: 4.41.0
+      until-async: 3.0.2
+      yargs: 17.7.2
+    optionalDependencies:
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - '@types/node'
+
+  mute-stream@2.0.0: {}
+
+  nanoid@3.3.11: {}
+
+  napi-postinstall@0.3.4: {}
+
+  natural-compare@1.4.0: {}
+
+  negotiator@1.0.0: {}
+
+  next-intl-swc-plugin-extractor@4.7.0: {}
+
+  next-intl@4.7.0(next@16.1.6(@babel/core@7.28.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)(typescript@5.9.3):
+    dependencies:
+      '@formatjs/intl-localematcher': 0.5.10
+      '@parcel/watcher': 2.5.4
+      '@swc/core': 1.15.8
+      negotiator: 1.0.0
+      next: 16.1.6(@babel/core@7.28.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      next-intl-swc-plugin-extractor: 4.7.0
+      po-parser: 2.1.1
+      react: 19.2.4
+      use-intl: 4.7.0(react@19.2.4)
+    optionalDependencies:
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - '@swc/helpers'
+
+  next@16.1.6(@babel/core@7.28.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      '@next/env': 16.1.6
+      '@swc/helpers': 0.5.15
+      baseline-browser-mapping: 2.9.19
+      caniuse-lite: 1.0.30001766
+      postcss: 8.4.31
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      styled-jsx: 5.1.6(@babel/core@7.28.4)(react@19.2.4)
+    optionalDependencies:
+      '@next/swc-darwin-arm64': 16.1.6
+      '@next/swc-darwin-x64': 16.1.6
+      '@next/swc-linux-arm64-gnu': 16.1.6
+      '@next/swc-linux-arm64-musl': 16.1.6
+      '@next/swc-linux-x64-gnu': 16.1.6
+      '@next/swc-linux-x64-musl': 16.1.6
+      '@next/swc-win32-arm64-msvc': 16.1.6
+      '@next/swc-win32-x64-msvc': 16.1.6
+      sharp: 0.34.5
+    transitivePeerDependencies:
+      - '@babel/core'
+      - babel-plugin-macros
+
+  node-addon-api@7.1.1: {}
+
+  node-domexception@1.0.0: {}
+
+  node-fetch@3.3.2:
+    dependencies:
+      data-uri-to-buffer: 4.0.1
+      fetch-blob: 3.2.0
+      formdata-polyfill: 4.0.10
+
+  node-int64@0.4.0: {}
+
+  node-releases@2.0.25: {}
+
+  normalize-path@3.0.0: {}
+
+  npm-run-path@4.0.1:
+    dependencies:
+      path-key: 3.1.1
+
+  npm-run-path@6.0.0:
+    dependencies:
+      path-key: 4.0.0
+      unicorn-magic: 0.3.0
+
+  nwsapi@2.2.22: {}
+
+  object-assign@4.1.1: {}
+
+  object-inspect@1.13.4: {}
+
+  object-keys@1.1.1: {}
+
+  object-treeify@1.1.33: {}
+
+  object.assign@4.1.7:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+      has-symbols: 1.1.0
+      object-keys: 1.1.1
+
+  object.entries@1.1.9:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+
+  object.fromentries@2.0.8:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-object-atoms: 1.1.1
+
+  object.groupby@1.0.3:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+
+  object.values@1.2.1:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+
+  on-finished@2.4.1:
+    dependencies:
+      ee-first: 1.1.1
+
+  once@1.4.0:
+    dependencies:
+      wrappy: 1.0.2
+
+  onetime@5.1.2:
+    dependencies:
+      mimic-fn: 2.1.0
+
+  onetime@7.0.0:
+    dependencies:
+      mimic-function: 5.0.1
+
+  open@11.0.0:
+    dependencies:
+      default-browser: 5.4.0
+      define-lazy-prop: 3.0.0
+      is-in-ssh: 1.0.0
+      is-inside-container: 1.0.0
+      powershell-utils: 0.1.0
+      wsl-utils: 0.3.1
+
+  optionator@0.9.4:
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+      word-wrap: 1.2.5
+
+  ora@8.2.0:
+    dependencies:
+      chalk: 5.6.2
+      cli-cursor: 5.0.0
+      cli-spinners: 2.9.2
+      is-interactive: 2.0.0
+      is-unicode-supported: 2.1.0
+      log-symbols: 6.0.0
+      stdin-discarder: 0.2.2
+      string-width: 7.2.0
+      strip-ansi: 7.1.2
+
+  outvariant@1.4.3: {}
+
+  own-keys@1.0.1:
+    dependencies:
+      get-intrinsic: 1.3.0
+      object-keys: 1.1.1
+      safe-push-apply: 1.0.0
+
+  p-limit@2.3.0:
+    dependencies:
+      p-try: 2.2.0
+
+  p-limit@3.1.0:
+    dependencies:
+      yocto-queue: 0.1.0
+
+  p-locate@4.1.0:
+    dependencies:
+      p-limit: 2.3.0
+
+  p-locate@5.0.0:
+    dependencies:
+      p-limit: 3.1.0
+
+  p-try@2.2.0: {}
+
+  package-json-from-dist@1.0.1: {}
+
+  package-manager-detector@1.4.1: {}
+
+  parent-module@1.0.1:
+    dependencies:
+      callsites: 3.1.0
+
+  parse-json@5.2.0:
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      error-ex: 1.3.4
+      json-parse-even-better-errors: 2.3.1
+      lines-and-columns: 1.2.4
+
+  parse-ms@4.0.0: {}
+
+  parse5@7.3.0:
+    dependencies:
+      entities: 6.0.1
+
+  parseurl@1.3.3: {}
+
+  path-browserify@1.0.1: {}
+
+  path-exists@4.0.0: {}
+
+  path-is-absolute@1.0.1: {}
+
+  path-key@3.1.1: {}
+
+  path-key@4.0.0: {}
+
+  path-parse@1.0.7: {}
+
+  path-scurry@1.11.1:
+    dependencies:
+      lru-cache: 10.4.3
+      minipass: 7.1.2
+
+  path-to-regexp@6.3.0: {}
+
+  path-to-regexp@8.3.0: {}
+
+  picocolors@1.1.1: {}
+
+  picomatch@2.3.1: {}
+
+  picomatch@4.0.3: {}
+
+  pirates@4.0.7: {}
+
+  pkce-challenge@5.0.0: {}
+
+  pkg-dir@4.2.0:
+    dependencies:
+      find-up: 4.1.0
+
+  po-parser@2.1.1: {}
+
+  possible-typed-array-names@1.1.0: {}
+
+  postcss-selector-parser@7.1.1:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss@8.4.31:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  postcss@8.5.6:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  powershell-utils@0.1.0: {}
+
+  prelude-ls@1.2.1: {}
+
+  pretty-format@27.5.1:
+    dependencies:
+      ansi-regex: 5.0.1
+      ansi-styles: 5.2.0
+      react-is: 17.0.2
+
+  pretty-format@30.2.0:
+    dependencies:
+      '@jest/schemas': 30.0.5
+      ansi-styles: 5.2.0
+      react-is: 18.3.1
+
+  pretty-ms@9.3.0:
+    dependencies:
+      parse-ms: 4.0.0
+
+  prompts@2.4.2:
+    dependencies:
+      kleur: 3.0.3
+      sisteransi: 1.0.5
+
+  prop-types@15.8.1:
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react-is: 16.13.1
+
+  proxy-addr@2.0.7:
+    dependencies:
+      forwarded: 0.2.0
+      ipaddr.js: 1.9.1
+
+  punycode@2.3.1: {}
+
+  pure-rand@7.0.1: {}
+
+  qs@6.14.1:
+    dependencies:
+      side-channel: 1.1.0
+
+  queue-microtask@1.2.3: {}
+
+  range-parser@1.2.1: {}
+
+  raw-body@3.0.1:
+    dependencies:
+      bytes: 3.1.2
+      http-errors: 2.0.0
+      iconv-lite: 0.7.0
+      unpipe: 1.0.0
+
+  react-dom@19.2.4(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+      scheduler: 0.27.0
+
+  react-hook-form@7.71.1(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+
+  react-is@16.13.1: {}
+
+  react-is@17.0.2: {}
+
+  react-is@18.3.1: {}
+
+  react@19.2.4: {}
+
+  recast@0.23.11:
+    dependencies:
+      ast-types: 0.16.1
+      esprima: 4.0.1
+      source-map: 0.6.1
+      tiny-invariant: 1.3.3
+      tslib: 2.8.1
+
+  redent@3.0.0:
+    dependencies:
+      indent-string: 4.0.0
+      strip-indent: 3.0.0
+
+  reflect.getprototypeof@1.0.10:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      which-builtin-type: 1.2.1
+
+  regexp.prototype.flags@1.5.4:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-errors: 1.3.0
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      set-function-name: 2.0.2
+
+  require-directory@2.1.1: {}
+
+  require-from-string@2.0.2: {}
+
+  resolve-cwd@3.0.0:
+    dependencies:
+      resolve-from: 5.0.0
+
+  resolve-from@4.0.0: {}
+
+  resolve-from@5.0.0: {}
+
+  resolve-pkg-maps@1.0.0: {}
+
+  resolve@1.22.10:
+    dependencies:
+      is-core-module: 2.16.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  resolve@2.0.0-next.5:
+    dependencies:
+      is-core-module: 2.16.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  restore-cursor@5.1.0:
+    dependencies:
+      onetime: 7.0.0
+      signal-exit: 4.1.0
+
+  rettime@0.7.0: {}
+
+  reusify@1.1.0: {}
+
+  router@2.2.0:
+    dependencies:
+      debug: 4.4.3
+      depd: 2.0.0
+      is-promise: 4.0.0
+      parseurl: 1.3.3
+      path-to-regexp: 8.3.0
+    transitivePeerDependencies:
+      - supports-color
+
+  rrweb-cssom@0.8.0: {}
+
+  run-applescript@7.1.0: {}
+
+  run-parallel@1.2.0:
+    dependencies:
+      queue-microtask: 1.2.3
+
+  safe-array-concat@1.1.3:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+      has-symbols: 1.1.0
+      isarray: 2.0.5
+
+  safe-buffer@5.2.1: {}
+
+  safe-push-apply@1.0.0:
+    dependencies:
+      es-errors: 1.3.0
+      isarray: 2.0.5
+
+  safe-regex-test@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-regex: 1.2.1
+
+  safer-buffer@2.1.2: {}
+
+  saxes@6.0.0:
+    dependencies:
+      xmlchars: 2.2.0
+
+  scheduler@0.27.0: {}
+
+  semver@6.3.1: {}
+
+  semver@7.7.3: {}
+
+  send@1.2.0:
+    dependencies:
+      debug: 4.4.3
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      fresh: 2.0.0
+      http-errors: 2.0.0
+      mime-types: 3.0.1
+      ms: 2.1.3
+      on-finished: 2.4.1
+      range-parser: 1.2.1
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  serve-static@2.2.0:
+    dependencies:
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      parseurl: 1.3.3
+      send: 1.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  set-function-length@1.2.2:
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.3.0
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+
+  set-function-name@2.0.2:
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      functions-have-names: 1.2.3
+      has-property-descriptors: 1.0.2
+
+  set-proto@1.0.0:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+
+  setprototypeof@1.2.0: {}
+
+  shadcn@3.7.0(@types/node@20.19.22)(hono@4.11.7)(typescript@5.9.3):
+    dependencies:
+      '@antfu/ni': 25.0.0
+      '@babel/core': 7.28.4
+      '@babel/parser': 7.28.4
+      '@babel/plugin-transform-typescript': 7.28.0(@babel/core@7.28.4)
+      '@babel/preset-typescript': 7.27.1(@babel/core@7.28.4)
+      '@dotenvx/dotenvx': 1.51.0
+      '@modelcontextprotocol/sdk': 1.25.3(hono@4.11.7)(zod@3.25.76)
+      '@types/validate-npm-package-name': 4.0.2
+      browserslist: 4.26.3
+      commander: 14.0.1
+      cosmiconfig: 9.0.0(typescript@5.9.3)
+      dedent: 1.7.0
+      deepmerge: 4.3.1
+      diff: 8.0.3
+      execa: 9.6.0
+      fast-glob: 3.3.3
+      fs-extra: 11.3.2
+      fuzzysort: 3.1.0
+      https-proxy-agent: 7.0.6
+      kleur: 4.1.5
+      msw: 2.11.5(@types/node@20.19.22)(typescript@5.9.3)
+      node-fetch: 3.3.2
+      open: 11.0.0
+      ora: 8.2.0
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.1
+      prompts: 2.4.2
+      recast: 0.23.11
+      stringify-object: 5.0.0
+      ts-morph: 26.0.0
+      tsconfig-paths: 4.2.0
+      validate-npm-package-name: 7.0.2
+      zod: 3.25.76
+      zod-to-json-schema: 3.24.6(zod@3.25.76)
+    transitivePeerDependencies:
+      - '@cfworker/json-schema'
+      - '@types/node'
+      - babel-plugin-macros
+      - hono
+      - supports-color
+      - typescript
+
+  sharp@0.34.5:
+    dependencies:
+      '@img/colour': 1.0.0
+      detect-libc: 2.1.2
+      semver: 7.7.3
+    optionalDependencies:
+      '@img/sharp-darwin-arm64': 0.34.5
+      '@img/sharp-darwin-x64': 0.34.5
+      '@img/sharp-libvips-darwin-arm64': 1.2.4
+      '@img/sharp-libvips-darwin-x64': 1.2.4
+      '@img/sharp-libvips-linux-arm': 1.2.4
+      '@img/sharp-libvips-linux-arm64': 1.2.4
+      '@img/sharp-libvips-linux-ppc64': 1.2.4
+      '@img/sharp-libvips-linux-riscv64': 1.2.4
+      '@img/sharp-libvips-linux-s390x': 1.2.4
+      '@img/sharp-libvips-linux-x64': 1.2.4
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.4
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.4
+      '@img/sharp-linux-arm': 0.34.5
+      '@img/sharp-linux-arm64': 0.34.5
+      '@img/sharp-linux-ppc64': 0.34.5
+      '@img/sharp-linux-riscv64': 0.34.5
+      '@img/sharp-linux-s390x': 0.34.5
+      '@img/sharp-linux-x64': 0.34.5
+      '@img/sharp-linuxmusl-arm64': 0.34.5
+      '@img/sharp-linuxmusl-x64': 0.34.5
+      '@img/sharp-wasm32': 0.34.5
+      '@img/sharp-win32-arm64': 0.34.5
+      '@img/sharp-win32-ia32': 0.34.5
+      '@img/sharp-win32-x64': 0.34.5
+    optional: true
+
+  shebang-command@2.0.0:
+    dependencies:
+      shebang-regex: 3.0.0
+
+  shebang-regex@3.0.0: {}
+
+  side-channel-list@1.0.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-map@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-weakmap@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-map: 1.0.1
+
+  side-channel@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-list: 1.0.0
+      side-channel-map: 1.0.1
+      side-channel-weakmap: 1.0.2
+
+  signal-exit@3.0.7: {}
+
+  signal-exit@4.1.0: {}
+
+  sisteransi@1.0.5: {}
+
+  slash@3.0.0: {}
+
+  source-map-js@1.2.1: {}
+
+  source-map-support@0.5.13:
+    dependencies:
+      buffer-from: 1.1.2
+      source-map: 0.6.1
+
+  source-map@0.6.1: {}
+
+  sprintf-js@1.0.3: {}
+
+  stable-hash@0.0.5: {}
+
+  stack-utils@2.0.6:
+    dependencies:
+      escape-string-regexp: 2.0.0
+
+  statuses@2.0.1: {}
+
+  statuses@2.0.2: {}
+
+  stdin-discarder@0.2.2: {}
+
+  stop-iteration-iterator@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      internal-slot: 1.1.0
+
+  strict-event-emitter@0.5.1: {}
+
+  string-length@4.0.2:
+    dependencies:
+      char-regex: 1.0.2
+      strip-ansi: 6.0.1
+
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  string-width@5.1.2:
+    dependencies:
+      eastasianwidth: 0.2.0
+      emoji-regex: 9.2.2
+      strip-ansi: 7.1.2
+
+  string-width@7.2.0:
+    dependencies:
+      emoji-regex: 10.6.0
+      get-east-asian-width: 1.4.0
+      strip-ansi: 7.1.2
+
+  string.prototype.includes@2.0.1:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+
+  string.prototype.matchall@4.0.12:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      internal-slot: 1.1.0
+      regexp.prototype.flags: 1.5.4
+      set-function-name: 2.0.2
+      side-channel: 1.1.0
+
+  string.prototype.repeat@1.0.0:
+    dependencies:
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+
+  string.prototype.trim@1.2.10:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-data-property: 1.1.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-object-atoms: 1.1.1
+      has-property-descriptors: 1.0.2
+
+  string.prototype.trimend@1.0.9:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+
+  string.prototype.trimstart@1.0.8:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+
+  stringify-object@5.0.0:
+    dependencies:
+      get-own-enumerable-keys: 1.0.0
+      is-obj: 3.0.0
+      is-regexp: 3.1.0
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
+  strip-ansi@7.1.2:
+    dependencies:
+      ansi-regex: 6.2.2
+
+  strip-bom@3.0.0: {}
+
+  strip-bom@4.0.0: {}
+
+  strip-final-newline@2.0.0: {}
+
+  strip-final-newline@4.0.0: {}
+
+  strip-indent@3.0.0:
+    dependencies:
+      min-indent: 1.0.1
+
+  strip-json-comments@3.1.1: {}
+
+  styled-jsx@5.1.6(@babel/core@7.28.4)(react@19.2.4):
+    dependencies:
+      client-only: 0.0.1
+      react: 19.2.4
+    optionalDependencies:
+      '@babel/core': 7.28.4
+
+  supports-color@7.2.0:
+    dependencies:
+      has-flag: 4.0.0
+
+  supports-color@8.1.1:
+    dependencies:
+      has-flag: 4.0.0
+
+  supports-preserve-symlinks-flag@1.0.0: {}
+
+  symbol-tree@3.2.4: {}
+
+  synckit@0.11.11:
+    dependencies:
+      '@pkgr/core': 0.2.9
+
+  tailwind-merge@3.3.1: {}
+
+  tailwindcss@4.1.14: {}
+
+  tapable@2.3.0: {}
+
+  tar@7.5.7:
+    dependencies:
+      '@isaacs/fs-minipass': 4.0.1
+      chownr: 3.0.0
+      minipass: 7.1.2
+      minizlib: 3.1.0
+      yallist: 5.0.0
+
+  test-exclude@6.0.0:
+    dependencies:
+      '@istanbuljs/schema': 0.1.3
+      glob: 7.2.3
+      minimatch: 3.1.2
+
+  tiny-invariant@1.3.3: {}
+
+  tinyexec@1.0.1: {}
+
+  tinyglobby@0.2.15:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+
+  tldts-core@6.1.86: {}
+
+  tldts-core@7.0.17: {}
+
+  tldts@6.1.86:
+    dependencies:
+      tldts-core: 6.1.86
+
+  tldts@7.0.17:
+    dependencies:
+      tldts-core: 7.0.17
+
+  tmpl@1.0.5: {}
+
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
+  toidentifier@1.0.1: {}
+
+  tough-cookie@5.1.2:
+    dependencies:
+      tldts: 6.1.86
+
+  tough-cookie@6.0.0:
+    dependencies:
+      tldts: 7.0.17
+
+  tr46@5.1.1:
+    dependencies:
+      punycode: 2.3.1
+
+  ts-api-utils@2.4.0(typescript@5.9.3):
+    dependencies:
+      typescript: 5.9.3
+
+  ts-morph@26.0.0:
+    dependencies:
+      '@ts-morph/common': 0.27.0
+      code-block-writer: 13.0.3
+
+  ts-node@10.9.2(@swc/core@1.15.8)(@types/node@20.19.22)(typescript@5.9.3):
+    dependencies:
+      '@cspotcode/source-map-support': 0.8.1
+      '@tsconfig/node10': 1.0.11
+      '@tsconfig/node12': 1.0.11
+      '@tsconfig/node14': 1.0.3
+      '@tsconfig/node16': 1.0.4
+      '@types/node': 20.19.22
+      acorn: 8.15.0
+      acorn-walk: 8.3.4
+      arg: 4.1.3
+      create-require: 1.1.1
+      diff: 4.0.4
+      make-error: 1.3.6
+      typescript: 5.9.3
+      v8-compile-cache-lib: 3.0.1
+      yn: 3.1.1
+    optionalDependencies:
+      '@swc/core': 1.15.8
+
+  tsconfig-paths@3.15.0:
+    dependencies:
+      '@types/json5': 0.0.29
+      json5: 1.0.2
+      minimist: 1.2.8
+      strip-bom: 3.0.0
+
+  tsconfig-paths@4.2.0:
+    dependencies:
+      json5: 2.2.3
+      minimist: 1.2.8
+      strip-bom: 3.0.0
+
+  tslib@2.8.1: {}
+
+  tw-animate-css@1.4.0: {}
+
+  type-check@0.4.0:
+    dependencies:
+      prelude-ls: 1.2.1
+
+  type-detect@4.0.8: {}
+
+  type-fest@0.21.3: {}
+
+  type-fest@4.41.0: {}
+
+  type-is@2.0.1:
+    dependencies:
+      content-type: 1.0.5
+      media-typer: 1.1.0
+      mime-types: 3.0.1
+
+  typed-array-buffer@1.0.3:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-typed-array: 1.1.15
+
+  typed-array-byte-length@1.0.3:
+    dependencies:
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      has-proto: 1.2.0
+      is-typed-array: 1.1.15
+
+  typed-array-byte-offset@1.0.4:
+    dependencies:
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      has-proto: 1.2.0
+      is-typed-array: 1.1.15
+      reflect.getprototypeof: 1.0.10
+
+  typed-array-length@1.0.7:
+    dependencies:
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      is-typed-array: 1.1.15
+      possible-typed-array-names: 1.1.0
+      reflect.getprototypeof: 1.0.10
+
+  typescript-eslint@8.54.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3):
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.54.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.54.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.38.0(jiti@2.6.1)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  typescript@5.9.3: {}
+
+  unbox-primitive@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      has-bigints: 1.1.0
+      has-symbols: 1.1.0
+      which-boxed-primitive: 1.1.1
+
+  undici-types@6.21.0: {}
+
+  unicorn-magic@0.3.0: {}
+
+  universalify@2.0.1: {}
+
+  unpipe@1.0.0: {}
+
+  unrs-resolver@1.11.1:
+    dependencies:
+      napi-postinstall: 0.3.4
+    optionalDependencies:
+      '@unrs/resolver-binding-android-arm-eabi': 1.11.1
+      '@unrs/resolver-binding-android-arm64': 1.11.1
+      '@unrs/resolver-binding-darwin-arm64': 1.11.1
+      '@unrs/resolver-binding-darwin-x64': 1.11.1
+      '@unrs/resolver-binding-freebsd-x64': 1.11.1
+      '@unrs/resolver-binding-linux-arm-gnueabihf': 1.11.1
+      '@unrs/resolver-binding-linux-arm-musleabihf': 1.11.1
+      '@unrs/resolver-binding-linux-arm64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-arm64-musl': 1.11.1
+      '@unrs/resolver-binding-linux-ppc64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-riscv64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-riscv64-musl': 1.11.1
+      '@unrs/resolver-binding-linux-s390x-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-x64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-x64-musl': 1.11.1
+      '@unrs/resolver-binding-wasm32-wasi': 1.11.1
+      '@unrs/resolver-binding-win32-arm64-msvc': 1.11.1
+      '@unrs/resolver-binding-win32-ia32-msvc': 1.11.1
+      '@unrs/resolver-binding-win32-x64-msvc': 1.11.1
+
+  until-async@3.0.2: {}
+
+  update-browserslist-db@1.1.3(browserslist@4.26.3):
+    dependencies:
+      browserslist: 4.26.3
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
+  uri-js@4.4.1:
+    dependencies:
+      punycode: 2.3.1
+
+  use-intl@4.7.0(react@19.2.4):
+    dependencies:
+      '@formatjs/fast-memoize': 2.2.7
+      '@schummar/icu-type-parser': 1.21.5
+      intl-messageformat: 10.7.18
+      react: 19.2.4
+
+  util-deprecate@1.0.2: {}
+
+  uuid@8.3.2: {}
+
+  v8-compile-cache-lib@3.0.1: {}
+
+  v8-to-istanbul@9.3.0:
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      '@types/istanbul-lib-coverage': 2.0.6
+      convert-source-map: 2.0.0
+
+  validate-npm-package-name@7.0.2: {}
+
+  vary@1.1.2: {}
+
+  w3c-xmlserializer@5.0.0:
+    dependencies:
+      xml-name-validator: 5.0.0
+
+  walker@1.0.8:
+    dependencies:
+      makeerror: 1.0.12
+
+  web-streams-polyfill@3.3.3: {}
+
+  webidl-conversions@7.0.0: {}
+
+  whatwg-encoding@3.1.1:
+    dependencies:
+      iconv-lite: 0.6.3
+
+  whatwg-mimetype@4.0.0: {}
+
+  whatwg-url@14.2.0:
+    dependencies:
+      tr46: 5.1.1
+      webidl-conversions: 7.0.0
+
+  which-boxed-primitive@1.1.1:
+    dependencies:
+      is-bigint: 1.1.0
+      is-boolean-object: 1.2.2
+      is-number-object: 1.1.1
+      is-string: 1.1.1
+      is-symbol: 1.1.1
+
+  which-builtin-type@1.2.1:
+    dependencies:
+      call-bound: 1.0.4
+      function.prototype.name: 1.1.8
+      has-tostringtag: 1.0.2
+      is-async-function: 2.1.1
+      is-date-object: 1.1.0
+      is-finalizationregistry: 1.1.1
+      is-generator-function: 1.1.2
+      is-regex: 1.2.1
+      is-weakref: 1.1.1
+      isarray: 2.0.5
+      which-boxed-primitive: 1.1.1
+      which-collection: 1.0.2
+      which-typed-array: 1.1.19
+
+  which-collection@1.0.2:
+    dependencies:
+      is-map: 2.0.3
+      is-set: 2.0.3
+      is-weakmap: 2.0.2
+      is-weakset: 2.0.4
+
+  which-typed-array@1.1.19:
+    dependencies:
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      for-each: 0.3.5
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-tostringtag: 1.0.2
+
+  which@2.0.2:
+    dependencies:
+      isexe: 2.0.0
+
+  which@4.0.0:
+    dependencies:
+      isexe: 3.1.1
+
+  word-wrap@1.2.5: {}
+
+  wrap-ansi@6.2.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrap-ansi@7.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrap-ansi@8.1.0:
+    dependencies:
+      ansi-styles: 6.2.3
+      string-width: 5.1.2
+      strip-ansi: 7.1.2
+
+  wrappy@1.0.2: {}
+
+  write-file-atomic@5.0.1:
+    dependencies:
+      imurmurhash: 0.1.4
+      signal-exit: 4.1.0
+
+  ws@8.18.3: {}
+
+  wsl-utils@0.3.1:
+    dependencies:
+      is-wsl: 3.1.0
+      powershell-utils: 0.1.0
+
+  xml-name-validator@5.0.0: {}
+
+  xml@1.0.1: {}
+
+  xmlchars@2.2.0: {}
+
+  y18n@5.0.8: {}
+
+  yallist@3.1.1: {}
+
+  yallist@5.0.0: {}
+
+  yargs-parser@21.1.1: {}
+
+  yargs@17.7.2:
+    dependencies:
+      cliui: 8.0.1
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 21.1.1
+
+  yn@3.1.1: {}
+
+  yocto-queue@0.1.0: {}
+
+  yoctocolors-cjs@2.1.3: {}
+
+  yoctocolors@2.1.2: {}
+
+  zod-to-json-schema@3.24.6(zod@3.25.76):
+    dependencies:
+      zod: 3.25.76
+
+  zod-to-json-schema@3.25.1(zod@3.25.76):
+    dependencies:
+      zod: 3.25.76
+
+  zod-validation-error@4.0.2(zod@4.3.5):
+    dependencies:
+      zod: 4.3.5
+
+  zod@3.25.76: {}
+
+  zod@4.3.5: {}
+
+  zustand@5.0.10(@types/react@19.2.2)(react@19.2.4):
+    optionalDependencies:
+      '@types/react': 19.2.2
+      react: 19.2.4
diff --git a/postcss.config.mjs b/postcss.config.mjs
new file mode 100644
index 0000000..c7bcb4b
--- /dev/null
+++ b/postcss.config.mjs
@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;
diff --git a/proxy.ts b/proxy.ts
new file mode 100644
index 0000000..1e46b12
--- /dev/null
+++ b/proxy.ts
@@ -0,0 +1,10 @@
+import createMiddleware from "next-intl/middleware";
+import { routing } from "./src/lib/i18n/routing";
+
+export default createMiddleware(routing);
+
+export const config = {
+  // Match only internationalized pathnames
+  matcher: ["/", "/(de|en)/:path*"],
+};
+
diff --git a/public/file.svg b/public/file.svg
new file mode 100644
index 0000000..004145c
--- /dev/null
+++ b/public/file.svg
@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/public/globe.svg b/public/globe.svg
new file mode 100644
index 0000000..567f17b
--- /dev/null
+++ b/public/globe.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/public/manifest.json b/public/manifest.json
new file mode 100644
index 0000000..121e863
--- /dev/null
+++ b/public/manifest.json
@@ -0,0 +1,28 @@
+{
+  "name": "Growteer",
+  "short_name": "Growteer",
+  "description": "Social Business Platform",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#000000",
+  "orientation": "portrait-primary",
+  "icons": [
+    {
+      "src": "/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ],
+  "categories": ["business", "social"],
+  "screenshots": [],
+  "shortcuts": [],
+  "prefer_related_applications": false
+}
diff --git a/public/next.svg b/public/next.svg
new file mode 100644
index 0000000..5174b28
--- /dev/null
+++ b/public/next.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/public/sw.js b/public/sw.js
new file mode 100644
index 0000000..cf019c0
--- /dev/null
+++ b/public/sw.js
@@ -0,0 +1,38 @@
+// Basic Service Worker for PWA support
+// This is a minimal implementation. Consider using Workbox for production.
+
+const CACHE_NAME = "growteer-v1";
+const urlsToCache = [
+  "/",
+  "/manifest.json",
+  // Add other static assets to cache
+];
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      return cache.addAll(urlsToCache);
+    })
+  );
+});
+
+self.addEventListener("fetch", (event) => {
+  event.respondWith(
+    caches.match(event.request).then((response) => {
+      // Return cached version or fetch from network
+      return response || fetch(event.request);
+    })
+  );
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames
+          .filter((cacheName) => cacheName !== CACHE_NAME)
+          .map((cacheName) => caches.delete(cacheName))
+      );
+    })
+  );
+});
diff --git a/public/vercel.svg b/public/vercel.svg
new file mode 100644
index 0000000..7705396
--- /dev/null
+++ b/public/vercel.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/public/window.svg b/public/window.svg
new file mode 100644
index 0000000..b2b2a44
--- /dev/null
+++ b/public/window.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
\ No newline at end of file
diff --git a/scripts/generate-api-types.md b/scripts/generate-api-types.md
new file mode 100644
index 0000000..547a6cc
--- /dev/null
+++ b/scripts/generate-api-types.md
@@ -0,0 +1,89 @@
+# API Type Generation
+
+This document explains how to generate TypeScript types from your backend API specification.
+
+## Options
+
+### Option 1: OpenAPI Specification
+
+If your backend provides an OpenAPI/Swagger specification:
+
+1. Install the generator:
+   ```bash
+   pnpm add -D openapi-typescript
+   ```
+
+2. Add a script to `package.json`:
+   ```json
+   {
+     "scripts": {
+       "generate:api-types": "openapi-typescript <your-api-spec-url-or-file> -o src/lib/api/generated/api-types.ts"
+     }
+   }
+   ```
+
+3. Run the generation:
+   ```bash
+   pnpm generate:api-types
+   ```
+
+4. Import generated types in `src/lib/api/index.ts`:
+   ```typescript
+   export * from "./generated/api-types";
+   ```
+
+### Option 2: GraphQL Schema
+
+If your backend uses GraphQL:
+
+1. Install GraphQL Code Generator:
+   ```bash
+   pnpm add -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations
+   ```
+
+2. Create `codegen.yml` in the project root:
+   ```yaml
+   schema: <your-graphql-endpoint>
+   documents: 'src/**/*.{graphql,gql}'
+   generates:
+     src/lib/api/generated/graphql-types.ts:
+       plugins:
+         - typescript
+         - typescript-operations
+   ```
+
+3. Add a script to `package.json`:
+   ```json
+   {
+     "scripts": {
+       "generate:api-types": "graphql-codegen --config codegen.yml"
+     }
+   }
+   ```
+
+4. Run the generation:
+   ```bash
+   pnpm generate:api-types
+   ```
+
+## CI/CD Integration
+
+Add the type generation step to your CI pipeline to ensure types stay in sync with the backend schema:
+
+```yaml
+# Example GitHub Actions step
+- name: Generate API Types
+  run: pnpm generate:api-types
+```
+
+## Usage
+
+Once types are generated, use them throughout the application:
+
+```typescript
+import { apiClient } from "@/lib/api";
+import type { User, CreateUserRequest } from "@/lib/api/generated";
+
+// Types are now available
+const response = await apiClient.post<CreateUserRequest, User>("/users", userData);
+```
diff --git a/src/app/[locale]/HomeContent.tsx b/src/app/[locale]/HomeContent.tsx
new file mode 100644
index 0000000..4ad4fa1
--- /dev/null
+++ b/src/app/[locale]/HomeContent.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { Link } from "@/lib/i18n/routing";
+import { Sprout, Users, Rocket } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { FeatureCard } from "@/features/landing/FeatureCard";
+import { FooterLink } from "@/features/landing/FooterLink";
+
+export function HomeContent() {
+  const t = useTranslations();
+
+  return (
+    <div className="bg-background text-foreground flex min-h-screen flex-col">
+      <main className="flex-1">
+        <section className="mx-auto flex max-w-5xl flex-col items-center gap-10 px-6 py-24 text-center sm:py-28">
+          <h1 className="text-4xl font-semibold tracking-tight sm:text-5xl">
+            {t("landing.nurtureTitle")}
+          </h1>
+
+          <div className="grid w-full gap-10 md:grid-cols-3">
+            <FeatureCard
+              icon={<Sprout className="size-12" />}
+              title={t("landing.nurtureTitle")}
+              description={t("landing.nurtureDescription")}
+              accent="primary"
+            />
+            <FeatureCard
+              icon={<Users className="size-12" />}
+              title={t("landing.connectTitle")}
+              description={t("landing.connectDescription")}
+              accent="accent"
+            />
+            <FeatureCard
+              icon={<Rocket className="size-12" />}
+              title={t("landing.growTitle")}
+              description={t("landing.growDescription")}
+              accent="secondary"
+            />
+          </div>
+
+          <div className="flex flex-col items-center gap-6 pt-6">
+            <h2 className="text-2xl font-semibold tracking-tight sm:text-3xl">
+              {t("landing.startGrowing")}
+            </h2>
+            <Button size="lg" className="rounded-full px-8" asChild>
+              <Link href="#join">{t("landing.joinCommunity")}</Link>
+            </Button>
+          </div>
+        </section>
+      </main>
+
+      <Separator />
+
+      <footer className="bg-background">
+        <div className="mx-auto flex max-w-5xl flex-col gap-4 px-6 py-6 text-sm text-muted-foreground md:flex-row md:items-center md:justify-between">
+          <span>{t("footer.copyright", { year: new Date().getFullYear() })}</span>
+          <nav className="flex flex-wrap items-center justify-center gap-4 md:gap-6">
+            <FooterLink href="/privacy">{t("footer.privacy")}</FooterLink>
+            <FooterLink href="/terms">{t("footer.terms")}</FooterLink>
+            <FooterLink href="/imprint">{t("footer.imprint")}</FooterLink>
+          </nav>
+        </div>
+      </footer>
+    </div>
+  );
+}
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
new file mode 100644
index 0000000..f8da712
--- /dev/null
+++ b/src/app/[locale]/layout.tsx
@@ -0,0 +1,28 @@
+import { NextIntlClientProvider } from "next-intl";
+import { getMessages } from "next-intl/server";
+import { redirect } from "next/navigation";
+import { routing } from "@/lib/i18n/routing";
+import { ReactQueryProvider } from "@lib/react-query/provider";
+
+export default async function LocaleLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+
+  // Ensure that the incoming `locale` is valid
+  if (!routing.locales.includes(locale)) {
+    redirect(`/${routing.defaultLocale}`);
+  }
+
+  const messages = await getMessages();
+
+  return (
+    <NextIntlClientProvider messages={messages}>
+      <ReactQueryProvider>{children}</ReactQueryProvider>
+    </NextIntlClientProvider>
+  );
+}
diff --git a/src/app/[locale]/page.test.tsx b/src/app/[locale]/page.test.tsx
new file mode 100644
index 0000000..516790f
--- /dev/null
+++ b/src/app/[locale]/page.test.tsx
@@ -0,0 +1,80 @@
+import type { ReactNode } from "react";
+import { render, screen } from "@testing-library/react";
+import { NextIntlClientProvider } from "next-intl";
+import { DEFAULT_LOCALE } from "@/lib/constants";
+import { HomeContent } from "./HomeContent";
+import messages from "@/locales/en/common.json";
+
+jest.mock("next/navigation", () => ({
+  usePathname: () => `/${DEFAULT_LOCALE}`,
+  useRouter: () => ({
+    push: jest.fn(),
+    replace: jest.fn(),
+    prefetch: jest.fn(),
+  }),
+}));
+
+function TestWrapper({ children }: { children: ReactNode }) {
+  return (
+    <NextIntlClientProvider locale={DEFAULT_LOCALE} messages={messages}>
+      {children}
+    </NextIntlClientProvider>
+  );
+}
+
+describe("Home page", () => {
+  it("renders the hero heading and call-to-action", () => {
+    render(
+      <TestWrapper>
+        <HomeContent />
+      </TestWrapper>
+    );
+
+    expect(
+      screen.getByRole("heading", { name: "Nurture Your Ideas", level: 1 })
+    ).toBeVisible();
+
+    const ctaLink = screen.getByRole("link", { name: "Join Our Community" });
+    expect(ctaLink).toBeVisible();
+    expect(ctaLink).toHaveAttribute("href", "#join");
+  });
+
+  it("highlights the three core features", () => {
+    render(
+      <TestWrapper>
+        <HomeContent />
+      </TestWrapper>
+    );
+
+    const nurture = screen.getAllByText("Nurture Your Ideas");
+    expect(nurture.length).toBeGreaterThanOrEqual(1);
+    expect(nurture[0]).toBeVisible();
+    expect(screen.getByText("Connect with Mentors")).toBeVisible();
+    expect(screen.getByText("Grow Faster Together")).toBeVisible();
+  });
+
+  it("shows footer metadata and navigation links", () => {
+    render(
+      <TestWrapper>
+        <HomeContent />
+      </TestWrapper>
+    );
+
+    const currentYear = new Date().getFullYear();
+    expect(
+      screen.getByText(`© ${currentYear} Growteer. All rights reserved.`)
+    ).toBeVisible();
+
+    expect(screen.getByRole("link", { name: "Privacy" })).toHaveAttribute(
+      "href",
+      `/${DEFAULT_LOCALE}/privacy`
+    );
+    expect(
+      screen.getByRole("link", { name: "Terms & Conditions" })
+    ).toHaveAttribute("href", `/${DEFAULT_LOCALE}/terms`);
+    expect(screen.getByRole("link", { name: "Imprint" })).toHaveAttribute(
+      "href",
+      `/${DEFAULT_LOCALE}/imprint`
+    );
+  });
+});
diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx
new file mode 100644
index 0000000..f1bfafe
--- /dev/null
+++ b/src/app/[locale]/page.tsx
@@ -0,0 +1,5 @@
+import { HomeContent } from "./HomeContent";
+
+export default function Home() {
+  return <HomeContent />;
+}
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
new file mode 100644
index 0000000..718d6fe
Binary files /dev/null and b/src/app/favicon.ico differ
diff --git a/src/app/globals.css b/src/app/globals.css
new file mode 100644
index 0000000..4ed80db
--- /dev/null
+++ b/src/app/globals.css
@@ -0,0 +1,122 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: #ffffff;
+  --foreground: #0f172a;
+  --card: #ffffff;
+  --card-foreground: #0f172a;
+  --popover: #ffffff;
+  --popover-foreground: #0f172a;
+  --primary: #0ea5e9; /* Sky Blue */
+  --primary-foreground: #f8fafc;
+  --secondary: #10b981; /* Emerald */
+  --secondary-foreground: #ecfdf5;
+  --muted: #f1f5f9;
+  --muted-foreground: #475569;
+  --accent: #ec4899; /* Pink */
+  --accent-foreground: #fdf2f8;
+  --destructive: #ef4444;
+  --border: #e2e8f0;
+  --input: #e2e8f0;
+  --ring: #0ea5e9;
+  --chart-1: #0ea5e9;
+  --chart-2: #10b981;
+  --chart-3: #ec4899;
+  --chart-4: #6366f1;
+  --chart-5: #f59e0b;
+  --sidebar: #f8fafc;
+  --sidebar-foreground: #0f172a;
+  --sidebar-primary: #0ea5e9;
+  --sidebar-primary-foreground: #f8fafc;
+  --sidebar-accent: #ec4899;
+  --sidebar-accent-foreground: #fdf2f8;
+  --sidebar-border: #e2e8f0;
+  --sidebar-ring: #0ea5e9;
+}
+
+.dark {
+  --background: #020617;
+  --foreground: #e2e8f0;
+  --card: #0f172a;
+  --card-foreground: #e2e8f0;
+  --popover: #0f172a;
+  --popover-foreground: #e2e8f0;
+  --primary: #38bdf8;
+  --primary-foreground: #082f49;
+  --secondary: #047857;
+  --secondary-foreground: #d1fae5;
+  --muted: #1e293b;
+  --muted-foreground: #94a3b8;
+  --accent: #be185d;
+  --accent-foreground: #fdf2f8;
+  --destructive: #f87171;
+  --border: #1e293b;
+  --input: #1e293b;
+  --ring: #38bdf8;
+  --chart-1: #38bdf8;
+  --chart-2: #22c55e;
+  --chart-3: #ec4899;
+  --chart-4: #a855f7;
+  --chart-5: #facc15;
+  --sidebar: #0f172a;
+  --sidebar-foreground: #e2e8f0;
+  --sidebar-primary: #38bdf8;
+  --sidebar-primary-foreground: #082f49;
+  --sidebar-accent: #be185d;
+  --sidebar-accent-foreground: #fdf2f8;
+  --sidebar-border: #1e293b;
+  --sidebar-ring: #38bdf8;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 0000000..01bdffc
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,43 @@
+import type { Metadata } from "next";
+import { getLocale } from "next-intl/server";
+import { DEFAULT_LOCALE } from "@/lib/constants";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "Growteer",
+  description: "Social Business Platform",
+  manifest: "/manifest.json",
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: "default",
+    title: "Growteer",
+  },
+  formatDetection: {
+    telephone: false,
+  },
+  icons: {
+    icon: "/favicon.ico",
+    apple: "/icon-192.png",
+  },
+};
+
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const locale = await getLocale().catch(() => DEFAULT_LOCALE);
+
+  return (
+    <html lang={locale}>
+      <head>
+        <link rel="manifest" href="/manifest.json" />
+        <meta name="theme-color" content="#000000" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, viewport-fit=cover" />
+      </head>
+      <body className="antialiased">
+        {children}
+      </body>
+    </html>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 0000000..6606fa7
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,6 @@
+import { routing } from "@/lib/i18n/routing";
+import { redirect } from "next/navigation";
+
+export default function Index() {
+    redirect(`/${routing.defaultLocale}`);
+}
\ No newline at end of file
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 0000000..915ea2a
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,64 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..681ad98
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 0000000..8916905
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
new file mode 100644
index 0000000..fb5fbc3
--- /dev/null
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
new file mode 100644
index 0000000..275381c
--- /dev/null
+++ b/src/components/ui/separator.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
diff --git a/src/features/auth/README.md b/src/features/auth/README.md
new file mode 100644
index 0000000..2eeb4aa
--- /dev/null
+++ b/src/features/auth/README.md
@@ -0,0 +1,53 @@
+# Auth Feature Module
+
+This is an example feature module demonstrating the feature-sliced architecture pattern.
+
+## Structure
+
+```
+auth/
+├── api/          # API client functions for this feature
+├── components/   # Feature-specific UI components
+├── hooks/        # Feature-specific React hooks
+├── lib/          # Feature-specific utilities
+└── types/        # Feature-specific TypeScript types
+```
+
+## Usage
+
+### Components
+
+```tsx
+import { LoginForm } from "@/features/auth/components/LoginForm";
+
+export function LoginPage() {
+  return <LoginForm />;
+}
+```
+
+### Hooks
+
+```tsx
+import { useAuth } from "@/features/auth/hooks/useAuth";
+
+export function UserProfile() {
+  const { user, isAuthenticated, logout } = useAuth();
+  // ...
+}
+```
+
+### API Functions
+
+```tsx
+import { login } from "@/features/auth/api/auth";
+
+const response = await login({ email: "user@example.com", password: "password" });
+```
+
+## Pattern
+
+This feature demonstrates:
+- **Separation of concerns**: Each folder has a specific purpose
+- **Reusability**: Hooks and API functions can be used across components
+- **Type safety**: Types are defined in the feature module
+- **Integration**: Uses shared utilities (validation, API client) from `lib/`
diff --git a/src/features/auth/api/auth.ts b/src/features/auth/api/auth.ts
new file mode 100644
index 0000000..1b5db78
--- /dev/null
+++ b/src/features/auth/api/auth.ts
@@ -0,0 +1,37 @@
+import { apiClient } from "@/lib/api";
+import type { AuthResponse, LoginRequest, RegisterRequest } from "../types";
+
+/**
+ * Authentication API functions
+ * These functions use the centralized API client to make requests
+ */
+
+//TODO: review this whole feature
+export async function login(credentials: LoginRequest) {
+  return apiClient.post<AuthResponse, string>(
+    "/auth/login",
+    JSON.stringify(credentials)
+  );
+}
+
+export async function register(data: RegisterRequest) {
+  return apiClient.post<AuthResponse, string>(
+    "/auth/register",
+    JSON.stringify(data)
+  );
+}
+
+export async function logout() {
+  return apiClient.post<unknown, string>("/auth/logout", "{}");
+}
+
+export async function refreshToken(refreshToken: string) {
+  return apiClient.post<AuthResponse, string>(
+    "/auth/refresh",
+    JSON.stringify({ refreshToken })
+  );
+}
+
+export async function getCurrentUser() {
+  return apiClient.get<AuthResponse>("/auth/me");
+}
diff --git a/src/features/auth/components/LoginForm.tsx b/src/features/auth/components/LoginForm.tsx
new file mode 100644
index 0000000..fa2e4a0
--- /dev/null
+++ b/src/features/auth/components/LoginForm.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import { useTypedForm } from "@/lib/validation/form-helpers";
+import { loginSchema, type LoginFormData } from "@/lib/validation";
+import { useAuth } from "../hooks/useAuth";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+/**
+ * Login form component
+ * Demonstrates the feature-sliced architecture pattern:
+ * - Uses feature-specific hooks (useAuth)
+ * - Uses shared validation utilities
+ * - Uses shared UI components
+ */
+export function LoginForm() {
+  const { login, isLoggingIn, loginError } = useAuth();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useTypedForm(loginSchema);
+
+  const onSubmit = async (data: LoginFormData) => {
+    try {
+      await login(data);
+    } catch (error) {
+      // Error handling is done in the useAuth hook
+      console.error("Login failed:", error);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+      <div>
+        <Label htmlFor="email">Email</Label>
+        <Input
+          id="email"
+          type="email"
+          {...register("email")}
+          aria-invalid={errors.email ? "true" : "false"}
+        />
+        {errors.email && (
+          <p className="text-sm text-destructive mt-1">{errors.email.message}</p>
+        )}
+      </div>
+
+      <div>
+        <Label htmlFor="password">Password</Label>
+        <Input
+          id="password"
+          type="password"
+          {...register("password")}
+          aria-invalid={errors.password ? "true" : "false"}
+        />
+        {errors.password && (
+          <p className="text-sm text-destructive mt-1">
+            {errors.password.message}
+          </p>
+        )}
+      </div>
+
+      {loginError && (
+        <p className="text-sm text-destructive">
+          {(loginError as Error).message || "Login failed. Please try again."}
+        </p>
+      )}
+
+      <Button type="submit" disabled={isLoggingIn} className="w-full">
+        {isLoggingIn ? "Logging in..." : "Login"}
+      </Button>
+    </form>
+  );
+}
diff --git a/src/features/auth/components/RegisterForm.tsx b/src/features/auth/components/RegisterForm.tsx
new file mode 100644
index 0000000..6a2a895
--- /dev/null
+++ b/src/features/auth/components/RegisterForm.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import { useTypedForm } from "@/lib/validation/form-helpers";
+import { registerSchema, type RegisterFormData } from "@/lib/validation";
+import { useAuth } from "../hooks/useAuth";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+/**
+ * Register form component
+ * Demonstrates the feature-sliced architecture pattern
+ */
+export function RegisterForm() {
+  const { register: registerUser, isRegistering, registerError } = useAuth();
+  const {
+    register: registerField,
+    handleSubmit,
+    formState: { errors },
+  } = useTypedForm(registerSchema);
+
+  const onSubmit = async (data: RegisterFormData) => {
+    try {
+      await registerUser(data);
+    } catch (error) {
+      console.error("Registration failed:", error);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+      <div>
+        <Label htmlFor="name">Name (optional)</Label>
+        <Input
+          id="name"
+          type="text"
+          {...registerField("name")}
+          aria-invalid={errors.name ? "true" : "false"}
+        />
+        {errors.name && (
+          <p className="text-sm text-destructive mt-1">{errors.name.message}</p>
+        )}
+      </div>
+
+      <div>
+        <Label htmlFor="email">Email</Label>
+        <Input
+          id="email"
+          type="email"
+          {...registerField("email")}
+          aria-invalid={errors.email ? "true" : "false"}
+        />
+        {errors.email && (
+          <p className="text-sm text-destructive mt-1">{errors.email.message}</p>
+        )}
+      </div>
+
+      <div>
+        <Label htmlFor="password">Password</Label>
+        <Input
+          id="password"
+          type="password"
+          {...registerField("password")}
+          aria-invalid={errors.password ? "true" : "false"}
+        />
+        {errors.password && (
+          <p className="text-sm text-destructive mt-1">
+            {errors.password.message}
+          </p>
+        )}
+      </div>
+
+      <div>
+        <Label htmlFor="confirmPassword">Confirm Password</Label>
+        <Input
+          id="confirmPassword"
+          type="password"
+          {...registerField("confirmPassword")}
+          aria-invalid={errors.confirmPassword ? "true" : "false"}
+        />
+        {errors.confirmPassword && (
+          <p className="text-sm text-destructive mt-1">
+            {errors.confirmPassword.message}
+          </p>
+        )}
+      </div>
+
+      {registerError && (
+        <p className="text-sm text-destructive">
+          {(registerError as Error).message ||
+            "Registration failed. Please try again."}
+        </p>
+      )}
+
+      <Button type="submit" disabled={isRegistering} className="w-full">
+        {isRegistering ? "Registering..." : "Register"}
+      </Button>
+    </form>
+  );
+}
diff --git a/src/features/auth/hooks/useAuth.ts b/src/features/auth/hooks/useAuth.ts
new file mode 100644
index 0000000..03d7638
--- /dev/null
+++ b/src/features/auth/hooks/useAuth.ts
@@ -0,0 +1,75 @@
+"use client";
+
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useAuthStore } from "@/store/authStore";
+import { login, register, logout, getCurrentUser } from "../api/auth";
+import type { LoginRequest, RegisterRequest } from "../types";
+
+/**
+ * Custom hook for authentication operations
+ * Integrates TanStack Query for server state and Zustand for client state
+ */
+export function useAuth() {
+  const { user, isAuthenticated, login: setAuth, logout: clearAuth } = useAuthStore();
+  const queryClient = useQueryClient();
+
+  // Fetch current user
+  const { data: currentUser, isLoading } = useQuery({
+    queryKey: ["auth", "current-user"],
+    queryFn: async () => {
+      const response = await getCurrentUser();
+      if (response.success && response.data) {
+        setAuth(response.data.user, ""); // Token is stored separately
+        return response.data.user;
+      }
+      return null;
+    },
+    enabled: isAuthenticated,
+    staleTime: 5 * 60 * 1000, // 5 minutes
+  });
+
+  // Login mutation
+  const loginMutation = useMutation({
+    mutationFn: (credentials: LoginRequest) => login(credentials),
+    onSuccess: (response) => {
+      if (response.success && response.data) {
+        setAuth(response.data.user, response.data.accessToken);
+        queryClient.invalidateQueries({ queryKey: ["auth"] });
+      }
+    },
+  });
+
+  // Register mutation
+  const registerMutation = useMutation({
+    mutationFn: (data: RegisterRequest) => register(data),
+    onSuccess: (response) => {
+      if (response.success && response.data) {
+        setAuth(response.data.user, response.data.accessToken);
+        queryClient.invalidateQueries({ queryKey: ["auth"] });
+      }
+    },
+  });
+
+  // Logout mutation
+  const logoutMutation = useMutation({
+    mutationFn: () => logout(),
+    onSuccess: () => {
+      clearAuth();
+      queryClient.clear();
+    },
+  });
+
+  return {
+    user: currentUser || user,
+    isAuthenticated,
+    isLoading,
+    login: loginMutation.mutateAsync,
+    register: registerMutation.mutateAsync,
+    logout: logoutMutation.mutateAsync,
+    isLoggingIn: loginMutation.isPending,
+    isRegistering: registerMutation.isPending,
+    isLoggingOut: logoutMutation.isPending,
+    loginError: loginMutation.error,
+    registerError: registerMutation.error,
+  };
+}
diff --git a/src/features/auth/lib/utils.ts b/src/features/auth/lib/utils.ts
new file mode 100644
index 0000000..77f4ddc
--- /dev/null
+++ b/src/features/auth/lib/utils.ts
@@ -0,0 +1,18 @@
+export function isTokenExpired(token: string): boolean {
+  try {
+    const payload = JSON.parse(atob(token.split(".")[1]));
+    const exp = payload.exp * 1000; // Convert to milliseconds
+    return Date.now() >= exp;
+  } catch {
+    return true; // If we can't parse the token, consider it expired
+  }
+}
+
+export function getUserIdFromToken(token: string): string | null {
+  try {
+    const payload = JSON.parse(atob(token.split(".")[1]));
+    return payload.sub || null;
+  } catch {
+    return null;
+  }
+}
diff --git a/src/features/auth/types/index.ts b/src/features/auth/types/index.ts
new file mode 100644
index 0000000..3a449bb
--- /dev/null
+++ b/src/features/auth/types/index.ts
@@ -0,0 +1,26 @@
+// Feature-specific types for authentication
+
+export interface User {
+  id: string;
+  email: string;
+  name?: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface LoginRequest {
+  email: string;
+  password: string;
+}
+
+export interface RegisterRequest {
+  email: string;
+  password: string;
+  name?: string;
+}
+
+export interface AuthResponse {
+  user: User;
+  accessToken: string;
+  refreshToken?: string;
+}
diff --git a/src/features/landing/FeatureCard.tsx b/src/features/landing/FeatureCard.tsx
new file mode 100644
index 0000000..280dad1
--- /dev/null
+++ b/src/features/landing/FeatureCard.tsx
@@ -0,0 +1,51 @@
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+type FeatureAccent = "primary" | "secondary" | "accent";
+
+export interface FeatureCardProps {
+  icon: ReactNode;
+  title: string;
+  description: string;
+  accent: FeatureAccent;
+}
+
+const accentClassMap: Record<FeatureAccent, string> = {
+  accent: "text-accent bg-accent/15",
+  secondary: "text-secondary bg-secondary/15",
+  primary: "text-primary bg-primary/15",
+};
+
+export function FeatureCard({
+  icon,
+  title,
+  description,
+  accent,
+}: FeatureCardProps) {
+  return (
+    <Card className="flex flex-col items-center gap-4 text-center">
+      <CardHeader className="flex flex-col items-center gap-4 pb-0">
+        <div
+          className={cn(
+            "flex size-20 items-center justify-center rounded-full",
+            "ring-1 ring-inset ring-border/40",
+            accentClassMap[accent]
+          )}
+        >
+          {icon}
+        </div>
+        <CardTitle className="text-xl">{title}</CardTitle>
+      </CardHeader>
+      <CardContent className="pt-0">
+        <CardDescription className="text-base">{description}</CardDescription>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/features/landing/FooterLink.tsx b/src/features/landing/FooterLink.tsx
new file mode 100644
index 0000000..4acc0d2
--- /dev/null
+++ b/src/features/landing/FooterLink.tsx
@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import { Link } from "@/lib/i18n/routing";
+import { Button } from "@/components/ui/button";
+
+export interface FooterLinkProps {
+  href: string;
+  children: ReactNode;
+}
+
+export function FooterLink({ href, children }: FooterLinkProps) {
+  return (
+    <Button variant="link" size="sm" asChild className="text-muted-foreground h-auto p-0 font-normal hover:text-foreground">
+      <Link href={href}>{children}</Link>
+    </Button>
+  );
+}
diff --git a/src/lib/api/client.ts b/src/lib/api/client.ts
new file mode 100644
index 0000000..e261d67
--- /dev/null
+++ b/src/lib/api/client.ts
@@ -0,0 +1,174 @@
+import { apiConfig } from "./config";
+import type {
+  APIError,
+  APIRequestConfig,
+  APIClientConfig,
+  APIResponse,
+} from "./types";
+
+class APIClient {
+  private readonly baseURL: string;
+  private readonly defaultHeaders: Record<string, string>;
+  private readonly defaultRequestTimeoutMs: number;
+  //TODO: the client should take an interface with methods that encapsulate auth/storage logic
+  private readonly authStorageKey: string;
+  private readonly unauthorizedRedirectPath: string;
+
+  constructor(config: APIClientConfig = {}) {
+    this.baseURL = config.baseURL ?? apiConfig.baseURL;
+    this.defaultRequestTimeoutMs =
+      config.defaultRequestTimeoutMs ?? apiConfig.defaultRequestTimeoutMs;
+    this.authStorageKey = config.authStorageKey ?? apiConfig.authStorageKey;
+    this.unauthorizedRedirectPath =
+      config.unauthorizedRedirectPath ?? apiConfig.unauthorizedRedirectPath;
+    this.defaultHeaders = config.defaultHeaders ?? {
+      "Content-Type": "application/json",
+    };
+  }
+
+  private async request<T, S extends BodyInit | null>(
+    endpoint: string,
+    method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE",
+    body: S,
+    requestConfig: APIRequestConfig = {}
+  ): Promise<APIResponse<T>> {
+    const {
+      headers: requestHeaders = {},
+      signal: requestSignal,
+      timeout: requestTimeout,
+      cache,
+      credentials,
+    } = requestConfig;
+
+    const url = endpoint.startsWith("https")
+      ? endpoint
+      : `${this.baseURL}${endpoint}`;
+
+    const headers: Record<string, string> = {
+      ...this.defaultHeaders,
+      ...requestHeaders,
+    };
+    const token = this.getAuthToken();
+    if (token) headers["Authorization"] = `Bearer ${token}`;
+
+    const timeoutMs = requestTimeout ?? this.defaultRequestTimeoutMs;
+    const controller = new AbortController();
+    const signal = requestSignal ?? controller.signal;
+    const timeoutId =
+      !requestSignal && timeoutMs > 0
+        ? setTimeout(() => controller.abort(), timeoutMs)
+        : undefined;
+
+    try {
+      const response = await fetch(url, {
+        method,
+        body,
+        headers,
+        signal,
+        cache,
+        credentials,
+      });
+
+      if (timeoutId) clearTimeout(timeoutId);
+
+      //TODO: better typing once we have generated api types
+      const data = (await response.json().catch(() => ({}))) as unknown;
+
+      if (!response.ok) {
+        const error: APIError = {
+          message:
+            (data as APIError).message ||
+            `HTTP Error: ${response.status} ${response.statusText}`,
+          code: (data as APIError).code ?? `HTTP_${response.status}`,
+          field: (data as APIError).field,
+        };
+
+        if (response.status === 401) this.handleUnauthorized();
+
+        return { success: false, error };
+      }
+
+      return { success: true, data: data as T };
+    } catch (err) {
+      if (timeoutId) clearTimeout(timeoutId);
+
+      if (err instanceof Error && err.name === "AbortError") {
+        return {
+          success: false,
+          error: { message: "Request timeout", code: "TIMEOUT" },
+        };
+      }
+
+      return {
+        success: false,
+        error: {
+          message:
+            err instanceof Error ? err.message : "An unexpected error occurred",
+          code: "NETWORK_ERROR",
+        },
+      };
+    }
+  }
+
+  private getAuthToken(): string | null {
+    if (typeof window === "undefined") return null;
+    try {
+      const raw = localStorage.getItem(this.authStorageKey);
+      if (!raw) return null;
+      const parsed = JSON.parse(raw) as { state?: { accessToken?: string } };
+      return parsed.state?.accessToken ?? null;
+    } catch {
+      return null;
+    }
+  }
+
+  private handleUnauthorized(): void {
+    if (typeof window === "undefined") return;
+    localStorage.removeItem(this.authStorageKey);
+    const path = this.unauthorizedRedirectPath;
+    if (!window.location.pathname.includes(path)) {
+      window.location.href = path;
+    }
+  }
+
+  async get<T>(
+    endpoint: string,
+    requestConfig?: APIRequestConfig
+  ): Promise<APIResponse<T>> {
+    return this.request<T, null>(endpoint, "GET", null, requestConfig);
+  }
+
+  async post<T, S extends BodyInit | null>(
+    endpoint: string,
+    data: S,
+    requestConfig?: APIRequestConfig
+  ): Promise<APIResponse<T>> {
+    return this.request<T, S>(endpoint, "POST", data, requestConfig);
+  }
+
+  async put<T, S extends BodyInit | null>(
+    endpoint: string,
+    data: S,
+    requestConfig?: APIRequestConfig
+  ): Promise<APIResponse<T>> {
+    return this.request<T, S>(endpoint, "PUT", data, requestConfig);
+  }
+
+  async patch<T, S extends BodyInit | null>(
+    endpoint: string,
+    data: S,
+    requestConfig?: APIRequestConfig
+  ): Promise<APIResponse<T>> {
+    return this.request<T, S>(endpoint, "PATCH", data, requestConfig);
+  }
+
+  async delete<T>(
+    endpoint: string,
+    requestConfig?: APIRequestConfig
+  ): Promise<APIResponse<T>> {
+    return this.request<T, null>(endpoint, "DELETE", null, requestConfig);
+  }
+}
+
+export const apiClient = new APIClient();
+export { APIClient };
diff --git a/src/lib/api/config.ts b/src/lib/api/config.ts
new file mode 100644
index 0000000..ef5b516
--- /dev/null
+++ b/src/lib/api/config.ts
@@ -0,0 +1,12 @@
+import {
+  API_BASE_URL,
+  AUTH_STORAGE_KEY,
+  ROUTES,
+} from "@/lib/constants";
+
+export const apiConfig = {
+  baseURL: API_BASE_URL,
+  defaultRequestTimeoutMs: 30_000,
+  authStorageKey: AUTH_STORAGE_KEY,
+  unauthorizedRedirectPath: ROUTES.SIGNIN,
+} as const;
diff --git a/src/lib/api/generated/.gitkeep b/src/lib/api/generated/.gitkeep
new file mode 100644
index 0000000..292d989
--- /dev/null
+++ b/src/lib/api/generated/.gitkeep
@@ -0,0 +1,2 @@
+# Auto-generated API types will be placed here
+# Generated from OpenAPI spec or GraphQL schema
diff --git a/src/lib/api/generated/README.md b/src/lib/api/generated/README.md
new file mode 100644
index 0000000..b7edd7f
--- /dev/null
+++ b/src/lib/api/generated/README.md
@@ -0,0 +1,28 @@
+# Generated API Types
+
+This directory contains auto-generated TypeScript types from your backend API specification (OpenAPI or GraphQL).
+
+## Setup
+
+See `scripts/generate-api-types.md` for instructions on setting up type generation.
+
+## Structure
+
+- Types are generated into files here (e.g., `api-types.ts` or `graphql-types.ts`)
+- The types are exported from `src/lib/api/index.ts` for use throughout the application
+- Never manually edit files in this directory - they are auto-generated
+- Add this directory to `.gitignore` if types are generated in CI, or commit them if generated locally
+
+## Integration
+
+After generating types:
+
+1. Update `src/lib/api/index.ts` to export the generated types:
+   ```typescript
+   export * from "./generated/api-types"; // or graphql-types
+   ```
+
+2. Use types in your API client functions:
+   ```typescript
+   import type { User, CreateUserRequest } from "@/lib/api";
+   ```
diff --git a/src/lib/api/index.ts b/src/lib/api/index.ts
new file mode 100644
index 0000000..240809d
--- /dev/null
+++ b/src/lib/api/index.ts
@@ -0,0 +1,12 @@
+export { apiConfig } from "./config";
+export { apiClient, APIClient } from "./client";
+export type {
+    APIError,
+    APIRequestConfig,
+    APIClientConfig,
+    APIResponse,
+    BaseEntity,
+} from "./types";
+
+// Export generated types when available
+// export * from "./generated";
diff --git a/src/lib/api/types.ts b/src/lib/api/types.ts
new file mode 100644
index 0000000..3f47852
--- /dev/null
+++ b/src/lib/api/types.ts
@@ -0,0 +1,33 @@
+export interface BaseEntity {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface APIError {
+  message: string;
+  code?: string;
+  field?: string;
+}
+
+export interface APIResponse<T> {
+  data?: T;
+  error?: APIError;
+  success: boolean;
+}
+
+export interface APIClientConfig {
+  baseURL?: string;
+  defaultHeaders?: Record<string, string>;
+  defaultRequestTimeoutMs?: number;
+  authStorageKey?: string;
+  unauthorizedRedirectPath?: string;
+}
+
+export interface APIRequestConfig {
+  headers?: Record<string, string>;
+  signal?: AbortSignal;
+  timeout?: number;
+  cache?: RequestCache;
+  credentials?: RequestCredentials;
+}
\ No newline at end of file
diff --git a/src/lib/constants/index.ts b/src/lib/constants/index.ts
new file mode 100644
index 0000000..ede4781
--- /dev/null
+++ b/src/lib/constants/index.ts
@@ -0,0 +1,20 @@
+// App-wide constants
+
+export const APP_NAME = "Growteer";
+
+export const SUPPORTED_LOCALES = ["en", "de"];
+export const DEFAULT_LOCALE = "en";
+
+export const API_BASE_URL =
+  process.env.NEXT_PUBLIC_API_BASE_URL || "http://localhost:8080/api";
+
+/** localStorage key for persisted auth state (Zustand). Shared with API client. */
+export const AUTH_STORAGE_KEY = "auth-storage";
+
+export const ROUTES = {
+  HOME: "/",
+  SIGNIN: "/signin",
+  SIGNUP: "/signup",
+  PROFILE: "/profile",
+  FEED: "/feed",
+} as const;
diff --git a/src/lib/i18n/config.ts b/src/lib/i18n/config.ts
new file mode 100644
index 0000000..797c82d
--- /dev/null
+++ b/src/lib/i18n/config.ts
@@ -0,0 +1,15 @@
+import { getRequestConfig } from "next-intl/server";
+import { routing } from "./routing";
+
+export default getRequestConfig(async ({ requestLocale }) => {
+  let locale = await requestLocale;
+
+  if (!locale || !routing.locales.includes(locale)) {
+    locale = routing.defaultLocale;
+  }
+
+  return {
+    locale,
+    messages: (await import(`../../locales/${locale}/common.json`)).default,
+  };
+});
diff --git a/src/lib/i18n/routing.ts b/src/lib/i18n/routing.ts
new file mode 100644
index 0000000..01981ab
--- /dev/null
+++ b/src/lib/i18n/routing.ts
@@ -0,0 +1,16 @@
+import { defineRouting } from "next-intl/routing";
+import { createNavigation } from "next-intl/navigation";
+import { DEFAULT_LOCALE, SUPPORTED_LOCALES } from "../constants";
+
+export const routing = defineRouting({
+  // A list of all locales that are supported
+  locales: SUPPORTED_LOCALES,
+
+  // Used when no locale matches
+  defaultLocale: DEFAULT_LOCALE,
+});
+
+// Lightweight wrappers around Next.js' navigation APIs
+// that will consider the routing configuration
+export const { Link, redirect, usePathname, useRouter } =
+  createNavigation(routing);
diff --git a/src/lib/pwa/README.md b/src/lib/pwa/README.md
new file mode 100644
index 0000000..95d3faa
--- /dev/null
+++ b/src/lib/pwa/README.md
@@ -0,0 +1,57 @@
+# PWA Configuration
+
+This directory contains utilities and configuration for Progressive Web App (PWA) support.
+
+## Files
+
+- `service-worker.ts` - Service Worker registration utilities
+- `install-prompt.ts` - PWA install prompt hook
+
+## Setup
+
+1. **Manifest**: The `manifest.json` is in `/public/manifest.json` and is automatically linked in the root layout.
+
+2. **Service Worker**: A basic service worker is provided at `/public/sw.js`. For production, consider using Workbox for advanced caching strategies.
+
+3. **Icons**: You'll need to add PWA icons:
+   - `/public/icon-192.png` (192x192)
+   - `/public/icon-512.png` (512x512)
+
+## Usage
+
+### Service Worker Registration
+
+```tsx
+import { registerServiceWorker } from "@/lib/pwa/service-worker";
+
+// In a client component
+useEffect(() => {
+  registerServiceWorker();
+}, []);
+```
+
+### Install Prompt
+
+```tsx
+import { usePWAInstallPrompt } from "@/lib/pwa/install-prompt";
+
+function InstallButton() {
+  const { isInstallable, promptInstall } = usePWAInstallPrompt();
+
+  if (!isInstallable) return null;
+
+  return (
+    <button onClick={promptInstall}>
+      Install App
+    </button>
+  );
+}
+```
+
+## Offline Strategy
+
+The basic service worker caches static assets. For more advanced offline support:
+- Use Workbox for runtime caching strategies
+- Implement IndexedDB for data storage
+- Add offline fallback pages
+- Implement background sync for API requests
diff --git a/src/lib/pwa/install-prompt.ts b/src/lib/pwa/install-prompt.ts
new file mode 100644
index 0000000..0735391
--- /dev/null
+++ b/src/lib/pwa/install-prompt.ts
@@ -0,0 +1,58 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+/**
+ * Hook to handle PWA install prompt
+ * Returns a function to show the install prompt when available
+ */
+export function usePWAInstallPrompt() {
+  const [deferredPrompt, setDeferredPrompt] =
+    useState<BeforeInstallPromptEvent | null>(null);
+  const [isInstallable, setIsInstallable] = useState(false);
+
+  useEffect(() => {
+    const handler = (e: BeforeInstallPromptEvent) => {
+      e.preventDefault();
+      setDeferredPrompt(e);
+      setIsInstallable(true);
+    };
+
+    window.addEventListener("beforeinstallprompt", handler);
+
+    return () => {
+      window.removeEventListener("beforeinstallprompt", handler);
+    };
+  }, []);
+
+  const promptInstall = async (): Promise<boolean> => {
+    if (!deferredPrompt) {
+      return false;
+    }
+
+    deferredPrompt.prompt();
+    const { outcome } = await deferredPrompt.userChoice;
+
+    if (outcome === "accepted") {
+      setDeferredPrompt(null);
+      setIsInstallable(false);
+      return true;
+    }
+
+    return false;
+  };
+
+  return { isInstallable, promptInstall };
+}
+
+// Type definition for the beforeinstallprompt event
+interface BeforeInstallPromptEvent extends Event {
+  prompt: () => Promise<void>;
+  userChoice: Promise<{ outcome: "accepted" | "dismissed" }>;
+}
+
+declare global {
+  interface WindowEventMap {
+    beforeinstallprompt: BeforeInstallPromptEvent;
+  }
+}
diff --git a/src/lib/pwa/service-worker.ts b/src/lib/pwa/service-worker.ts
new file mode 100644
index 0000000..f874a51
--- /dev/null
+++ b/src/lib/pwa/service-worker.ts
@@ -0,0 +1,33 @@
+// Service Worker registration utility
+// This can be enhanced with Workbox or similar for advanced caching strategies
+
+export function registerServiceWorker() {
+  if (typeof window === "undefined" || !("serviceWorker" in navigator)) {
+    return;
+  }
+
+  window.addEventListener("load", () => {
+    navigator.serviceWorker
+      .register("/sw.js")
+      .then((registration) => {
+        console.log("Service Worker registered:", registration.scope);
+      })
+      .catch((error) => {
+        console.error("Service Worker registration failed:", error);
+      });
+  });
+}
+
+export function unregisterServiceWorker() {
+  if (typeof window === "undefined" || !("serviceWorker" in navigator)) {
+    return;
+  }
+
+  navigator.serviceWorker.ready
+    .then((registration) => {
+      registration.unregister();
+    })
+    .catch((error) => {
+      console.error("Service Worker unregistration failed:", error);
+    });
+}
diff --git a/src/lib/react-query/provider.tsx b/src/lib/react-query/provider.tsx
new file mode 100644
index 0000000..1be7dd6
--- /dev/null
+++ b/src/lib/react-query/provider.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { useState, type ReactNode } from "react";
+
+export function ReactQueryProvider({ children }: { children: ReactNode }) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            // With SSR, we usually want to set some default staleTime
+            // above 0 to avoid refetching immediately on the client
+            staleTime: 60 * 1000, // 1 minute
+            refetchOnWindowFocus: false,
+            retry: 1,
+          },
+        },
+      })
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      {process.env.NODE_ENV === "development" && (
+        <ReactQueryDevtools initialIsOpen={false} />
+      )}
+    </QueryClientProvider>
+  );
+}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..a5ef193
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/src/lib/validation/form-helpers.tsx b/src/lib/validation/form-helpers.tsx
new file mode 100644
index 0000000..82b87da
--- /dev/null
+++ b/src/lib/validation/form-helpers.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm, type UseFormReturn } from "react-hook-form";
+import type { z } from "zod";
+
+/** Form values type: schema output intersected with FieldValues for RHF compat. */
+type FormValues<T extends z.ZodTypeAny> = z.output<T> & Record<string, unknown>;
+
+/**
+ * Type-safe form hook that integrates React Hook Form with Zod validation.
+ * Uses assertions to bridge Zod 4 and @hookform/resolvers typings.
+ */
+export function useTypedForm<T extends z.ZodTypeAny>(
+  schema: T,
+  options?: object
+): UseFormReturn<FormValues<T>> {
+  const form = useForm({
+    resolver: zodResolver(schema as never),
+    mode: "onBlur",
+    ...options,
+  });
+  return form as unknown as UseFormReturn<FormValues<T>>;
+}
diff --git a/src/lib/validation/index.ts b/src/lib/validation/index.ts
new file mode 100644
index 0000000..4011a9f
--- /dev/null
+++ b/src/lib/validation/index.ts
@@ -0,0 +1,21 @@
+import { z } from "zod";
+
+export * from "./schemas";
+
+// Get field error from Zod error
+export function getFieldError(
+  errors: { field?: string; message: string }[],
+  fieldName: string
+): string | undefined {
+  return errors.find((error) => error.field === fieldName)?.message;
+}
+
+// Format Zod errors for form display
+export function formatZodErrors(
+  error: z.ZodError
+): { field?: string; message: string }[] {
+  return error.issues.map((issue) => ({
+    field: issue.path.map(String).join("."),
+    message: issue.message,
+  }));
+}
diff --git a/src/lib/validation/schemas.ts b/src/lib/validation/schemas.ts
new file mode 100644
index 0000000..531511a
--- /dev/null
+++ b/src/lib/validation/schemas.ts
@@ -0,0 +1,44 @@
+import { z } from "zod";
+
+// Common validation schemas that can be reused across the application
+
+// Email validation
+export const emailSchema = z.string().email("Invalid email address");
+
+// Password validation
+export const passwordSchema = z
+  .string()
+  .min(8, "Password must be at least 8 characters")
+  .regex(/[A-Z]/, "Password must contain at least one uppercase letter")
+  .regex(/[a-z]/, "Password must contain at least one lowercase letter")
+  .regex(/[0-9]/, "Password must contain at least one number");
+
+// Common string schemas
+export const nonEmptyStringSchema = z.string().min(1, "This field is required");
+
+// Date schemas
+export const dateSchema = z.coerce.date();
+export const dateStringSchema = z.string().regex(/^\d{4}-\d{2}-\d{2}$/, "Invalid date format");
+
+// Example: Login form schema
+export const loginSchema = z.object({
+  email: emailSchema,
+  password: nonEmptyStringSchema,
+});
+
+// Example: Register form schema
+export const registerSchema = z
+  .object({
+    email: emailSchema,
+    password: passwordSchema,
+    confirmPassword: passwordSchema,
+    name: z.string().min(2, "Name must be at least 2 characters").optional(),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: "Passwords don't match",
+    path: ["confirmPassword"],
+  });
+
+// Export types inferred from schemas
+export type LoginFormData = z.infer<typeof loginSchema>;
+export type RegisterFormData = z.infer<typeof registerSchema>;
diff --git a/src/locales/de/common.json b/src/locales/de/common.json
new file mode 100644
index 0000000..79911b7
--- /dev/null
+++ b/src/locales/de/common.json
@@ -0,0 +1,40 @@
+{
+  "common": {
+    "appName": "Growteer",
+    "welcome": "Willkommen bei Growteer",
+    "loading": "Lädt...",
+    "error": "Ein Fehler ist aufgetreten",
+    "retry": "Wiederholen",
+    "cancel": "Abbrechen",
+    "confirm": "Bestätigen",
+    "save": "Speichern",
+    "delete": "Löschen",
+    "edit": "Bearbeiten",
+    "close": "Schließen"
+  },
+  "navigation": {
+    "home": "Startseite",
+    "login": "Anmelden",
+    "register": "Registrieren",
+    "dashboard": "Dashboard",
+    "profile": "Profil",
+    "jobs": "Stellenangebote",
+    "feed": "Feed"
+  },
+  "footer": {
+    "privacy": "Datenschutz",
+    "terms": "AGB",
+    "imprint": "Impressum",
+    "copyright": "© {year} Growteer. Alle Rechte vorbehalten."
+  },
+  "landing": {
+    "nurtureTitle": "Ideen fördern",
+    "nurtureDescription": "Verwandeln Sie ehrgeizige Konzepte in blühende Initiativen mit kuratierten Anleitungen und Ressourcen.",
+    "connectTitle": "Mit Mentoren verbinden",
+    "connectDescription": "Arbeiten Sie mit erfahrenen Förderern zusammen, die bereit sind, Ihre Wachstumsreise zu unterstützen.",
+    "growTitle": "Gemeinsam schneller wachsen",
+    "growDescription": "Nutzen Sie Tools, Workshops und Community-Feedback, die darauf ausgelegt sind, sinnvollen Fortschritt zu beschleunigen.",
+    "startGrowing": "Heute mit dem Wachstum beginnen",
+    "joinCommunity": "Treten Sie unserer Community bei"
+  }
+}
diff --git a/src/locales/en/common.json b/src/locales/en/common.json
new file mode 100644
index 0000000..481a008
--- /dev/null
+++ b/src/locales/en/common.json
@@ -0,0 +1,40 @@
+{
+  "common": {
+    "appName": "Growteer",
+    "welcome": "Welcome to Growteer",
+    "loading": "Loading...",
+    "error": "An error occurred",
+    "retry": "Retry",
+    "cancel": "Cancel",
+    "confirm": "Confirm",
+    "save": "Save",
+    "delete": "Delete",
+    "edit": "Edit",
+    "close": "Close"
+  },
+  "navigation": {
+    "home": "Home",
+    "login": "Login",
+    "register": "Register",
+    "dashboard": "Dashboard",
+    "profile": "Profile",
+    "jobs": "Jobs",
+    "feed": "Feed"
+  },
+  "footer": {
+    "privacy": "Privacy",
+    "terms": "Terms & Conditions",
+    "imprint": "Imprint",
+    "copyright": "© {year} Growteer. All rights reserved."
+  },
+  "landing": {
+    "nurtureTitle": "Nurture Your Ideas",
+    "nurtureDescription": "Turn ambitious concepts into thriving initiatives with curated guidance and resources.",
+    "connectTitle": "Connect with Mentors",
+    "connectDescription": "Collaborate with experienced growers who are ready to champion your growth journey.",
+    "growTitle": "Grow Faster Together",
+    "growDescription": "Access tools, workshops, and community feedback designed to accelerate meaningful progress.",
+    "startGrowing": "Start Growing Today",
+    "joinCommunity": "Join Our Community"
+  }
+}
diff --git a/src/store/authStore.ts b/src/store/authStore.ts
new file mode 100644
index 0000000..8a7df6f
--- /dev/null
+++ b/src/store/authStore.ts
@@ -0,0 +1,51 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { AUTH_STORAGE_KEY } from "@/lib/constants";
+
+interface AuthState {
+  user: {
+    id: string;
+    email: string;
+    name?: string;
+  } | null;
+  accessToken: string | null;
+  isAuthenticated: boolean;
+  login: (user: { id: string; email: string; name?: string }, token: string) => void;
+  logout: () => void;
+  updateUser: (user: Partial<{ name: string; email: string }>) => void;
+}
+
+export const useAuthStore = create<AuthState>()(
+  persist(
+    (set) => ({
+      user: null,
+      accessToken: null,
+      isAuthenticated: false,
+      login: (user, accessToken) =>
+        set({
+          user,
+          accessToken,
+          isAuthenticated: true,
+        }),
+      logout: () =>
+        set({
+          user: null,
+          accessToken: null,
+          isAuthenticated: false,
+        }),
+      updateUser: (updates) =>
+        set((state) => ({
+          user: state.user ? { ...state.user, ...updates } : null,
+        })),
+    }),
+    {
+      name: AUTH_STORAGE_KEY,
+      // Only persist specific fields
+      partialize: (state) => ({
+        user: state.user,
+        accessToken: state.accessToken,
+        isAuthenticated: state.isAuthenticated,
+      }),
+    }
+  )
+);
diff --git a/src/store/uiStore.ts b/src/store/uiStore.ts
new file mode 100644
index 0000000..d6151c8
--- /dev/null
+++ b/src/store/uiStore.ts
@@ -0,0 +1,25 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+interface UIState {
+  theme: "light" | "dark" | "system";
+  sidebarOpen: boolean;
+  setTheme: (theme: "light" | "dark" | "system") => void;
+  setSidebarOpen: (open: boolean) => void;
+  toggleSidebar: () => void;
+}
+
+export const useUIStore = create<UIState>()(
+  persist(
+    (set) => ({
+      theme: "system",
+      sidebarOpen: false,
+      setTheme: (theme) => set({ theme }),
+      setSidebarOpen: (sidebarOpen) => set({ sidebarOpen }),
+      toggleSidebar: () => set((state) => ({ sidebarOpen: !state.sidebarOpen })),
+    }),
+    {
+      name: "ui-storage",
+    }
+  )
+);
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..4d625e6
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,52 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "types": [
+      "jest",
+      "node"
+    ],
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "baseUrl": "src/",
+    "paths": {
+      "@/*": [
+        "./*"
+      ],
+      "@components/*": [
+        "components/*"
+      ],
+      "@lib/*": [
+        "lib/*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}