diff --git a/.agent/rules/es6.md b/.agent/rules/es6.md
new file mode 100644
index 0000000..b567a10
--- /dev/null
+++ b/.agent/rules/es6.md
@@ -0,0 +1,127 @@
+---
+trigger: always_on
+---
+
+You are an expert in modern JavaScript ES6+ features and best practices.
+
+Key Principles:
+- Use modern JavaScript syntax
+- Leverage ES6+ features for cleaner code
+- Understand asynchronous JavaScript
+- Follow functional programming principles
+- Write maintainable and performant code
+
+Variables and Scope:
+- Use const by default, let when reassignment needed
+- Avoid var completely
+- Understand block scoping
+- Use destructuring for objects and arrays
+- Implement proper variable naming
+
+Arrow Functions:
+- Use arrow functions for callbacks
+- Understand lexical this binding
+- Use implicit returns for single expressions
+- Know when to use regular functions
+- Use arrow functions for array methods
+
+Template Literals:
+- Use template literals for string interpolation
+- Use tagged templates for advanced formatting
+- Implement multi-line strings
+- Use expression interpolation
+- Create reusable template functions
+
+Destructuring:
+- Destructure objects and arrays
+- Use default values in destructuring
+- Rename variables while destructuring
+- Use rest operator in destructuring
+- Destructure function parameters
+
+Spread and Rest:
+- Use spread operator for arrays and objects
+- Use rest parameters in functions
+- Clone objects and arrays with spread
+- Merge objects and arrays
+- Use spread for function arguments
+
+Async/Await:
+- Use async/await for asynchronous code
+- Handle errors with try/catch
+- Use Promise.all for parallel operations
+- Use Promise.race for timeout patterns
+- Implement proper error handling
+- Avoid callback hell
+
+Modules:
+- Use ES6 import/export syntax
+- Implement named and default exports
+- Use dynamic imports for code splitting
+- Organize code into modules
+- Use barrel exports for cleaner imports
+
+Classes:
+- Use class syntax for OOP
+- Implement constructors properly
+- Use getters and setters
+- Implement static methods
+- Use private fields (#field)
+- Extend classes with inheritance
+
+Array Methods:
+- Use map, filter, reduce for transformations
+- Use find, findIndex for searching
+- Use some, every for validation
+- Use forEach for iteration (prefer map/filter)
+- Chain array methods for complex operations
+- Use flatMap for flattening and mapping
+
+Object Methods:
+- Use Object.keys, Object.values, Object.entries
+- Use Object.assign for merging
+- Use Object.freeze for immutability
+- Use Object.create for prototypal inheritance
+- Use computed property names
+- Use shorthand property syntax
+
+Optional Chaining:
+- Use ?. for safe property access
+- Use ?. for optional method calls
+- Use ?. for array element access
+- Combine with nullish coalescing
+- Avoid excessive chaining
+
+Nullish Coalescing:
+- Use ?? for default values
+- Understand difference from ||
+- Use with optional chaining
+- Implement proper fallbacks
+- Use for configuration objects
+
+Promises:
+- Create and consume Promises
+- Chain Promises properly
+- Use Promise.all for parallel execution
+- Use Promise.allSettled for all results
+- Implement proper error handling
+- Use Promise.race for timeouts
+
+Iterators and Generators:
+- Understand iterable protocol
+- Use generators for lazy evaluation
+- Implement custom iterators
+- Use yield for generator functions
+- Use for...of for iteration
+
+Best Practices:
+- Use strict mode
+- Avoid global variables
+- Use meaningful variable names
+- Implement pure functions
+- Avoid mutating data
+- Use const for immutability
+- Handle errors properly
+- Use ESLint for code quality
+- Write unit tests
+- Document complex logic
\ No newline at end of file
diff --git a/.agent/rules/styling-consistency.md b/.agent/rules/styling-consistency.md
new file mode 100644
index 0000000..9290f64
--- /dev/null
+++ b/.agent/rules/styling-consistency.md
@@ -0,0 +1,5 @@
+---
+trigger: always_on
+---
+
+Use Tailwind utility classes only. Avoid custom CSS files or inline styles unless for dynamic values.
\ No newline at end of file
diff --git a/.agent/rules/typescript.md b/.agent/rules/typescript.md
new file mode 100644
index 0000000..c67650e
--- /dev/null
+++ b/.agent/rules/typescript.md
@@ -0,0 +1,29 @@
+---
+trigger: always_on
+---
+
+You are an expert in TypeScript configuration and type safety.
+
+Key Principles:
+- Enable 'strict': true in tsconfig.json
+- Avoid 'any' type at all costs
+- Use 'unknown' for uncertain types
+- Handle null and undefined explicitly
+
+Strict Mode Features:
+- noImplicitAny: Forces typing of all variables
+- strictNullChecks: Prevents accessing properties of null/undefined
+- strictFunctionTypes: Enforces sound function parameter bivariance
+- strictPropertyInitialization: Ensures class properties are initialized
+
+Type Safety Best Practices:
+- Use type guards (typeof, instanceof, custom guards) to narrow types
+- Use discriminated unions for state management
+- Use 'readonly' for immutable data structures
+- Use 'as const' for literal types
+- Prefer Interfaces for public APIs, Types for unions/intersections
+
+Error Handling:
+- Don't throw strings; throw Error objects
+- Use Result types or Option types for functional error handling
+- Handle all cases in switch statements (exhaustiveness checking)
\ No newline at end of file
diff --git a/.agent/skills/brainstorming/SKILL.md b/.agent/skills/brainstorming/SKILL.md
new file mode 100644
index 0000000..a21f162
--- /dev/null
+++ b/.agent/skills/brainstorming/SKILL.md
@@ -0,0 +1,230 @@
+---
+name: brainstorming
+description: >
+ Use this skill before any creative or constructive work
+ (features, components, architecture, behavior changes, or functionality).
+ This skill transforms vague ideas into validated designs through
+ disciplined, incremental reasoning and collaboration.
+---
+
+# Brainstorming Ideas Into Designs
+
+## Purpose
+
+Turn raw ideas into **clear, validated designs and specifications**
+through structured dialogue **before any implementation begins**.
+
+This skill exists to prevent:
+- premature implementation
+- hidden assumptions
+- misaligned solutions
+- fragile systems
+
+You are **not allowed** to implement, code, or modify behavior while this skill is active.
+
+---
+
+## Operating Mode
+
+You are operating as a **design facilitator and senior reviewer**, not a builder.
+
+- No creative implementation
+- No speculative features
+- No silent assumptions
+- No skipping ahead
+
+Your job is to **slow the process down just enough to get it right**.
+
+---
+
+## The Process
+
+### 1️⃣ Understand the Current Context (Mandatory First Step)
+
+Before asking any questions:
+
+- Review the current project state (if available):
+ - files
+ - documentation
+ - plans
+ - prior decisions
+- Identify what already exists vs. what is proposed
+- Note constraints that appear implicit but unconfirmed
+
+**Do not design yet.**
+
+---
+
+### 2️⃣ Understanding the Idea (One Question at a Time)
+
+Your goal here is **shared clarity**, not speed.
+
+**Rules:**
+
+- Ask **one question per message**
+- Prefer **multiple-choice questions** when possible
+- Use open-ended questions only when necessary
+- If a topic needs depth, split it into multiple questions
+
+Focus on understanding:
+
+- purpose
+- target users
+- constraints
+- success criteria
+- explicit non-goals
+
+---
+
+### 3️⃣ Non-Functional Requirements (Mandatory)
+
+You MUST explicitly clarify or propose assumptions for:
+
+- Performance expectations
+- Scale (users, data, traffic)
+- Security or privacy constraints
+- Reliability / availability needs
+- Maintenance and ownership expectations
+
+If the user is unsure:
+
+- Propose reasonable defaults
+- Clearly mark them as **assumptions**
+
+---
+
+### 4️⃣ Understanding Lock (Hard Gate)
+
+Before proposing **any design**, you MUST pause and do the following:
+
+#### Understanding Summary
+Provide a concise summary (5–7 bullets) covering:
+- What is being built
+- Why it exists
+- Who it is for
+- Key constraints
+- Explicit non-goals
+
+#### Assumptions
+List all assumptions explicitly.
+
+#### Open Questions
+List unresolved questions, if any.
+
+Then ask:
+
+> “Does this accurately reflect your intent?
+> Please confirm or correct anything before we move to design.”
+
+**Do NOT proceed until explicit confirmation is given.**
+
+---
+
+### 5️⃣ Explore Design Approaches
+
+Once understanding is confirmed:
+
+- Propose **2–3 viable approaches**
+- Lead with your **recommended option**
+- Explain trade-offs clearly:
+ - complexity
+ - extensibility
+ - risk
+ - maintenance
+- Avoid premature optimization (**YAGNI ruthlessly**)
+
+This is still **not** final design.
+
+---
+
+### 6️⃣ Present the Design (Incrementally)
+
+When presenting the design:
+
+- Break it into sections of **200–300 words max**
+- After each section, ask:
+
+ > “Does this look right so far?”
+
+Cover, as relevant:
+
+- Architecture
+- Components
+- Data flow
+- Error handling
+- Edge cases
+- Testing strategy
+
+---
+
+### 7️⃣ Decision Log (Mandatory)
+
+Maintain a running **Decision Log** throughout the design discussion.
+
+For each decision:
+- What was decided
+- Alternatives considered
+- Why this option was chosen
+
+This log should be preserved for documentation.
+
+---
+
+## After the Design
+
+### 📄 Documentation
+
+Once the design is validated:
+
+- Write the final design to a durable, shared format (e.g. Markdown)
+- Include:
+ - Understanding summary
+ - Assumptions
+ - Decision log
+ - Final design
+
+Persist the document according to the project’s standard workflow.
+
+---
+
+### 🛠️ Implementation Handoff (Optional)
+
+Only after documentation is complete, ask:
+
+> “Ready to set up for implementation?”
+
+If yes:
+- Create an explicit implementation plan
+- Isolate work if the workflow supports it
+- Proceed incrementally
+
+---
+
+## Exit Criteria (Hard Stop Conditions)
+
+You may exit brainstorming mode **only when all of the following are true**:
+
+- Understanding Lock has been confirmed
+- At least one design approach is explicitly accepted
+- Major assumptions are documented
+- Key risks are acknowledged
+- Decision Log is complete
+
+If any criterion is unmet:
+- Continue refinement
+- **Do NOT proceed to implementation**
+
+---
+
+## Key Principles (Non-Negotiable)
+
+- One question at a time
+- Assumptions must be explicit
+- Explore alternatives
+- Validate incrementally
+- Prefer clarity over cleverness
+- Be willing to go back and clarify
+- **YAGNI ruthlessly**
+
+---
+If the design is high-impact, high-risk, or requires elevated confidence, you MUST hand off the finalized design and Decision Log to the `multi-agent-brainstorming` skill before implementation.
diff --git a/.agent/skills/frontend-developer/SKILL.md b/.agent/skills/frontend-developer/SKILL.md
new file mode 100644
index 0000000..6be6725
--- /dev/null
+++ b/.agent/skills/frontend-developer/SKILL.md
@@ -0,0 +1,141 @@
+---
+name: frontend-dev-guidelines
+description: Opinionated frontend development standards for modern Astro + React + TypeScript applications. Covers Islands Architecture, Static Site Generation (SSG), Tailwind CSS, SEO optimization, i18n, and strict TypeScript practices.
+---
+
+
+# Frontend Development Guidelines
+
+**(Astro · Islands Architecture · Tailwind CSS · TypeScript · SEO-First)**
+
+You are a **senior frontend engineer** operating under strict architectural and performance standards.
+
+Your goal is to build **lightning-fast, SEO-optimized, and maintainable applications** using:
+
+* **Astro** for the core framework (MPA / SSG)
+* **React** for interactive "Islands" only
+* **Astro Routing** (`src/pages/`) and Layouts
+* **Tailwind CSS + shadcn/ui** for styling
+* **Mobile-first** responsive design
+* **Strict i18n** (Internationalization)
+* **SEO Best Practices** (Metadata, Sitemaps, Schema.org)
+
+This skill defines **how frontend code must be written**, not merely how it *can* be written.
+
+---
+
+## 1. Core Architectural Doctrine (Non-Negotiable)
+
+### 1. Astro-First & Islands Architecture
+* Use **Astro components (`.astro`)** by default for all static UI, layouts, and page structures.
+* Use **React components (`.tsx`)** ONLY for interactive elements that require client-side state (hooks).
+* Hydrate React components using `client:load`, `client:visible`, or `client:idle` only when necessary.
+* Avoid shipping unnecessary JavaScript to the client.
+
+### 2. File-Based Routing & Layouts
+* Routes live in `src/pages/` using `.astro` or `.md/.mdx` files.
+* Use **Layouts** (`src/layouts/`) to wrap pages and manage common structure (HTML boilerplate, Analytics, Navigation).
+* Common components live in `src/components/`.
+
+### 3. Tailwind CSS + shadcn/ui
+* Use pure Tailwind CSS utility classes.
+* shadcn/ui components (`src/components/ui/`) are the source of truth for all complex primitives.
+* Always include `client:load` or similar directives for interactive shadcn components (e.g., Modals, Dropdowns).
+
+### 4. Search Engine Optimization (SEO)
+* Every page must have a `` or `` component with:
+ - Unique `` and `<meta name="description">`.
+ - Open Graph (OG) tags and Twitter cards.
+ - Canonical URLs.
+* Maintain a `sitemap-index.xml` and `robots.txt`.
+
+### 5. Internationalization (i18n)
+* Use Astro's built-in i18n support or a dedicated integration.
+* All routes should follow a locale pattern (e.g., `/en/about`, `/es/acercas-de`).
+* Never hardcode strings; use translation keys.
+
+### 6. Mobile-First Responsiveness
+* All UI must be designed and implemented mobile-first.
+* Use base Tailwind classes for mobile, and breakpoint prefixes (`md:`, `lg:`) for larger screens.
+
+---
+
+## 2. When to Use This Skill
+
+Use **frontend-dev-guidelines** when:
+
+* Creating pages or layouts in Astro.
+* Building interactive React components for the site.
+* Implementing i18n or SEO features.
+* Styling with Tailwind CSS.
+* Optimizing assets or performance.
+
+---
+
+## 3. Quick Start Checklists
+
+### New Page Checklist
+
+* [ ] Create `src/pages/[lang]/index.astro`.
+* [ ] Use a Layout component.
+* [ ] Pass unique SEO metadata (title, description).
+* [ ] Ensure all text uses translation helpers.
+* [ ] Add interactive elements as React Islands where needed.
+
+---
+
+## 4. Component Standards
+
+### Astro Component (Static)
+
+```astro
+---
+// src/components/Header.astro
+interface Props {
+ title: string;
+}
+const { title } = Astro.props;
+---
+<header class="p-4 border-b">
+ <h1 class="text-2xl font-bold">{title}</h1>
+</header>
+```
+
+### React Island (Interactive)
+
+```tsx
+// src/components/Counter.tsx
+import { useState } from 'react';
+
+export const Counter = () => {
+ const [count, setCount] = useState(0);
+ return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>;
+};
+
+// Usage in .astro:
+// <Counter client:visible />
+```
+
+---
+
+## 5. Performance Defaults
+
+* Use **Astro Image** component for optimized assets.
+* Prefer static generation (SSG) for all marketing pages.
+* Minimize the use of `client:load` to reduce Time to Interactive (TTI).
+
+---
+
+## 6. Anti-Patterns (Immediate Rejection)
+
+❌ Using React for a purely static component.
+❌ Hardcoding strings (ignoring i18n).
+❌ Missing meta tags or titles on pages.
+❌ Over-hydrating: Using `client:load` for things below the fold.
+
+---
+
+## 7. Skill Status
+
+**Status:** Stable, Astro-native
+**Intended Use:** Astro + React Applications prioritizing Performance and SEO.
diff --git a/.agent/skills/frontend-developer/resources/common-patterns.md b/.agent/skills/frontend-developer/resources/common-patterns.md
new file mode 100644
index 0000000..3df60a4
--- /dev/null
+++ b/.agent/skills/frontend-developer/resources/common-patterns.md
@@ -0,0 +1,182 @@
+# Common Patterns
+
+This document details required patterns for frequent frontend challenges in a Next.js (App Router) + Tailwind CSS architecture.
+
+---
+
+## 1. The Server/Client Boundary
+
+The most important pattern in Next.js is understanding where the server ends and the client begins. By default, everything is a Server Component unless marked with `"use client"`.
+
+### Composing Server and Client Components
+
+When you need interactivity (a Client Component) but also want to render a Server Component inside it, pass the Server Component as `children`. This prevents the Server Component from being implicitly converted to a Client Component.
+
+```tsx
+// src/components/ui/InteractiveWrapper.tsx
+'use client';
+
+import { useState } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function InteractiveWrapper({ children }: { children: React.ReactNode }) {
+ const [isOpen, setIsOpen] = useState(false);
+
+ return (
+ <div className={twMerge(clsx('border rounded-md', isOpen ? 'border-primary' : 'border-gray-200'))}>
+ <button onClick={() => setIsOpen(!isOpen)} className="w-full text-left p-4 bg-gray-50">
+ Toggle Content
+ </button>
+ {isOpen && <div className="p-4">{children}</div>}
+ </div>
+ );
+}
+
+// src/app/page.tsx
+import { InteractiveWrapper } from '@/components/ui/InteractiveWrapper';
+import { ServerSideDataList } from './ServerSideDataList';
+
+export default function Home() {
+ return (
+ <InteractiveWrapper>
+ {/* This component executes on the server and is passed over the network as rendered HTML */}
+ <ServerSideDataList />
+ </InteractiveWrapper>
+ );
+}
+```
+
+---
+
+## 2. Server Actions for Forms & Mutations
+
+Forms should progressively enhance using Server Actions. Use React's `useActionState` (formerly `useFormState`) and `useFormStatus` to handle pending states and displaying server validation errors on the client.
+
+```tsx
+// src/features/users/actions/updateProfile.ts
+'use server';
+import { db } from '@/lib/db';
+
+export async function updateProfile(prevState: any, formData: FormData) {
+ const name = formData.get('name') as string;
+ if (name.length < 2) {
+ return { error: 'Name must be at least 2 characters.' };
+ }
+
+ await db.users.update({ name });
+ return { success: true };
+}
+
+// src/features/users/components/ProfileForm.tsx
+'use client';
+import { useActionState } from 'react';
+import { useFormStatus } from 'react-dom';
+import { updateProfile } from '../actions/updateProfile';
+
+function SubmitButton() {
+ const { pending } = useFormStatus();
+ return (
+ <button disabled={pending} type="submit" className="mt-4 px-4 py-2 bg-black text-white rounded">
+ {pending ? 'Saving...' : 'Save Profile'}
+ </button>
+ );
+}
+
+export function ProfileForm() {
+ const [state, formAction] = useActionState(updateProfile, null);
+
+ return (
+ <form action={formAction} className="flex flex-col gap-2 max-w-sm">
+ <input
+ name="name"
+ className="border border-gray-300 rounded p-2 focus:ring-black focus:border-black"
+ defaultValue="Current Name"
+ />
+ {state?.error && <span className="text-red-500 text-sm">{state.error}</span>}
+ {state?.success && <span className="text-green-500 text-sm">Saved!</span>}
+ <SubmitButton />
+ </form>
+ );
+}
+```
+
+---
+
+## 3. Class Name Merging (Tailwind CSS)
+
+Always use a combination of `clsx` and `tailwind-merge` when building reusable UI components. This ensures conditional classes apply cleanly and Tailwind conflicting utilities (e.g., passing `px-4` to override a default `px-2`) behave predictably.
+
+```tsx
+// src/components/ui/Badge.tsx
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
+
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+ variant?: 'primary' | 'secondary' | 'error';
+}
+
+export function Badge({ variant = 'primary', className, ...props }: BadgeProps) {
+ return (
+ <span
+ className={cn(
+ 'inline-flex items-center px-2 py-1 rounded-full text-xs font-medium',
+ {
+ 'bg-black text-white': variant === 'primary',
+ 'bg-gray-100 text-gray-800': variant === 'secondary',
+ 'bg-red-100 text-red-800': variant === 'error',
+ },
+ className
+ )}
+ {...props}
+ />
+ );
+}
+```
+
+---
+
+## 4. State Management
+
+1. **Global Constants:** Export from a constants file.
+2. **URL Search Params:** Use `searchParams` prop in Server Components, or `useSearchParams`/`useRouter` for client state that needs to be deep-linked (e.g., active tab, search query, filters). This is the preferred method for global state in SSR apps.
+3. **Local UI State:** Use `useState` or `useReducer` in Client Components.
+4. **Client-side Global State (e.g., Theme, Cart):** Use `Zustand` with `persist` for localStorage integration, initialized in a Client Component.
+
+```tsx
+// Using URL for state (Client Side Example)
+'use client';
+
+import { useSearchParams, useRouter, usePathname } from 'next/navigation';
+
+export function FilterTabs() {
+ const searchParams = useSearchParams();
+ const router = useRouter();
+ const pathname = usePathname();
+ const activeTab = searchParams.get('tab') || 'all';
+
+ const setTab = (tab: string) => {
+ const params = new URLSearchParams(searchParams.toString());
+ params.set('tab', tab);
+ router.push(`${pathname}?${params.toString()}`); // Triggers server re-render
+ };
+
+ return (
+ <div className="flex gap-2 mb-4">
+ {['all', 'active', 'archived'].map(tab => (
+ <button
+ key={tab}
+ onClick={() => setTab(tab)}
+ className={cn('px-3 py-1 rounded-md text-sm', activeTab === tab ? 'bg-black text-white' : 'bg-gray-100')}
+ >
+ {tab}
+ </button>
+ ))}
+ </div>
+ );
+}
+```
\ No newline at end of file
diff --git a/.agent/skills/frontend-developer/resources/complete-examples.md b/.agent/skills/frontend-developer/resources/complete-examples.md
new file mode 100644
index 0000000..9fe63b3
--- /dev/null
+++ b/.agent/skills/frontend-developer/resources/complete-examples.md
@@ -0,0 +1,189 @@
+# Complete Example: Product Management Feature
+
+This example demonstrates a complete feature implementation using Next.js App Router, React Server Components, Server Actions, and Tailwind CSS.
+
+---
+
+## 1. Directory Structure
+
+```
+src/
+ app/
+ products/
+ [id]/
+ page.tsx
+ features/
+ products/
+ actions/
+ updateProduct.ts
+ components/
+ ProductEditForm.tsx
+ types/
+ product.ts
+```
+
+---
+
+## 2. Global Type Definition
+
+```tsx
+// src/types/product.ts
+export interface Product {
+ id: string;
+ name: string;
+ price: number;
+ description: string;
+ updatedAt: string;
+}
+```
+
+---
+
+## 3. Server Action (Mutation)
+
+```tsx
+// src/features/products/actions/updateProduct.ts
+'use server';
+
+import { revalidatePath } from 'next/cache';
+import { db } from '@/lib/db';
+import type { ActionState } from '@/types/action-state';
+
+export async function updateProduct(
+ prevState: ActionState | null,
+ formData: FormData
+): Promise<ActionState> {
+ const id = formData.get('id') as string;
+ const name = formData.get('name') as string;
+ const price = Number(formData.get('price'));
+
+ if (!name || name.length < 3) {
+ return { error: 'Name must be at least 3 characters long.' };
+ }
+
+ try {
+ await db.product.update({
+ where: { id },
+ data: { name, price },
+ });
+
+ revalidatePath(`/products/${id}`);
+ return { success: true };
+ } catch (e) {
+ return { error: 'Failed to update product.' };
+ }
+}
+```
+
+---
+
+## 4. Client Component (Interactive Form)
+
+```tsx
+// src/features/products/components/ProductEditForm.tsx
+'use client';
+
+import { useActionState } from 'react';
+import { updateProduct } from '../actions/updateProduct';
+import type { Product } from '~types/product';
+import { cn } from '@/lib/utils';
+
+export function ProductEditForm({ product }: { product: Product }) {
+ const [state, formAction, isPending] = useActionState(updateProduct, null);
+
+ return (
+ <form action={formAction} className="space-y-6 max-w-xl bg-white p-8 rounded-xl shadow-sm border border-gray-100">
+ <input type="hidden" name="id" value={product.id} />
+
+ <div>
+ <label className="block text-xs font-bold uppercase tracking-widest text-gray-500 mb-2">Product Name</label>
+ <input
+ name="name"
+ defaultValue={product.name}
+ className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-black focus:border-transparent transition-all outline-none"
+ />
+ </div>
+
+ <div>
+ <label className="block text-xs font-bold uppercase tracking-widest text-gray-500 mb-2">Price (USD)</label>
+ <input
+ name="price"
+ type="number"
+ defaultValue={product.price}
+ className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-black focus:border-transparent transition-all outline-none"
+ />
+ </div>
+
+ {state?.error && (
+ <div className="p-4 bg-red-50 text-red-600 rounded-lg text-sm border border-red-100">
+ {state.error}
+ </div>
+ )}
+
+ <button
+ type="submit"
+ disabled={isPending}
+ className={cn(
+ "w-full py-4 rounded-lg font-bold uppercase tracking-widest transition-all",
+ isPending ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-black text-white hover:bg-gray-900 active:scale-[0.98]"
+ )}
+ >
+ {isPending ? 'Updating...' : 'Update Product'}
+ </button>
+ </form>
+ );
+}
+```
+
+---
+
+## 5. Page Component (Server Side Composition)
+
+```tsx
+// src/app/products/[id]/page.tsx
+import { db } from '@/lib/db';
+import { notFound } from 'next/navigation';
+import { ProductEditForm } from '@/features/products/components/ProductEditForm';
+import type { Product } from '~types/product';
+
+interface PageProps {
+ params: { id: string };
+}
+
+export default async function Page({ params }: PageProps) {
+ // Fetch data directly on server
+ const product: Product | null = await db.product.findUnique({
+ where: { id: params.id }
+ });
+
+ if (!product) {
+ notFound();
+ }
+
+ return (
+ <main className="min-h-screen bg-gray-50/50 py-12 px-6">
+ <div className="max-w-7xl mx-auto">
+ <header className="mb-12">
+ <h1 className="text-4xl font-extrabold tracking-tight text-gray-900 mb-2">
+ Edit Product
+ </h1>
+ <p className="text-gray-500">ID: {product.id}</p>
+ </header>
+
+ <section className="grid grid-cols-1 lg:grid-cols-3 gap-12">
+ <div className="lg:col-span-2">
+ <ProductEditForm product={product} />
+ </div>
+
+ <aside className="space-y-6">
+ <div className="p-6 bg-black text-white rounded-xl">
+ <h3 className="text-xs font-bold uppercase tracking-widest opacity-60 mb-4">Last Updated</h3>
+ <p className="text-lg font-mono">{new Date(product.updatedAt).toLocaleString()}</p>
+ </div>
+ </aside>
+ </section>
+ </div>
+ </main>
+ );
+}
+```
\ No newline at end of file
diff --git a/.agent/skills/frontend-developer/resources/component-patterns.md b/.agent/skills/frontend-developer/resources/component-patterns.md
new file mode 100644
index 0000000..c75e01b
--- /dev/null
+++ b/.agent/skills/frontend-developer/resources/component-patterns.md
@@ -0,0 +1,143 @@
+# Component Patterns
+
+This document establishes the structural rules for all React components in the Next.js frontend architecture.
+
+---
+
+## 1. File Structure & Colocation
+
+### Single File Principle
+* Components under 150 lines should keep their types, sub-components, and styling helpers in the same file.
+* Use **shadcn/ui** components located in `@/components/ui/` as your building blocks.
+* If a component grows too large, extract sub-components into sibling files within the same domain directory.
+
+### Types Colocation
+* Feature-specific types live in `@/features/{feature}/types/`.
+* Global types live in `~types/`.
+* Component prop types are defined directly above the component export.
+
+---
+
+## 2. Server Components (Default)
+
+Server Components are the default in Next.js. They run on the server, fetch data directly, and ship zero JavaScript to the client.
+
+### Pattern: Async Server Component
+* Use `async/await` directly in the component signature.
+* Do not use hooks (`useState`, `useEffect`, `useContext`) in Server Components.
+
+```tsx
+import { db } from '@/lib/db';
+import type { Product } from '~types/product';
+import { ProductCard } from './ProductCard';
+
+interface ProductListProps {
+ categoryId: string;
+}
+
+export default async function ProductList({ categoryId }: ProductListProps) {
+ const products: Product[] = await db.products.findMany({ where: { categoryId } });
+
+ return (
+ <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+ {products.map(product => (
+ <ProductCard key={product.id} product={product} />
+ ))}
+ </div>
+ );
+}
+```
+
+---
+
+## 3. Client Components (`"use client"`)
+
+Only use `"use client"` when you need browser APIs, interactivity (event listeners), or React state/effects.
+
+### Pattern: The Interactivity Leaf
+Push `"use client"` down the component tree as far as possible. Instead of making an entire page a Client Component just for one togglable dropdown, isolate the dropdown.
+
+### Component Structure Order (Client Components)
+1. Types / Props
+2. Hooks & State
+3. Derived values (`useMemo`, simple variables)
+4. Handlers
+5. Render return
+
+```tsx
+'use client';
+
+import { useState } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+interface ExpandableTextProps {
+ children: React.ReactNode;
+ maxLines?: number;
+ className?: string;
+}
+
+export function ExpandableText({ children, maxLines = 3, className }: ExpandableTextProps) {
+ const [expanded, setExpanded] = useState(false);
+
+ return (
+ <div className={twMerge(clsx('text-gray-800', className))}>
+ <div className={clsx(!expanded && `line-clamp-${maxLines}`)}>
+ {children}
+ </div>
+ <button
+ onClick={() => setExpanded(!expanded)}
+ className="text-black font-semibold uppercase text-xs mt-2 hover:underline"
+ >
+ {expanded ? 'Read Less' : 'Read More'}
+ </button>
+ </div>
+ );
+}
+```
+
+---
+
+## 4. The `children` Prop (Composition)
+
+Use the `children` prop heavily. This pattern is crucial in App Router to pass unwrappable Server Components into Client Component shells, bypassing serialization errors.
+
+```tsx
+// 🟢 Good: Server Component passes children to Client Shell
+// /app/layout.tsx
+import { ClientSidebarMenu } from '@/components/ClientSidebarMenu';
+import { ServerSideNavLinks } from '@/components/ServerSideNavLinks';
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+ return (
+ <ClientSidebarMenu>
+ <ServerSideNavLinks /> {/* Evaluated on server, passed to client shell */}
+ </ClientSidebarMenu>
+ );
+}
+```
+
+---
+
+## 5. Prop Types
+
+* Always type props explicitly with an `interface` named `{ComponentName}Props`.
+* Prefer `React.ReactNode` for `children` types.
+* Avoid `React.FC` or `React.FunctionComponent`; define the component as a standard function (it handles generics better and allows `async` types cleanly in Next.js).
+
+```tsx
+// 🟢 Good
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+ variant?: 'primary' | 'secondary';
+ isLoading?: boolean;
+}
+
+export function Button({ variant = 'primary', isLoading, children, className, ...props }: ButtonProps) {
+ return <button className={/* ... */} {...props}>{children}</button>;
+}
+
+// ❌ Bad (React.FC hides implicit typing and conflicts with async Server Components)
+export const Button: React.FC<ButtonProps> = ({ children }) => {
+ return <button>{children}</button>;
+};
+```
\ No newline at end of file
diff --git a/.agent/skills/frontend-developer/resources/data-fetching.md b/.agent/skills/frontend-developer/resources/data-fetching.md
new file mode 100644
index 0000000..0e6de02
--- /dev/null
+++ b/.agent/skills/frontend-developer/resources/data-fetching.md
@@ -0,0 +1,218 @@
+# Data Fetching & Mutations (Next.js)
+
+The frontend architecture relies on **React Server Components (RSC)** for initial data fetching and **Server Actions** for mutations. Client-side fetching is reserved for specific use cases like highly interactive grids, polling, or infinite scrolling.
+
+---
+
+## 1. Fetching Data (Server Components)
+
+By default, fetch data directly in your React Server Components. This approach eliminates client-side network waterfalls and ships less JavaScript to the browser.
+
+### The Standard Pattern
+
+```tsx
+import { db } from '@/lib/db';
+import type { Product } from '~types/product';
+import { notFound } from 'next/navigation';
+
+interface ProductPageProps {
+ params: { id: string };
+}
+
+export default async function ProductPage({ params }: ProductPageProps) {
+ // 1. Fetch data directly on the server
+ const product: Product | null = await db.products.findById(params.id);
+
+ // 2. Handle 404s cleanly
+ if (!product) {
+ notFound();
+ }
+
+ // 3. Render directly with the data
+ return (
+ <article className="max-w-3xl mx-auto py-8">
+ <h1 className="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600">
+ {product.name}
+ </h1>
+ <p className="mt-4 text-gray-600">{product.description}</p>
+ <span className="inline-block mt-4 px-3 py-1 bg-black text-white rounded-full text-sm font-medium">
+ ${product.price}
+ </span>
+ </article>
+ );
+}
+```
+
+### Using Next.js Fetch Wrapper (Caching & Revalidation)
+
+If you are fetching from external APIs, use the extended `fetch` provided by Next.js to control caching and revalidation.
+
+```tsx
+export async function getPosts() {
+ const res = await fetch('https://api.example.com/posts', {
+ next: { tags: ['posts'], revalidate: 3600 }, // Cache for 1 hour, or until revalidated by tag
+ });
+
+ if (!res.ok) {
+ throw new Error('Failed to fetch posts');
+ }
+
+ return res.json();
+}
+```
+
+---
+
+## 2. Mutations (Server Actions)
+
+Mutations (creates, updates, deletes) are handled via **Server Actions**. These are asynchronous functions executed on the server that can be called directly from Client Components or passed to forms in Server Components.
+
+### Defining a Server Action
+
+Server actions should usually be defined in a dedicated file (e.g., `src/features/products/actions/createProduct.ts`) to avoid mixing client/server boundaries inappropriately.
+
+```tsx
+// src/features/products/actions/createProduct.ts
+'use server';
+
+import { revalidatePath } from 'next/cache';
+import { redirect } from 'next/navigation';
+import { db } from '@/lib/db';
+
+export async function createProduct(formData: FormData) {
+ // 1. Extract data
+ const name = formData.get('name') as string;
+ const price = Number(formData.get('price'));
+
+ // 2. Validate data
+ if (!name || isNaN(price)) {
+ return { error: 'Invalid product data' };
+ }
+
+ // 3. Perform the mutation
+ await db.products.insert({ name, price });
+
+ // 4. Revalidate cache and redirect
+ revalidatePath('/products');
+ redirect('/products');
+}
+```
+
+### Using a Server Action in a Form (Server Component)
+
+Server Components can pass actions directly to the `action` prop of a form. This works even with JavaScript disabled.
+
+```tsx
+// src/app/products/new/page.tsx
+import { createProduct } from '@/features/products/actions/createProduct';
+
+export default function NewProductPage() {
+ return (
+ <form action={createProduct} className="space-y-4 max-w-md">
+ <div>
+ <label htmlFor="name" className="block text-sm font-medium text-gray-700">Name</label>
+ <input type="text" id="name" name="name" className="mt-1 block w-full rounded-md border-gray-300 shadow-sm" required />
+ </div>
+ <div>
+ <label htmlFor="price" className="block text-sm font-medium text-gray-700">Price</label>
+ <input type="number" id="price" name="price" className="mt-1 block w-full rounded-md border-gray-300 shadow-sm" required />
+ </div>
+ <button type="submit" className="px-4 py-2 bg-black text-white rounded-md hover:bg-gray-800 transition-colors">
+ Create Product
+ </button>
+ </form>
+ );
+}
+```
+
+### Using `useActionState` and `useFormStatus` (Client Components)
+
+To provide pending states and inline error messages, you must use Client Components with the `useActionState` and `useFormStatus` hooks.
+
+```tsx
+// src/features/products/components/ProductForm.tsx
+'use client';
+
+import { useActionState } from 'react';
+import { useFormStatus } from 'react-dom';
+import { createProduct } from '../actions/createProduct';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function SubmitButton() {
+ const { pending } = useFormStatus();
+
+ return (
+ <button
+ type="submit"
+ disabled={pending}
+ className={twMerge(
+ clsx(
+ 'px-4 py-2 rounded-md transition-colors',
+ pending ? 'bg-gray-400 cursor-not-allowed text-white' : 'bg-black hover:bg-gray-800 text-white'
+ )
+ )}
+ >
+ {pending ? 'Submitting...' : 'Create Product'}
+ </button>
+ );
+}
+
+export function ProductForm() {
+ // useActionState connects form state (errors, success messages) to the server action
+ const [state, formAction] = useActionState(createProduct, null);
+
+ return (
+ <form action={formAction} className="space-y-4 max-w-md">
+ {/* ... inputs ... */}
+
+ {state?.error && (
+ <p className="text-red-500 text-sm mt-2">{state.error}</p>
+ )}
+
+ <SubmitButton />
+ </form>
+ );
+}
+```
+
+---
+
+## 3. Client-Side Fetching (React Query / SWR)
+
+While RSC is the default, client-side fetching is acceptable and necessary for:
+1. Infinite scrolling feeds.
+2. Data that updates frequently and needs polling.
+3. Complex interactive client-side tables/grids.
+
+To do this, you can initialize React Query in a Client Provider and use hooks like `useQuery` or `useInfiniteQuery`. However, always try to hydrate initial data from the Server Component to avoid empty loading spinners on the first paint.
+
+```tsx
+// src/features/dashboard/components/LiveMetrics.tsx
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import { fetchMetrics } from '../api/clientApi';
+
+export function LiveMetrics({ initialData }: { initialData: any }) {
+ const { data } = useQuery({
+ queryKey: ['metrics'],
+ queryFn: fetchMetrics,
+ initialData, // Prevents loading state on initial render
+ refetchInterval: 5000, // Poll every 5s
+ });
+
+ return (
+ <div className="p-4 bg-white rounded-lg shadow">
+ Active Users: {data.activeUsers}
+ </div>
+ );
+}
+```
+
+---
+
+## 4. Banned Patterns
+
+❌ **`useEffect` + `fetch` on Mount:** Never use `useEffect` to load the initial dataset for a page. Use Server Components.
+❌ **Route Handlers (`/api/...`) for Internal Data:** If your frontend and backend are in the same Next.js app, do not `fetch('/api/...')` from a Client Component to your own Next.js API routes just to load data. Use Server Actions or Direct DB calls in RSC instead. Route Handlers are meant primarily for external webhook consumers or integrations.
\ No newline at end of file
diff --git a/.agent/skills/frontend-developer/resources/file-organization.md b/.agent/skills/frontend-developer/resources/file-organization.md
new file mode 100644
index 0000000..4933497
--- /dev/null
+++ b/.agent/skills/frontend-developer/resources/file-organization.md
@@ -0,0 +1,108 @@
+# File Organization (Next.js)
+
+This project follows a **Feature-First** architecture alongside the Next.js **App Router** (`app/` directory). This ensures that domain logic remains modular while leveraging the filesystem-based routing of Next.js.
+
+---
+
+## 1. Directory Overview
+
+```
+src/
+ app/ <-- 1. Routing & Composition Layer
+ features/ <-- 2. Domain Logic Layer
+ components/ <-- 3. Shared Primitive Layer
+ types/ <-- 4. Global Type Definition Layer
+ lib/ <-- 5. Infrastructure & Utilities
+ hooks/ <-- 6. Shared React Hooks
+```
+
+---
+
+## 2. The `app/` Directory (Routing & Composition)
+
+The `app/` directory is responsible ONLY for routing, layouts, and composing features and shared components.
+
+* Keep page files small.
+* Prefer using **Route Groups** `(group-name)` for logical organization without URL impact.
+* Colocate route-specific components only if they are entirely unique to that page.
+
+```
+src/app/
+ (auth)/ <-- Auth route group
+ login/page.tsx
+ register/page.tsx
+ dashboard/
+ layout.tsx
+ page.tsx
+ loading.tsx
+ error.tsx
+```
+
+---
+
+## 3. The `features/` Directory (Domain Logic)
+
+A feature is a self-contained module representing a business domain (e.g., `products`, `orders`, `users`).
+
+**Structure of a feature:**
+```
+src/features/products/
+ actions/ <-- Server Actions (mutations)
+ components/ <-- Feature-specific UI
+ helpers/ <-- Non-React utility functions
+ index.ts <-- Public API for the feature (Optional)
+```
+
+**Crucial Note:** Features should avoid cross-importing from other features' internal subdirectories. If a component is needed by multiple features, promote it to `src/components/`.
+
+---
+
+## 4. The `types/` Directory (Global Types)
+
+All foundational TypeScript interfaces and types live in the root `src/types/` directory.
+
+* **Alias:** Always use `~types/...` to import these.
+* **Naming:** Use PascalCase for filenames and exported types.
+
+```
+src/types/
+ user.ts
+ order.ts
+ api-response.ts
+```
+
+---
+
+## 5. The `components/` Directory (Shared Primitives)
+
+Base UI components (buttons, cards, inputs) that do not belong to a specific feature.
+
+* Use a subfolder structure like `ui/`, `layout/`, or `skeletons/`.
+* These components must be highly reusable and agnostic of domain data.
+
+```
+src/components/
+ ui/
+ Button.tsx
+ Input.tsx
+ Badge.tsx
+```
+
+---
+
+## 6. Import Aliases Summary
+
+| Alias | Path | Level |
+| ------------- | ---------------- | ------------------------ |
+| `@/` | `src/` | Project Root Alias |
+| `~types` | `src/types` | Global Types Alias |
+| `@/components/ui` | `src/components/ui` | shadcn-ui components |
+
+---
+
+## 7. Organization Rules
+
+1. **Flat is better than nested:** Avoid going more than 3 directory levels deep within a feature.
+2. **Feature Isolation:** If you find yourself importing `{ X } from '@/features/a/components/x'` into `@/features/b/components/y'`, consider moving `X` to `@/components/`.
+3. **Public Exports:** Use `index.ts` in features to control what is exposed to the rest of the application.
+4. **Colocation:** Keep `loading.tsx` and `error.tsx` right next to the `page.tsx` they protect.
\ No newline at end of file
diff --git a/.agent/skills/frontend-developer/resources/loading-and-error-states.md b/.agent/skills/frontend-developer/resources/loading-and-error-states.md
new file mode 100644
index 0000000..abcbc05
--- /dev/null
+++ b/.agent/skills/frontend-developer/resources/loading-and-error-states.md
@@ -0,0 +1,150 @@
+# Loading & Error States (Next.js)
+
+In the App Router architecture, loading and error states are handled by specific file-level boundaries (`loading.tsx` and `error.tsx`). This allows for **Streaming SSR**, where the layout and shell are sent immediately, and slow data-fetching regions fill in later.
+
+---
+
+## 1. Loading States (`loading.tsx`)
+
+A `loading.tsx` file creates a **Suspense Boundary** around the page segment. It is automatically rendered when a route segment is first loaded or when its data is being fetched on the server.
+
+### The Skeleton Pattern
+* Use `loading.tsx` for page-level transitions.
+* Use Tailwind with `animate-pulse` or specific Skeleton components for a premium feel.
+
+```tsx
+// src/app/dashboard/loading.tsx
+export default function DashboardLoading() {
+ return (
+ <div className="p-8">
+ <div className="h-8 w-64 bg-gray-200 animate-pulse rounded-md" />
+ <div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
+ {[1, 2, 3].map(i => (
+ <div key={i} className="h-48 bg-gray-100 animate-pulse rounded-lg border border-gray-200" />
+ ))}
+ </div>
+ </div>
+ );
+}
+```
+
+### Granular Loading (Manual Suspense)
+If only a small part of a page is slow (e.g., an activity feed), wrap just that component in `<Suspense>`.
+
+```tsx
+import { Suspense } from 'react';
+import { SlowActivityFeed } from '@/features/dashboard/components/SlowActivityFeed';
+import { FeedSkeleton } from '@/components/skeletons/FeedSkeleton';
+
+export default function DashboardPage() {
+ return (
+ <div>
+ <h1>Dashboard Overview</h1>
+ {/* Rapidly rendered UI */}
+
+ <Suspense fallback={<FeedSkeleton />}>
+ {/* Only this part will stream in when ready */}
+ <SlowActivityFeed />
+ </Suspense>
+ </div>
+ );
+}
+```
+
+---
+
+## 2. Error States (`error.tsx`)
+
+The `error.tsx` file acts as a **React Error Boundary**. It captures errors in the specific segment and its children, preventing a single error from crashing the entire application.
+
+### The Segment Error Boundary
+* Must be a **Client Component**.
+* Receives `error` and a `reset` function as props.
+
+```tsx
+// src/app/dashboard/error.tsx
+'use client';
+
+import { useEffect } from 'react';
+
+export default function DashboardError({
+ error,
+ reset,
+}: {
+ error: Error & { digest?: string };
+ reset: () => void;
+}) {
+ useEffect(() => {
+ // Log error to an observability service (e.g. Sentry)
+ console.error(error);
+ }, [error]);
+
+ return (
+ <div className="flex flex-col items-center justify-center p-12 text-center border border-red-100 rounded-lg bg-red-50">
+ <h2 className="text-xl font-bold text-red-900">Something went wrong!</h2>
+ <p className="mt-2 text-red-600 font-mono text-sm max-w-lg">{error.message}</p>
+ <button
+ onClick={() => reset()} // Attempts to re-render the segment
+ className="mt-6 px-4 py-2 bg-red-900 text-white rounded-md hover:bg-red-800 transition"
+ >
+ Try Again
+ </button>
+ </div>
+ );
+}
+```
+
+---
+
+## 3. Empty States
+
+Return specific "Empty" UI components when a data set is empty. Never return `null` if the user expects feedback.
+
+```tsx
+export function EmptyOrderList() {
+ return (
+ <div className="flex flex-col items-center py-20 bg-gray-50 rounded-lg border-2 border-dashed border-gray-200">
+ <span className="text-4xl">📦</span>
+ <h3 className="mt-4 text-lg font-semibold text-gray-900">No Orders Found</h3>
+ <p className="mt-1 text-gray-500">When you place an order, it will appear here.</p>
+ </div>
+ );
+}
+```
+
+---
+
+## 4. Mutation Feedback (Toasts)
+
+For mutations (Server Actions), never rely on page-level loaders for small updates. Use a toast/snack system initiated from the Client Component level.
+
+* Use `useActionState` to track success/failure.
+* Use a minimalist toast library or custom Tailwind component.
+
+```tsx
+'use client';
+
+import { createProduct } from '../actions/createProduct';
+import { useActionState, useEffect } from 'react';
+import { toast } from '@/lib/toast'; // Your chosen minimalist toast implementation
+
+export function CreateProductForm() {
+ const [state, formAction] = useActionState(createProduct, null);
+
+ useEffect(() => {
+ if (state?.success) toast.success('Product created successfully');
+ if (state?.error) toast.error(state.error);
+ }, [state]);
+
+ return <form action={formAction}>...</form>;
+}
+```
+
+---
+
+## 5. Summary Rules
+
+1. **Streaming is Mandatory:** Always provide a `loading.tsx` for top-level app routes to prevent blocking the browser during data fetching.
+2. **Graceful Failures:** Every major segment (dashboard, accounts, products) must have an `error.tsx`.
+3. **Skeleton Fidelity:** Skeleton UI should roughly match the layout of the loaded component to prevent layout shifts (CLS).
+4. **Retry Pattern:** Error boundaries must always provide a "Retry" or "Refresh" action.
\ No newline at end of file
diff --git a/.agent/skills/frontend-developer/resources/performance.md b/.agent/skills/frontend-developer/resources/performance.md
new file mode 100644
index 0000000..5500488
--- /dev/null
+++ b/.agent/skills/frontend-developer/resources/performance.md
@@ -0,0 +1,129 @@
+# Performance Guidelines (Next.js)
+
+Next.js provides powerful performance optimizations out of the box. Our architecture leverages these to ensure high Lighthouse scores and zero Cumulative Layout Shift (CLS).
+
+---
+
+## 1. Image Optimization (`next/image`)
+
+Always use the `Image` component from `next/image`. This automatically handles resizing, optimization (WebP/AVIF), and lazy loading.
+
+### Rules of Engagement
+* Provide `width` and `height` to prevent CLS.
+* For background images or images whose dimensions are unknown, use the `fill` prop combined with a container having `position: relative`.
+* Use the `priority` prop for the Largest Contentful Paint (LCP) image (e.g., Hero image).
+
+```tsx
+import Image from 'next/image';
+
+export function ProductHero({ src, alt }: { src: string; alt: string }) {
+ return (
+ <div className="relative aspect-square w-full">
+ <Image
+ src={src}
+ alt={alt}
+ fill
+ priority
+ className="object-cover rounded-lg"
+ sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+ />
+ </div>
+ );
+}
+```
+
+---
+
+## 2. Link Optimization (`next/link`)
+
+Always use `Link` from `next/link`.
+
+* **Prefetching:** Next.js automatically prefetches links in the viewport, making navigation feel instantaneous.
+* **Scroll Restoration:** Automatic scroll position restoration.
+
+```tsx
+import Link from 'next/link';
+
+export function Nav() {
+ return <Link href="/search" className="hover:underline">Search</Link>;
+}
+```
+
+---
+
+## 3. Font Optimization (`next/font`)
+
+Use `next/font/google` or `next/font/local`. This downloads the font at build time and hosts it with your assets, eliminating external network requests and layout shifts.
+
+```tsx
+// src/app/layout.tsx
+import { Inter } from 'next/font/google';
+
+const inter = Inter({ subsets: ['latin'], display: 'swap' });
+
+export default function RootLayout({ children }) {
+ return (
+ <html lang="en" className={inter.className}>
+ <body>{children}</body>
+ </html>
+ );
+}
+```
+
+---
+
+## 4. Code Splitting & Dynamic Imports
+
+Next.js automatically splits code at the route level. For client-side components that are heavy or conditionally rendered, use `next/dynamic`.
+
+```tsx
+import dynamic from 'next/dynamic';
+
+const ExpensiveChart = dynamic(() => import('@/components/charts/ExpensiveChart'), {
+ loading: () => <p>Loading Chart...</p>,
+ ssr: false, // Prevents server-side rendering for browser-only libraries
+});
+
+export function Dashboard() {
+ return <ExpensiveChart />;
+}
+```
+
+---
+
+## 5. Caching Strategies
+
+Leverage the Next.js Data Cache.
+
+* **Full Route Caching:** Static routes are cached by default.
+* **Data Cache:** `fetch()` calls are cached across requests by default.
+* **Revalidation:** Use `revalidatePath` or `revalidateTag` in Server Actions to purge specific cached data when it changes.
+
+```tsx
+// Revalidating after a mutation
+'use server';
+import { revalidatePath } from 'next/cache';
+
+export async function addComment() {
+ // ... db logic ...
+ revalidatePath('/posts/[slug]');
+}
+```
+
+---
+
+## 6. Avoiding Hydration Mismatch
+
+Hydration mismatches occur when the server-rendered HTML doesn't match the first client-side render (e.g., using `new Date()` or `Math.random()` directly in a component).
+
+* **Fix:** Use `useEffect` to trigger client-only rendering or use the `suppressHydrationWarning` prop on elements like `time`.
+
+---
+
+## 7. Performance Checklist
+
+* [ ] All images use `next/image`.
+* [ ] All fonts use `next/font`.
+* [ ] No CLS: Containers have defined aspect ratios or heights.
+* [ ] Bundle Size: Avoid importing heavy libraries (like `lodash`) directly; use specific sub-module imports or `next/dynamic`.
+* [ ] Cache tags: Meaningful tags used for data fetching to allow precise revalidation.
\ No newline at end of file
diff --git a/.agent/skills/frontend-developer/resources/routing-guide.md b/.agent/skills/frontend-developer/resources/routing-guide.md
new file mode 100644
index 0000000..22c8890
--- /dev/null
+++ b/.agent/skills/frontend-developer/resources/routing-guide.md
@@ -0,0 +1,153 @@
+# Routing Guide (Next.js App Router)
+
+This codebase uses the **Next.js App Router** (`app/` directory) exclusively. All routing is folder-based, and components inside the `app/` directory are React Server Components by default.
+
+---
+
+## 1. Directory Structure
+
+The `src/app/` directory defines your routes.
+
+* Each folder represents a route segment.
+* Special files (`page.tsx`, `layout.tsx`, `loading.tsx`, `error.tsx`) define the UI for that segment.
+* You can use Route Groups `(folderName)` to organize routes without affecting the URL path.
+
+```
+src/
+ app/
+ (marketing)/ <-- Route Group (does not affect URL)
+ page.tsx <-- `/` route
+ layout.tsx <-- Shared layout for marketing pages
+ about/
+ page.tsx <-- `/about` route
+ (app)/
+ layout.tsx <-- Shared layout for app/dashboard
+ dashboard/
+ page.tsx <-- `/dashboard` route
+ loading.tsx <-- Loading UI for dashboard
+ error.tsx <-- Error UI for dashboard
+ categories/
+ [slug]/ <-- Dynamic Segment
+ page.tsx <-- `/categories/electronics` route
+```
+
+---
+
+## 2. Dynamic Segments
+
+Use square brackets `[paramName]` to create dynamic routes.
+
+```tsx
+// src/app/categories/[slug]/page.tsx
+interface CategoryPageProps {
+ params: { slug: string };
+}
+
+export default async function CategoryPage({ params }: CategoryPageProps) {
+ const categoryId = params.slug;
+ // Fetch data based on the categoryId...
+ return <div>Category: {categoryId}</div>;
+}
+```
+
+---
+
+## 3. Search Parameters
+
+Next.js provides access to URL search parameters directly in Server Components via the `searchParams` prop.
+
+```tsx
+// src/app/products/page.tsx
+interface ProductsPageProps {
+ searchParams: { q?: string; page?: string };
+}
+
+export default async function ProductsPage({ searchParams }: ProductsPageProps) {
+ const searchQuery = searchParams.q ?? '';
+ const currentPage = Number(searchParams.page) || 1;
+
+ // Fetch products based on searchQuery and currentPage
+ return <div>Search results for: {searchQuery}</div>;
+}
+```
+
+**Client-Side Note:** If you need to access search params in a Client Component, use the `useSearchParams()` hook from `next/navigation`.
+
+---
+
+## 4. Navigation
+
+Always use the `Link` component from `next/link` for internal navigation to ensure prefetched routes and smooth client-side transitions.
+
+```tsx
+import Link from 'next/link';
+
+export function Navigation() {
+ return (
+ <nav>
+ <Link href="/dashboard" className="text-blue-500 hover:text-blue-700 transition">
+ Go to Dashboard
+ </Link>
+ </nav>
+ );
+}
+```
+
+For programmatic navigation (e.g., redirecting after a form submission), use the `useRouter()` hook from `next/navigation` in Client Components, or `redirect()` from `next/navigation` in Server Components / Server Actions.
+
+```tsx
+// Client side programmatic navigation
+'use client';
+import { useRouter } from 'next/navigation';
+
+export function LoginRedirect() {
+ const router = useRouter();
+
+ const handleSuccess = () => {
+ router.push('/dashboard');
+ };
+ // ...
+}
+```
+
+```tsx
+// Server side redirect
+'use server';
+import { redirect } from 'next/navigation';
+
+export async function submitForm() {
+ // process form...
+ redirect('/dashboard');
+}
+```
+
+---
+
+## 5. Parallel & Intercepted Routes
+
+For advanced UI patterns (like modals, or side-by-side split screens), rely on Next.js constructs:
+
+* **Parallel Routes (`@folder`)**: Allows you to simultaneously or conditionally render one or more pages in the same layout.
+* **Intercepted Routes (`(..)folder`)**: Allows you to load a route from another part of your application within the current layout (e.g., opening a photo in a modal without losing the context of the feed).
+
+---
+
+## 6. Architecture Boundary: Features vs App
+
+The `src/app/` directory should remain relatively thin. It acts as the composer of your application. Complex domain logic, reusable UI blocks, and API calls should live in `src/features/` or `src/components/`, and be imported into your route files.
+
+```tsx
+// src/app/dashboard/page.tsx
+// 🟢 Good: App router composes feature components
+import { DashboardMetrics } from '@/features/dashboard/components/DashboardMetrics';
+import { RecentActivity } from '@/features/dashboard/components/RecentActivity';
+
+export default function DashboardPage() {
+ return (
+ <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+ <DashboardMetrics />
+ <RecentActivity />
+ </div>
+ );
+}
+```
\ No newline at end of file
diff --git a/.agent/skills/frontend-developer/resources/styling-guide.md b/.agent/skills/frontend-developer/resources/styling-guide.md
new file mode 100644
index 0000000..7470581
--- /dev/null
+++ b/.agent/skills/frontend-developer/resources/styling-guide.md
@@ -0,0 +1,119 @@
+# Styling Guide (Tailwind CSS)
+
+This project strictly adheres to **Tailwind CSS** for all styling. UI component libraries like MUI, Bootstrap, or custom CSS-in-JS solutions are forbidden.
+
+---
+
+## 1. The Principle of Utility-First
+
+Always favor utility classes over custom CSS. Utility classes ensure a consistent design language and keep the CSS bundle small.
+
+### 🟢 Do:
+* Use standard Tailwind classes (`px-4`, `flex`, `text-black`, etc.).
+* Use **shadcn/ui** for complex primitives (Inputs, Selects, Dialogs).
+* Use the minimalist black-and-white primary palette unless specified otherwise.
+
+### ❌ Don't:
+* Create `.css` files unless for global resets or complex third-party library overrides.
+* Use the `style={...}` prop for static styles.
+* Use UI library-specific styling props (e.g., MUI's `sx`).
+
+---
+
+## 2. Conditional Styling & Composition
+
+For components that accept external `className` props or have internal conditional logic, use `clsx` and `tailwind-merge`. This pattern is non-negotiable for building reliable reusable components.
+
+```tsx
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/**
+ * Utility for merging tailwind classes safely.
+ */
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+ variant?: 'primary' | 'secondary';
+}
+
+export function Button({ variant = 'primary', className, ...props }: ButtonProps) {
+ return (
+ <button
+ className={cn(
+ 'px-6 py-2 font-medium transition-all duration-200 rounded-md active:scale-95',
+ variant === 'primary' ? 'bg-black text-white hover:bg-gray-900' : 'bg-white text-black border border-black hover:bg-gray-50',
+ className // Allows external overrides
+ )}
+ {...props}
+ />
+ );
+}
+```
+
+---
+
+## 3. Dark Mode & Theming
+
+The primary design aesthetic is **Premium Minimalist** (Black and White).
+
+* **Light Mode:** White background, black/gray-900 text, gray-200 borders.
+* **Dark Mode:** Black/gray-950 background, white text, gray-800 borders.
+
+Use the `dark:` prefix for all components to ensure they behave correctly in dark modes.
+
+```html
+<div class="bg-white dark:bg-black text-black dark:text-white border-gray-200 dark:border-gray-800">
+ ...
+</div>
+```
+
+---
+
+## 4. Typography
+
+Use a high-quality modern sans-serif font (Inter, Roboto, or Outfit) via `next/font`.
+
+* **Headings:** `text-2xl` to `text-5xl`, `font-bold` or `font-semibold`, `tracking-tight`.
+* **Body:** `text-base` or `text-sm`, `leading-relaxed`.
+* **Capitals:** For buttons or small UI labels, use `uppercase tracking-widest text-[10px]`.
+
+---
+
+## 5. Layout & Spacing
+
+* **Mobile-First Responsiveness:** Always style starting from the smallest screen. Base classes are for mobile; use `sm:`, `md:`, `lg:` only for larger screen overrides.
+* **Containers:** Use `max-w-7xl mx-auto px-4 md:px-8`.
+* **Grids:** Always prefer `grid` over `flex` for page-level layouts.
+* **Gaps:** Use standard spacing scale (`gap-4`, `gap-8`).
+
+```tsx
+export function ProductGrid() {
+ return (
+ <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-6 gap-y-10">
+ {/* Product Items */}
+ </div>
+ );
+}
+```
+
+---
+
+## 6. Micro-animations
+
+Leverage Tailwind's transition utilities for a premium feel.
+
+* **Hovers:** Use `hover:opacity-80` or `hover:-translate-y-1`.
+* **Transitions:** Always add `transition-all duration-300`.
+* **Focus States:** Distinct black outlines: `focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2`.
+
+---
+
+## 7. Banned Patterns
+
+❌ **Inline Styles:** Except for dynamic values (e.g., progress bar width).
+❌ **Relative Units (em):** Use Tailwind's default `rem` based scale.
+❌ **Important (`!`):** Avoid using `!important` classes. Fix the specificity or use `tailwind-merge` instead.
+❌ **Third-party UI libraries (Shadcn, Headless UI):** Only use if specifically requested by the user. Default to pure Tailwind.
\ No newline at end of file
diff --git a/.agent/skills/frontend-developer/resources/typescript-standards.md b/.agent/skills/frontend-developer/resources/typescript-standards.md
new file mode 100644
index 0000000..ab22931
--- /dev/null
+++ b/.agent/skills/frontend-developer/resources/typescript-standards.md
@@ -0,0 +1,118 @@
+# TypeScript Standards (Next.js)
+
+Our TypeScript configuration adheres to the strictest possible standards to ensure type safety across the server-client boundary and within the Next.js App Router tree.
+
+---
+
+## 1. Strict Mode
+
+The `tsconfig.json` must have `'strict': true` enabled.
+
+* **No `any`:** Under no circumstances should `any` be used. Use `unknown` if the type is truly uncertain, or `interface` for known structures.
+* **Non-Nullable:** Handle `null` and `undefined` explicitly via optional chaining (`?.`) or nullish coalescing (`??`).
+
+---
+
+## 2. Next.js Specific Types
+
+### Page & Layout Props
+Always type the props for `page.tsx` and `layout.tsx`.
+
+```tsx
+// src/app/products/[id]/page.tsx
+interface ProductPageProps {
+ params: { id: string };
+ searchParams: { [key: string]: string | string[] | undefined };
+}
+
+export default async function ProductPage({ params, searchParams }: ProductPageProps) {
+ // ...
+}
+```
+
+### Server Actions
+State within `useActionState` should be strictly typed.
+
+```tsx
+// src/features/products/types/action-state.ts
+export interface ActionState {
+ success?: boolean;
+ error?: string;
+ data?: any;
+}
+```
+
+---
+
+## 3. Global vs Feature Types
+
+### Global Types (`src/types/`)
+* **Location:** Use `src/types/` for entities used by 3+ features or core system types.
+* **Alias:** Use the `~types/...` alias.
+* **Structure:** One file per entity (e.g., `user.ts`, `auth.ts`).
+
+### Feature Types (`src/features/{f}/types/`)
+* **Location:** Use for types strictly coupled with one domain.
+* **Alias:** Use `@/features/f/types`.
+
+---
+
+## 4. Design Patterns
+
+* **Interfaces vs Types:**
+ * Use **Interfaces** for public APIs, props, and object definitions (they are more performant and extendable).
+ * Use **Types** for unions, intersections, and primitives.
+
+* **Discriminated Unions:**
+ Use for state management to ensure all possible paths are handled.
+
+```tsx
+type LoadingState =
+ | { status: 'idle' }
+ | { status: 'loading' }
+ | { status: 'success'; data: any }
+ | { status: 'error'; message: string };
+```
+
+---
+
+## 5. Banned Patterns
+
+❌ **`as const` for Enums:** Prefer string literal unions over Enums for better readability and performance.
+❌ **`React.FC`:** As noted in the Component Patterns, use standard function declarations.
+❌ **Implicit returns:** Always provide explicit return types for functions, especially those exported from a file.
+❌ **`any` data fetching:** Every fetch or DB call must be cast to a specific interface.
+
+---
+
+## 6. JSDoc Documentation
+
+Publicly exported components and utility functions must have JSDoc blocks for better developer experience and tooling.
+
+```tsx
+/**
+ * Renders a primary call-to-action button.
+ * @param variant - Visual style of the button.
+ * @param isLoading - Whether the button is in a loading state.
+ */
+export function Button({ variant, isLoading, ...props }: ButtonProps) {
+ // ...
+}
+```
+
+---
+
+## 7. Absolute Rule on Nullability
+
+Never use non-null assertions (`!`). If a value could be null, the code must account for that possibility with a guard or a fallback.
+
+```tsx
+// ❌ Bad
+const user = await db.getUser(id);
+console.log(user!.name);
+
+// 🟢 Good
+const user = await db.getUser(id);
+if (!user) return <p>User not found</p>;
+console.log(user.name);
+```
\ No newline at end of file
diff --git a/.agent/skills/react-best-practices/AGENTS.md b/.agent/skills/react-best-practices/AGENTS.md
new file mode 100644
index 0000000..898afb3
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/README.md b/.agent/skills/react-best-practices/README.md
new file mode 100644
index 0000000..f283e1c
--- /dev/null
+++ b/.agent/skills/react-best-practices/README.md
@@ -0,0 +1,123 @@
+# React Best Practices
+
+A structured repository for creating and maintaining React Best Practices optimized for agents and LLMs.
+
+## Structure
+
+- `rules/` - Individual rule files (one per rule)
+ - `_sections.md` - Section metadata (titles, impacts, descriptions)
+ - `_template.md` - Template for creating new rules
+ - `area-description.md` - Individual rule files
+- `src/` - Build scripts and utilities
+- `metadata.json` - Document metadata (version, organization, abstract)
+- __`AGENTS.md`__ - Compiled output (generated)
+- __`test-cases.json`__ - Test cases for LLM evaluation (generated)
+
+## Getting Started
+
+1. Install dependencies:
+ ```bash
+ pnpm install
+ ```
+
+2. Build AGENTS.md from rules:
+ ```bash
+ pnpm build
+ ```
+
+3. Validate rule files:
+ ```bash
+ pnpm validate
+ ```
+
+4. Extract test cases:
+ ```bash
+ pnpm extract-tests
+ ```
+
+## Creating a New Rule
+
+1. Copy `rules/_template.md` to `rules/area-description.md`
+2. Choose the appropriate area prefix:
+ - `async-` for Eliminating Waterfalls (Section 1)
+ - `bundle-` for Bundle Size Optimization (Section 2)
+ - `server-` for Server-Side Performance (Section 3)
+ - `client-` for Client-Side Data Fetching (Section 4)
+ - `rerender-` for Re-render Optimization (Section 5)
+ - `rendering-` for Rendering Performance (Section 6)
+ - `js-` for JavaScript Performance (Section 7)
+ - `advanced-` for Advanced Patterns (Section 8)
+3. Fill in the frontmatter and content
+4. Ensure you have clear examples with explanations
+5. Run `pnpm build` to regenerate AGENTS.md and test-cases.json
+
+## Rule File Structure
+
+Each rule file should follow this structure:
+
+```markdown
+---
+title: Rule Title Here
+impact: MEDIUM
+impactDescription: Optional description
+tags: tag1, tag2, tag3
+---
+
+## Rule Title Here
+
+Brief explanation of the rule and why it matters.
+
+**Incorrect (description of what's wrong):**
+
+```typescript
+// Bad code example
+```
+
+**Correct (description of what's right):**
+
+```typescript
+// Good code example
+```
+
+Optional explanatory text after examples.
+
+Reference: [Link](https://example.com)
+
+## File Naming Convention
+
+- Files starting with `_` are special (excluded from build)
+- Rule files: `area-description.md` (e.g., `async-parallel.md`)
+- Section is automatically inferred from filename prefix
+- Rules are sorted alphabetically by title within each section
+- IDs (e.g., 1.1, 1.2) are auto-generated during build
+
+## Impact Levels
+
+- `CRITICAL` - Highest priority, major performance gains
+- `HIGH` - Significant performance improvements
+- `MEDIUM-HIGH` - Moderate-high gains
+- `MEDIUM` - Moderate performance improvements
+- `LOW-MEDIUM` - Low-medium gains
+- `LOW` - Incremental improvements
+
+## Scripts
+
+- `pnpm build` - Compile rules into AGENTS.md
+- `pnpm validate` - Validate all rule files
+- `pnpm extract-tests` - Extract test cases for LLM evaluation
+- `pnpm dev` - Build and validate
+
+## Contributing
+
+When adding or modifying rules:
+
+1. Use the correct filename prefix for your section
+2. Follow the `_template.md` structure
+3. Include clear bad/good examples with explanations
+4. Add appropriate tags
+5. Run `pnpm build` to regenerate AGENTS.md and test-cases.json
+6. Rules are automatically sorted by title - no need to manage numbers!
+
+## Acknowledgments
+
+Originally created by [@shuding](https://x.com/shuding) at [Vercel](https://vercel.com).
diff --git a/.agent/skills/react-best-practices/SKILL.md b/.agent/skills/react-best-practices/SKILL.md
new file mode 100644
index 0000000..9a3f7c7
--- /dev/null
+++ b/.agent/skills/react-best-practices/SKILL.md
@@ -0,0 +1,61 @@
+---
+name: astro-best-practices
+description: Core performance and architectural guidelines for Astro applications. Focuses on the Islands Architecture, SSG, and Asset Optimization to ensure lightning-fast websites. Triggers on any task involving Astro components, layouts, pages, or performance audits.
+---
+
+# Astro Best Practices
+
+A guide to building extremely performant and modern websites with **Astro**. These rules are prioritized by their impact on **Core Web Vitals** and **Developer Experience**.
+
+## When to Apply
+
+Reference these guidelines when:
+- Creating new Astro pages or layouts.
+- Deciding which UI components to use (React vs. Astro).
+- Optimizing for SEO and PageSpeed.
+- Implementing hydration strategies (`client:*` directives).
+- Configuring global site settings.
+
+## Rule Categories
+
+### 1. Minimal JavaScript (CRITICAL)
+- **Astro Components First**: Use `.astro` components for any static UI. If it doesn't need client-side state, it doesn't need React.
+- **Islands Architecture**: Only use React components for interactive "Islands".
+- **Opt-out of Hydration**: Never use a `client:*` directive unless interactivity is actually required.
+
+### 2. Hydration Strategies (CRITICAL)
+- **Lazy Hydration**: Use `client:visible` for components below the fold (e.g., Footer, scroll animations).
+- **Prioritize TTI**: Use `client:idle` for low-priority scripts (e.g., chat widgets).
+- **Initial Load**: Use `client:load` ONLY for essential interactive elements in the viewport (e.g., Main Menu).
+
+### 3. Static Site Generation (SSG)
+- **Pre-rendering**: Use SSG for all marketing and content pages. Avoid SSR unless strictly necessary for dynamic data.
+- **Data Fetching**: Fetch data at build time inside the Astro `---` block. Do not fetch data inside React islands if it can be passed as a prop from the Astro parent.
+
+### 4. SEO & Metadata
+- **Global BaseHead**: Use a single common component in all layouts for meta tags, titles, and icons.
+- **Canonical URLs**: Always include a canonical URL tag to avoid duplicate content issues.
+- **Alt Text**: Mandatory `alt` text for all images.
+
+### 5. Asset Optimization (HIGH)
+- **Astro Image Component**: Use the built-in `<Image />` component for automatic format conversion (WebP/AVIF) and resizing.
+- **Font Hoisting**: Use local fonts and `font-display: swap` to prevent FOIT (Flash of Invisible Text).
+
+### 6. i18n & Routing
+- **Locale Routing**: Structure pages as `src/pages/[lang]/index.astro`.
+- **Locale Discovery**: Use the `Astro.preferredLocale` or extract it from the URL.
+- **Fallbacks**: Always provide a fallback language for untranslated content.
+
+## Anti-Patterns (Immediate Rejection)
+
+❌ Using React for a header/footer that doesn't have complex interactivity.
+❌ Not using the Astro `<Image />` component.
+❌ Missing page titles or meta descriptions.
+❌ Over-hydrating: Putting the entire page inside a single React component.
+
+## Summary Checklist
+- [ ] Is this UI static? (If yes, use `.astro`)
+- [ ] Are all images optimized?
+- [ ] Do all pages have unique metadata?
+- [ ] Are below-the-fold components hydrated with `client:visible`?
+- [ ] Is all text translatable?
diff --git a/.agent/skills/react-best-practices/metadata.json b/.agent/skills/react-best-practices/metadata.json
new file mode 100644
index 0000000..fcb4107
--- /dev/null
+++ b/.agent/skills/react-best-practices/metadata.json
@@ -0,0 +1,15 @@
+{
+ "version": "0.1.0",
+ "organization": "Vercel Engineering",
+ "date": "January 2026",
+ "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.",
+ "references": [
+ "https://react.dev",
+ "https://nextjs.org",
+ "https://swr.vercel.app",
+ "https://github.com/shuding/better-all",
+ "https://github.com/isaacs/node-lru-cache",
+ "https://vercel.com/blog/how-we-optimized-package-imports-in-next-js",
+ "https://vercel.com/blog/how-we-made-the-vercel-dashboard-twice-as-fast"
+ ]
+}
diff --git a/.agent/skills/react-best-practices/rules/_sections.md b/.agent/skills/react-best-practices/rules/_sections.md
new file mode 100644
index 0000000..4d20c14
--- /dev/null
+++ b/.agent/skills/react-best-practices/rules/_sections.md
@@ -0,0 +1,46 @@
+# Sections
+
+This file defines all sections, their ordering, impact levels, and descriptions.
+The section ID (in parentheses) is the filename prefix used to group rules.
+
+---
+
+## 1. Eliminating Waterfalls (async)
+
+**Impact:** CRITICAL
+**Description:** Waterfalls are the #1 performance killer. Each sequential await adds full network latency. Eliminating them yields the largest gains.
+
+## 2. Bundle Size Optimization (bundle)
+
+**Impact:** CRITICAL
+**Description:** Reducing initial bundle size improves Time to Interactive and Largest Contentful Paint.
+
+## 3. Server-Side Performance (server)
+
+**Impact:** HIGH
+**Description:** Optimizing server-side rendering and data fetching eliminates server-side waterfalls and reduces response times.
+
+## 4. Client-Side Data Fetching (client)
+
+**Impact:** MEDIUM-HIGH
+**Description:** Automatic deduplication and efficient data fetching patterns reduce redundant network requests.
+
+## 5. Re-render Optimization (rerender)
+
+**Impact:** MEDIUM
+**Description:** Reducing unnecessary re-renders minimizes wasted computation and improves UI responsiveness.
+
+## 6. Rendering Performance (rendering)
+
+**Impact:** MEDIUM
+**Description:** Optimizing the rendering process reduces the work the browser needs to do.
+
+## 7. JavaScript Performance (js)
+
+**Impact:** LOW-MEDIUM
+**Description:** Micro-optimizations for hot paths can add up to meaningful improvements.
+
+## 8. Advanced Patterns (advanced)
+
+**Impact:** LOW
+**Description:** Advanced patterns for specific cases that require careful implementation.
diff --git a/.agent/skills/react-best-practices/rules/_template.md b/.agent/skills/react-best-practices/rules/_template.md
new file mode 100644
index 0000000..1e9e707
--- /dev/null
+++ b/.agent/skills/react-best-practices/rules/_template.md
@@ -0,0 +1,28 @@
+---
+title: Rule Title Here
+impact: MEDIUM
+impactDescription: Optional description of impact (e.g., "20-50% improvement")
+tags: tag1, tag2
+---
+
+## Rule Title Here
+
+**Impact: MEDIUM (optional impact description)**
+
+Brief explanation of the rule and why it matters. This should be clear and concise, explaining the performance implications.
+
+**Incorrect (description of what's wrong):**
+
+```typescript
+// Bad code example here
+const bad = example()
+```
+
+**Correct (description of what's right):**
+
+```typescript
+// Good code example here
+const good = example()
+```
+
+Reference: [Link to documentation or resource](https://example.com)
diff --git a/.agent/skills/react-best-practices/rules/advanced-event-handler-refs.md b/.agent/skills/react-best-practices/rules/advanced-event-handler-refs.md
new file mode 100644
index 0000000..3a45152
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/advanced-use-latest.md b/.agent/skills/react-best-practices/rules/advanced-use-latest.md
new file mode 100644
index 0000000..3facdf2
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/async-api-routes.md b/.agent/skills/react-best-practices/rules/async-api-routes.md
new file mode 100644
index 0000000..6feda1e
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/async-defer-await.md b/.agent/skills/react-best-practices/rules/async-defer-await.md
new file mode 100644
index 0000000..ea7082a
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/async-dependencies.md b/.agent/skills/react-best-practices/rules/async-dependencies.md
new file mode 100644
index 0000000..fb90d86
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/async-parallel.md b/.agent/skills/react-best-practices/rules/async-parallel.md
new file mode 100644
index 0000000..64133f6
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/async-suspense-boundaries.md b/.agent/skills/react-best-practices/rules/async-suspense-boundaries.md
new file mode 100644
index 0000000..1fbc05b
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/bundle-barrel-imports.md b/.agent/skills/react-best-practices/rules/bundle-barrel-imports.md
new file mode 100644
index 0000000..ee48f32
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/bundle-conditional.md b/.agent/skills/react-best-practices/rules/bundle-conditional.md
new file mode 100644
index 0000000..40bd6f9
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/bundle-defer-third-party.md b/.agent/skills/react-best-practices/rules/bundle-defer-third-party.md
new file mode 100644
index 0000000..db041d1
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/bundle-dynamic-imports.md b/.agent/skills/react-best-practices/rules/bundle-dynamic-imports.md
new file mode 100644
index 0000000..60b6269
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/bundle-preload.md b/.agent/skills/react-best-practices/rules/bundle-preload.md
new file mode 100644
index 0000000..7000504
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/client-event-listeners.md b/.agent/skills/react-best-practices/rules/client-event-listeners.md
new file mode 100644
index 0000000..aad4ae9
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/client-swr-dedup.md b/.agent/skills/react-best-practices/rules/client-swr-dedup.md
new file mode 100644
index 0000000..2a430f2
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/js-batch-dom-css.md b/.agent/skills/react-best-practices/rules/js-batch-dom-css.md
new file mode 100644
index 0000000..92a3b63
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/js-cache-function-results.md b/.agent/skills/react-best-practices/rules/js-cache-function-results.md
new file mode 100644
index 0000000..180f8ac
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/js-cache-property-access.md b/.agent/skills/react-best-practices/rules/js-cache-property-access.md
new file mode 100644
index 0000000..39eec90
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/js-cache-storage.md b/.agent/skills/react-best-practices/rules/js-cache-storage.md
new file mode 100644
index 0000000..aa4a30c
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/js-combine-iterations.md b/.agent/skills/react-best-practices/rules/js-combine-iterations.md
new file mode 100644
index 0000000..044d017
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/js-early-exit.md b/.agent/skills/react-best-practices/rules/js-early-exit.md
new file mode 100644
index 0000000..f46cb89
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/js-hoist-regexp.md b/.agent/skills/react-best-practices/rules/js-hoist-regexp.md
new file mode 100644
index 0000000..dae3fef
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/js-index-maps.md b/.agent/skills/react-best-practices/rules/js-index-maps.md
new file mode 100644
index 0000000..9d357a0
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/js-length-check-first.md b/.agent/skills/react-best-practices/rules/js-length-check-first.md
new file mode 100644
index 0000000..6c38625
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/js-min-max-loop.md b/.agent/skills/react-best-practices/rules/js-min-max-loop.md
new file mode 100644
index 0000000..02caec5
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/js-set-map-lookups.md b/.agent/skills/react-best-practices/rules/js-set-map-lookups.md
new file mode 100644
index 0000000..680a489
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/js-tosorted-immutable.md b/.agent/skills/react-best-practices/rules/js-tosorted-immutable.md
new file mode 100644
index 0000000..eae8b3f
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/rendering-activity.md b/.agent/skills/react-best-practices/rules/rendering-activity.md
new file mode 100644
index 0000000..c957a49
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/rendering-animate-svg-wrapper.md b/.agent/skills/react-best-practices/rules/rendering-animate-svg-wrapper.md
new file mode 100644
index 0000000..646744c
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/rendering-conditional-render.md b/.agent/skills/react-best-practices/rules/rendering-conditional-render.md
new file mode 100644
index 0000000..7e866f5
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/rendering-content-visibility.md b/.agent/skills/react-best-practices/rules/rendering-content-visibility.md
new file mode 100644
index 0000000..aa66563
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/rendering-hoist-jsx.md b/.agent/skills/react-best-practices/rules/rendering-hoist-jsx.md
new file mode 100644
index 0000000..32d2f3f
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/rendering-hydration-no-flicker.md b/.agent/skills/react-best-practices/rules/rendering-hydration-no-flicker.md
new file mode 100644
index 0000000..5cf0e79
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/rendering-svg-precision.md b/.agent/skills/react-best-practices/rules/rendering-svg-precision.md
new file mode 100644
index 0000000..6d77128
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/rerender-defer-reads.md b/.agent/skills/react-best-practices/rules/rerender-defer-reads.md
new file mode 100644
index 0000000..e867c95
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/rerender-dependencies.md b/.agent/skills/react-best-practices/rules/rerender-dependencies.md
new file mode 100644
index 0000000..47a4d92
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/rerender-derived-state.md b/.agent/skills/react-best-practices/rules/rerender-derived-state.md
new file mode 100644
index 0000000..a15177c
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/rerender-functional-setstate.md b/.agent/skills/react-best-practices/rules/rerender-functional-setstate.md
new file mode 100644
index 0000000..b004ef4
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/rerender-lazy-state-init.md b/.agent/skills/react-best-practices/rules/rerender-lazy-state-init.md
new file mode 100644
index 0000000..4ecb350
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/rerender-memo.md b/.agent/skills/react-best-practices/rules/rerender-memo.md
new file mode 100644
index 0000000..f8982ab
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/rerender-transitions.md b/.agent/skills/react-best-practices/rules/rerender-transitions.md
new file mode 100644
index 0000000..d99f43f
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/server-after-nonblocking.md b/.agent/skills/react-best-practices/rules/server-after-nonblocking.md
new file mode 100644
index 0000000..e8f5b26
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/server-cache-lru.md b/.agent/skills/react-best-practices/rules/server-cache-lru.md
new file mode 100644
index 0000000..ef6938a
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/server-cache-react.md b/.agent/skills/react-best-practices/rules/server-cache-react.md
new file mode 100644
index 0000000..fa49e0e
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/server-parallel-fetching.md b/.agent/skills/react-best-practices/rules/server-parallel-fetching.md
new file mode 100644
index 0000000..5261f08
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/react-best-practices/rules/server-serialization.md b/.agent/skills/react-best-practices/rules/server-serialization.md
new file mode 100644
index 0000000..39c5c41
--- /dev/null
+++ b/.agent/skills/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/.agent/skills/shadcn-ui/SKILL.md b/.agent/skills/shadcn-ui/SKILL.md
new file mode 100644
index 0000000..1b5f5e1
--- /dev/null
+++ b/.agent/skills/shadcn-ui/SKILL.md
@@ -0,0 +1,57 @@
+---
+name: shadcn-ui
+description: Guides the implementation, customization, and usage of shadcn/ui components within an Astro + React environment. Ensures accessible and consistent UI primitives aligned with JODAZ DEV branding.
+---
+
+# shadcn/ui Integration & Usage
+
+You are an expert in using **shadcn/ui** to build high-quality, accessible, and performant user interfaces. Your goal is to ensure that all UI components are implemented according to best practices within an **Astro** architecture.
+
+## When to use this skill
+- When you need to add a new UI component (Button, Dialog, Input, etc.).
+- When you need to customize an existing shadcn component.
+- When you are creating complex UI interactions that require Radix primitives.
+
+## Necessary Inputs
+- The component name to be added or modified.
+- The desired customization or functionality.
+- Knowledge of the existing `tailwind.config.ts` and `index.css` structure.
+
+## Workflow
+
+1) **Check for Existence**: Verify if the component already exists in `src/components/ui/`.
+2) **Install/Add**: If missing, use the shadcn CLI: `npx shadcn-ui@latest add <component-name>`.
+3) **Refine & Style**: Apply JODAZ DEV brand styles.
+4) **Integration (The Island Rule)**: When using shadcn components in `.astro` files, you **MUST** ensure they are wrapped in a React component and use the appropriate `client:` directive (e.g., `client:load` for dropdowns, `client:visible` for dialogs).
+
+## Instructions
+
+### 1. Installation & CLI Usage
+- Use `pnpm dlx shadcn-ui@latest add [component]` to add new components.
+- Components are located in `src/components/ui/`.
+
+### 2. Styling Standards
+- **Source of Truth**: The component file itself.
+- **Theme Alignment**: Ensure components default to the **JODAZ DEV** aesthetic:
+ - Stone backgrounds, Navy text, and Blue primary accents.
+ - Buttons should use the custom variants (e.g., `hero`, `outline-hero`).
+
+### 3. Astro & Hydration (CRITICAL)
+- Most shadcn components (Tabs, Accordion, Dialog, etc.) **will not work** without a hydration directive in Astro.
+- Always use `client:load` or `client:visible` when importing these into an Astro page.
+- Nested shadcn components should also follow React patterns.
+
+### 4. Code Structure
+- Use the `cn()` utility for all class merging.
+- Ensure all text within components is compatible with i18n (pass through props or use key-based translations).
+
+## Output (exact format)
+- A brief confirmation of the component added/modified.
+- The updated or new component code.
+- Example usage in an `.astro` file with the correct `client:` directive.
+
+---
+
+## Resources
+- [Best Practices](resources/best-practices.md)
+- [Troubleshooting](resources/troubleshooting.md)
diff --git a/.agent/skills/shadcn-ui/resources/best-practices.md b/.agent/skills/shadcn-ui/resources/best-practices.md
new file mode 100644
index 0000000..22a7ea2
--- /dev/null
+++ b/.agent/skills/shadcn-ui/resources/best-practices.md
@@ -0,0 +1,48 @@
+# shadcn/ui Best Practices
+
+Follow these guidelines to maintain a clean and reliable UI layer using shadcn/ui.
+
+---
+
+## 1. Customization Boundary
+- **Keep it global**: If a change (like a default border color) applies to all buttons, edit the `src/components/ui/button.tsx` directly.
+- **Keep it local**: If a change is specific to a single feature, pass a `className` prop instead of modifying the global component.
+
+## 2. Using the `cn` Utility
+Always use the `cn` utility to merge classes. This ensures that Tailwind utility conflicts are resolved correctly (via `tailwind-merge`) and that conditional joining is clean (via `clsx`).
+
+```tsx
+import { cn } from "@/lib/utils";
+
+export function CustomCard({ className, children }) {
+ return (
+ <div className={cn("rounded-xl border bg-card text-card-foreground shadow", className)}>
+ {children}
+ </div>
+ );
+}
+```
+
+## 3. Server vs. Client Components
+- Many shadcn components (like Dialog, Popover, Tabs) rely on Radix UI, which uses React state. These **must** be Client Components.
+- When using these in a Server Component, create a wrapper Client Component or push the interactivity down into a smaller interactive leaf.
+
+## 4. Primitive Names
+- Do not rename exported primitives (e.g., `DialogTrigger`, `DialogHeader`). Familiarity with the shadcn/Radix naming convention is critical for team speed.
+
+## 5. Input Accessibility
+- Always use the `Label` component with `Input` and ensure `htmlFor`/`id` match.
+
+```tsx
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export function EmailField() {
+ return (
+ <div className="grid w-full max-w-sm items-center gap-1.5">
+ <Label htmlFor="email">Email</Label>
+ <Input type="email" id="email" placeholder="Email" />
+ </div>
+ );
+}
+```
diff --git a/.agent/skills/shadcn-ui/resources/troubleshooting.md b/.agent/skills/shadcn-ui/resources/troubleshooting.md
new file mode 100644
index 0000000..d08a06a
--- /dev/null
+++ b/.agent/skills/shadcn-ui/resources/troubleshooting.md
@@ -0,0 +1,20 @@
+# shadcn/ui Troubleshooting
+
+Common issues and how to solve them.
+
+---
+
+## 1. CLI Installation Fails
+- Ensure you have a `components.json` file in the root directory. If not, run `npx shadcn-ui@latest init` first.
+- If `pnpm` errors occur, try using `pnpm dlx shadcn-ui@latest add [component]`.
+
+## 2. Styling Doesn't Apply
+- Verify that `tailwind.config.js` includes the folder where your components live. It should have `@/components/**/*.{ts,tsx}` in the `content` array.
+- Check if your `globals.css` contains the necessary CSS variables for `primary`, `background`, etc.
+
+## 3. Hydration Mismatch
+- Issues often arise with `Dialog` or `Popover` when their content is rendered differently on server and client.
+- Ensure that the trigger and content are consistent, and wrap interactive roots in a `useEffect` based mounting check if absolutely necessary.
+
+## 4. Re-running the CLI
+- If you refactored a component extensively, running `add` again will **overwrite** your changes. Always back up customizations before re-running the `add` command on an existing component.
diff --git a/.agent/skills/skill-creator/SKILL.md b/.agent/skills/skill-creator/SKILL.md
new file mode 100644
index 0000000..16ac3ef
--- /dev/null
+++ b/.agent/skills/skill-creator/SKILL.md
@@ -0,0 +1,134 @@
+You are an expert at designing Skills for the Antigravity environment. Your goal is to create predictable, reusable, and easy-to-maintain Skills, with a clear folder structure and logic that works well in production.
+
+Your output MUST ALWAYS include:
+1. The skill folder path inside agent/skills/
+2. The complete content of SKILL.md with YAML frontmatter
+3. Any additional resources (scripts/resources/examples) only if they provide real value
+
+1) Minimal Mandatory Structure
+Each Skill is created within:
+agent/skills/<skill-name>/
+
+Inside, at a minimum, there must be:
+● SKILL.md (mandatory, logic and rules of the skill)
+● resources/ (optional, guides, templates, tokens, examples)
+● scripts/ (optional, utilities executed by the skill)
+● examples/ (optional, reference implementations)
+
+Do not create unnecessary files. Keep the structure as simple as possible.
+
+2) Naming and YAML Rules (SKILL.md)
+The SKILL.md file must always start with YAML frontmatter.
+
+Rules:
+● name: short, lowercase, with hyphens. Maximum 40 characters. Ex: plan-video, audit-landing, answer-emails
+● description: in English, third person, maximum 220 characters. Must state what it does and when to use it.
+● Do not use tool names in the name unless essential.
+● Do not include "marketing" in the YAML: keep it operational.
+
+Template:
+---
+name: <skill-name>
+description: <brief description in third person>
+---
+
+3) Writing Principles (so the skill works)
+● Clarity over length: better few rules, but very clear.
+● No filler: avoid blog-like explanations. The skill is an execution manual.
+● Separation of concerns: if there is "style", it goes to a resource. If there are "steps", they go to the workflow.
+● Ask for data when missing: if an input is critical, the skill must ask.
+● Standardized output: define exactly what format you return (list, table, JSON, markdown).
+
+4) When it activates (triggers)
+In each SKILL.md, include a "When to use this skill" section with clear triggers.
+
+Examples:
+● "when the user asks to create a new skill"
+● "when the user repeats a process"
+● "when a format standard is needed"
+● "when a long prompt needs to be converted into a reusable procedure"
+
+Triggers must be concrete and easy to recognize.
+
+5) Recommended Workflow (Plan → Validate → Execute)
+For simple skills:
+● 3–6 steps maximum.
+
+For complex skills:
+● Divide into phases: Plan, Validation, Execution, Review.
+● Include a mini checklist.
+
+Example of a short checklist:
+● Understood the final goal
+● Have necessary inputs
+● Defined exact output
+● Applied constraints
+● Reviewed consistency and errors
+
+6) Levels of Freedom (how "strict" it should be)
+The skill must choose the appropriate level according to the task type:
+1. High freedom (heuristics): for brainstorming, ideas, alternatives.
+2. Medium freedom (templates): for documents, copy, structures.
+3. Low freedom (exact steps / commands): for fragile operations, scripts, technical changes.
+
+Rule: the higher the risk, the more specific the skill must be.
+
+7) Error Handling and Corrections
+Include a short section:
+● What to do if the output does not meet the format
+● How to ask the user for feedback
+● How to iterate without breaking the standard
+
+Example:
+"If the result does not meet the format, go back to step 2, adjust constraints, and re-generate. If there is ambiguity, ask before assuming."
+
+8) Output Format When You Create a Skill
+When the user asks for a skill, respond with this format:
+
+Folder
+agent/skills/<skill-name>/
+
+SKILL.md
+---
+name: ...
+description: ...
+---
+# <Skill Title>
+
+## When to use this skill
+- ...
+- ...
+
+## Necessary Inputs
+- ...
+- ...
+
+## Workflow
+1) ...
+2) ...
+3) ...
+
+## Instructions
+...
+
+## Output (exact format)
+...
+
+Optional Resources (only if they add value)
+● resources/<file>.md
+● scripts/<file>.sh
+
+9) Examples of Skills You SHOULD Suggest (if fitting)
+If the user is creating skills, suggest useful ideas:
+● "Style and Brand" Skill
+● "Plan Videos" Skill
+● "Audit Landing" Skill
+● "App Debug" Skill
+● "Answer Emails with Tone" Skill
+
+10) Usage Instructions (for the user)
+1. Copy this entire document into a file named:
+antigravity-skill-creator.md
+2. Upload that file to your Antigravity project/agent
+3. From there, to create a new skill, ask:
+"Use my document 'antigravity-skill-creator' and build a skill for: <goal>. Give me the folder, the SKILL.md, and necessary resources."
diff --git a/.agent/skills/systematic-debugging/CREATION-LOG.md b/.agent/skills/systematic-debugging/CREATION-LOG.md
new file mode 100644
index 0000000..024d00a
--- /dev/null
+++ b/.agent/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/.agent/skills/systematic-debugging/SKILL.md b/.agent/skills/systematic-debugging/SKILL.md
new file mode 100644
index 0000000..111d2a9
--- /dev/null
+++ b/.agent/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/.agent/skills/systematic-debugging/condition-based-waiting-example.ts b/.agent/skills/systematic-debugging/condition-based-waiting-example.ts
new file mode 100644
index 0000000..703a06b
--- /dev/null
+++ b/.agent/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/.agent/skills/systematic-debugging/condition-based-waiting.md b/.agent/skills/systematic-debugging/condition-based-waiting.md
new file mode 100644
index 0000000..70994f7
--- /dev/null
+++ b/.agent/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/.agent/skills/systematic-debugging/defense-in-depth.md b/.agent/skills/systematic-debugging/defense-in-depth.md
new file mode 100644
index 0000000..e248335
--- /dev/null
+++ b/.agent/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/.agent/skills/systematic-debugging/find-polluter.sh b/.agent/skills/systematic-debugging/find-polluter.sh
new file mode 100755
index 0000000..1d71c56
--- /dev/null
+++ b/.agent/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/.agent/skills/systematic-debugging/root-cause-tracing.md b/.agent/skills/systematic-debugging/root-cause-tracing.md
new file mode 100644
index 0000000..9484774
--- /dev/null
+++ b/.agent/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/.agent/skills/systematic-debugging/test-academic.md b/.agent/skills/systematic-debugging/test-academic.md
new file mode 100644
index 0000000..23a6ed7
--- /dev/null
+++ b/.agent/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/.agent/skills/systematic-debugging/test-pressure-1.md b/.agent/skills/systematic-debugging/test-pressure-1.md
new file mode 100644
index 0000000..8d13b46
--- /dev/null
+++ b/.agent/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/.agent/skills/systematic-debugging/test-pressure-2.md b/.agent/skills/systematic-debugging/test-pressure-2.md
new file mode 100644
index 0000000..2d2315e
--- /dev/null
+++ b/.agent/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/.agent/skills/systematic-debugging/test-pressure-3.md b/.agent/skills/systematic-debugging/test-pressure-3.md
new file mode 100644
index 0000000..89734b8
--- /dev/null
+++ b/.agent/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/.agent/skills/ui-ux-designer/SKILL.md b/.agent/skills/ui-ux-designer/SKILL.md
new file mode 100644
index 0000000..a1ba36b
--- /dev/null
+++ b/.agent/skills/ui-ux-designer/SKILL.md
@@ -0,0 +1,81 @@
+---
+name: ui-ux-designer
+description: Creates interface designs and enforces brand guidelines using Tailwind CSS. Focuses on premium, mobile-first, modern aesthetics with the JODAZ DEV brand palette (Stone background, Blue accents, Navy text). Optimized for Astro (Islands Architecture).
+metadata:
+ model: sonnet
+---
+# UI/UX Designer
+
+## When to use this skill
+- When designing new Astro or React components using Tailwind CSS.
+- When applying styles, colors, or typography to existing elements.
+- When creating UI layouts in `src/layouts/`.
+- When enforcing the current design system and guidelines.
+
+## Necessary Inputs
+- The component or page to be designed or modified.
+- The user flow or functional requirement to cover.
+- Any specific variations needed (e.g., responsive breakdown).
+
+## Workflow
+1. Analyze the functional requirement and required inputs.
+2. Select appropriate **Astro** (for static) or **React/shadcn** (for interactive) components.
+3. Apply **JODAZ DEV Brand UI Guidelines** (Stone background, Blue/Navy palette, precise spacings).
+4. **Mobile-First Design**: Design the layout for mobile devices first, then scale up using Tailwind breakpoints.
+5. **i18n & SEO**: Ensure all UI strings are keyed for translations and that every page includes a SEO metadata block.
+6. Integrate specified Icon/Animation libraries (e.g., `framer-motion`, `lucide-react`).
+
+## Instructions
+
+You are an expert UI/UX designer specialized in premium, modern design systems. You must strictly adhere to a **Mobile-First** approach and the following brand-specific guidelines:
+
+### 1. Framework & Libraries
+- **Core Styling**: **Tailwind CSS**. Always leverage utility classes.
+- **Framework**: **Astro** (Static) + **React** (Interactive Islands).
+- **UI Components**: Use **shadcn/ui** (located in `src/components/ui`). In Astro pages, remember to add `client:load` or `client:visible` for interactive shadcn components.
+- **Icons**: Use `lucide-react` or `react-icons`.
+- **Animations**: Use `framer-motion` (in React islands) or Astro View Transitions for page-level motion.
+- **Internationalization**: Use Astro's `i18n` features. Always use translation keys (e.g., `t('nav.home')`).
+
+### 2. Colors Palette (JODAZ DEV Brand)
+The brand uses a sophisticated "Stone & Blue" palette. Strictly use the following HSL tokens defined in `index.css`:
+- **Primary (Blue)**: `var(--primary)` / `hsl(221 91% 50%)`
+- **Secondary (Navy)**: `var(--secondary)` / `hsl(218 67% 35%)`
+- **Background**: `var(--background)` / `hsl(30 14% 93%)` - Default "Stone" surface.
+- **Foreground (Navy/Black)**: `var(--foreground)` / `hsl(217 57% 13%)`
+- **Muted (Light Blue)**: `var(--muted)` / `hsl(228 57% 91%)`
+
+**Gradients**:
+- `gradient-primary`: Used for primary buttons and accents.
+- `bg-clip-text text-transparent bg-gradient-to-r from-blue-50 to-blue-400`: Mandatory for Hero headings.
+
+### 3. Typography
+- **Headings**:
+ - `Hero H1`: `text-5xl md:text-6xl lg:text-7xl font-bold leading-tight tracking-tighter`
+ - `H2`: `text-3xl md:text-4xl font-bold tracking-tight`
+- **Body Text**:
+ - `Base`: `text-base leading-relaxed text-foreground/80`
+- **Interactive**: `text-sm font-medium uppercase tracking-widest` for buttons.
+
+### 4. SEO & Metadata
+- Every page must render a `<SEO />` component.
+- Provide descriptive `title` and `description` for every route.
+- Use high-quality OG images (generate them if possible).
+
+### 5. Spacing & Shapes
+- **Container**: Always use `container mx-auto px-4`.
+- **Global Border Radius**: `var(--radius)` (default `0.5rem`).
+- **Cards**: Use `rounded-xl border bg-card text-card-foreground shadow-elegant`.
+
+### 6. Button Variants (shadcn/ui)
+- `variant="hero"`: The primary CTA. Always include a hover arrow animation.
+- `variant="outline-hero"`: Used for secondary actions on dark backgrounds.
+
+### 7. General Rules
+- **Contrast**: Black/Navy text on Stone background is the brand signature.
+- **Visual Balance**: Use whitespace generously. "White space is premium".
+- **Dynamic Elements**: Use `framer-motion` for reveal-on-scroll effects.
+- **Consistency**: All brand-new components must align with the JODAZ DEV color tokens.
+
+## Output (exact format)
+Provide design specifications, component code (Astro or React), or structural layout. Include explicit references to Tailwind classes used. Ensure all text is wrapped in translation helpers. Include the necessary SEO props.
diff --git a/.agent/skills/ui-ux-designer/resources/LOGO.png b/.agent/skills/ui-ux-designer/resources/LOGO.png
new file mode 100644
index 0000000..ca86208
Binary files /dev/null and b/.agent/skills/ui-ux-designer/resources/LOGO.png differ
diff --git a/.agent/workflows/commit-and-push.md b/.agent/workflows/commit-and-push.md
new file mode 100644
index 0000000..9e7c996
--- /dev/null
+++ b/.agent/workflows/commit-and-push.md
@@ -0,0 +1,18 @@
+---
+description: How to commit and push changes to the repository
+---
+1. Use the `run_command` tool to check the status of the repository and understand what changes are pending.
+```bash
+git status
+```
+// turbo
+2. Understand the changes to write a good commit message following Conventional Commits format (e.g. `feat: x`, `fix: y`, `chore: z`).
+3. Add all changes, and commit them.
+```bash
+git add . && git commit -m "type: description"
+```
+// turbo
+4. Push the changes to the remote branch.
+```bash
+git push
+```
diff --git a/.astro/content-assets.mjs b/.astro/content-assets.mjs
new file mode 100644
index 0000000..2b8b823
--- /dev/null
+++ b/.astro/content-assets.mjs
@@ -0,0 +1 @@
+export default new Map();
\ No newline at end of file
diff --git a/.astro/content-modules.mjs b/.astro/content-modules.mjs
new file mode 100644
index 0000000..2b8b823
--- /dev/null
+++ b/.astro/content-modules.mjs
@@ -0,0 +1 @@
+export default new Map();
\ No newline at end of file
diff --git a/.astro/content.d.ts b/.astro/content.d.ts
new file mode 100644
index 0000000..c0082cc
--- /dev/null
+++ b/.astro/content.d.ts
@@ -0,0 +1,199 @@
+declare module 'astro:content' {
+ export interface RenderResult {
+ Content: import('astro/runtime/server/index.js').AstroComponentFactory;
+ headings: import('astro').MarkdownHeading[];
+ remarkPluginFrontmatter: Record<string, any>;
+ }
+ interface Render {
+ '.md': Promise<RenderResult>;
+ }
+
+ export interface RenderedContent {
+ html: string;
+ metadata?: {
+ imagePaths: Array<string>;
+ [key: string]: unknown;
+ };
+ }
+}
+
+declare module 'astro:content' {
+ type Flatten<T> = T extends { [K: string]: infer U } ? U : never;
+
+ export type CollectionKey = keyof AnyEntryMap;
+ export type CollectionEntry<C extends CollectionKey> = Flatten<AnyEntryMap[C]>;
+
+ export type ContentCollectionKey = keyof ContentEntryMap;
+ export type DataCollectionKey = keyof DataEntryMap;
+
+ type AllValuesOf<T> = T extends any ? T[keyof T] : never;
+ type ValidContentEntrySlug<C extends keyof ContentEntryMap> = AllValuesOf<
+ ContentEntryMap[C]
+ >['slug'];
+
+ export type ReferenceDataEntry<
+ C extends CollectionKey,
+ E extends keyof DataEntryMap[C] = string,
+ > = {
+ collection: C;
+ id: E;
+ };
+ export type ReferenceContentEntry<
+ C extends keyof ContentEntryMap,
+ E extends ValidContentEntrySlug<C> | (string & {}) = string,
+ > = {
+ collection: C;
+ slug: E;
+ };
+ export type ReferenceLiveEntry<C extends keyof LiveContentConfig['collections']> = {
+ collection: C;
+ id: string;
+ };
+
+ /** @deprecated Use `getEntry` instead. */
+ export function getEntryBySlug<
+ C extends keyof ContentEntryMap,
+ E extends ValidContentEntrySlug<C> | (string & {}),
+ >(
+ collection: C,
+ // Note that this has to accept a regular string too, for SSR
+ entrySlug: E,
+ ): E extends ValidContentEntrySlug<C>
+ ? Promise<CollectionEntry<C>>
+ : Promise<CollectionEntry<C> | undefined>;
+
+ /** @deprecated Use `getEntry` instead. */
+ export function getDataEntryById<C extends keyof DataEntryMap, E extends keyof DataEntryMap[C]>(
+ collection: C,
+ entryId: E,
+ ): Promise<CollectionEntry<C>>;
+
+ export function getCollection<C extends keyof AnyEntryMap, E extends CollectionEntry<C>>(
+ collection: C,
+ filter?: (entry: CollectionEntry<C>) => entry is E,
+ ): Promise<E[]>;
+ export function getCollection<C extends keyof AnyEntryMap>(
+ collection: C,
+ filter?: (entry: CollectionEntry<C>) => unknown,
+ ): Promise<CollectionEntry<C>[]>;
+
+ export function getLiveCollection<C extends keyof LiveContentConfig['collections']>(
+ collection: C,
+ filter?: LiveLoaderCollectionFilterType<C>,
+ ): Promise<
+ import('astro').LiveDataCollectionResult<LiveLoaderDataType<C>, LiveLoaderErrorType<C>>
+ >;
+
+ export function getEntry<
+ C extends keyof ContentEntryMap,
+ E extends ValidContentEntrySlug<C> | (string & {}),
+ >(
+ entry: ReferenceContentEntry<C, E>,
+ ): E extends ValidContentEntrySlug<C>
+ ? Promise<CollectionEntry<C>>
+ : Promise<CollectionEntry<C> | undefined>;
+ export function getEntry<
+ C extends keyof DataEntryMap,
+ E extends keyof DataEntryMap[C] | (string & {}),
+ >(
+ entry: ReferenceDataEntry<C, E>,
+ ): E extends keyof DataEntryMap[C]
+ ? Promise<DataEntryMap[C][E]>
+ : Promise<CollectionEntry<C> | undefined>;
+ export function getEntry<
+ C extends keyof ContentEntryMap,
+ E extends ValidContentEntrySlug<C> | (string & {}),
+ >(
+ collection: C,
+ slug: E,
+ ): E extends ValidContentEntrySlug<C>
+ ? Promise<CollectionEntry<C>>
+ : Promise<CollectionEntry<C> | undefined>;
+ export function getEntry<
+ C extends keyof DataEntryMap,
+ E extends keyof DataEntryMap[C] | (string & {}),
+ >(
+ collection: C,
+ id: E,
+ ): E extends keyof DataEntryMap[C]
+ ? string extends keyof DataEntryMap[C]
+ ? Promise<DataEntryMap[C][E]> | undefined
+ : Promise<DataEntryMap[C][E]>
+ : Promise<CollectionEntry<C> | undefined>;
+ export function getLiveEntry<C extends keyof LiveContentConfig['collections']>(
+ collection: C,
+ filter: string | LiveLoaderEntryFilterType<C>,
+ ): Promise<import('astro').LiveDataEntryResult<LiveLoaderDataType<C>, LiveLoaderErrorType<C>>>;
+
+ /** Resolve an array of entry references from the same collection */
+ export function getEntries<C extends keyof ContentEntryMap>(
+ entries: ReferenceContentEntry<C, ValidContentEntrySlug<C>>[],
+ ): Promise<CollectionEntry<C>[]>;
+ export function getEntries<C extends keyof DataEntryMap>(
+ entries: ReferenceDataEntry<C, keyof DataEntryMap[C]>[],
+ ): Promise<CollectionEntry<C>[]>;
+
+ export function render<C extends keyof AnyEntryMap>(
+ entry: AnyEntryMap[C][string],
+ ): Promise<RenderResult>;
+
+ export function reference<C extends keyof AnyEntryMap>(
+ collection: C,
+ ): import('astro/zod').ZodEffects<
+ import('astro/zod').ZodString,
+ C extends keyof ContentEntryMap
+ ? ReferenceContentEntry<C, ValidContentEntrySlug<C>>
+ : ReferenceDataEntry<C, keyof DataEntryMap[C]>
+ >;
+ // Allow generic `string` to avoid excessive type errors in the config
+ // if `dev` is not running to update as you edit.
+ // Invalid collection names will be caught at build time.
+ export function reference<C extends string>(
+ collection: C,
+ ): import('astro/zod').ZodEffects<import('astro/zod').ZodString, never>;
+
+ type ReturnTypeOrOriginal<T> = T extends (...args: any[]) => infer R ? R : T;
+ type InferEntrySchema<C extends keyof AnyEntryMap> = import('astro/zod').infer<
+ ReturnTypeOrOriginal<Required<ContentConfig['collections'][C]>['schema']>
+ >;
+
+ type ContentEntryMap = {
+
+ };
+
+ type DataEntryMap = {
+
+ };
+
+ type AnyEntryMap = ContentEntryMap & DataEntryMap;
+
+ type ExtractLoaderTypes<T> = T extends import('astro/loaders').LiveLoader<
+ infer TData,
+ infer TEntryFilter,
+ infer TCollectionFilter,
+ infer TError
+ >
+ ? { data: TData; entryFilter: TEntryFilter; collectionFilter: TCollectionFilter; error: TError }
+ : { data: never; entryFilter: never; collectionFilter: never; error: never };
+ type ExtractDataType<T> = ExtractLoaderTypes<T>['data'];
+ type ExtractEntryFilterType<T> = ExtractLoaderTypes<T>['entryFilter'];
+ type ExtractCollectionFilterType<T> = ExtractLoaderTypes<T>['collectionFilter'];
+ type ExtractErrorType<T> = ExtractLoaderTypes<T>['error'];
+
+ type LiveLoaderDataType<C extends keyof LiveContentConfig['collections']> =
+ LiveContentConfig['collections'][C]['schema'] extends undefined
+ ? ExtractDataType<LiveContentConfig['collections'][C]['loader']>
+ : import('astro/zod').infer<
+ Exclude<LiveContentConfig['collections'][C]['schema'], undefined>
+ >;
+ type LiveLoaderEntryFilterType<C extends keyof LiveContentConfig['collections']> =
+ ExtractEntryFilterType<LiveContentConfig['collections'][C]['loader']>;
+ type LiveLoaderCollectionFilterType<C extends keyof LiveContentConfig['collections']> =
+ ExtractCollectionFilterType<LiveContentConfig['collections'][C]['loader']>;
+ type LiveLoaderErrorType<C extends keyof LiveContentConfig['collections']> = ExtractErrorType<
+ LiveContentConfig['collections'][C]['loader']
+ >;
+
+ export type ContentConfig = typeof import("../src/content.config.mjs");
+ export type LiveContentConfig = never;
+}
diff --git a/.astro/data-store.json b/.astro/data-store.json
new file mode 100644
index 0000000..8776f2c
--- /dev/null
+++ b/.astro/data-store.json
@@ -0,0 +1 @@
+[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.18.0","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"https://jodaz.xyz\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"i18n\":{\"defaultLocale\":\"en\",\"locales\":[\"en\",\"es\"],\"routing\":{\"prefixDefaultLocale\":false,\"redirectToDefaultLocale\":true,\"fallbackType\":\"redirect\"}},\"security\":{\"checkOrigin\":true,\"allowedDomains\":[],\"actionBodySizeLimit\":1048576},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false,\"staticImportMetaEnv\":false,\"chromeDevtoolsWorkspace\":false,\"failOnPrerenderConflict\":false,\"svgo\":false},\"legacy\":{\"collections\":false}}"]
\ No newline at end of file
diff --git a/.astro/settings.json b/.astro/settings.json
new file mode 100644
index 0000000..934e7f9
--- /dev/null
+++ b/.astro/settings.json
@@ -0,0 +1,5 @@
+{
+ "_variables": {
+ "lastUpdateCheck": 1772339173160
+ }
+}
\ No newline at end of file
diff --git a/.astro/types.d.ts b/.astro/types.d.ts
new file mode 100644
index 0000000..03d7cc4
--- /dev/null
+++ b/.astro/types.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="astro/client" />
+/// <reference path="content.d.ts" />
\ No newline at end of file
diff --git a/astro.config.mjs b/astro.config.mjs
new file mode 100644
index 0000000..9134008
--- /dev/null
+++ b/astro.config.mjs
@@ -0,0 +1,30 @@
+import { defineConfig } from 'astro/config';
+import react from '@astrojs/react';
+import tailwind from '@astrojs/tailwind';
+import sitemap from '@astrojs/sitemap';
+
+// https://astro.build/config
+export default defineConfig({
+ site: 'https://jodaz.xyz',
+ integrations: [
+ react(),
+ tailwind({ applyBaseStyles: false }),
+ sitemap({
+ i18n: {
+ defaultLocale: 'en',
+ locales: {
+ en: 'en',
+ es: 'es',
+ },
+ },
+ }),
+ ],
+ i18n: {
+ defaultLocale: 'en',
+ locales: ['en', 'es'],
+ routing: {
+ prefixDefaultLocale: false,
+ },
+ },
+ output: 'static',
+});
diff --git a/eslint.config.js b/eslint.config.js
deleted file mode 100644
index 40f72cc..0000000
--- a/eslint.config.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import js from "@eslint/js";
-import globals from "globals";
-import reactHooks from "eslint-plugin-react-hooks";
-import reactRefresh from "eslint-plugin-react-refresh";
-import tseslint from "typescript-eslint";
-
-export default tseslint.config(
- { ignores: ["dist"] },
- {
- extends: [js.configs.recommended, ...tseslint.configs.recommended],
- files: ["**/*.{ts,tsx}"],
- languageOptions: {
- ecmaVersion: 2020,
- globals: globals.browser,
- },
- plugins: {
- "react-hooks": reactHooks,
- "react-refresh": reactRefresh,
- },
- rules: {
- ...reactHooks.configs.recommended.rules,
- "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
- "@typescript-eslint/no-unused-vars": "off",
- },
- },
-);
diff --git a/index.html b/index.html
deleted file mode 100644
index e95a76f..0000000
--- a/index.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>
- Jesus Ordosgoitty | Crafting stunning solutions for your digital
- transformation
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-