[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-github-spark-app-template":3,"mdc-xbg3lv-key":36,"related-repo-github-spark-app-template":4946,"related-org-github-spark-app-template":4955},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":25,"repoUrl":26,"updatedAt":27,"license":28,"forks":29,"topics":30,"repo":31,"sourceUrl":34,"mdContent":35},"spark-app-template","build web applications with Spark templates","Comprehensive guidance for building web apps with opinionated defaults for tech stack, design system, and code standards. Use when user wants to create a new web application, dashboard, or interactive interface. Provides tech choices, styling guidance, project structure, and design philosophy to get users up and running quickly with a fully functional, beautiful web app.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"github","GitHub","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fgithub.png",[12,16,19,22],{"name":13,"slug":14,"type":15},"Templates","templates","tag",{"name":17,"slug":18,"type":15},"Web Development","web-development",{"name":20,"slug":21,"type":15},"Design System","design-system",{"name":23,"slug":24,"type":15},"Frontend","frontend",321,"https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-plugins","2026-04-06T18:22:27.036934",null,83,[],{"repoUrl":26,"stars":25,"forks":29,"topics":32,"description":33},[],"The official GitHub Copilot plugins collection — MCP servers, skills, hooks, and other extensibility tools for GitHub Copilot.","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-plugins\u002Ftree\u002FHEAD\u002Fplugins\u002Fspark\u002Fskills\u002Fspark-app-template","---\nname: spark-app-template\ndescription: Comprehensive guidance for building web apps with opinionated defaults for tech stack, design system, and code standards. Use when user wants to create a new web application, dashboard, or interactive interface. Provides tech choices, styling guidance, project structure, and design philosophy to get users up and running quickly with a fully functional, beautiful web app.\n---\n\n# Spark App Template\n\n## Purpose\n\nSpark App Template provides defaults and guidance for building web applications. When a user asks to build a web app, this skill provides the technical foundation and design direction to create functional applications.\n\n## When to Use This Skill\n\nActivate Spark App Template when the user:\n- Wants to build a new web application from scratch\n- Asks \"what stack should I use?\"\n- Needs guidance on design, styling, or tech choices\n- Wants to start a dashboard, interactive tool, data app, or content site\n- Requests help choosing between frameworks, libraries, or approaches\n\n## Quick Start Workflow\n\n**CRITICAL**: Follow this exact order to avoid configuration errors:\n\n1. **Create project**: `pnpm create vite@latest my-app --template react-ts`\n2. **Install base dependencies**: `pnpm install`\n3. **Configure TypeScript path aliases** (tsconfig.json AND tsconfig.app.json - see Step 1 below)\n4. **Install Tailwind and tooling**: `pnpm add -D tailwindcss @tailwindcss\u002Fvite @biomejs\u002Fbiome`\n5. **Configure vite.config.ts**: Add Tailwind plugin and path aliases\n6. **Initialize shadcn**: `pnpm dlx shadcn@latest init` (will now succeed with proper aliases)\n7. **Install required shadcn components**: `pnpm dlx shadcn add button card avatar ...` (BEFORE writing components)\n8. **Install additional packages**: TanStack Router, Query, Zustand, etc.\n9. **Write custom components** (NOW safe to import from `@\u002Fcomponents\u002Fui\u002F*`)\n10. **Configure routing and state management**\n11. **Implement features**\n\n**Steps 3, 6, and 7 must happen in this exact order** to avoid TypeScript errors and failed shadcn installations.\n\n## Complexity Levels\n\nUnderstanding complexity helps choose the right stack variation and design approach:\n\n1. **Micro Tool** (single-purpose)\n   - Examples: Calculator, converter, color picker, timer\n   - Stack: `stacks\u002Fdefault-webapp.md`\n   - Focus: Simple, focused UI with minimal state\n\n2. **Content Showcase** (information-focused)\n   - Examples: Landing page, portfolio, blog, documentation\n   - Stack: `stacks\u002Fcontent-showcase.md`\n   - Focus: Typography, reading experience, visual hierarchy\n\n3. **Light Application** (multiple features with basic state)\n   - Examples: Todo list, meal planner, expense tracker\n   - Stack: `stacks\u002Fdefault-webapp.md`\n   - Focus: Feature clarity, data persistence, user flows\n\n4. **Complex Application** (advanced functionality, multiple views)\n   - Examples: CRM, analytics dashboard, project management tool\n   - Stack: `stacks\u002Fcomplex-application.md` or `stacks\u002Fdata-dashboard.md`\n   - Focus: Navigation, state management, performance optimization\n\n## Core Tech Stack (Shared Foundation)\n\nAll Spark App Template applications use this foundation:\n\n### Build & Development\n- **Build Tool**: Vite (latest stable)\n- **Framework**: React 19+ (leverages new compiler, hooks, and features)\n- **Language**: TypeScript\n- **Package Manager**: pnpm\n- **Linting**: Biome (ESLint fallback for complex plugins)\n\n### Routing & Data\n- **Routing**: TanStack Router (file-based, type-safe)\n- **Data Fetching**: TanStack Query\n- **Forms**: react-hook-form + Zod validation\n\n### Styling & UI\n- **Styling**: Tailwind CSS v4+ (modern @import syntax)\n- **Components**: shadcn\u002Fui (New York style, 45+ components)\n- **Icons**: Lucide React (1000+ icons)\n- **Color System**: Radix Colors (OKLCH format)\n- **Theme**: next-themes (single theme default, dark mode optional)\n\n### Utilities & Enhancement\n- **Animation**: Motion (formerly framer-motion)\n- **Notifications**: Sonner\n- **Utilities**: CVA (or Tailwind Variants) + clsx + tailwind-merge\n- **Error Handling**: react-error-boundary\n\n## Stack Variations\n\nAll variations share the core foundation above. These templates add specific packages and design guidance:\n\n### Default Web App (`stacks\u002Fdefault-webapp.md`)\n- **Use for**: Most applications, general-purpose tools\n- **Additive packages**: None\n- **Design focus**: Clean, modern, functional\n\n### Data Dashboard (`stacks\u002Fdata-dashboard.md`)\n- **Use for**: Analytics, admin panels, data visualization\n- **Additive packages**: Recharts (charts), date-fns (date handling)\n- **Design focus**: Data density, hierarchical information, scanning patterns\n\n### Content Showcase (`stacks\u002Fcontent-showcase.md`)\n- **Use for**: Marketing sites, portfolios, blogs, documentation\n- **Additive packages**: marked (markdown parsing)\n- **Design focus**: Typography scale, reading experience, whitespace\n\n### Complex Application (`stacks\u002Fcomplex-application.md`)\n- **Use for**: Multi-view apps, SaaS platforms, enterprise tools\n- **Additive packages**: Zustand (state management), date-fns\n- **Design focus**: Navigation patterns, state architecture, performance\n\n## React 19+ Features\n\nEnable these modern React capabilities:\n\n### React Compiler\n- **Status**: Available in React 19+\n- **Benefits**: Auto-memoization, significantly faster initial loads and interactions\n- **Setup**: Compatible with React 17+, configure via compiler config\n\n### useActionState Hook\n- **Use for**: Form handling, async actions, loading states\n- **Benefits**: Simplified state management, built-in async handling\n- **Pattern**: Consolidates form state, pending state, and error handling\n\n### useOptimistic Hook\n- **Use for**: Instant UI updates before server confirmation\n- **Benefits**: Improved perceived performance, better UX\n- **Pattern**: Optimistic updates with automatic rollback on failure\n\n### Server Components\n- **Status**: Stable in React 19+ (framework mode only)\n- **Frameworks**: Next.js, TanStack Start\n- **Note**: For Vite + React SPA apps, use client-side rendering\n\n## Project Structure Template\n\n```\nmy-app\u002F\n├── index.html\n├── package.json\n├── tsconfig.json\n├── vite.config.ts\n├── tailwind.config.js\n├── biome.json\n├── src\u002F\n│   ├── main.tsx              # App entry point\n│   ├── App.tsx               # Root component\n│   ├── index.css             # Global styles + theme\n│   ├── components\u002F\n│   │   ├── ui\u002F               # shadcn components (don't edit)\n│   │   └── ...               # Custom components\n│   ├── hooks\u002F\n│   │   └── use-mobile.tsx\n│   ├── lib\u002F\n│   │   ├── utils.ts          # cn() utility\n│   │   └── data.ts           # Data schemas (if needed)\n│   └── routes\u002F               # TanStack Router routes\n│       └── __root.tsx\n└── public\u002F                   # Static assets\n```\n\n## Design Philosophy\n\nBeautiful web applications transcend mere functionality - they evoke emotion and form memorable experiences. Follow these principles:\n\n### Core Principles\n1. **Simplicity Through Reduction**: Remove until reaching the simplest effective solution\n2. **Material Honesty**: Digital materials have unique properties; embrace them\n3. **Obsessive Detail**: Excellence emerges from hundreds of thoughtful decisions\n4. **Coherent Design Language**: Every element should feel like part of a unified system\n5. **Distinctive Visual Identity**: Create memorable aesthetics, not generic patterns\n\n### Critical Requirements\n- **Use OKLCH color format** (mandatory for 2026)\n- **Avoid overused fonts**: Inter, Roboto, Arial, Space Grotesk\n- **Choose distinctive typography**: See `references\u002Ftypography-pairings.md`\n- **Validate color contrast**: WCAG AA (4.5:1 normal, 3:1 large text)\n- **Single theme by default**: No dark mode unless explicitly requested\n- **Variable fonts**: Use single variable font files for performance\n\nSee `references\u002Fdesign-system.md` for comprehensive design guidance.\n\n## Performance Targets (Core Web Vitals)\n\nOptimize for these metrics:\n- **INP** (Interaction to Next Paint): \u003C 200ms\n- **LCP** (Largest Contentful Paint): \u003C 2.5s\n- **CLS** (Cumulative Layout Shift): \u003C 0.1\n\nTools to achieve targets:\n- React Compiler for automatic memoization\n- Vite code-splitting and lazy loading\n- Image optimization (WebP, AVIF, lazy loading)\n- Font optimization (variable fonts, font-display: swap)\n\nSee `references\u002Fperformance-checklist.md` for detailed optimization strategies.\n\n## References\n\nAccess detailed guidance in the `references\u002F` directory:\n\n1. **design-system.md** - Comprehensive design philosophy, spatial composition, backgrounds, micro-interactions\n2. **typography-pairings.md** - Distinctive font combinations with personality guidance\n3. **color-palettes.md** - Pre-curated OKLCH palettes with WCAG validation\n4. **component-patterns.md** - Common shadcn compositions and usage patterns\n5. **performance-checklist.md** - Web Vitals optimization, React Compiler setup\n6. **prd-template.md** - Simplified planning framework for new apps\n7. **radix-migration-guide.md** - Base UI migration path for Radix concerns\n\n## Implementation Workflow\n\n### Step 1: Initialize Project\n\n**CRITICAL**: Configure path aliases BEFORE running `shadcn init` to avoid validation errors.\n\n```bash\n# Create Vite project\npnpm create vite@latest my-app --template react-ts\n# Note: Working directory is now my-app\u002F - no need to cd\n\n# Install dependencies\npnpm install\n\n# Add Tailwind CSS and tooling\npnpm add -D tailwindcss@latest @tailwindcss\u002Fvite\npnpm add -D @biomejs\u002Fbiome\npnpm add -D @tanstack\u002Frouter-plugin\n```\n\n**Configure TypeScript Path Aliases** (Required for shadcn):\n\nUpdate `tsconfig.json`*:\n```json\n{\n  \"files\": [],\n  \"references\": [\n    { \"path\": \".\u002Ftsconfig.app.json\" },\n    { \"path\": \".\u002Ftsconfig.node.json\" }\n  ],\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@\u002F*\": [\".\u002Fsrc\u002F*\"]\n    }\n  }\n}\n```\n\nUpdate `tsconfig.app.json`*:\n```json\n{\n  \"compilerOptions\": {\n    \u002F\u002F ... existing options ...\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@\u002F*\": [\".\u002Fsrc\u002F*\"]\n    }\n  }\n}\n```\n\nUpdate `vite.config.ts`*:\n```typescript\nimport { defineConfig } from 'vite'\nimport react from '@vitejs\u002Fplugin-react'\nimport tailwindcss from '@tailwindcss\u002Fvite'\nimport { TanStackRouterVite } from '@tanstack\u002Frouter-plugin\u002Fvite'\nimport path from 'path'\n\nexport default defineConfig({\n  plugins: [\n    TanStackRouterVite(),\n    react(),\n    tailwindcss(),\n  ],\n  resolve: {\n    alias: {\n      '@': path.resolve(__dirname, '.\u002Fsrc'),\n    },\n  },\n})\n```\n\n_* Configuration samples based on Vite + React + TypeScript template structure_\n\n**Now shadcn init will succeed**:\n\n```bash\n# Initialize shadcn (path aliases now configured)\npnpm dlx shadcn@latest init\n\n# CRITICAL: Install shadcn components BEFORE writing custom components\n# Identify which components you need first\npnpm dlx shadcn@latest add button card input form dialog avatar badge separator\n\n# Add TanStack packages\npnpm add @tanstack\u002Freact-router @tanstack\u002Freact-query\n\n# Add utilities\npnpm add lucide-react motion sonner react-hook-form zod @hookform\u002Fresolvers\npnpm add clsx tailwind-merge class-variance-authority\npnpm add react-error-boundary next-themes\n```\n\n### Step 2: Configure Project\n\nSee stack templates in `stacks\u002F` for specific configuration examples.\n\n### Step 3: Create PRD (Optional but Recommended)\n\nUse `references\u002Fprd-template.md` to plan:\n- Purpose and mission\n- Complexity level\n- Essential features\n- Design direction\n- Color and typography choices\n\n### Step 4: Install shadcn Components FIRST\n\n**CRITICAL: Component Installation Order**\n\nALWAYS install shadcn components BEFORE writing custom components that import them. This prevents TypeScript errors and failed builds.\n\n❌ **WRONG ORDER** (causes errors):\n```bash\n# 1. Write PersonDetail.tsx that imports '@\u002Fcomponents\u002Fui\u002Fcard'\n# 2. Run pnpm dlx shadcn add card\n# 3. Fix TypeScript errors 'Cannot find module @\u002Fcomponents\u002Fui\u002Fcard'\n```\n\n✅ **CORRECT ORDER**:\n```bash\n# 1. Plan which shadcn components you need\n#    Example: Card, Avatar, Badge, Separator, Button\n\n# 2. Install ALL required shadcn components FIRST\npnpm dlx shadcn@latest add card avatar badge separator button\n\n# 3. Verify installation\nls src\u002Fcomponents\u002Fui\u002F  # Should show: card.tsx, avatar.tsx, badge.tsx, etc.\n\n# 4. NOW write PersonDetail.tsx that imports from '@\u002Fcomponents\u002Fui\u002F*'\n#    TypeScript will have proper types and components will exist\n```\n\n**Planning Checklist**:\n1. List all UI components needed for your app\n2. Identify which are shadcn components (Card, Button, etc.)\n3. Run single `shadcn add` command with all components\n4. Verify they exist in `src\u002Fcomponents\u002Fui\u002F`\n5. Write your custom components that import them\n\n### Step 5: Implement with Best Practices\n\n- Follow shadcn component patterns\n- Use OKLCH colors in `:root` CSS variables\n- Implement responsive design (mobile-first)\n- Add error boundaries\n- Optimize images and fonts\n- Test Core Web Vitals\n\n## Common Patterns\n\n### Theme Configuration (index.css)\n\n```css\n@import 'tailwindcss';\n\n:root {\n  \u002F* OKLCH colors - mandatory format *\u002F\n  --background: oklch(0.97 0.01 75);\n  --foreground: oklch(0.25 0.02 55);\n  --primary: oklch(0.52 0.14 155);\n  --accent: oklch(0.72 0.13 55);\n\n  \u002F* Add more theme variables *\u002F\n  --radius: 0.75rem;\n}\n\n@theme {\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-primary: var(--primary);\n  --color-accent: var(--accent);\n\n  \u002F* Radius system *\u002F\n  --radius-sm: calc(var(--radius) * 0.5);\n  --radius-md: var(--radius);\n  --radius-lg: calc(var(--radius) * 1.5);\n}\n```\n\n_Note: Uses Tailwind CSS v4+ @import syntax. For v3, use @tailwind directives instead._\n\n### Form Handling\n\n```tsx\nimport { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform\u002Fresolvers\u002Fzod';\nimport { z } from 'zod';\n\nconst schema = z.object({\n  email: z.string().email(),\n  password: z.string().min(8)\n});\n\nfunction LoginForm() {\n  const form = useForm({\n    resolver: zodResolver(schema),\n    defaultValues: { email: '', password: '' }\n  });\n\n  async function onSubmit(data: z.infer\u003Ctypeof schema>) {\n    \u002F\u002F Handle form submission\n  }\n\n  return \u003Cform onSubmit={form.handleSubmit(onSubmit)}>...\u003C\u002Fform>;\n}\n```\n\n### Data Fetching\n\n```tsx\nimport { useQuery, useMutation, useQueryClient } from '@tanstack\u002Freact-query';\n\nfunction UserList() {\n  const queryClient = useQueryClient();\n\n  const { data, isLoading } = useQuery({\n    queryKey: ['users'],\n    queryFn: fetchUsers\n  });\n\n  const createUser = useMutation({\n    mutationFn: createUserAPI,\n    onSuccess: () => {\n      queryClient.invalidateQueries({ queryKey: ['users'] });\n    }\n  });\n\n  if (isLoading) return \u003CLoadingSpinner \u002F>;\n  return \u003CUserGrid users={data} onCreate={createUser.mutate} \u002F>;\n}\n```\n\n## Troubleshooting\n\n### Radix UI Maintenance Concerns\n\nRadix UI is receiving fewer updates. For new projects or migration concerns:\n- See `references\u002Fradix-migration-guide.md` for Base UI migration path\n- shadcn\u002Fui now supports Base UI as an alternative\n- React Aria is another excellent option (Adobe-backed, superior accessibility)\n\n### Performance Issues\n\nIf app feels slow:\n1. Enable React Compiler for automatic memoization\n2. Check Core Web Vitals in Chrome DevTools\n3. Use `references\u002Fperformance-checklist.md`\n4. Consider code-splitting with TanStack Router's lazy loading\n\n### Build Tool Alternatives\n\nNewer Vite versions with Rolldown bundler may offer faster builds when stable. Monitor for stable releases.\n\n## System Requirements\n\n- **Node.js**: 18+ (or current LTS version)\n- **Package Manager**: pnpm recommended for performance\n- **OS**: macOS, Linux, or Windows with WSL2\n\n## Next Steps\n\nAfter scaffolding:\n1. Review the stack template for your complexity level\n2. Consult design references for styling\n3. Create a PRD to plan features and design\n4. Implement following best practices\n5. Optimize for Core Web Vitals\n6. Deploy to production (Vercel, Netlify, etc.)\n\n---\n\n**Remember**: The goal is functional and performant web applications. Start simple, iterate based on user needs, and prioritize user experience over technical complexity.\n",{"data":37,"body":38},{"name":4,"description":6},{"type":39,"children":40},"root",[41,49,56,62,68,73,103,109,120,269,279,285,290,433,439,444,451,504,510,543,549,602,608,651,657,662,674,707,719,749,761,791,803,833,839,844,850,883,889,920,926,956,962,994,1000,1012,1018,1023,1029,1082,1088,1157,1170,1176,1181,1214,1219,1242,1254,1260,1273,1346,1352,1358,1375,1560,1570,1583,1906,1917,2080,2091,2514,2523,2532,2790,2796,2809,2815,2828,2856,2862,2870,2875,2887,2918,2929,3064,3073,3115,3121,3162,3168,3174,3586,3594,3600,4215,4220,4753,4759,4765,4770,4795,4801,4806,4833,4839,4844,4850,4882,4888,4893,4926,4930,4940],{"type":42,"tag":43,"props":44,"children":45},"element","h1",{"id":4},[46],{"type":47,"value":48},"text","Spark App Template",{"type":42,"tag":50,"props":51,"children":53},"h2",{"id":52},"purpose",[54],{"type":47,"value":55},"Purpose",{"type":42,"tag":57,"props":58,"children":59},"p",{},[60],{"type":47,"value":61},"Spark App Template provides defaults and guidance for building web applications. When a user asks to build a web app, this skill provides the technical foundation and design direction to create functional applications.",{"type":42,"tag":50,"props":63,"children":65},{"id":64},"when-to-use-this-skill",[66],{"type":47,"value":67},"When to Use This Skill",{"type":42,"tag":57,"props":69,"children":70},{},[71],{"type":47,"value":72},"Activate Spark App Template when the user:",{"type":42,"tag":74,"props":75,"children":76},"ul",{},[77,83,88,93,98],{"type":42,"tag":78,"props":79,"children":80},"li",{},[81],{"type":47,"value":82},"Wants to build a new web application from scratch",{"type":42,"tag":78,"props":84,"children":85},{},[86],{"type":47,"value":87},"Asks \"what stack should I use?\"",{"type":42,"tag":78,"props":89,"children":90},{},[91],{"type":47,"value":92},"Needs guidance on design, styling, or tech choices",{"type":42,"tag":78,"props":94,"children":95},{},[96],{"type":47,"value":97},"Wants to start a dashboard, interactive tool, data app, or content site",{"type":42,"tag":78,"props":99,"children":100},{},[101],{"type":47,"value":102},"Requests help choosing between frameworks, libraries, or approaches",{"type":42,"tag":50,"props":104,"children":106},{"id":105},"quick-start-workflow",[107],{"type":47,"value":108},"Quick Start Workflow",{"type":42,"tag":57,"props":110,"children":111},{},[112,118],{"type":42,"tag":113,"props":114,"children":115},"strong",{},[116],{"type":47,"value":117},"CRITICAL",{"type":47,"value":119},": Follow this exact order to avoid configuration errors:",{"type":42,"tag":121,"props":122,"children":123},"ol",{},[124,141,156,166,181,191,208,225,235,253,261],{"type":42,"tag":78,"props":125,"children":126},{},[127,132,134],{"type":42,"tag":113,"props":128,"children":129},{},[130],{"type":47,"value":131},"Create project",{"type":47,"value":133},": ",{"type":42,"tag":135,"props":136,"children":138},"code",{"className":137},[],[139],{"type":47,"value":140},"pnpm create vite@latest my-app --template react-ts",{"type":42,"tag":78,"props":142,"children":143},{},[144,149,150],{"type":42,"tag":113,"props":145,"children":146},{},[147],{"type":47,"value":148},"Install base dependencies",{"type":47,"value":133},{"type":42,"tag":135,"props":151,"children":153},{"className":152},[],[154],{"type":47,"value":155},"pnpm install",{"type":42,"tag":78,"props":157,"children":158},{},[159,164],{"type":42,"tag":113,"props":160,"children":161},{},[162],{"type":47,"value":163},"Configure TypeScript path aliases",{"type":47,"value":165}," (tsconfig.json AND tsconfig.app.json - see Step 1 below)",{"type":42,"tag":78,"props":167,"children":168},{},[169,174,175],{"type":42,"tag":113,"props":170,"children":171},{},[172],{"type":47,"value":173},"Install Tailwind and tooling",{"type":47,"value":133},{"type":42,"tag":135,"props":176,"children":178},{"className":177},[],[179],{"type":47,"value":180},"pnpm add -D tailwindcss @tailwindcss\u002Fvite @biomejs\u002Fbiome",{"type":42,"tag":78,"props":182,"children":183},{},[184,189],{"type":42,"tag":113,"props":185,"children":186},{},[187],{"type":47,"value":188},"Configure vite.config.ts",{"type":47,"value":190},": Add Tailwind plugin and path aliases",{"type":42,"tag":78,"props":192,"children":193},{},[194,199,200,206],{"type":42,"tag":113,"props":195,"children":196},{},[197],{"type":47,"value":198},"Initialize shadcn",{"type":47,"value":133},{"type":42,"tag":135,"props":201,"children":203},{"className":202},[],[204],{"type":47,"value":205},"pnpm dlx shadcn@latest init",{"type":47,"value":207}," (will now succeed with proper aliases)",{"type":42,"tag":78,"props":209,"children":210},{},[211,216,217,223],{"type":42,"tag":113,"props":212,"children":213},{},[214],{"type":47,"value":215},"Install required shadcn components",{"type":47,"value":133},{"type":42,"tag":135,"props":218,"children":220},{"className":219},[],[221],{"type":47,"value":222},"pnpm dlx shadcn add button card avatar ...",{"type":47,"value":224}," (BEFORE writing components)",{"type":42,"tag":78,"props":226,"children":227},{},[228,233],{"type":42,"tag":113,"props":229,"children":230},{},[231],{"type":47,"value":232},"Install additional packages",{"type":47,"value":234},": TanStack Router, Query, Zustand, etc.",{"type":42,"tag":78,"props":236,"children":237},{},[238,243,245,251],{"type":42,"tag":113,"props":239,"children":240},{},[241],{"type":47,"value":242},"Write custom components",{"type":47,"value":244}," (NOW safe to import from ",{"type":42,"tag":135,"props":246,"children":248},{"className":247},[],[249],{"type":47,"value":250},"@\u002Fcomponents\u002Fui\u002F*",{"type":47,"value":252},")",{"type":42,"tag":78,"props":254,"children":255},{},[256],{"type":42,"tag":113,"props":257,"children":258},{},[259],{"type":47,"value":260},"Configure routing and state management",{"type":42,"tag":78,"props":262,"children":263},{},[264],{"type":42,"tag":113,"props":265,"children":266},{},[267],{"type":47,"value":268},"Implement features",{"type":42,"tag":57,"props":270,"children":271},{},[272,277],{"type":42,"tag":113,"props":273,"children":274},{},[275],{"type":47,"value":276},"Steps 3, 6, and 7 must happen in this exact order",{"type":47,"value":278}," to avoid TypeScript errors and failed shadcn installations.",{"type":42,"tag":50,"props":280,"children":282},{"id":281},"complexity-levels",[283],{"type":47,"value":284},"Complexity Levels",{"type":42,"tag":57,"props":286,"children":287},{},[288],{"type":47,"value":289},"Understanding complexity helps choose the right stack variation and design approach:",{"type":42,"tag":121,"props":291,"children":292},{},[293,327,360,392],{"type":42,"tag":78,"props":294,"children":295},{},[296,301,303],{"type":42,"tag":113,"props":297,"children":298},{},[299],{"type":47,"value":300},"Micro Tool",{"type":47,"value":302}," (single-purpose)",{"type":42,"tag":74,"props":304,"children":305},{},[306,311,322],{"type":42,"tag":78,"props":307,"children":308},{},[309],{"type":47,"value":310},"Examples: Calculator, converter, color picker, timer",{"type":42,"tag":78,"props":312,"children":313},{},[314,316],{"type":47,"value":315},"Stack: ",{"type":42,"tag":135,"props":317,"children":319},{"className":318},[],[320],{"type":47,"value":321},"stacks\u002Fdefault-webapp.md",{"type":42,"tag":78,"props":323,"children":324},{},[325],{"type":47,"value":326},"Focus: Simple, focused UI with minimal state",{"type":42,"tag":78,"props":328,"children":329},{},[330,335,337],{"type":42,"tag":113,"props":331,"children":332},{},[333],{"type":47,"value":334},"Content Showcase",{"type":47,"value":336}," (information-focused)",{"type":42,"tag":74,"props":338,"children":339},{},[340,345,355],{"type":42,"tag":78,"props":341,"children":342},{},[343],{"type":47,"value":344},"Examples: Landing page, portfolio, blog, documentation",{"type":42,"tag":78,"props":346,"children":347},{},[348,349],{"type":47,"value":315},{"type":42,"tag":135,"props":350,"children":352},{"className":351},[],[353],{"type":47,"value":354},"stacks\u002Fcontent-showcase.md",{"type":42,"tag":78,"props":356,"children":357},{},[358],{"type":47,"value":359},"Focus: Typography, reading experience, visual hierarchy",{"type":42,"tag":78,"props":361,"children":362},{},[363,368,370],{"type":42,"tag":113,"props":364,"children":365},{},[366],{"type":47,"value":367},"Light Application",{"type":47,"value":369}," (multiple features with basic state)",{"type":42,"tag":74,"props":371,"children":372},{},[373,378,387],{"type":42,"tag":78,"props":374,"children":375},{},[376],{"type":47,"value":377},"Examples: Todo list, meal planner, expense tracker",{"type":42,"tag":78,"props":379,"children":380},{},[381,382],{"type":47,"value":315},{"type":42,"tag":135,"props":383,"children":385},{"className":384},[],[386],{"type":47,"value":321},{"type":42,"tag":78,"props":388,"children":389},{},[390],{"type":47,"value":391},"Focus: Feature clarity, data persistence, user flows",{"type":42,"tag":78,"props":393,"children":394},{},[395,400,402],{"type":42,"tag":113,"props":396,"children":397},{},[398],{"type":47,"value":399},"Complex Application",{"type":47,"value":401}," (advanced functionality, multiple views)",{"type":42,"tag":74,"props":403,"children":404},{},[405,410,428],{"type":42,"tag":78,"props":406,"children":407},{},[408],{"type":47,"value":409},"Examples: CRM, analytics dashboard, project management tool",{"type":42,"tag":78,"props":411,"children":412},{},[413,414,420,422],{"type":47,"value":315},{"type":42,"tag":135,"props":415,"children":417},{"className":416},[],[418],{"type":47,"value":419},"stacks\u002Fcomplex-application.md",{"type":47,"value":421}," or ",{"type":42,"tag":135,"props":423,"children":425},{"className":424},[],[426],{"type":47,"value":427},"stacks\u002Fdata-dashboard.md",{"type":42,"tag":78,"props":429,"children":430},{},[431],{"type":47,"value":432},"Focus: Navigation, state management, performance optimization",{"type":42,"tag":50,"props":434,"children":436},{"id":435},"core-tech-stack-shared-foundation",[437],{"type":47,"value":438},"Core Tech Stack (Shared Foundation)",{"type":42,"tag":57,"props":440,"children":441},{},[442],{"type":47,"value":443},"All Spark App Template applications use this foundation:",{"type":42,"tag":445,"props":446,"children":448},"h3",{"id":447},"build-development",[449],{"type":47,"value":450},"Build & Development",{"type":42,"tag":74,"props":452,"children":453},{},[454,464,474,484,494],{"type":42,"tag":78,"props":455,"children":456},{},[457,462],{"type":42,"tag":113,"props":458,"children":459},{},[460],{"type":47,"value":461},"Build Tool",{"type":47,"value":463},": Vite (latest stable)",{"type":42,"tag":78,"props":465,"children":466},{},[467,472],{"type":42,"tag":113,"props":468,"children":469},{},[470],{"type":47,"value":471},"Framework",{"type":47,"value":473},": React 19+ (leverages new compiler, hooks, and features)",{"type":42,"tag":78,"props":475,"children":476},{},[477,482],{"type":42,"tag":113,"props":478,"children":479},{},[480],{"type":47,"value":481},"Language",{"type":47,"value":483},": TypeScript",{"type":42,"tag":78,"props":485,"children":486},{},[487,492],{"type":42,"tag":113,"props":488,"children":489},{},[490],{"type":47,"value":491},"Package Manager",{"type":47,"value":493},": pnpm",{"type":42,"tag":78,"props":495,"children":496},{},[497,502],{"type":42,"tag":113,"props":498,"children":499},{},[500],{"type":47,"value":501},"Linting",{"type":47,"value":503},": Biome (ESLint fallback for complex plugins)",{"type":42,"tag":445,"props":505,"children":507},{"id":506},"routing-data",[508],{"type":47,"value":509},"Routing & Data",{"type":42,"tag":74,"props":511,"children":512},{},[513,523,533],{"type":42,"tag":78,"props":514,"children":515},{},[516,521],{"type":42,"tag":113,"props":517,"children":518},{},[519],{"type":47,"value":520},"Routing",{"type":47,"value":522},": TanStack Router (file-based, type-safe)",{"type":42,"tag":78,"props":524,"children":525},{},[526,531],{"type":42,"tag":113,"props":527,"children":528},{},[529],{"type":47,"value":530},"Data Fetching",{"type":47,"value":532},": TanStack Query",{"type":42,"tag":78,"props":534,"children":535},{},[536,541],{"type":42,"tag":113,"props":537,"children":538},{},[539],{"type":47,"value":540},"Forms",{"type":47,"value":542},": react-hook-form + Zod validation",{"type":42,"tag":445,"props":544,"children":546},{"id":545},"styling-ui",[547],{"type":47,"value":548},"Styling & UI",{"type":42,"tag":74,"props":550,"children":551},{},[552,562,572,582,592],{"type":42,"tag":78,"props":553,"children":554},{},[555,560],{"type":42,"tag":113,"props":556,"children":557},{},[558],{"type":47,"value":559},"Styling",{"type":47,"value":561},": Tailwind CSS v4+ (modern @import syntax)",{"type":42,"tag":78,"props":563,"children":564},{},[565,570],{"type":42,"tag":113,"props":566,"children":567},{},[568],{"type":47,"value":569},"Components",{"type":47,"value":571},": shadcn\u002Fui (New York style, 45+ components)",{"type":42,"tag":78,"props":573,"children":574},{},[575,580],{"type":42,"tag":113,"props":576,"children":577},{},[578],{"type":47,"value":579},"Icons",{"type":47,"value":581},": Lucide React (1000+ icons)",{"type":42,"tag":78,"props":583,"children":584},{},[585,590],{"type":42,"tag":113,"props":586,"children":587},{},[588],{"type":47,"value":589},"Color System",{"type":47,"value":591},": Radix Colors (OKLCH format)",{"type":42,"tag":78,"props":593,"children":594},{},[595,600],{"type":42,"tag":113,"props":596,"children":597},{},[598],{"type":47,"value":599},"Theme",{"type":47,"value":601},": next-themes (single theme default, dark mode optional)",{"type":42,"tag":445,"props":603,"children":605},{"id":604},"utilities-enhancement",[606],{"type":47,"value":607},"Utilities & Enhancement",{"type":42,"tag":74,"props":609,"children":610},{},[611,621,631,641],{"type":42,"tag":78,"props":612,"children":613},{},[614,619],{"type":42,"tag":113,"props":615,"children":616},{},[617],{"type":47,"value":618},"Animation",{"type":47,"value":620},": Motion (formerly framer-motion)",{"type":42,"tag":78,"props":622,"children":623},{},[624,629],{"type":42,"tag":113,"props":625,"children":626},{},[627],{"type":47,"value":628},"Notifications",{"type":47,"value":630},": Sonner",{"type":42,"tag":78,"props":632,"children":633},{},[634,639],{"type":42,"tag":113,"props":635,"children":636},{},[637],{"type":47,"value":638},"Utilities",{"type":47,"value":640},": CVA (or Tailwind Variants) + clsx + tailwind-merge",{"type":42,"tag":78,"props":642,"children":643},{},[644,649],{"type":42,"tag":113,"props":645,"children":646},{},[647],{"type":47,"value":648},"Error Handling",{"type":47,"value":650},": react-error-boundary",{"type":42,"tag":50,"props":652,"children":654},{"id":653},"stack-variations",[655],{"type":47,"value":656},"Stack Variations",{"type":42,"tag":57,"props":658,"children":659},{},[660],{"type":47,"value":661},"All variations share the core foundation above. These templates add specific packages and design guidance:",{"type":42,"tag":445,"props":663,"children":665},{"id":664},"default-web-app-stacksdefault-webappmd",[666,668,673],{"type":47,"value":667},"Default Web App (",{"type":42,"tag":135,"props":669,"children":671},{"className":670},[],[672],{"type":47,"value":321},{"type":47,"value":252},{"type":42,"tag":74,"props":675,"children":676},{},[677,687,697],{"type":42,"tag":78,"props":678,"children":679},{},[680,685],{"type":42,"tag":113,"props":681,"children":682},{},[683],{"type":47,"value":684},"Use for",{"type":47,"value":686},": Most applications, general-purpose tools",{"type":42,"tag":78,"props":688,"children":689},{},[690,695],{"type":42,"tag":113,"props":691,"children":692},{},[693],{"type":47,"value":694},"Additive packages",{"type":47,"value":696},": None",{"type":42,"tag":78,"props":698,"children":699},{},[700,705],{"type":42,"tag":113,"props":701,"children":702},{},[703],{"type":47,"value":704},"Design focus",{"type":47,"value":706},": Clean, modern, functional",{"type":42,"tag":445,"props":708,"children":710},{"id":709},"data-dashboard-stacksdata-dashboardmd",[711,713,718],{"type":47,"value":712},"Data Dashboard (",{"type":42,"tag":135,"props":714,"children":716},{"className":715},[],[717],{"type":47,"value":427},{"type":47,"value":252},{"type":42,"tag":74,"props":720,"children":721},{},[722,731,740],{"type":42,"tag":78,"props":723,"children":724},{},[725,729],{"type":42,"tag":113,"props":726,"children":727},{},[728],{"type":47,"value":684},{"type":47,"value":730},": Analytics, admin panels, data visualization",{"type":42,"tag":78,"props":732,"children":733},{},[734,738],{"type":42,"tag":113,"props":735,"children":736},{},[737],{"type":47,"value":694},{"type":47,"value":739},": Recharts (charts), date-fns (date handling)",{"type":42,"tag":78,"props":741,"children":742},{},[743,747],{"type":42,"tag":113,"props":744,"children":745},{},[746],{"type":47,"value":704},{"type":47,"value":748},": Data density, hierarchical information, scanning patterns",{"type":42,"tag":445,"props":750,"children":752},{"id":751},"content-showcase-stackscontent-showcasemd",[753,755,760],{"type":47,"value":754},"Content Showcase (",{"type":42,"tag":135,"props":756,"children":758},{"className":757},[],[759],{"type":47,"value":354},{"type":47,"value":252},{"type":42,"tag":74,"props":762,"children":763},{},[764,773,782],{"type":42,"tag":78,"props":765,"children":766},{},[767,771],{"type":42,"tag":113,"props":768,"children":769},{},[770],{"type":47,"value":684},{"type":47,"value":772},": Marketing sites, portfolios, blogs, documentation",{"type":42,"tag":78,"props":774,"children":775},{},[776,780],{"type":42,"tag":113,"props":777,"children":778},{},[779],{"type":47,"value":694},{"type":47,"value":781},": marked (markdown parsing)",{"type":42,"tag":78,"props":783,"children":784},{},[785,789],{"type":42,"tag":113,"props":786,"children":787},{},[788],{"type":47,"value":704},{"type":47,"value":790},": Typography scale, reading experience, whitespace",{"type":42,"tag":445,"props":792,"children":794},{"id":793},"complex-application-stackscomplex-applicationmd",[795,797,802],{"type":47,"value":796},"Complex Application (",{"type":42,"tag":135,"props":798,"children":800},{"className":799},[],[801],{"type":47,"value":419},{"type":47,"value":252},{"type":42,"tag":74,"props":804,"children":805},{},[806,815,824],{"type":42,"tag":78,"props":807,"children":808},{},[809,813],{"type":42,"tag":113,"props":810,"children":811},{},[812],{"type":47,"value":684},{"type":47,"value":814},": Multi-view apps, SaaS platforms, enterprise tools",{"type":42,"tag":78,"props":816,"children":817},{},[818,822],{"type":42,"tag":113,"props":819,"children":820},{},[821],{"type":47,"value":694},{"type":47,"value":823},": Zustand (state management), date-fns",{"type":42,"tag":78,"props":825,"children":826},{},[827,831],{"type":42,"tag":113,"props":828,"children":829},{},[830],{"type":47,"value":704},{"type":47,"value":832},": Navigation patterns, state architecture, performance",{"type":42,"tag":50,"props":834,"children":836},{"id":835},"react-19-features",[837],{"type":47,"value":838},"React 19+ Features",{"type":42,"tag":57,"props":840,"children":841},{},[842],{"type":47,"value":843},"Enable these modern React capabilities:",{"type":42,"tag":445,"props":845,"children":847},{"id":846},"react-compiler",[848],{"type":47,"value":849},"React Compiler",{"type":42,"tag":74,"props":851,"children":852},{},[853,863,873],{"type":42,"tag":78,"props":854,"children":855},{},[856,861],{"type":42,"tag":113,"props":857,"children":858},{},[859],{"type":47,"value":860},"Status",{"type":47,"value":862},": Available in React 19+",{"type":42,"tag":78,"props":864,"children":865},{},[866,871],{"type":42,"tag":113,"props":867,"children":868},{},[869],{"type":47,"value":870},"Benefits",{"type":47,"value":872},": Auto-memoization, significantly faster initial loads and interactions",{"type":42,"tag":78,"props":874,"children":875},{},[876,881],{"type":42,"tag":113,"props":877,"children":878},{},[879],{"type":47,"value":880},"Setup",{"type":47,"value":882},": Compatible with React 17+, configure via compiler config",{"type":42,"tag":445,"props":884,"children":886},{"id":885},"useactionstate-hook",[887],{"type":47,"value":888},"useActionState Hook",{"type":42,"tag":74,"props":890,"children":891},{},[892,901,910],{"type":42,"tag":78,"props":893,"children":894},{},[895,899],{"type":42,"tag":113,"props":896,"children":897},{},[898],{"type":47,"value":684},{"type":47,"value":900},": Form handling, async actions, loading states",{"type":42,"tag":78,"props":902,"children":903},{},[904,908],{"type":42,"tag":113,"props":905,"children":906},{},[907],{"type":47,"value":870},{"type":47,"value":909},": Simplified state management, built-in async handling",{"type":42,"tag":78,"props":911,"children":912},{},[913,918],{"type":42,"tag":113,"props":914,"children":915},{},[916],{"type":47,"value":917},"Pattern",{"type":47,"value":919},": Consolidates form state, pending state, and error handling",{"type":42,"tag":445,"props":921,"children":923},{"id":922},"useoptimistic-hook",[924],{"type":47,"value":925},"useOptimistic Hook",{"type":42,"tag":74,"props":927,"children":928},{},[929,938,947],{"type":42,"tag":78,"props":930,"children":931},{},[932,936],{"type":42,"tag":113,"props":933,"children":934},{},[935],{"type":47,"value":684},{"type":47,"value":937},": Instant UI updates before server confirmation",{"type":42,"tag":78,"props":939,"children":940},{},[941,945],{"type":42,"tag":113,"props":942,"children":943},{},[944],{"type":47,"value":870},{"type":47,"value":946},": Improved perceived performance, better UX",{"type":42,"tag":78,"props":948,"children":949},{},[950,954],{"type":42,"tag":113,"props":951,"children":952},{},[953],{"type":47,"value":917},{"type":47,"value":955},": Optimistic updates with automatic rollback on failure",{"type":42,"tag":445,"props":957,"children":959},{"id":958},"server-components",[960],{"type":47,"value":961},"Server Components",{"type":42,"tag":74,"props":963,"children":964},{},[965,974,984],{"type":42,"tag":78,"props":966,"children":967},{},[968,972],{"type":42,"tag":113,"props":969,"children":970},{},[971],{"type":47,"value":860},{"type":47,"value":973},": Stable in React 19+ (framework mode only)",{"type":42,"tag":78,"props":975,"children":976},{},[977,982],{"type":42,"tag":113,"props":978,"children":979},{},[980],{"type":47,"value":981},"Frameworks",{"type":47,"value":983},": Next.js, TanStack Start",{"type":42,"tag":78,"props":985,"children":986},{},[987,992],{"type":42,"tag":113,"props":988,"children":989},{},[990],{"type":47,"value":991},"Note",{"type":47,"value":993},": For Vite + React SPA apps, use client-side rendering",{"type":42,"tag":50,"props":995,"children":997},{"id":996},"project-structure-template",[998],{"type":47,"value":999},"Project Structure Template",{"type":42,"tag":1001,"props":1002,"children":1006},"pre",{"className":1003,"code":1005,"language":47},[1004],"language-text","my-app\u002F\n├── index.html\n├── package.json\n├── tsconfig.json\n├── vite.config.ts\n├── tailwind.config.js\n├── biome.json\n├── src\u002F\n│   ├── main.tsx              # App entry point\n│   ├── App.tsx               # Root component\n│   ├── index.css             # Global styles + theme\n│   ├── components\u002F\n│   │   ├── ui\u002F               # shadcn components (don't edit)\n│   │   └── ...               # Custom components\n│   ├── hooks\u002F\n│   │   └── use-mobile.tsx\n│   ├── lib\u002F\n│   │   ├── utils.ts          # cn() utility\n│   │   └── data.ts           # Data schemas (if needed)\n│   └── routes\u002F               # TanStack Router routes\n│       └── __root.tsx\n└── public\u002F                   # Static assets\n",[1007],{"type":42,"tag":135,"props":1008,"children":1010},{"__ignoreMap":1009},"",[1011],{"type":47,"value":1005},{"type":42,"tag":50,"props":1013,"children":1015},{"id":1014},"design-philosophy",[1016],{"type":47,"value":1017},"Design Philosophy",{"type":42,"tag":57,"props":1019,"children":1020},{},[1021],{"type":47,"value":1022},"Beautiful web applications transcend mere functionality - they evoke emotion and form memorable experiences. Follow these principles:",{"type":42,"tag":445,"props":1024,"children":1026},{"id":1025},"core-principles",[1027],{"type":47,"value":1028},"Core Principles",{"type":42,"tag":121,"props":1030,"children":1031},{},[1032,1042,1052,1062,1072],{"type":42,"tag":78,"props":1033,"children":1034},{},[1035,1040],{"type":42,"tag":113,"props":1036,"children":1037},{},[1038],{"type":47,"value":1039},"Simplicity Through Reduction",{"type":47,"value":1041},": Remove until reaching the simplest effective solution",{"type":42,"tag":78,"props":1043,"children":1044},{},[1045,1050],{"type":42,"tag":113,"props":1046,"children":1047},{},[1048],{"type":47,"value":1049},"Material Honesty",{"type":47,"value":1051},": Digital materials have unique properties; embrace them",{"type":42,"tag":78,"props":1053,"children":1054},{},[1055,1060],{"type":42,"tag":113,"props":1056,"children":1057},{},[1058],{"type":47,"value":1059},"Obsessive Detail",{"type":47,"value":1061},": Excellence emerges from hundreds of thoughtful decisions",{"type":42,"tag":78,"props":1063,"children":1064},{},[1065,1070],{"type":42,"tag":113,"props":1066,"children":1067},{},[1068],{"type":47,"value":1069},"Coherent Design Language",{"type":47,"value":1071},": Every element should feel like part of a unified system",{"type":42,"tag":78,"props":1073,"children":1074},{},[1075,1080],{"type":42,"tag":113,"props":1076,"children":1077},{},[1078],{"type":47,"value":1079},"Distinctive Visual Identity",{"type":47,"value":1081},": Create memorable aesthetics, not generic patterns",{"type":42,"tag":445,"props":1083,"children":1085},{"id":1084},"critical-requirements",[1086],{"type":47,"value":1087},"Critical Requirements",{"type":42,"tag":74,"props":1089,"children":1090},{},[1091,1101,1111,1127,1137,1147],{"type":42,"tag":78,"props":1092,"children":1093},{},[1094,1099],{"type":42,"tag":113,"props":1095,"children":1096},{},[1097],{"type":47,"value":1098},"Use OKLCH color format",{"type":47,"value":1100}," (mandatory for 2026)",{"type":42,"tag":78,"props":1102,"children":1103},{},[1104,1109],{"type":42,"tag":113,"props":1105,"children":1106},{},[1107],{"type":47,"value":1108},"Avoid overused fonts",{"type":47,"value":1110},": Inter, Roboto, Arial, Space Grotesk",{"type":42,"tag":78,"props":1112,"children":1113},{},[1114,1119,1121],{"type":42,"tag":113,"props":1115,"children":1116},{},[1117],{"type":47,"value":1118},"Choose distinctive typography",{"type":47,"value":1120},": See ",{"type":42,"tag":135,"props":1122,"children":1124},{"className":1123},[],[1125],{"type":47,"value":1126},"references\u002Ftypography-pairings.md",{"type":42,"tag":78,"props":1128,"children":1129},{},[1130,1135],{"type":42,"tag":113,"props":1131,"children":1132},{},[1133],{"type":47,"value":1134},"Validate color contrast",{"type":47,"value":1136},": WCAG AA (4.5:1 normal, 3:1 large text)",{"type":42,"tag":78,"props":1138,"children":1139},{},[1140,1145],{"type":42,"tag":113,"props":1141,"children":1142},{},[1143],{"type":47,"value":1144},"Single theme by default",{"type":47,"value":1146},": No dark mode unless explicitly requested",{"type":42,"tag":78,"props":1148,"children":1149},{},[1150,1155],{"type":42,"tag":113,"props":1151,"children":1152},{},[1153],{"type":47,"value":1154},"Variable fonts",{"type":47,"value":1156},": Use single variable font files for performance",{"type":42,"tag":57,"props":1158,"children":1159},{},[1160,1162,1168],{"type":47,"value":1161},"See ",{"type":42,"tag":135,"props":1163,"children":1165},{"className":1164},[],[1166],{"type":47,"value":1167},"references\u002Fdesign-system.md",{"type":47,"value":1169}," for comprehensive design guidance.",{"type":42,"tag":50,"props":1171,"children":1173},{"id":1172},"performance-targets-core-web-vitals",[1174],{"type":47,"value":1175},"Performance Targets (Core Web Vitals)",{"type":42,"tag":57,"props":1177,"children":1178},{},[1179],{"type":47,"value":1180},"Optimize for these metrics:",{"type":42,"tag":74,"props":1182,"children":1183},{},[1184,1194,1204],{"type":42,"tag":78,"props":1185,"children":1186},{},[1187,1192],{"type":42,"tag":113,"props":1188,"children":1189},{},[1190],{"type":47,"value":1191},"INP",{"type":47,"value":1193}," (Interaction to Next Paint): \u003C 200ms",{"type":42,"tag":78,"props":1195,"children":1196},{},[1197,1202],{"type":42,"tag":113,"props":1198,"children":1199},{},[1200],{"type":47,"value":1201},"LCP",{"type":47,"value":1203}," (Largest Contentful Paint): \u003C 2.5s",{"type":42,"tag":78,"props":1205,"children":1206},{},[1207,1212],{"type":42,"tag":113,"props":1208,"children":1209},{},[1210],{"type":47,"value":1211},"CLS",{"type":47,"value":1213}," (Cumulative Layout Shift): \u003C 0.1",{"type":42,"tag":57,"props":1215,"children":1216},{},[1217],{"type":47,"value":1218},"Tools to achieve targets:",{"type":42,"tag":74,"props":1220,"children":1221},{},[1222,1227,1232,1237],{"type":42,"tag":78,"props":1223,"children":1224},{},[1225],{"type":47,"value":1226},"React Compiler for automatic memoization",{"type":42,"tag":78,"props":1228,"children":1229},{},[1230],{"type":47,"value":1231},"Vite code-splitting and lazy loading",{"type":42,"tag":78,"props":1233,"children":1234},{},[1235],{"type":47,"value":1236},"Image optimization (WebP, AVIF, lazy loading)",{"type":42,"tag":78,"props":1238,"children":1239},{},[1240],{"type":47,"value":1241},"Font optimization (variable fonts, font-display: swap)",{"type":42,"tag":57,"props":1243,"children":1244},{},[1245,1246,1252],{"type":47,"value":1161},{"type":42,"tag":135,"props":1247,"children":1249},{"className":1248},[],[1250],{"type":47,"value":1251},"references\u002Fperformance-checklist.md",{"type":47,"value":1253}," for detailed optimization strategies.",{"type":42,"tag":50,"props":1255,"children":1257},{"id":1256},"references",[1258],{"type":47,"value":1259},"References",{"type":42,"tag":57,"props":1261,"children":1262},{},[1263,1265,1271],{"type":47,"value":1264},"Access detailed guidance in the ",{"type":42,"tag":135,"props":1266,"children":1268},{"className":1267},[],[1269],{"type":47,"value":1270},"references\u002F",{"type":47,"value":1272}," directory:",{"type":42,"tag":121,"props":1274,"children":1275},{},[1276,1286,1296,1306,1316,1326,1336],{"type":42,"tag":78,"props":1277,"children":1278},{},[1279,1284],{"type":42,"tag":113,"props":1280,"children":1281},{},[1282],{"type":47,"value":1283},"design-system.md",{"type":47,"value":1285}," - Comprehensive design philosophy, spatial composition, backgrounds, micro-interactions",{"type":42,"tag":78,"props":1287,"children":1288},{},[1289,1294],{"type":42,"tag":113,"props":1290,"children":1291},{},[1292],{"type":47,"value":1293},"typography-pairings.md",{"type":47,"value":1295}," - Distinctive font combinations with personality guidance",{"type":42,"tag":78,"props":1297,"children":1298},{},[1299,1304],{"type":42,"tag":113,"props":1300,"children":1301},{},[1302],{"type":47,"value":1303},"color-palettes.md",{"type":47,"value":1305}," - Pre-curated OKLCH palettes with WCAG validation",{"type":42,"tag":78,"props":1307,"children":1308},{},[1309,1314],{"type":42,"tag":113,"props":1310,"children":1311},{},[1312],{"type":47,"value":1313},"component-patterns.md",{"type":47,"value":1315}," - Common shadcn compositions and usage patterns",{"type":42,"tag":78,"props":1317,"children":1318},{},[1319,1324],{"type":42,"tag":113,"props":1320,"children":1321},{},[1322],{"type":47,"value":1323},"performance-checklist.md",{"type":47,"value":1325}," - Web Vitals optimization, React Compiler setup",{"type":42,"tag":78,"props":1327,"children":1328},{},[1329,1334],{"type":42,"tag":113,"props":1330,"children":1331},{},[1332],{"type":47,"value":1333},"prd-template.md",{"type":47,"value":1335}," - Simplified planning framework for new apps",{"type":42,"tag":78,"props":1337,"children":1338},{},[1339,1344],{"type":42,"tag":113,"props":1340,"children":1341},{},[1342],{"type":47,"value":1343},"radix-migration-guide.md",{"type":47,"value":1345}," - Base UI migration path for Radix concerns",{"type":42,"tag":50,"props":1347,"children":1349},{"id":1348},"implementation-workflow",[1350],{"type":47,"value":1351},"Implementation Workflow",{"type":42,"tag":445,"props":1353,"children":1355},{"id":1354},"step-1-initialize-project",[1356],{"type":47,"value":1357},"Step 1: Initialize Project",{"type":42,"tag":57,"props":1359,"children":1360},{},[1361,1365,1367,1373],{"type":42,"tag":113,"props":1362,"children":1363},{},[1364],{"type":47,"value":117},{"type":47,"value":1366},": Configure path aliases BEFORE running ",{"type":42,"tag":135,"props":1368,"children":1370},{"className":1369},[],[1371],{"type":47,"value":1372},"shadcn init",{"type":47,"value":1374}," to avoid validation errors.",{"type":42,"tag":1001,"props":1376,"children":1380},{"className":1377,"code":1378,"language":1379,"meta":1009,"style":1009},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# Create Vite project\npnpm create vite@latest my-app --template react-ts\n# Note: Working directory is now my-app\u002F - no need to cd\n\n# Install dependencies\npnpm install\n\n# Add Tailwind CSS and tooling\npnpm add -D tailwindcss@latest @tailwindcss\u002Fvite\npnpm add -D @biomejs\u002Fbiome\npnpm add -D @tanstack\u002Frouter-plugin\n","bash",[1381],{"type":42,"tag":135,"props":1382,"children":1383},{"__ignoreMap":1009},[1384,1396,1432,1441,1451,1460,1473,1481,1490,1518,1539],{"type":42,"tag":1385,"props":1386,"children":1389},"span",{"class":1387,"line":1388},"line",1,[1390],{"type":42,"tag":1385,"props":1391,"children":1393},{"style":1392},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[1394],{"type":47,"value":1395},"# Create Vite project\n",{"type":42,"tag":1385,"props":1397,"children":1399},{"class":1387,"line":1398},2,[1400,1406,1412,1417,1422,1427],{"type":42,"tag":1385,"props":1401,"children":1403},{"style":1402},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[1404],{"type":47,"value":1405},"pnpm",{"type":42,"tag":1385,"props":1407,"children":1409},{"style":1408},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[1410],{"type":47,"value":1411}," create",{"type":42,"tag":1385,"props":1413,"children":1414},{"style":1408},[1415],{"type":47,"value":1416}," vite@latest",{"type":42,"tag":1385,"props":1418,"children":1419},{"style":1408},[1420],{"type":47,"value":1421}," my-app",{"type":42,"tag":1385,"props":1423,"children":1424},{"style":1408},[1425],{"type":47,"value":1426}," --template",{"type":42,"tag":1385,"props":1428,"children":1429},{"style":1408},[1430],{"type":47,"value":1431}," react-ts\n",{"type":42,"tag":1385,"props":1433,"children":1435},{"class":1387,"line":1434},3,[1436],{"type":42,"tag":1385,"props":1437,"children":1438},{"style":1392},[1439],{"type":47,"value":1440},"# Note: Working directory is now my-app\u002F - no need to cd\n",{"type":42,"tag":1385,"props":1442,"children":1444},{"class":1387,"line":1443},4,[1445],{"type":42,"tag":1385,"props":1446,"children":1448},{"emptyLinePlaceholder":1447},true,[1449],{"type":47,"value":1450},"\n",{"type":42,"tag":1385,"props":1452,"children":1454},{"class":1387,"line":1453},5,[1455],{"type":42,"tag":1385,"props":1456,"children":1457},{"style":1392},[1458],{"type":47,"value":1459},"# Install dependencies\n",{"type":42,"tag":1385,"props":1461,"children":1463},{"class":1387,"line":1462},6,[1464,1468],{"type":42,"tag":1385,"props":1465,"children":1466},{"style":1402},[1467],{"type":47,"value":1405},{"type":42,"tag":1385,"props":1469,"children":1470},{"style":1408},[1471],{"type":47,"value":1472}," install\n",{"type":42,"tag":1385,"props":1474,"children":1476},{"class":1387,"line":1475},7,[1477],{"type":42,"tag":1385,"props":1478,"children":1479},{"emptyLinePlaceholder":1447},[1480],{"type":47,"value":1450},{"type":42,"tag":1385,"props":1482,"children":1484},{"class":1387,"line":1483},8,[1485],{"type":42,"tag":1385,"props":1486,"children":1487},{"style":1392},[1488],{"type":47,"value":1489},"# Add Tailwind CSS and tooling\n",{"type":42,"tag":1385,"props":1491,"children":1493},{"class":1387,"line":1492},9,[1494,1498,1503,1508,1513],{"type":42,"tag":1385,"props":1495,"children":1496},{"style":1402},[1497],{"type":47,"value":1405},{"type":42,"tag":1385,"props":1499,"children":1500},{"style":1408},[1501],{"type":47,"value":1502}," add",{"type":42,"tag":1385,"props":1504,"children":1505},{"style":1408},[1506],{"type":47,"value":1507}," -D",{"type":42,"tag":1385,"props":1509,"children":1510},{"style":1408},[1511],{"type":47,"value":1512}," tailwindcss@latest",{"type":42,"tag":1385,"props":1514,"children":1515},{"style":1408},[1516],{"type":47,"value":1517}," @tailwindcss\u002Fvite\n",{"type":42,"tag":1385,"props":1519,"children":1521},{"class":1387,"line":1520},10,[1522,1526,1530,1534],{"type":42,"tag":1385,"props":1523,"children":1524},{"style":1402},[1525],{"type":47,"value":1405},{"type":42,"tag":1385,"props":1527,"children":1528},{"style":1408},[1529],{"type":47,"value":1502},{"type":42,"tag":1385,"props":1531,"children":1532},{"style":1408},[1533],{"type":47,"value":1507},{"type":42,"tag":1385,"props":1535,"children":1536},{"style":1408},[1537],{"type":47,"value":1538}," @biomejs\u002Fbiome\n",{"type":42,"tag":1385,"props":1540,"children":1542},{"class":1387,"line":1541},11,[1543,1547,1551,1555],{"type":42,"tag":1385,"props":1544,"children":1545},{"style":1402},[1546],{"type":47,"value":1405},{"type":42,"tag":1385,"props":1548,"children":1549},{"style":1408},[1550],{"type":47,"value":1502},{"type":42,"tag":1385,"props":1552,"children":1553},{"style":1408},[1554],{"type":47,"value":1507},{"type":42,"tag":1385,"props":1556,"children":1557},{"style":1408},[1558],{"type":47,"value":1559}," @tanstack\u002Frouter-plugin\n",{"type":42,"tag":57,"props":1561,"children":1562},{},[1563,1568],{"type":42,"tag":113,"props":1564,"children":1565},{},[1566],{"type":47,"value":1567},"Configure TypeScript Path Aliases",{"type":47,"value":1569}," (Required for shadcn):",{"type":42,"tag":57,"props":1571,"children":1572},{},[1573,1575,1581],{"type":47,"value":1574},"Update ",{"type":42,"tag":135,"props":1576,"children":1578},{"className":1577},[],[1579],{"type":47,"value":1580},"tsconfig.json",{"type":47,"value":1582},"*:",{"type":42,"tag":1001,"props":1584,"children":1588},{"className":1585,"code":1586,"language":1587,"meta":1009,"style":1009},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"files\": [],\n  \"references\": [\n    { \"path\": \".\u002Ftsconfig.app.json\" },\n    { \"path\": \".\u002Ftsconfig.node.json\" }\n  ],\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@\u002F*\": [\".\u002Fsrc\u002F*\"]\n    }\n  }\n}\n","json",[1589],{"type":42,"tag":135,"props":1590,"children":1591},{"__ignoreMap":1009},[1592,1601,1630,1654,1698,1739,1747,1772,1811,1835,1880,1888,1897],{"type":42,"tag":1385,"props":1593,"children":1594},{"class":1387,"line":1388},[1595],{"type":42,"tag":1385,"props":1596,"children":1598},{"style":1597},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[1599],{"type":47,"value":1600},"{\n",{"type":42,"tag":1385,"props":1602,"children":1603},{"class":1387,"line":1398},[1604,1609,1615,1620,1625],{"type":42,"tag":1385,"props":1605,"children":1606},{"style":1597},[1607],{"type":47,"value":1608},"  \"",{"type":42,"tag":1385,"props":1610,"children":1612},{"style":1611},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[1613],{"type":47,"value":1614},"files",{"type":42,"tag":1385,"props":1616,"children":1617},{"style":1597},[1618],{"type":47,"value":1619},"\"",{"type":42,"tag":1385,"props":1621,"children":1622},{"style":1597},[1623],{"type":47,"value":1624},":",{"type":42,"tag":1385,"props":1626,"children":1627},{"style":1597},[1628],{"type":47,"value":1629}," [],\n",{"type":42,"tag":1385,"props":1631,"children":1632},{"class":1387,"line":1434},[1633,1637,1641,1645,1649],{"type":42,"tag":1385,"props":1634,"children":1635},{"style":1597},[1636],{"type":47,"value":1608},{"type":42,"tag":1385,"props":1638,"children":1639},{"style":1611},[1640],{"type":47,"value":1256},{"type":42,"tag":1385,"props":1642,"children":1643},{"style":1597},[1644],{"type":47,"value":1619},{"type":42,"tag":1385,"props":1646,"children":1647},{"style":1597},[1648],{"type":47,"value":1624},{"type":42,"tag":1385,"props":1650,"children":1651},{"style":1597},[1652],{"type":47,"value":1653}," [\n",{"type":42,"tag":1385,"props":1655,"children":1656},{"class":1387,"line":1443},[1657,1662,1667,1672,1676,1680,1684,1689,1693],{"type":42,"tag":1385,"props":1658,"children":1659},{"style":1597},[1660],{"type":47,"value":1661},"    {",{"type":42,"tag":1385,"props":1663,"children":1664},{"style":1597},[1665],{"type":47,"value":1666}," \"",{"type":42,"tag":1385,"props":1668,"children":1669},{"style":1402},[1670],{"type":47,"value":1671},"path",{"type":42,"tag":1385,"props":1673,"children":1674},{"style":1597},[1675],{"type":47,"value":1619},{"type":42,"tag":1385,"props":1677,"children":1678},{"style":1597},[1679],{"type":47,"value":1624},{"type":42,"tag":1385,"props":1681,"children":1682},{"style":1597},[1683],{"type":47,"value":1666},{"type":42,"tag":1385,"props":1685,"children":1686},{"style":1408},[1687],{"type":47,"value":1688},".\u002Ftsconfig.app.json",{"type":42,"tag":1385,"props":1690,"children":1691},{"style":1597},[1692],{"type":47,"value":1619},{"type":42,"tag":1385,"props":1694,"children":1695},{"style":1597},[1696],{"type":47,"value":1697}," },\n",{"type":42,"tag":1385,"props":1699,"children":1700},{"class":1387,"line":1453},[1701,1705,1709,1713,1717,1721,1725,1730,1734],{"type":42,"tag":1385,"props":1702,"children":1703},{"style":1597},[1704],{"type":47,"value":1661},{"type":42,"tag":1385,"props":1706,"children":1707},{"style":1597},[1708],{"type":47,"value":1666},{"type":42,"tag":1385,"props":1710,"children":1711},{"style":1402},[1712],{"type":47,"value":1671},{"type":42,"tag":1385,"props":1714,"children":1715},{"style":1597},[1716],{"type":47,"value":1619},{"type":42,"tag":1385,"props":1718,"children":1719},{"style":1597},[1720],{"type":47,"value":1624},{"type":42,"tag":1385,"props":1722,"children":1723},{"style":1597},[1724],{"type":47,"value":1666},{"type":42,"tag":1385,"props":1726,"children":1727},{"style":1408},[1728],{"type":47,"value":1729},".\u002Ftsconfig.node.json",{"type":42,"tag":1385,"props":1731,"children":1732},{"style":1597},[1733],{"type":47,"value":1619},{"type":42,"tag":1385,"props":1735,"children":1736},{"style":1597},[1737],{"type":47,"value":1738}," }\n",{"type":42,"tag":1385,"props":1740,"children":1741},{"class":1387,"line":1462},[1742],{"type":42,"tag":1385,"props":1743,"children":1744},{"style":1597},[1745],{"type":47,"value":1746},"  ],\n",{"type":42,"tag":1385,"props":1748,"children":1749},{"class":1387,"line":1475},[1750,1754,1759,1763,1767],{"type":42,"tag":1385,"props":1751,"children":1752},{"style":1597},[1753],{"type":47,"value":1608},{"type":42,"tag":1385,"props":1755,"children":1756},{"style":1611},[1757],{"type":47,"value":1758},"compilerOptions",{"type":42,"tag":1385,"props":1760,"children":1761},{"style":1597},[1762],{"type":47,"value":1619},{"type":42,"tag":1385,"props":1764,"children":1765},{"style":1597},[1766],{"type":47,"value":1624},{"type":42,"tag":1385,"props":1768,"children":1769},{"style":1597},[1770],{"type":47,"value":1771}," {\n",{"type":42,"tag":1385,"props":1773,"children":1774},{"class":1387,"line":1483},[1775,1780,1785,1789,1793,1797,1802,1806],{"type":42,"tag":1385,"props":1776,"children":1777},{"style":1597},[1778],{"type":47,"value":1779},"    \"",{"type":42,"tag":1385,"props":1781,"children":1782},{"style":1402},[1783],{"type":47,"value":1784},"baseUrl",{"type":42,"tag":1385,"props":1786,"children":1787},{"style":1597},[1788],{"type":47,"value":1619},{"type":42,"tag":1385,"props":1790,"children":1791},{"style":1597},[1792],{"type":47,"value":1624},{"type":42,"tag":1385,"props":1794,"children":1795},{"style":1597},[1796],{"type":47,"value":1666},{"type":42,"tag":1385,"props":1798,"children":1799},{"style":1408},[1800],{"type":47,"value":1801},".",{"type":42,"tag":1385,"props":1803,"children":1804},{"style":1597},[1805],{"type":47,"value":1619},{"type":42,"tag":1385,"props":1807,"children":1808},{"style":1597},[1809],{"type":47,"value":1810},",\n",{"type":42,"tag":1385,"props":1812,"children":1813},{"class":1387,"line":1492},[1814,1818,1823,1827,1831],{"type":42,"tag":1385,"props":1815,"children":1816},{"style":1597},[1817],{"type":47,"value":1779},{"type":42,"tag":1385,"props":1819,"children":1820},{"style":1402},[1821],{"type":47,"value":1822},"paths",{"type":42,"tag":1385,"props":1824,"children":1825},{"style":1597},[1826],{"type":47,"value":1619},{"type":42,"tag":1385,"props":1828,"children":1829},{"style":1597},[1830],{"type":47,"value":1624},{"type":42,"tag":1385,"props":1832,"children":1833},{"style":1597},[1834],{"type":47,"value":1771},{"type":42,"tag":1385,"props":1836,"children":1837},{"class":1387,"line":1520},[1838,1843,1849,1853,1857,1862,1866,1871,1875],{"type":42,"tag":1385,"props":1839,"children":1840},{"style":1597},[1841],{"type":47,"value":1842},"      \"",{"type":42,"tag":1385,"props":1844,"children":1846},{"style":1845},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[1847],{"type":47,"value":1848},"@\u002F*",{"type":42,"tag":1385,"props":1850,"children":1851},{"style":1597},[1852],{"type":47,"value":1619},{"type":42,"tag":1385,"props":1854,"children":1855},{"style":1597},[1856],{"type":47,"value":1624},{"type":42,"tag":1385,"props":1858,"children":1859},{"style":1597},[1860],{"type":47,"value":1861}," [",{"type":42,"tag":1385,"props":1863,"children":1864},{"style":1597},[1865],{"type":47,"value":1619},{"type":42,"tag":1385,"props":1867,"children":1868},{"style":1408},[1869],{"type":47,"value":1870},".\u002Fsrc\u002F*",{"type":42,"tag":1385,"props":1872,"children":1873},{"style":1597},[1874],{"type":47,"value":1619},{"type":42,"tag":1385,"props":1876,"children":1877},{"style":1597},[1878],{"type":47,"value":1879},"]\n",{"type":42,"tag":1385,"props":1881,"children":1882},{"class":1387,"line":1541},[1883],{"type":42,"tag":1385,"props":1884,"children":1885},{"style":1597},[1886],{"type":47,"value":1887},"    }\n",{"type":42,"tag":1385,"props":1889,"children":1891},{"class":1387,"line":1890},12,[1892],{"type":42,"tag":1385,"props":1893,"children":1894},{"style":1597},[1895],{"type":47,"value":1896},"  }\n",{"type":42,"tag":1385,"props":1898,"children":1900},{"class":1387,"line":1899},13,[1901],{"type":42,"tag":1385,"props":1902,"children":1903},{"style":1597},[1904],{"type":47,"value":1905},"}\n",{"type":42,"tag":57,"props":1907,"children":1908},{},[1909,1910,1916],{"type":47,"value":1574},{"type":42,"tag":135,"props":1911,"children":1913},{"className":1912},[],[1914],{"type":47,"value":1915},"tsconfig.app.json",{"type":47,"value":1582},{"type":42,"tag":1001,"props":1918,"children":1920},{"className":1585,"code":1919,"language":1587,"meta":1009,"style":1009},"{\n  \"compilerOptions\": {\n    \u002F\u002F ... existing options ...\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@\u002F*\": [\".\u002Fsrc\u002F*\"]\n    }\n  }\n}\n",[1921],{"type":42,"tag":135,"props":1922,"children":1923},{"__ignoreMap":1009},[1924,1931,1954,1962,1997,2020,2059,2066,2073],{"type":42,"tag":1385,"props":1925,"children":1926},{"class":1387,"line":1388},[1927],{"type":42,"tag":1385,"props":1928,"children":1929},{"style":1597},[1930],{"type":47,"value":1600},{"type":42,"tag":1385,"props":1932,"children":1933},{"class":1387,"line":1398},[1934,1938,1942,1946,1950],{"type":42,"tag":1385,"props":1935,"children":1936},{"style":1597},[1937],{"type":47,"value":1608},{"type":42,"tag":1385,"props":1939,"children":1940},{"style":1611},[1941],{"type":47,"value":1758},{"type":42,"tag":1385,"props":1943,"children":1944},{"style":1597},[1945],{"type":47,"value":1619},{"type":42,"tag":1385,"props":1947,"children":1948},{"style":1597},[1949],{"type":47,"value":1624},{"type":42,"tag":1385,"props":1951,"children":1952},{"style":1597},[1953],{"type":47,"value":1771},{"type":42,"tag":1385,"props":1955,"children":1956},{"class":1387,"line":1434},[1957],{"type":42,"tag":1385,"props":1958,"children":1959},{"style":1392},[1960],{"type":47,"value":1961},"    \u002F\u002F ... existing options ...\n",{"type":42,"tag":1385,"props":1963,"children":1964},{"class":1387,"line":1443},[1965,1969,1973,1977,1981,1985,1989,1993],{"type":42,"tag":1385,"props":1966,"children":1967},{"style":1597},[1968],{"type":47,"value":1779},{"type":42,"tag":1385,"props":1970,"children":1971},{"style":1402},[1972],{"type":47,"value":1784},{"type":42,"tag":1385,"props":1974,"children":1975},{"style":1597},[1976],{"type":47,"value":1619},{"type":42,"tag":1385,"props":1978,"children":1979},{"style":1597},[1980],{"type":47,"value":1624},{"type":42,"tag":1385,"props":1982,"children":1983},{"style":1597},[1984],{"type":47,"value":1666},{"type":42,"tag":1385,"props":1986,"children":1987},{"style":1408},[1988],{"type":47,"value":1801},{"type":42,"tag":1385,"props":1990,"children":1991},{"style":1597},[1992],{"type":47,"value":1619},{"type":42,"tag":1385,"props":1994,"children":1995},{"style":1597},[1996],{"type":47,"value":1810},{"type":42,"tag":1385,"props":1998,"children":1999},{"class":1387,"line":1453},[2000,2004,2008,2012,2016],{"type":42,"tag":1385,"props":2001,"children":2002},{"style":1597},[2003],{"type":47,"value":1779},{"type":42,"tag":1385,"props":2005,"children":2006},{"style":1402},[2007],{"type":47,"value":1822},{"type":42,"tag":1385,"props":2009,"children":2010},{"style":1597},[2011],{"type":47,"value":1619},{"type":42,"tag":1385,"props":2013,"children":2014},{"style":1597},[2015],{"type":47,"value":1624},{"type":42,"tag":1385,"props":2017,"children":2018},{"style":1597},[2019],{"type":47,"value":1771},{"type":42,"tag":1385,"props":2021,"children":2022},{"class":1387,"line":1462},[2023,2027,2031,2035,2039,2043,2047,2051,2055],{"type":42,"tag":1385,"props":2024,"children":2025},{"style":1597},[2026],{"type":47,"value":1842},{"type":42,"tag":1385,"props":2028,"children":2029},{"style":1845},[2030],{"type":47,"value":1848},{"type":42,"tag":1385,"props":2032,"children":2033},{"style":1597},[2034],{"type":47,"value":1619},{"type":42,"tag":1385,"props":2036,"children":2037},{"style":1597},[2038],{"type":47,"value":1624},{"type":42,"tag":1385,"props":2040,"children":2041},{"style":1597},[2042],{"type":47,"value":1861},{"type":42,"tag":1385,"props":2044,"children":2045},{"style":1597},[2046],{"type":47,"value":1619},{"type":42,"tag":1385,"props":2048,"children":2049},{"style":1408},[2050],{"type":47,"value":1870},{"type":42,"tag":1385,"props":2052,"children":2053},{"style":1597},[2054],{"type":47,"value":1619},{"type":42,"tag":1385,"props":2056,"children":2057},{"style":1597},[2058],{"type":47,"value":1879},{"type":42,"tag":1385,"props":2060,"children":2061},{"class":1387,"line":1475},[2062],{"type":42,"tag":1385,"props":2063,"children":2064},{"style":1597},[2065],{"type":47,"value":1887},{"type":42,"tag":1385,"props":2067,"children":2068},{"class":1387,"line":1483},[2069],{"type":42,"tag":1385,"props":2070,"children":2071},{"style":1597},[2072],{"type":47,"value":1896},{"type":42,"tag":1385,"props":2074,"children":2075},{"class":1387,"line":1492},[2076],{"type":42,"tag":1385,"props":2077,"children":2078},{"style":1597},[2079],{"type":47,"value":1905},{"type":42,"tag":57,"props":2081,"children":2082},{},[2083,2084,2090],{"type":47,"value":1574},{"type":42,"tag":135,"props":2085,"children":2087},{"className":2086},[],[2088],{"type":47,"value":2089},"vite.config.ts",{"type":47,"value":1582},{"type":42,"tag":1001,"props":2092,"children":2096},{"className":2093,"code":2094,"language":2095,"meta":1009,"style":1009},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { defineConfig } from 'vite'\nimport react from '@vitejs\u002Fplugin-react'\nimport tailwindcss from '@tailwindcss\u002Fvite'\nimport { TanStackRouterVite } from '@tanstack\u002Frouter-plugin\u002Fvite'\nimport path from 'path'\n\nexport default defineConfig({\n  plugins: [\n    TanStackRouterVite(),\n    react(),\n    tailwindcss(),\n  ],\n  resolve: {\n    alias: {\n      '@': path.resolve(__dirname, '.\u002Fsrc'),\n    },\n  },\n})\n","typescript",[2097],{"type":42,"tag":135,"props":2098,"children":2099},{"__ignoreMap":1009},[2100,2145,2175,2204,2241,2269,2276,2303,2320,2337,2353,2369,2381,2397,2414,2482,2491,2500],{"type":42,"tag":1385,"props":2101,"children":2102},{"class":1387,"line":1388},[2103,2109,2114,2120,2125,2130,2135,2140],{"type":42,"tag":1385,"props":2104,"children":2106},{"style":2105},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[2107],{"type":47,"value":2108},"import",{"type":42,"tag":1385,"props":2110,"children":2111},{"style":1597},[2112],{"type":47,"value":2113}," {",{"type":42,"tag":1385,"props":2115,"children":2117},{"style":2116},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[2118],{"type":47,"value":2119}," defineConfig",{"type":42,"tag":1385,"props":2121,"children":2122},{"style":1597},[2123],{"type":47,"value":2124}," }",{"type":42,"tag":1385,"props":2126,"children":2127},{"style":2105},[2128],{"type":47,"value":2129}," from",{"type":42,"tag":1385,"props":2131,"children":2132},{"style":1597},[2133],{"type":47,"value":2134}," '",{"type":42,"tag":1385,"props":2136,"children":2137},{"style":1408},[2138],{"type":47,"value":2139},"vite",{"type":42,"tag":1385,"props":2141,"children":2142},{"style":1597},[2143],{"type":47,"value":2144},"'\n",{"type":42,"tag":1385,"props":2146,"children":2147},{"class":1387,"line":1398},[2148,2152,2157,2162,2166,2171],{"type":42,"tag":1385,"props":2149,"children":2150},{"style":2105},[2151],{"type":47,"value":2108},{"type":42,"tag":1385,"props":2153,"children":2154},{"style":2116},[2155],{"type":47,"value":2156}," react ",{"type":42,"tag":1385,"props":2158,"children":2159},{"style":2105},[2160],{"type":47,"value":2161},"from",{"type":42,"tag":1385,"props":2163,"children":2164},{"style":1597},[2165],{"type":47,"value":2134},{"type":42,"tag":1385,"props":2167,"children":2168},{"style":1408},[2169],{"type":47,"value":2170},"@vitejs\u002Fplugin-react",{"type":42,"tag":1385,"props":2172,"children":2173},{"style":1597},[2174],{"type":47,"value":2144},{"type":42,"tag":1385,"props":2176,"children":2177},{"class":1387,"line":1434},[2178,2182,2187,2191,2195,2200],{"type":42,"tag":1385,"props":2179,"children":2180},{"style":2105},[2181],{"type":47,"value":2108},{"type":42,"tag":1385,"props":2183,"children":2184},{"style":2116},[2185],{"type":47,"value":2186}," tailwindcss ",{"type":42,"tag":1385,"props":2188,"children":2189},{"style":2105},[2190],{"type":47,"value":2161},{"type":42,"tag":1385,"props":2192,"children":2193},{"style":1597},[2194],{"type":47,"value":2134},{"type":42,"tag":1385,"props":2196,"children":2197},{"style":1408},[2198],{"type":47,"value":2199},"@tailwindcss\u002Fvite",{"type":42,"tag":1385,"props":2201,"children":2202},{"style":1597},[2203],{"type":47,"value":2144},{"type":42,"tag":1385,"props":2205,"children":2206},{"class":1387,"line":1443},[2207,2211,2215,2220,2224,2228,2232,2237],{"type":42,"tag":1385,"props":2208,"children":2209},{"style":2105},[2210],{"type":47,"value":2108},{"type":42,"tag":1385,"props":2212,"children":2213},{"style":1597},[2214],{"type":47,"value":2113},{"type":42,"tag":1385,"props":2216,"children":2217},{"style":2116},[2218],{"type":47,"value":2219}," TanStackRouterVite",{"type":42,"tag":1385,"props":2221,"children":2222},{"style":1597},[2223],{"type":47,"value":2124},{"type":42,"tag":1385,"props":2225,"children":2226},{"style":2105},[2227],{"type":47,"value":2129},{"type":42,"tag":1385,"props":2229,"children":2230},{"style":1597},[2231],{"type":47,"value":2134},{"type":42,"tag":1385,"props":2233,"children":2234},{"style":1408},[2235],{"type":47,"value":2236},"@tanstack\u002Frouter-plugin\u002Fvite",{"type":42,"tag":1385,"props":2238,"children":2239},{"style":1597},[2240],{"type":47,"value":2144},{"type":42,"tag":1385,"props":2242,"children":2243},{"class":1387,"line":1453},[2244,2248,2253,2257,2261,2265],{"type":42,"tag":1385,"props":2245,"children":2246},{"style":2105},[2247],{"type":47,"value":2108},{"type":42,"tag":1385,"props":2249,"children":2250},{"style":2116},[2251],{"type":47,"value":2252}," path ",{"type":42,"tag":1385,"props":2254,"children":2255},{"style":2105},[2256],{"type":47,"value":2161},{"type":42,"tag":1385,"props":2258,"children":2259},{"style":1597},[2260],{"type":47,"value":2134},{"type":42,"tag":1385,"props":2262,"children":2263},{"style":1408},[2264],{"type":47,"value":1671},{"type":42,"tag":1385,"props":2266,"children":2267},{"style":1597},[2268],{"type":47,"value":2144},{"type":42,"tag":1385,"props":2270,"children":2271},{"class":1387,"line":1462},[2272],{"type":42,"tag":1385,"props":2273,"children":2274},{"emptyLinePlaceholder":1447},[2275],{"type":47,"value":1450},{"type":42,"tag":1385,"props":2277,"children":2278},{"class":1387,"line":1475},[2279,2284,2289,2294,2299],{"type":42,"tag":1385,"props":2280,"children":2281},{"style":2105},[2282],{"type":47,"value":2283},"export",{"type":42,"tag":1385,"props":2285,"children":2286},{"style":2105},[2287],{"type":47,"value":2288}," default",{"type":42,"tag":1385,"props":2290,"children":2292},{"style":2291},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[2293],{"type":47,"value":2119},{"type":42,"tag":1385,"props":2295,"children":2296},{"style":2116},[2297],{"type":47,"value":2298},"(",{"type":42,"tag":1385,"props":2300,"children":2301},{"style":1597},[2302],{"type":47,"value":1600},{"type":42,"tag":1385,"props":2304,"children":2305},{"class":1387,"line":1483},[2306,2312,2316],{"type":42,"tag":1385,"props":2307,"children":2309},{"style":2308},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[2310],{"type":47,"value":2311},"  plugins",{"type":42,"tag":1385,"props":2313,"children":2314},{"style":1597},[2315],{"type":47,"value":1624},{"type":42,"tag":1385,"props":2317,"children":2318},{"style":2116},[2319],{"type":47,"value":1653},{"type":42,"tag":1385,"props":2321,"children":2322},{"class":1387,"line":1492},[2323,2328,2333],{"type":42,"tag":1385,"props":2324,"children":2325},{"style":2291},[2326],{"type":47,"value":2327},"    TanStackRouterVite",{"type":42,"tag":1385,"props":2329,"children":2330},{"style":2116},[2331],{"type":47,"value":2332},"()",{"type":42,"tag":1385,"props":2334,"children":2335},{"style":1597},[2336],{"type":47,"value":1810},{"type":42,"tag":1385,"props":2338,"children":2339},{"class":1387,"line":1520},[2340,2345,2349],{"type":42,"tag":1385,"props":2341,"children":2342},{"style":2291},[2343],{"type":47,"value":2344},"    react",{"type":42,"tag":1385,"props":2346,"children":2347},{"style":2116},[2348],{"type":47,"value":2332},{"type":42,"tag":1385,"props":2350,"children":2351},{"style":1597},[2352],{"type":47,"value":1810},{"type":42,"tag":1385,"props":2354,"children":2355},{"class":1387,"line":1541},[2356,2361,2365],{"type":42,"tag":1385,"props":2357,"children":2358},{"style":2291},[2359],{"type":47,"value":2360},"    tailwindcss",{"type":42,"tag":1385,"props":2362,"children":2363},{"style":2116},[2364],{"type":47,"value":2332},{"type":42,"tag":1385,"props":2366,"children":2367},{"style":1597},[2368],{"type":47,"value":1810},{"type":42,"tag":1385,"props":2370,"children":2371},{"class":1387,"line":1890},[2372,2377],{"type":42,"tag":1385,"props":2373,"children":2374},{"style":2116},[2375],{"type":47,"value":2376},"  ]",{"type":42,"tag":1385,"props":2378,"children":2379},{"style":1597},[2380],{"type":47,"value":1810},{"type":42,"tag":1385,"props":2382,"children":2383},{"class":1387,"line":1899},[2384,2389,2393],{"type":42,"tag":1385,"props":2385,"children":2386},{"style":2308},[2387],{"type":47,"value":2388},"  resolve",{"type":42,"tag":1385,"props":2390,"children":2391},{"style":1597},[2392],{"type":47,"value":1624},{"type":42,"tag":1385,"props":2394,"children":2395},{"style":1597},[2396],{"type":47,"value":1771},{"type":42,"tag":1385,"props":2398,"children":2400},{"class":1387,"line":2399},14,[2401,2406,2410],{"type":42,"tag":1385,"props":2402,"children":2403},{"style":2308},[2404],{"type":47,"value":2405},"    alias",{"type":42,"tag":1385,"props":2407,"children":2408},{"style":1597},[2409],{"type":47,"value":1624},{"type":42,"tag":1385,"props":2411,"children":2412},{"style":1597},[2413],{"type":47,"value":1771},{"type":42,"tag":1385,"props":2415,"children":2417},{"class":1387,"line":2416},15,[2418,2423,2428,2433,2437,2442,2446,2451,2456,2461,2465,2470,2474,2478],{"type":42,"tag":1385,"props":2419,"children":2420},{"style":1597},[2421],{"type":47,"value":2422},"      '",{"type":42,"tag":1385,"props":2424,"children":2425},{"style":2308},[2426],{"type":47,"value":2427},"@",{"type":42,"tag":1385,"props":2429,"children":2430},{"style":1597},[2431],{"type":47,"value":2432},"'",{"type":42,"tag":1385,"props":2434,"children":2435},{"style":1597},[2436],{"type":47,"value":1624},{"type":42,"tag":1385,"props":2438,"children":2439},{"style":2116},[2440],{"type":47,"value":2441}," path",{"type":42,"tag":1385,"props":2443,"children":2444},{"style":1597},[2445],{"type":47,"value":1801},{"type":42,"tag":1385,"props":2447,"children":2448},{"style":2291},[2449],{"type":47,"value":2450},"resolve",{"type":42,"tag":1385,"props":2452,"children":2453},{"style":2116},[2454],{"type":47,"value":2455},"(__dirname",{"type":42,"tag":1385,"props":2457,"children":2458},{"style":1597},[2459],{"type":47,"value":2460},",",{"type":42,"tag":1385,"props":2462,"children":2463},{"style":1597},[2464],{"type":47,"value":2134},{"type":42,"tag":1385,"props":2466,"children":2467},{"style":1408},[2468],{"type":47,"value":2469},".\u002Fsrc",{"type":42,"tag":1385,"props":2471,"children":2472},{"style":1597},[2473],{"type":47,"value":2432},{"type":42,"tag":1385,"props":2475,"children":2476},{"style":2116},[2477],{"type":47,"value":252},{"type":42,"tag":1385,"props":2479,"children":2480},{"style":1597},[2481],{"type":47,"value":1810},{"type":42,"tag":1385,"props":2483,"children":2485},{"class":1387,"line":2484},16,[2486],{"type":42,"tag":1385,"props":2487,"children":2488},{"style":1597},[2489],{"type":47,"value":2490},"    },\n",{"type":42,"tag":1385,"props":2492,"children":2494},{"class":1387,"line":2493},17,[2495],{"type":42,"tag":1385,"props":2496,"children":2497},{"style":1597},[2498],{"type":47,"value":2499},"  },\n",{"type":42,"tag":1385,"props":2501,"children":2503},{"class":1387,"line":2502},18,[2504,2509],{"type":42,"tag":1385,"props":2505,"children":2506},{"style":1597},[2507],{"type":47,"value":2508},"}",{"type":42,"tag":1385,"props":2510,"children":2511},{"style":2116},[2512],{"type":47,"value":2513},")\n",{"type":42,"tag":57,"props":2515,"children":2516},{},[2517],{"type":42,"tag":2518,"props":2519,"children":2520},"em",{},[2521],{"type":47,"value":2522},"* Configuration samples based on Vite + React + TypeScript template structure",{"type":42,"tag":57,"props":2524,"children":2525},{},[2526,2531],{"type":42,"tag":113,"props":2527,"children":2528},{},[2529],{"type":47,"value":2530},"Now shadcn init will succeed",{"type":47,"value":1624},{"type":42,"tag":1001,"props":2533,"children":2535},{"className":1377,"code":2534,"language":1379,"meta":1009,"style":1009},"# Initialize shadcn (path aliases now configured)\npnpm dlx shadcn@latest init\n\n# CRITICAL: Install shadcn components BEFORE writing custom components\n# Identify which components you need first\npnpm dlx shadcn@latest add button card input form dialog avatar badge separator\n\n# Add TanStack packages\npnpm add @tanstack\u002Freact-router @tanstack\u002Freact-query\n\n# Add utilities\npnpm add lucide-react motion sonner react-hook-form zod @hookform\u002Fresolvers\npnpm add clsx tailwind-merge class-variance-authority\npnpm add react-error-boundary next-themes\n",[2536],{"type":42,"tag":135,"props":2537,"children":2538},{"__ignoreMap":1009},[2539,2547,2569,2576,2584,2592,2651,2658,2666,2687,2694,2702,2743,2769],{"type":42,"tag":1385,"props":2540,"children":2541},{"class":1387,"line":1388},[2542],{"type":42,"tag":1385,"props":2543,"children":2544},{"style":1392},[2545],{"type":47,"value":2546},"# Initialize shadcn (path aliases now configured)\n",{"type":42,"tag":1385,"props":2548,"children":2549},{"class":1387,"line":1398},[2550,2554,2559,2564],{"type":42,"tag":1385,"props":2551,"children":2552},{"style":1402},[2553],{"type":47,"value":1405},{"type":42,"tag":1385,"props":2555,"children":2556},{"style":1408},[2557],{"type":47,"value":2558}," dlx",{"type":42,"tag":1385,"props":2560,"children":2561},{"style":1408},[2562],{"type":47,"value":2563}," shadcn@latest",{"type":42,"tag":1385,"props":2565,"children":2566},{"style":1408},[2567],{"type":47,"value":2568}," init\n",{"type":42,"tag":1385,"props":2570,"children":2571},{"class":1387,"line":1434},[2572],{"type":42,"tag":1385,"props":2573,"children":2574},{"emptyLinePlaceholder":1447},[2575],{"type":47,"value":1450},{"type":42,"tag":1385,"props":2577,"children":2578},{"class":1387,"line":1443},[2579],{"type":42,"tag":1385,"props":2580,"children":2581},{"style":1392},[2582],{"type":47,"value":2583},"# CRITICAL: Install shadcn components BEFORE writing custom components\n",{"type":42,"tag":1385,"props":2585,"children":2586},{"class":1387,"line":1453},[2587],{"type":42,"tag":1385,"props":2588,"children":2589},{"style":1392},[2590],{"type":47,"value":2591},"# Identify which components you need first\n",{"type":42,"tag":1385,"props":2593,"children":2594},{"class":1387,"line":1462},[2595,2599,2603,2607,2611,2616,2621,2626,2631,2636,2641,2646],{"type":42,"tag":1385,"props":2596,"children":2597},{"style":1402},[2598],{"type":47,"value":1405},{"type":42,"tag":1385,"props":2600,"children":2601},{"style":1408},[2602],{"type":47,"value":2558},{"type":42,"tag":1385,"props":2604,"children":2605},{"style":1408},[2606],{"type":47,"value":2563},{"type":42,"tag":1385,"props":2608,"children":2609},{"style":1408},[2610],{"type":47,"value":1502},{"type":42,"tag":1385,"props":2612,"children":2613},{"style":1408},[2614],{"type":47,"value":2615}," button",{"type":42,"tag":1385,"props":2617,"children":2618},{"style":1408},[2619],{"type":47,"value":2620}," card",{"type":42,"tag":1385,"props":2622,"children":2623},{"style":1408},[2624],{"type":47,"value":2625}," input",{"type":42,"tag":1385,"props":2627,"children":2628},{"style":1408},[2629],{"type":47,"value":2630}," form",{"type":42,"tag":1385,"props":2632,"children":2633},{"style":1408},[2634],{"type":47,"value":2635}," dialog",{"type":42,"tag":1385,"props":2637,"children":2638},{"style":1408},[2639],{"type":47,"value":2640}," avatar",{"type":42,"tag":1385,"props":2642,"children":2643},{"style":1408},[2644],{"type":47,"value":2645}," badge",{"type":42,"tag":1385,"props":2647,"children":2648},{"style":1408},[2649],{"type":47,"value":2650}," separator\n",{"type":42,"tag":1385,"props":2652,"children":2653},{"class":1387,"line":1475},[2654],{"type":42,"tag":1385,"props":2655,"children":2656},{"emptyLinePlaceholder":1447},[2657],{"type":47,"value":1450},{"type":42,"tag":1385,"props":2659,"children":2660},{"class":1387,"line":1483},[2661],{"type":42,"tag":1385,"props":2662,"children":2663},{"style":1392},[2664],{"type":47,"value":2665},"# Add TanStack packages\n",{"type":42,"tag":1385,"props":2667,"children":2668},{"class":1387,"line":1492},[2669,2673,2677,2682],{"type":42,"tag":1385,"props":2670,"children":2671},{"style":1402},[2672],{"type":47,"value":1405},{"type":42,"tag":1385,"props":2674,"children":2675},{"style":1408},[2676],{"type":47,"value":1502},{"type":42,"tag":1385,"props":2678,"children":2679},{"style":1408},[2680],{"type":47,"value":2681}," @tanstack\u002Freact-router",{"type":42,"tag":1385,"props":2683,"children":2684},{"style":1408},[2685],{"type":47,"value":2686}," @tanstack\u002Freact-query\n",{"type":42,"tag":1385,"props":2688,"children":2689},{"class":1387,"line":1520},[2690],{"type":42,"tag":1385,"props":2691,"children":2692},{"emptyLinePlaceholder":1447},[2693],{"type":47,"value":1450},{"type":42,"tag":1385,"props":2695,"children":2696},{"class":1387,"line":1541},[2697],{"type":42,"tag":1385,"props":2698,"children":2699},{"style":1392},[2700],{"type":47,"value":2701},"# Add utilities\n",{"type":42,"tag":1385,"props":2703,"children":2704},{"class":1387,"line":1890},[2705,2709,2713,2718,2723,2728,2733,2738],{"type":42,"tag":1385,"props":2706,"children":2707},{"style":1402},[2708],{"type":47,"value":1405},{"type":42,"tag":1385,"props":2710,"children":2711},{"style":1408},[2712],{"type":47,"value":1502},{"type":42,"tag":1385,"props":2714,"children":2715},{"style":1408},[2716],{"type":47,"value":2717}," lucide-react",{"type":42,"tag":1385,"props":2719,"children":2720},{"style":1408},[2721],{"type":47,"value":2722}," motion",{"type":42,"tag":1385,"props":2724,"children":2725},{"style":1408},[2726],{"type":47,"value":2727}," sonner",{"type":42,"tag":1385,"props":2729,"children":2730},{"style":1408},[2731],{"type":47,"value":2732}," react-hook-form",{"type":42,"tag":1385,"props":2734,"children":2735},{"style":1408},[2736],{"type":47,"value":2737}," zod",{"type":42,"tag":1385,"props":2739,"children":2740},{"style":1408},[2741],{"type":47,"value":2742}," @hookform\u002Fresolvers\n",{"type":42,"tag":1385,"props":2744,"children":2745},{"class":1387,"line":1899},[2746,2750,2754,2759,2764],{"type":42,"tag":1385,"props":2747,"children":2748},{"style":1402},[2749],{"type":47,"value":1405},{"type":42,"tag":1385,"props":2751,"children":2752},{"style":1408},[2753],{"type":47,"value":1502},{"type":42,"tag":1385,"props":2755,"children":2756},{"style":1408},[2757],{"type":47,"value":2758}," clsx",{"type":42,"tag":1385,"props":2760,"children":2761},{"style":1408},[2762],{"type":47,"value":2763}," tailwind-merge",{"type":42,"tag":1385,"props":2765,"children":2766},{"style":1408},[2767],{"type":47,"value":2768}," class-variance-authority\n",{"type":42,"tag":1385,"props":2770,"children":2771},{"class":1387,"line":2399},[2772,2776,2780,2785],{"type":42,"tag":1385,"props":2773,"children":2774},{"style":1402},[2775],{"type":47,"value":1405},{"type":42,"tag":1385,"props":2777,"children":2778},{"style":1408},[2779],{"type":47,"value":1502},{"type":42,"tag":1385,"props":2781,"children":2782},{"style":1408},[2783],{"type":47,"value":2784}," react-error-boundary",{"type":42,"tag":1385,"props":2786,"children":2787},{"style":1408},[2788],{"type":47,"value":2789}," next-themes\n",{"type":42,"tag":445,"props":2791,"children":2793},{"id":2792},"step-2-configure-project",[2794],{"type":47,"value":2795},"Step 2: Configure Project",{"type":42,"tag":57,"props":2797,"children":2798},{},[2799,2801,2807],{"type":47,"value":2800},"See stack templates in ",{"type":42,"tag":135,"props":2802,"children":2804},{"className":2803},[],[2805],{"type":47,"value":2806},"stacks\u002F",{"type":47,"value":2808}," for specific configuration examples.",{"type":42,"tag":445,"props":2810,"children":2812},{"id":2811},"step-3-create-prd-optional-but-recommended",[2813],{"type":47,"value":2814},"Step 3: Create PRD (Optional but Recommended)",{"type":42,"tag":57,"props":2816,"children":2817},{},[2818,2820,2826],{"type":47,"value":2819},"Use ",{"type":42,"tag":135,"props":2821,"children":2823},{"className":2822},[],[2824],{"type":47,"value":2825},"references\u002Fprd-template.md",{"type":47,"value":2827}," to plan:",{"type":42,"tag":74,"props":2829,"children":2830},{},[2831,2836,2841,2846,2851],{"type":42,"tag":78,"props":2832,"children":2833},{},[2834],{"type":47,"value":2835},"Purpose and mission",{"type":42,"tag":78,"props":2837,"children":2838},{},[2839],{"type":47,"value":2840},"Complexity level",{"type":42,"tag":78,"props":2842,"children":2843},{},[2844],{"type":47,"value":2845},"Essential features",{"type":42,"tag":78,"props":2847,"children":2848},{},[2849],{"type":47,"value":2850},"Design direction",{"type":42,"tag":78,"props":2852,"children":2853},{},[2854],{"type":47,"value":2855},"Color and typography choices",{"type":42,"tag":445,"props":2857,"children":2859},{"id":2858},"step-4-install-shadcn-components-first",[2860],{"type":47,"value":2861},"Step 4: Install shadcn Components FIRST",{"type":42,"tag":57,"props":2863,"children":2864},{},[2865],{"type":42,"tag":113,"props":2866,"children":2867},{},[2868],{"type":47,"value":2869},"CRITICAL: Component Installation Order",{"type":42,"tag":57,"props":2871,"children":2872},{},[2873],{"type":47,"value":2874},"ALWAYS install shadcn components BEFORE writing custom components that import them. This prevents TypeScript errors and failed builds.",{"type":42,"tag":57,"props":2876,"children":2877},{},[2878,2880,2885],{"type":47,"value":2879},"❌ ",{"type":42,"tag":113,"props":2881,"children":2882},{},[2883],{"type":47,"value":2884},"WRONG ORDER",{"type":47,"value":2886}," (causes errors):",{"type":42,"tag":1001,"props":2888,"children":2890},{"className":1377,"code":2889,"language":1379,"meta":1009,"style":1009},"# 1. Write PersonDetail.tsx that imports '@\u002Fcomponents\u002Fui\u002Fcard'\n# 2. Run pnpm dlx shadcn add card\n# 3. Fix TypeScript errors 'Cannot find module @\u002Fcomponents\u002Fui\u002Fcard'\n",[2891],{"type":42,"tag":135,"props":2892,"children":2893},{"__ignoreMap":1009},[2894,2902,2910],{"type":42,"tag":1385,"props":2895,"children":2896},{"class":1387,"line":1388},[2897],{"type":42,"tag":1385,"props":2898,"children":2899},{"style":1392},[2900],{"type":47,"value":2901},"# 1. Write PersonDetail.tsx that imports '@\u002Fcomponents\u002Fui\u002Fcard'\n",{"type":42,"tag":1385,"props":2903,"children":2904},{"class":1387,"line":1398},[2905],{"type":42,"tag":1385,"props":2906,"children":2907},{"style":1392},[2908],{"type":47,"value":2909},"# 2. Run pnpm dlx shadcn add card\n",{"type":42,"tag":1385,"props":2911,"children":2912},{"class":1387,"line":1434},[2913],{"type":42,"tag":1385,"props":2914,"children":2915},{"style":1392},[2916],{"type":47,"value":2917},"# 3. Fix TypeScript errors 'Cannot find module @\u002Fcomponents\u002Fui\u002Fcard'\n",{"type":42,"tag":57,"props":2919,"children":2920},{},[2921,2923,2928],{"type":47,"value":2922},"✅ ",{"type":42,"tag":113,"props":2924,"children":2925},{},[2926],{"type":47,"value":2927},"CORRECT ORDER",{"type":47,"value":1624},{"type":42,"tag":1001,"props":2930,"children":2932},{"className":1377,"code":2931,"language":1379,"meta":1009,"style":1009},"# 1. Plan which shadcn components you need\n#    Example: Card, Avatar, Badge, Separator, Button\n\n# 2. Install ALL required shadcn components FIRST\npnpm dlx shadcn@latest add card avatar badge separator button\n\n# 3. Verify installation\nls src\u002Fcomponents\u002Fui\u002F  # Should show: card.tsx, avatar.tsx, badge.tsx, etc.\n\n# 4. NOW write PersonDetail.tsx that imports from '@\u002Fcomponents\u002Fui\u002F*'\n#    TypeScript will have proper types and components will exist\n",[2933],{"type":42,"tag":135,"props":2934,"children":2935},{"__ignoreMap":1009},[2936,2944,2952,2959,2967,3008,3015,3023,3041,3048,3056],{"type":42,"tag":1385,"props":2937,"children":2938},{"class":1387,"line":1388},[2939],{"type":42,"tag":1385,"props":2940,"children":2941},{"style":1392},[2942],{"type":47,"value":2943},"# 1. Plan which shadcn components you need\n",{"type":42,"tag":1385,"props":2945,"children":2946},{"class":1387,"line":1398},[2947],{"type":42,"tag":1385,"props":2948,"children":2949},{"style":1392},[2950],{"type":47,"value":2951},"#    Example: Card, Avatar, Badge, Separator, Button\n",{"type":42,"tag":1385,"props":2953,"children":2954},{"class":1387,"line":1434},[2955],{"type":42,"tag":1385,"props":2956,"children":2957},{"emptyLinePlaceholder":1447},[2958],{"type":47,"value":1450},{"type":42,"tag":1385,"props":2960,"children":2961},{"class":1387,"line":1443},[2962],{"type":42,"tag":1385,"props":2963,"children":2964},{"style":1392},[2965],{"type":47,"value":2966},"# 2. Install ALL required shadcn components FIRST\n",{"type":42,"tag":1385,"props":2968,"children":2969},{"class":1387,"line":1453},[2970,2974,2978,2982,2986,2990,2994,2998,3003],{"type":42,"tag":1385,"props":2971,"children":2972},{"style":1402},[2973],{"type":47,"value":1405},{"type":42,"tag":1385,"props":2975,"children":2976},{"style":1408},[2977],{"type":47,"value":2558},{"type":42,"tag":1385,"props":2979,"children":2980},{"style":1408},[2981],{"type":47,"value":2563},{"type":42,"tag":1385,"props":2983,"children":2984},{"style":1408},[2985],{"type":47,"value":1502},{"type":42,"tag":1385,"props":2987,"children":2988},{"style":1408},[2989],{"type":47,"value":2620},{"type":42,"tag":1385,"props":2991,"children":2992},{"style":1408},[2993],{"type":47,"value":2640},{"type":42,"tag":1385,"props":2995,"children":2996},{"style":1408},[2997],{"type":47,"value":2645},{"type":42,"tag":1385,"props":2999,"children":3000},{"style":1408},[3001],{"type":47,"value":3002}," separator",{"type":42,"tag":1385,"props":3004,"children":3005},{"style":1408},[3006],{"type":47,"value":3007}," button\n",{"type":42,"tag":1385,"props":3009,"children":3010},{"class":1387,"line":1462},[3011],{"type":42,"tag":1385,"props":3012,"children":3013},{"emptyLinePlaceholder":1447},[3014],{"type":47,"value":1450},{"type":42,"tag":1385,"props":3016,"children":3017},{"class":1387,"line":1475},[3018],{"type":42,"tag":1385,"props":3019,"children":3020},{"style":1392},[3021],{"type":47,"value":3022},"# 3. Verify installation\n",{"type":42,"tag":1385,"props":3024,"children":3025},{"class":1387,"line":1483},[3026,3031,3036],{"type":42,"tag":1385,"props":3027,"children":3028},{"style":1402},[3029],{"type":47,"value":3030},"ls",{"type":42,"tag":1385,"props":3032,"children":3033},{"style":1408},[3034],{"type":47,"value":3035}," src\u002Fcomponents\u002Fui\u002F",{"type":42,"tag":1385,"props":3037,"children":3038},{"style":1392},[3039],{"type":47,"value":3040},"  # Should show: card.tsx, avatar.tsx, badge.tsx, etc.\n",{"type":42,"tag":1385,"props":3042,"children":3043},{"class":1387,"line":1492},[3044],{"type":42,"tag":1385,"props":3045,"children":3046},{"emptyLinePlaceholder":1447},[3047],{"type":47,"value":1450},{"type":42,"tag":1385,"props":3049,"children":3050},{"class":1387,"line":1520},[3051],{"type":42,"tag":1385,"props":3052,"children":3053},{"style":1392},[3054],{"type":47,"value":3055},"# 4. NOW write PersonDetail.tsx that imports from '@\u002Fcomponents\u002Fui\u002F*'\n",{"type":42,"tag":1385,"props":3057,"children":3058},{"class":1387,"line":1541},[3059],{"type":42,"tag":1385,"props":3060,"children":3061},{"style":1392},[3062],{"type":47,"value":3063},"#    TypeScript will have proper types and components will exist\n",{"type":42,"tag":57,"props":3065,"children":3066},{},[3067,3072],{"type":42,"tag":113,"props":3068,"children":3069},{},[3070],{"type":47,"value":3071},"Planning Checklist",{"type":47,"value":1624},{"type":42,"tag":121,"props":3074,"children":3075},{},[3076,3081,3086,3099,3110],{"type":42,"tag":78,"props":3077,"children":3078},{},[3079],{"type":47,"value":3080},"List all UI components needed for your app",{"type":42,"tag":78,"props":3082,"children":3083},{},[3084],{"type":47,"value":3085},"Identify which are shadcn components (Card, Button, etc.)",{"type":42,"tag":78,"props":3087,"children":3088},{},[3089,3091,3097],{"type":47,"value":3090},"Run single ",{"type":42,"tag":135,"props":3092,"children":3094},{"className":3093},[],[3095],{"type":47,"value":3096},"shadcn add",{"type":47,"value":3098}," command with all components",{"type":42,"tag":78,"props":3100,"children":3101},{},[3102,3104],{"type":47,"value":3103},"Verify they exist in ",{"type":42,"tag":135,"props":3105,"children":3107},{"className":3106},[],[3108],{"type":47,"value":3109},"src\u002Fcomponents\u002Fui\u002F",{"type":42,"tag":78,"props":3111,"children":3112},{},[3113],{"type":47,"value":3114},"Write your custom components that import them",{"type":42,"tag":445,"props":3116,"children":3118},{"id":3117},"step-5-implement-with-best-practices",[3119],{"type":47,"value":3120},"Step 5: Implement with Best Practices",{"type":42,"tag":74,"props":3122,"children":3123},{},[3124,3129,3142,3147,3152,3157],{"type":42,"tag":78,"props":3125,"children":3126},{},[3127],{"type":47,"value":3128},"Follow shadcn component patterns",{"type":42,"tag":78,"props":3130,"children":3131},{},[3132,3134,3140],{"type":47,"value":3133},"Use OKLCH colors in ",{"type":42,"tag":135,"props":3135,"children":3137},{"className":3136},[],[3138],{"type":47,"value":3139},":root",{"type":47,"value":3141}," CSS variables",{"type":42,"tag":78,"props":3143,"children":3144},{},[3145],{"type":47,"value":3146},"Implement responsive design (mobile-first)",{"type":42,"tag":78,"props":3148,"children":3149},{},[3150],{"type":47,"value":3151},"Add error boundaries",{"type":42,"tag":78,"props":3153,"children":3154},{},[3155],{"type":47,"value":3156},"Optimize images and fonts",{"type":42,"tag":78,"props":3158,"children":3159},{},[3160],{"type":47,"value":3161},"Test Core Web Vitals",{"type":42,"tag":50,"props":3163,"children":3165},{"id":3164},"common-patterns",[3166],{"type":47,"value":3167},"Common Patterns",{"type":42,"tag":445,"props":3169,"children":3171},{"id":3170},"theme-configuration-indexcss",[3172],{"type":47,"value":3173},"Theme Configuration (index.css)",{"type":42,"tag":1001,"props":3175,"children":3179},{"className":3176,"code":3177,"language":3178,"meta":1009,"style":1009},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@import 'tailwindcss';\n\n:root {\n  \u002F* OKLCH colors - mandatory format *\u002F\n  --background: oklch(0.97 0.01 75);\n  --foreground: oklch(0.25 0.02 55);\n  --primary: oklch(0.52 0.14 155);\n  --accent: oklch(0.72 0.13 55);\n\n  \u002F* Add more theme variables *\u002F\n  --radius: 0.75rem;\n}\n\n@theme {\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-primary: var(--primary);\n  --color-accent: var(--accent);\n\n  \u002F* Radius system *\u002F\n  --radius-sm: calc(var(--radius) * 0.5);\n  --radius-md: var(--radius);\n  --radius-lg: calc(var(--radius) * 1.5);\n}\n","css",[3180],{"type":42,"tag":135,"props":3181,"children":3182},{"__ignoreMap":1009},[3183,3209,3216,3231,3239,3280,3319,3358,3396,3403,3411,3432,3439,3446,3458,3466,3474,3482,3490,3498,3507,3539,3548,3578],{"type":42,"tag":1385,"props":3184,"children":3185},{"class":1387,"line":1388},[3186,3191,3195,3200,3204],{"type":42,"tag":1385,"props":3187,"children":3188},{"style":2105},[3189],{"type":47,"value":3190},"@import",{"type":42,"tag":1385,"props":3192,"children":3193},{"style":1597},[3194],{"type":47,"value":2134},{"type":42,"tag":1385,"props":3196,"children":3197},{"style":1408},[3198],{"type":47,"value":3199},"tailwindcss",{"type":42,"tag":1385,"props":3201,"children":3202},{"style":1597},[3203],{"type":47,"value":2432},{"type":42,"tag":1385,"props":3205,"children":3206},{"style":1597},[3207],{"type":47,"value":3208},";\n",{"type":42,"tag":1385,"props":3210,"children":3211},{"class":1387,"line":1398},[3212],{"type":42,"tag":1385,"props":3213,"children":3214},{"emptyLinePlaceholder":1447},[3215],{"type":47,"value":1450},{"type":42,"tag":1385,"props":3217,"children":3218},{"class":1387,"line":1434},[3219,3223,3227],{"type":42,"tag":1385,"props":3220,"children":3221},{"style":1597},[3222],{"type":47,"value":1624},{"type":42,"tag":1385,"props":3224,"children":3225},{"style":1611},[3226],{"type":47,"value":39},{"type":42,"tag":1385,"props":3228,"children":3229},{"style":1597},[3230],{"type":47,"value":1771},{"type":42,"tag":1385,"props":3232,"children":3233},{"class":1387,"line":1443},[3234],{"type":42,"tag":1385,"props":3235,"children":3236},{"style":1392},[3237],{"type":47,"value":3238},"  \u002F* OKLCH colors - mandatory format *\u002F\n",{"type":42,"tag":1385,"props":3240,"children":3241},{"class":1387,"line":1453},[3242,3247,3251,3256,3260,3265,3270,3275],{"type":42,"tag":1385,"props":3243,"children":3244},{"style":2116},[3245],{"type":47,"value":3246},"  --background",{"type":42,"tag":1385,"props":3248,"children":3249},{"style":1597},[3250],{"type":47,"value":1624},{"type":42,"tag":1385,"props":3252,"children":3253},{"style":2291},[3254],{"type":47,"value":3255}," oklch",{"type":42,"tag":1385,"props":3257,"children":3258},{"style":1597},[3259],{"type":47,"value":2298},{"type":42,"tag":1385,"props":3261,"children":3262},{"style":1845},[3263],{"type":47,"value":3264},"0.97",{"type":42,"tag":1385,"props":3266,"children":3267},{"style":1845},[3268],{"type":47,"value":3269}," 0.01",{"type":42,"tag":1385,"props":3271,"children":3272},{"style":1845},[3273],{"type":47,"value":3274}," 75",{"type":42,"tag":1385,"props":3276,"children":3277},{"style":1597},[3278],{"type":47,"value":3279},");\n",{"type":42,"tag":1385,"props":3281,"children":3282},{"class":1387,"line":1462},[3283,3288,3292,3296,3300,3305,3310,3315],{"type":42,"tag":1385,"props":3284,"children":3285},{"style":2116},[3286],{"type":47,"value":3287},"  --foreground",{"type":42,"tag":1385,"props":3289,"children":3290},{"style":1597},[3291],{"type":47,"value":1624},{"type":42,"tag":1385,"props":3293,"children":3294},{"style":2291},[3295],{"type":47,"value":3255},{"type":42,"tag":1385,"props":3297,"children":3298},{"style":1597},[3299],{"type":47,"value":2298},{"type":42,"tag":1385,"props":3301,"children":3302},{"style":1845},[3303],{"type":47,"value":3304},"0.25",{"type":42,"tag":1385,"props":3306,"children":3307},{"style":1845},[3308],{"type":47,"value":3309}," 0.02",{"type":42,"tag":1385,"props":3311,"children":3312},{"style":1845},[3313],{"type":47,"value":3314}," 55",{"type":42,"tag":1385,"props":3316,"children":3317},{"style":1597},[3318],{"type":47,"value":3279},{"type":42,"tag":1385,"props":3320,"children":3321},{"class":1387,"line":1475},[3322,3327,3331,3335,3339,3344,3349,3354],{"type":42,"tag":1385,"props":3323,"children":3324},{"style":2116},[3325],{"type":47,"value":3326},"  --primary",{"type":42,"tag":1385,"props":3328,"children":3329},{"style":1597},[3330],{"type":47,"value":1624},{"type":42,"tag":1385,"props":3332,"children":3333},{"style":2291},[3334],{"type":47,"value":3255},{"type":42,"tag":1385,"props":3336,"children":3337},{"style":1597},[3338],{"type":47,"value":2298},{"type":42,"tag":1385,"props":3340,"children":3341},{"style":1845},[3342],{"type":47,"value":3343},"0.52",{"type":42,"tag":1385,"props":3345,"children":3346},{"style":1845},[3347],{"type":47,"value":3348}," 0.14",{"type":42,"tag":1385,"props":3350,"children":3351},{"style":1845},[3352],{"type":47,"value":3353}," 155",{"type":42,"tag":1385,"props":3355,"children":3356},{"style":1597},[3357],{"type":47,"value":3279},{"type":42,"tag":1385,"props":3359,"children":3360},{"class":1387,"line":1483},[3361,3366,3370,3374,3378,3383,3388,3392],{"type":42,"tag":1385,"props":3362,"children":3363},{"style":2116},[3364],{"type":47,"value":3365},"  --accent",{"type":42,"tag":1385,"props":3367,"children":3368},{"style":1597},[3369],{"type":47,"value":1624},{"type":42,"tag":1385,"props":3371,"children":3372},{"style":2291},[3373],{"type":47,"value":3255},{"type":42,"tag":1385,"props":3375,"children":3376},{"style":1597},[3377],{"type":47,"value":2298},{"type":42,"tag":1385,"props":3379,"children":3380},{"style":1845},[3381],{"type":47,"value":3382},"0.72",{"type":42,"tag":1385,"props":3384,"children":3385},{"style":1845},[3386],{"type":47,"value":3387}," 0.13",{"type":42,"tag":1385,"props":3389,"children":3390},{"style":1845},[3391],{"type":47,"value":3314},{"type":42,"tag":1385,"props":3393,"children":3394},{"style":1597},[3395],{"type":47,"value":3279},{"type":42,"tag":1385,"props":3397,"children":3398},{"class":1387,"line":1492},[3399],{"type":42,"tag":1385,"props":3400,"children":3401},{"emptyLinePlaceholder":1447},[3402],{"type":47,"value":1450},{"type":42,"tag":1385,"props":3404,"children":3405},{"class":1387,"line":1520},[3406],{"type":42,"tag":1385,"props":3407,"children":3408},{"style":1392},[3409],{"type":47,"value":3410},"  \u002F* Add more theme variables *\u002F\n",{"type":42,"tag":1385,"props":3412,"children":3413},{"class":1387,"line":1541},[3414,3419,3423,3428],{"type":42,"tag":1385,"props":3415,"children":3416},{"style":2116},[3417],{"type":47,"value":3418},"  --radius",{"type":42,"tag":1385,"props":3420,"children":3421},{"style":1597},[3422],{"type":47,"value":1624},{"type":42,"tag":1385,"props":3424,"children":3425},{"style":1845},[3426],{"type":47,"value":3427}," 0.75rem",{"type":42,"tag":1385,"props":3429,"children":3430},{"style":1597},[3431],{"type":47,"value":3208},{"type":42,"tag":1385,"props":3433,"children":3434},{"class":1387,"line":1890},[3435],{"type":42,"tag":1385,"props":3436,"children":3437},{"style":1597},[3438],{"type":47,"value":1905},{"type":42,"tag":1385,"props":3440,"children":3441},{"class":1387,"line":1899},[3442],{"type":42,"tag":1385,"props":3443,"children":3444},{"emptyLinePlaceholder":1447},[3445],{"type":47,"value":1450},{"type":42,"tag":1385,"props":3447,"children":3448},{"class":1387,"line":2399},[3449,3454],{"type":42,"tag":1385,"props":3450,"children":3451},{"style":2105},[3452],{"type":47,"value":3453},"@theme",{"type":42,"tag":1385,"props":3455,"children":3456},{"style":1597},[3457],{"type":47,"value":1771},{"type":42,"tag":1385,"props":3459,"children":3460},{"class":1387,"line":2416},[3461],{"type":42,"tag":1385,"props":3462,"children":3463},{"style":2116},[3464],{"type":47,"value":3465},"  --color-background: var(--background);\n",{"type":42,"tag":1385,"props":3467,"children":3468},{"class":1387,"line":2484},[3469],{"type":42,"tag":1385,"props":3470,"children":3471},{"style":2116},[3472],{"type":47,"value":3473},"  --color-foreground: var(--foreground);\n",{"type":42,"tag":1385,"props":3475,"children":3476},{"class":1387,"line":2493},[3477],{"type":42,"tag":1385,"props":3478,"children":3479},{"style":2116},[3480],{"type":47,"value":3481},"  --color-primary: var(--primary);\n",{"type":42,"tag":1385,"props":3483,"children":3484},{"class":1387,"line":2502},[3485],{"type":42,"tag":1385,"props":3486,"children":3487},{"style":2116},[3488],{"type":47,"value":3489},"  --color-accent: var(--accent);\n",{"type":42,"tag":1385,"props":3491,"children":3493},{"class":1387,"line":3492},19,[3494],{"type":42,"tag":1385,"props":3495,"children":3496},{"emptyLinePlaceholder":1447},[3497],{"type":47,"value":1450},{"type":42,"tag":1385,"props":3499,"children":3501},{"class":1387,"line":3500},20,[3502],{"type":42,"tag":1385,"props":3503,"children":3504},{"style":1392},[3505],{"type":47,"value":3506},"  \u002F* Radius system *\u002F\n",{"type":42,"tag":1385,"props":3508,"children":3510},{"class":1387,"line":3509},21,[3511,3516,3521,3526,3530,3535],{"type":42,"tag":1385,"props":3512,"children":3513},{"style":2116},[3514],{"type":47,"value":3515},"  --radius-sm: calc(var(--radius) ",{"type":42,"tag":1385,"props":3517,"children":3518},{"style":1402},[3519],{"type":47,"value":3520},"*",{"type":42,"tag":1385,"props":3522,"children":3523},{"style":2116},[3524],{"type":47,"value":3525}," 0",{"type":42,"tag":1385,"props":3527,"children":3528},{"style":1597},[3529],{"type":47,"value":1801},{"type":42,"tag":1385,"props":3531,"children":3532},{"style":1402},[3533],{"type":47,"value":3534},"5",{"type":42,"tag":1385,"props":3536,"children":3537},{"style":2116},[3538],{"type":47,"value":3279},{"type":42,"tag":1385,"props":3540,"children":3542},{"class":1387,"line":3541},22,[3543],{"type":42,"tag":1385,"props":3544,"children":3545},{"style":2116},[3546],{"type":47,"value":3547},"  --radius-md: var(--radius);\n",{"type":42,"tag":1385,"props":3549,"children":3551},{"class":1387,"line":3550},23,[3552,3557,3561,3566,3570,3574],{"type":42,"tag":1385,"props":3553,"children":3554},{"style":2116},[3555],{"type":47,"value":3556},"  --radius-lg: calc(var(--radius) ",{"type":42,"tag":1385,"props":3558,"children":3559},{"style":1402},[3560],{"type":47,"value":3520},{"type":42,"tag":1385,"props":3562,"children":3563},{"style":2116},[3564],{"type":47,"value":3565}," 1",{"type":42,"tag":1385,"props":3567,"children":3568},{"style":1597},[3569],{"type":47,"value":1801},{"type":42,"tag":1385,"props":3571,"children":3572},{"style":1402},[3573],{"type":47,"value":3534},{"type":42,"tag":1385,"props":3575,"children":3576},{"style":2116},[3577],{"type":47,"value":3279},{"type":42,"tag":1385,"props":3579,"children":3581},{"class":1387,"line":3580},24,[3582],{"type":42,"tag":1385,"props":3583,"children":3584},{"style":1597},[3585],{"type":47,"value":1905},{"type":42,"tag":57,"props":3587,"children":3588},{},[3589],{"type":42,"tag":2518,"props":3590,"children":3591},{},[3592],{"type":47,"value":3593},"Note: Uses Tailwind CSS v4+ @import syntax. For v3, use @tailwind directives instead.",{"type":42,"tag":445,"props":3595,"children":3597},{"id":3596},"form-handling",[3598],{"type":47,"value":3599},"Form Handling",{"type":42,"tag":1001,"props":3601,"children":3605},{"className":3602,"code":3603,"language":3604,"meta":1009,"style":1009},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform\u002Fresolvers\u002Fzod';\nimport { z } from 'zod';\n\nconst schema = z.object({\n  email: z.string().email(),\n  password: z.string().min(8)\n});\n\nfunction LoginForm() {\n  const form = useForm({\n    resolver: zodResolver(schema),\n    defaultValues: { email: '', password: '' }\n  });\n\n  async function onSubmit(data: z.infer\u003Ctypeof schema>) {\n    \u002F\u002F Handle form submission\n  }\n\n  return \u003Cform onSubmit={form.handleSubmit(onSubmit)}>...\u003C\u002Fform>;\n}\n","tsx",[3606],{"type":42,"tag":135,"props":3607,"children":3608},{"__ignoreMap":1009},[3609,3650,3691,3732,3739,3778,3824,3874,3889,3896,3917,3946,3979,4030,4046,4053,4117,4125,4132,4139,4208],{"type":42,"tag":1385,"props":3610,"children":3611},{"class":1387,"line":1388},[3612,3616,3620,3625,3629,3633,3637,3642,3646],{"type":42,"tag":1385,"props":3613,"children":3614},{"style":2105},[3615],{"type":47,"value":2108},{"type":42,"tag":1385,"props":3617,"children":3618},{"style":1597},[3619],{"type":47,"value":2113},{"type":42,"tag":1385,"props":3621,"children":3622},{"style":2116},[3623],{"type":47,"value":3624}," useForm",{"type":42,"tag":1385,"props":3626,"children":3627},{"style":1597},[3628],{"type":47,"value":2124},{"type":42,"tag":1385,"props":3630,"children":3631},{"style":2105},[3632],{"type":47,"value":2129},{"type":42,"tag":1385,"props":3634,"children":3635},{"style":1597},[3636],{"type":47,"value":2134},{"type":42,"tag":1385,"props":3638,"children":3639},{"style":1408},[3640],{"type":47,"value":3641},"react-hook-form",{"type":42,"tag":1385,"props":3643,"children":3644},{"style":1597},[3645],{"type":47,"value":2432},{"type":42,"tag":1385,"props":3647,"children":3648},{"style":1597},[3649],{"type":47,"value":3208},{"type":42,"tag":1385,"props":3651,"children":3652},{"class":1387,"line":1398},[3653,3657,3661,3666,3670,3674,3678,3683,3687],{"type":42,"tag":1385,"props":3654,"children":3655},{"style":2105},[3656],{"type":47,"value":2108},{"type":42,"tag":1385,"props":3658,"children":3659},{"style":1597},[3660],{"type":47,"value":2113},{"type":42,"tag":1385,"props":3662,"children":3663},{"style":2116},[3664],{"type":47,"value":3665}," zodResolver",{"type":42,"tag":1385,"props":3667,"children":3668},{"style":1597},[3669],{"type":47,"value":2124},{"type":42,"tag":1385,"props":3671,"children":3672},{"style":2105},[3673],{"type":47,"value":2129},{"type":42,"tag":1385,"props":3675,"children":3676},{"style":1597},[3677],{"type":47,"value":2134},{"type":42,"tag":1385,"props":3679,"children":3680},{"style":1408},[3681],{"type":47,"value":3682},"@hookform\u002Fresolvers\u002Fzod",{"type":42,"tag":1385,"props":3684,"children":3685},{"style":1597},[3686],{"type":47,"value":2432},{"type":42,"tag":1385,"props":3688,"children":3689},{"style":1597},[3690],{"type":47,"value":3208},{"type":42,"tag":1385,"props":3692,"children":3693},{"class":1387,"line":1434},[3694,3698,3702,3707,3711,3715,3719,3724,3728],{"type":42,"tag":1385,"props":3695,"children":3696},{"style":2105},[3697],{"type":47,"value":2108},{"type":42,"tag":1385,"props":3699,"children":3700},{"style":1597},[3701],{"type":47,"value":2113},{"type":42,"tag":1385,"props":3703,"children":3704},{"style":2116},[3705],{"type":47,"value":3706}," z",{"type":42,"tag":1385,"props":3708,"children":3709},{"style":1597},[3710],{"type":47,"value":2124},{"type":42,"tag":1385,"props":3712,"children":3713},{"style":2105},[3714],{"type":47,"value":2129},{"type":42,"tag":1385,"props":3716,"children":3717},{"style":1597},[3718],{"type":47,"value":2134},{"type":42,"tag":1385,"props":3720,"children":3721},{"style":1408},[3722],{"type":47,"value":3723},"zod",{"type":42,"tag":1385,"props":3725,"children":3726},{"style":1597},[3727],{"type":47,"value":2432},{"type":42,"tag":1385,"props":3729,"children":3730},{"style":1597},[3731],{"type":47,"value":3208},{"type":42,"tag":1385,"props":3733,"children":3734},{"class":1387,"line":1443},[3735],{"type":42,"tag":1385,"props":3736,"children":3737},{"emptyLinePlaceholder":1447},[3738],{"type":47,"value":1450},{"type":42,"tag":1385,"props":3740,"children":3741},{"class":1387,"line":1453},[3742,3747,3752,3757,3761,3765,3770,3774],{"type":42,"tag":1385,"props":3743,"children":3744},{"style":1611},[3745],{"type":47,"value":3746},"const",{"type":42,"tag":1385,"props":3748,"children":3749},{"style":2116},[3750],{"type":47,"value":3751}," schema ",{"type":42,"tag":1385,"props":3753,"children":3754},{"style":1597},[3755],{"type":47,"value":3756},"=",{"type":42,"tag":1385,"props":3758,"children":3759},{"style":2116},[3760],{"type":47,"value":3706},{"type":42,"tag":1385,"props":3762,"children":3763},{"style":1597},[3764],{"type":47,"value":1801},{"type":42,"tag":1385,"props":3766,"children":3767},{"style":2291},[3768],{"type":47,"value":3769},"object",{"type":42,"tag":1385,"props":3771,"children":3772},{"style":2116},[3773],{"type":47,"value":2298},{"type":42,"tag":1385,"props":3775,"children":3776},{"style":1597},[3777],{"type":47,"value":1600},{"type":42,"tag":1385,"props":3779,"children":3780},{"class":1387,"line":1462},[3781,3786,3790,3794,3798,3803,3807,3811,3816,3820],{"type":42,"tag":1385,"props":3782,"children":3783},{"style":2308},[3784],{"type":47,"value":3785},"  email",{"type":42,"tag":1385,"props":3787,"children":3788},{"style":1597},[3789],{"type":47,"value":1624},{"type":42,"tag":1385,"props":3791,"children":3792},{"style":2116},[3793],{"type":47,"value":3706},{"type":42,"tag":1385,"props":3795,"children":3796},{"style":1597},[3797],{"type":47,"value":1801},{"type":42,"tag":1385,"props":3799,"children":3800},{"style":2291},[3801],{"type":47,"value":3802},"string",{"type":42,"tag":1385,"props":3804,"children":3805},{"style":2116},[3806],{"type":47,"value":2332},{"type":42,"tag":1385,"props":3808,"children":3809},{"style":1597},[3810],{"type":47,"value":1801},{"type":42,"tag":1385,"props":3812,"children":3813},{"style":2291},[3814],{"type":47,"value":3815},"email",{"type":42,"tag":1385,"props":3817,"children":3818},{"style":2116},[3819],{"type":47,"value":2332},{"type":42,"tag":1385,"props":3821,"children":3822},{"style":1597},[3823],{"type":47,"value":1810},{"type":42,"tag":1385,"props":3825,"children":3826},{"class":1387,"line":1475},[3827,3832,3836,3840,3844,3848,3852,3856,3861,3865,3870],{"type":42,"tag":1385,"props":3828,"children":3829},{"style":2308},[3830],{"type":47,"value":3831},"  password",{"type":42,"tag":1385,"props":3833,"children":3834},{"style":1597},[3835],{"type":47,"value":1624},{"type":42,"tag":1385,"props":3837,"children":3838},{"style":2116},[3839],{"type":47,"value":3706},{"type":42,"tag":1385,"props":3841,"children":3842},{"style":1597},[3843],{"type":47,"value":1801},{"type":42,"tag":1385,"props":3845,"children":3846},{"style":2291},[3847],{"type":47,"value":3802},{"type":42,"tag":1385,"props":3849,"children":3850},{"style":2116},[3851],{"type":47,"value":2332},{"type":42,"tag":1385,"props":3853,"children":3854},{"style":1597},[3855],{"type":47,"value":1801},{"type":42,"tag":1385,"props":3857,"children":3858},{"style":2291},[3859],{"type":47,"value":3860},"min",{"type":42,"tag":1385,"props":3862,"children":3863},{"style":2116},[3864],{"type":47,"value":2298},{"type":42,"tag":1385,"props":3866,"children":3867},{"style":1845},[3868],{"type":47,"value":3869},"8",{"type":42,"tag":1385,"props":3871,"children":3872},{"style":2116},[3873],{"type":47,"value":2513},{"type":42,"tag":1385,"props":3875,"children":3876},{"class":1387,"line":1483},[3877,3881,3885],{"type":42,"tag":1385,"props":3878,"children":3879},{"style":1597},[3880],{"type":47,"value":2508},{"type":42,"tag":1385,"props":3882,"children":3883},{"style":2116},[3884],{"type":47,"value":252},{"type":42,"tag":1385,"props":3886,"children":3887},{"style":1597},[3888],{"type":47,"value":3208},{"type":42,"tag":1385,"props":3890,"children":3891},{"class":1387,"line":1492},[3892],{"type":42,"tag":1385,"props":3893,"children":3894},{"emptyLinePlaceholder":1447},[3895],{"type":47,"value":1450},{"type":42,"tag":1385,"props":3897,"children":3898},{"class":1387,"line":1520},[3899,3904,3909,3913],{"type":42,"tag":1385,"props":3900,"children":3901},{"style":1611},[3902],{"type":47,"value":3903},"function",{"type":42,"tag":1385,"props":3905,"children":3906},{"style":2291},[3907],{"type":47,"value":3908}," LoginForm",{"type":42,"tag":1385,"props":3910,"children":3911},{"style":1597},[3912],{"type":47,"value":2332},{"type":42,"tag":1385,"props":3914,"children":3915},{"style":1597},[3916],{"type":47,"value":1771},{"type":42,"tag":1385,"props":3918,"children":3919},{"class":1387,"line":1541},[3920,3925,3929,3934,3938,3942],{"type":42,"tag":1385,"props":3921,"children":3922},{"style":1611},[3923],{"type":47,"value":3924},"  const",{"type":42,"tag":1385,"props":3926,"children":3927},{"style":2116},[3928],{"type":47,"value":2630},{"type":42,"tag":1385,"props":3930,"children":3931},{"style":1597},[3932],{"type":47,"value":3933}," =",{"type":42,"tag":1385,"props":3935,"children":3936},{"style":2291},[3937],{"type":47,"value":3624},{"type":42,"tag":1385,"props":3939,"children":3940},{"style":2308},[3941],{"type":47,"value":2298},{"type":42,"tag":1385,"props":3943,"children":3944},{"style":1597},[3945],{"type":47,"value":1600},{"type":42,"tag":1385,"props":3947,"children":3948},{"class":1387,"line":1890},[3949,3954,3958,3962,3966,3971,3975],{"type":42,"tag":1385,"props":3950,"children":3951},{"style":2308},[3952],{"type":47,"value":3953},"    resolver",{"type":42,"tag":1385,"props":3955,"children":3956},{"style":1597},[3957],{"type":47,"value":1624},{"type":42,"tag":1385,"props":3959,"children":3960},{"style":2291},[3961],{"type":47,"value":3665},{"type":42,"tag":1385,"props":3963,"children":3964},{"style":2308},[3965],{"type":47,"value":2298},{"type":42,"tag":1385,"props":3967,"children":3968},{"style":2116},[3969],{"type":47,"value":3970},"schema",{"type":42,"tag":1385,"props":3972,"children":3973},{"style":2308},[3974],{"type":47,"value":252},{"type":42,"tag":1385,"props":3976,"children":3977},{"style":1597},[3978],{"type":47,"value":1810},{"type":42,"tag":1385,"props":3980,"children":3981},{"class":1387,"line":1899},[3982,3987,3991,3995,4000,4004,4009,4013,4018,4022,4026],{"type":42,"tag":1385,"props":3983,"children":3984},{"style":2308},[3985],{"type":47,"value":3986},"    defaultValues",{"type":42,"tag":1385,"props":3988,"children":3989},{"style":1597},[3990],{"type":47,"value":1624},{"type":42,"tag":1385,"props":3992,"children":3993},{"style":1597},[3994],{"type":47,"value":2113},{"type":42,"tag":1385,"props":3996,"children":3997},{"style":2308},[3998],{"type":47,"value":3999}," email",{"type":42,"tag":1385,"props":4001,"children":4002},{"style":1597},[4003],{"type":47,"value":1624},{"type":42,"tag":1385,"props":4005,"children":4006},{"style":1597},[4007],{"type":47,"value":4008}," ''",{"type":42,"tag":1385,"props":4010,"children":4011},{"style":1597},[4012],{"type":47,"value":2460},{"type":42,"tag":1385,"props":4014,"children":4015},{"style":2308},[4016],{"type":47,"value":4017}," password",{"type":42,"tag":1385,"props":4019,"children":4020},{"style":1597},[4021],{"type":47,"value":1624},{"type":42,"tag":1385,"props":4023,"children":4024},{"style":1597},[4025],{"type":47,"value":4008},{"type":42,"tag":1385,"props":4027,"children":4028},{"style":1597},[4029],{"type":47,"value":1738},{"type":42,"tag":1385,"props":4031,"children":4032},{"class":1387,"line":2399},[4033,4038,4042],{"type":42,"tag":1385,"props":4034,"children":4035},{"style":1597},[4036],{"type":47,"value":4037},"  }",{"type":42,"tag":1385,"props":4039,"children":4040},{"style":2308},[4041],{"type":47,"value":252},{"type":42,"tag":1385,"props":4043,"children":4044},{"style":1597},[4045],{"type":47,"value":3208},{"type":42,"tag":1385,"props":4047,"children":4048},{"class":1387,"line":2416},[4049],{"type":42,"tag":1385,"props":4050,"children":4051},{"emptyLinePlaceholder":1447},[4052],{"type":47,"value":1450},{"type":42,"tag":1385,"props":4054,"children":4055},{"class":1387,"line":2484},[4056,4061,4066,4071,4075,4081,4085,4089,4093,4098,4103,4108,4113],{"type":42,"tag":1385,"props":4057,"children":4058},{"style":1611},[4059],{"type":47,"value":4060},"  async",{"type":42,"tag":1385,"props":4062,"children":4063},{"style":1611},[4064],{"type":47,"value":4065}," function",{"type":42,"tag":1385,"props":4067,"children":4068},{"style":2291},[4069],{"type":47,"value":4070}," onSubmit",{"type":42,"tag":1385,"props":4072,"children":4073},{"style":1597},[4074],{"type":47,"value":2298},{"type":42,"tag":1385,"props":4076,"children":4078},{"style":4077},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[4079],{"type":47,"value":4080},"data",{"type":42,"tag":1385,"props":4082,"children":4083},{"style":1597},[4084],{"type":47,"value":1624},{"type":42,"tag":1385,"props":4086,"children":4087},{"style":1402},[4088],{"type":47,"value":3706},{"type":42,"tag":1385,"props":4090,"children":4091},{"style":1597},[4092],{"type":47,"value":1801},{"type":42,"tag":1385,"props":4094,"children":4095},{"style":1402},[4096],{"type":47,"value":4097},"infer",{"type":42,"tag":1385,"props":4099,"children":4100},{"style":1597},[4101],{"type":47,"value":4102},"\u003Ctypeof",{"type":42,"tag":1385,"props":4104,"children":4105},{"style":2116},[4106],{"type":47,"value":4107}," schema",{"type":42,"tag":1385,"props":4109,"children":4110},{"style":1597},[4111],{"type":47,"value":4112},">)",{"type":42,"tag":1385,"props":4114,"children":4115},{"style":1597},[4116],{"type":47,"value":1771},{"type":42,"tag":1385,"props":4118,"children":4119},{"class":1387,"line":2493},[4120],{"type":42,"tag":1385,"props":4121,"children":4122},{"style":1392},[4123],{"type":47,"value":4124},"    \u002F\u002F Handle form submission\n",{"type":42,"tag":1385,"props":4126,"children":4127},{"class":1387,"line":2502},[4128],{"type":42,"tag":1385,"props":4129,"children":4130},{"style":1597},[4131],{"type":47,"value":1896},{"type":42,"tag":1385,"props":4133,"children":4134},{"class":1387,"line":3492},[4135],{"type":42,"tag":1385,"props":4136,"children":4137},{"emptyLinePlaceholder":1447},[4138],{"type":47,"value":1450},{"type":42,"tag":1385,"props":4140,"children":4141},{"class":1387,"line":3500},[4142,4147,4152,4157,4161,4166,4170,4174,4179,4184,4189,4194,4199,4203],{"type":42,"tag":1385,"props":4143,"children":4144},{"style":2105},[4145],{"type":47,"value":4146},"  return",{"type":42,"tag":1385,"props":4148,"children":4149},{"style":1597},[4150],{"type":47,"value":4151}," \u003C",{"type":42,"tag":1385,"props":4153,"children":4154},{"style":2308},[4155],{"type":47,"value":4156},"form",{"type":42,"tag":1385,"props":4158,"children":4159},{"style":1611},[4160],{"type":47,"value":4070},{"type":42,"tag":1385,"props":4162,"children":4163},{"style":1597},[4164],{"type":47,"value":4165},"={",{"type":42,"tag":1385,"props":4167,"children":4168},{"style":2116},[4169],{"type":47,"value":4156},{"type":42,"tag":1385,"props":4171,"children":4172},{"style":1597},[4173],{"type":47,"value":1801},{"type":42,"tag":1385,"props":4175,"children":4176},{"style":2291},[4177],{"type":47,"value":4178},"handleSubmit",{"type":42,"tag":1385,"props":4180,"children":4181},{"style":2116},[4182],{"type":47,"value":4183},"(onSubmit)",{"type":42,"tag":1385,"props":4185,"children":4186},{"style":1597},[4187],{"type":47,"value":4188},"}>",{"type":42,"tag":1385,"props":4190,"children":4191},{"style":2116},[4192],{"type":47,"value":4193},"...",{"type":42,"tag":1385,"props":4195,"children":4196},{"style":1597},[4197],{"type":47,"value":4198},"\u003C\u002F",{"type":42,"tag":1385,"props":4200,"children":4201},{"style":2308},[4202],{"type":47,"value":4156},{"type":42,"tag":1385,"props":4204,"children":4205},{"style":1597},[4206],{"type":47,"value":4207},">;\n",{"type":42,"tag":1385,"props":4209,"children":4210},{"class":1387,"line":3509},[4211],{"type":42,"tag":1385,"props":4212,"children":4213},{"style":1597},[4214],{"type":47,"value":1905},{"type":42,"tag":445,"props":4216,"children":4218},{"id":4217},"data-fetching",[4219],{"type":47,"value":530},{"type":42,"tag":1001,"props":4221,"children":4223},{"className":3602,"code":4222,"language":3604,"meta":1009,"style":1009},"import { useQuery, useMutation, useQueryClient } from '@tanstack\u002Freact-query';\n\nfunction UserList() {\n  const queryClient = useQueryClient();\n\n  const { data, isLoading } = useQuery({\n    queryKey: ['users'],\n    queryFn: fetchUsers\n  });\n\n  const createUser = useMutation({\n    mutationFn: createUserAPI,\n    onSuccess: () => {\n      queryClient.invalidateQueries({ queryKey: ['users'] });\n    }\n  });\n\n  if (isLoading) return \u003CLoadingSpinner \u002F>;\n  return \u003CUserGrid users={data} onCreate={createUser.mutate} \u002F>;\n}\n",[4224],{"type":42,"tag":135,"props":4225,"children":4226},{"__ignoreMap":1009},[4227,4286,4293,4313,4341,4348,4393,4431,4448,4463,4470,4498,4519,4545,4613,4620,4635,4642,4684,4746],{"type":42,"tag":1385,"props":4228,"children":4229},{"class":1387,"line":1388},[4230,4234,4238,4243,4247,4252,4256,4261,4265,4269,4273,4278,4282],{"type":42,"tag":1385,"props":4231,"children":4232},{"style":2105},[4233],{"type":47,"value":2108},{"type":42,"tag":1385,"props":4235,"children":4236},{"style":1597},[4237],{"type":47,"value":2113},{"type":42,"tag":1385,"props":4239,"children":4240},{"style":2116},[4241],{"type":47,"value":4242}," useQuery",{"type":42,"tag":1385,"props":4244,"children":4245},{"style":1597},[4246],{"type":47,"value":2460},{"type":42,"tag":1385,"props":4248,"children":4249},{"style":2116},[4250],{"type":47,"value":4251}," useMutation",{"type":42,"tag":1385,"props":4253,"children":4254},{"style":1597},[4255],{"type":47,"value":2460},{"type":42,"tag":1385,"props":4257,"children":4258},{"style":2116},[4259],{"type":47,"value":4260}," useQueryClient",{"type":42,"tag":1385,"props":4262,"children":4263},{"style":1597},[4264],{"type":47,"value":2124},{"type":42,"tag":1385,"props":4266,"children":4267},{"style":2105},[4268],{"type":47,"value":2129},{"type":42,"tag":1385,"props":4270,"children":4271},{"style":1597},[4272],{"type":47,"value":2134},{"type":42,"tag":1385,"props":4274,"children":4275},{"style":1408},[4276],{"type":47,"value":4277},"@tanstack\u002Freact-query",{"type":42,"tag":1385,"props":4279,"children":4280},{"style":1597},[4281],{"type":47,"value":2432},{"type":42,"tag":1385,"props":4283,"children":4284},{"style":1597},[4285],{"type":47,"value":3208},{"type":42,"tag":1385,"props":4287,"children":4288},{"class":1387,"line":1398},[4289],{"type":42,"tag":1385,"props":4290,"children":4291},{"emptyLinePlaceholder":1447},[4292],{"type":47,"value":1450},{"type":42,"tag":1385,"props":4294,"children":4295},{"class":1387,"line":1434},[4296,4300,4305,4309],{"type":42,"tag":1385,"props":4297,"children":4298},{"style":1611},[4299],{"type":47,"value":3903},{"type":42,"tag":1385,"props":4301,"children":4302},{"style":2291},[4303],{"type":47,"value":4304}," UserList",{"type":42,"tag":1385,"props":4306,"children":4307},{"style":1597},[4308],{"type":47,"value":2332},{"type":42,"tag":1385,"props":4310,"children":4311},{"style":1597},[4312],{"type":47,"value":1771},{"type":42,"tag":1385,"props":4314,"children":4315},{"class":1387,"line":1443},[4316,4320,4325,4329,4333,4337],{"type":42,"tag":1385,"props":4317,"children":4318},{"style":1611},[4319],{"type":47,"value":3924},{"type":42,"tag":1385,"props":4321,"children":4322},{"style":2116},[4323],{"type":47,"value":4324}," queryClient",{"type":42,"tag":1385,"props":4326,"children":4327},{"style":1597},[4328],{"type":47,"value":3933},{"type":42,"tag":1385,"props":4330,"children":4331},{"style":2291},[4332],{"type":47,"value":4260},{"type":42,"tag":1385,"props":4334,"children":4335},{"style":2308},[4336],{"type":47,"value":2332},{"type":42,"tag":1385,"props":4338,"children":4339},{"style":1597},[4340],{"type":47,"value":3208},{"type":42,"tag":1385,"props":4342,"children":4343},{"class":1387,"line":1453},[4344],{"type":42,"tag":1385,"props":4345,"children":4346},{"emptyLinePlaceholder":1447},[4347],{"type":47,"value":1450},{"type":42,"tag":1385,"props":4349,"children":4350},{"class":1387,"line":1462},[4351,4355,4359,4364,4368,4373,4377,4381,4385,4389],{"type":42,"tag":1385,"props":4352,"children":4353},{"style":1611},[4354],{"type":47,"value":3924},{"type":42,"tag":1385,"props":4356,"children":4357},{"style":1597},[4358],{"type":47,"value":2113},{"type":42,"tag":1385,"props":4360,"children":4361},{"style":2116},[4362],{"type":47,"value":4363}," data",{"type":42,"tag":1385,"props":4365,"children":4366},{"style":1597},[4367],{"type":47,"value":2460},{"type":42,"tag":1385,"props":4369,"children":4370},{"style":2116},[4371],{"type":47,"value":4372}," isLoading",{"type":42,"tag":1385,"props":4374,"children":4375},{"style":1597},[4376],{"type":47,"value":2124},{"type":42,"tag":1385,"props":4378,"children":4379},{"style":1597},[4380],{"type":47,"value":3933},{"type":42,"tag":1385,"props":4382,"children":4383},{"style":2291},[4384],{"type":47,"value":4242},{"type":42,"tag":1385,"props":4386,"children":4387},{"style":2308},[4388],{"type":47,"value":2298},{"type":42,"tag":1385,"props":4390,"children":4391},{"style":1597},[4392],{"type":47,"value":1600},{"type":42,"tag":1385,"props":4394,"children":4395},{"class":1387,"line":1475},[4396,4401,4405,4409,4413,4418,4422,4427],{"type":42,"tag":1385,"props":4397,"children":4398},{"style":2308},[4399],{"type":47,"value":4400},"    queryKey",{"type":42,"tag":1385,"props":4402,"children":4403},{"style":1597},[4404],{"type":47,"value":1624},{"type":42,"tag":1385,"props":4406,"children":4407},{"style":2308},[4408],{"type":47,"value":1861},{"type":42,"tag":1385,"props":4410,"children":4411},{"style":1597},[4412],{"type":47,"value":2432},{"type":42,"tag":1385,"props":4414,"children":4415},{"style":1408},[4416],{"type":47,"value":4417},"users",{"type":42,"tag":1385,"props":4419,"children":4420},{"style":1597},[4421],{"type":47,"value":2432},{"type":42,"tag":1385,"props":4423,"children":4424},{"style":2308},[4425],{"type":47,"value":4426},"]",{"type":42,"tag":1385,"props":4428,"children":4429},{"style":1597},[4430],{"type":47,"value":1810},{"type":42,"tag":1385,"props":4432,"children":4433},{"class":1387,"line":1483},[4434,4439,4443],{"type":42,"tag":1385,"props":4435,"children":4436},{"style":2308},[4437],{"type":47,"value":4438},"    queryFn",{"type":42,"tag":1385,"props":4440,"children":4441},{"style":1597},[4442],{"type":47,"value":1624},{"type":42,"tag":1385,"props":4444,"children":4445},{"style":2116},[4446],{"type":47,"value":4447}," fetchUsers\n",{"type":42,"tag":1385,"props":4449,"children":4450},{"class":1387,"line":1492},[4451,4455,4459],{"type":42,"tag":1385,"props":4452,"children":4453},{"style":1597},[4454],{"type":47,"value":4037},{"type":42,"tag":1385,"props":4456,"children":4457},{"style":2308},[4458],{"type":47,"value":252},{"type":42,"tag":1385,"props":4460,"children":4461},{"style":1597},[4462],{"type":47,"value":3208},{"type":42,"tag":1385,"props":4464,"children":4465},{"class":1387,"line":1520},[4466],{"type":42,"tag":1385,"props":4467,"children":4468},{"emptyLinePlaceholder":1447},[4469],{"type":47,"value":1450},{"type":42,"tag":1385,"props":4471,"children":4472},{"class":1387,"line":1541},[4473,4477,4482,4486,4490,4494],{"type":42,"tag":1385,"props":4474,"children":4475},{"style":1611},[4476],{"type":47,"value":3924},{"type":42,"tag":1385,"props":4478,"children":4479},{"style":2116},[4480],{"type":47,"value":4481}," createUser",{"type":42,"tag":1385,"props":4483,"children":4484},{"style":1597},[4485],{"type":47,"value":3933},{"type":42,"tag":1385,"props":4487,"children":4488},{"style":2291},[4489],{"type":47,"value":4251},{"type":42,"tag":1385,"props":4491,"children":4492},{"style":2308},[4493],{"type":47,"value":2298},{"type":42,"tag":1385,"props":4495,"children":4496},{"style":1597},[4497],{"type":47,"value":1600},{"type":42,"tag":1385,"props":4499,"children":4500},{"class":1387,"line":1890},[4501,4506,4510,4515],{"type":42,"tag":1385,"props":4502,"children":4503},{"style":2308},[4504],{"type":47,"value":4505},"    mutationFn",{"type":42,"tag":1385,"props":4507,"children":4508},{"style":1597},[4509],{"type":47,"value":1624},{"type":42,"tag":1385,"props":4511,"children":4512},{"style":2116},[4513],{"type":47,"value":4514}," createUserAPI",{"type":42,"tag":1385,"props":4516,"children":4517},{"style":1597},[4518],{"type":47,"value":1810},{"type":42,"tag":1385,"props":4520,"children":4521},{"class":1387,"line":1899},[4522,4527,4531,4536,4541],{"type":42,"tag":1385,"props":4523,"children":4524},{"style":2291},[4525],{"type":47,"value":4526},"    onSuccess",{"type":42,"tag":1385,"props":4528,"children":4529},{"style":1597},[4530],{"type":47,"value":1624},{"type":42,"tag":1385,"props":4532,"children":4533},{"style":1597},[4534],{"type":47,"value":4535}," ()",{"type":42,"tag":1385,"props":4537,"children":4538},{"style":1611},[4539],{"type":47,"value":4540}," =>",{"type":42,"tag":1385,"props":4542,"children":4543},{"style":1597},[4544],{"type":47,"value":1771},{"type":42,"tag":1385,"props":4546,"children":4547},{"class":1387,"line":2399},[4548,4553,4557,4562,4566,4571,4576,4580,4584,4588,4592,4596,4601,4605,4609],{"type":42,"tag":1385,"props":4549,"children":4550},{"style":2116},[4551],{"type":47,"value":4552},"      queryClient",{"type":42,"tag":1385,"props":4554,"children":4555},{"style":1597},[4556],{"type":47,"value":1801},{"type":42,"tag":1385,"props":4558,"children":4559},{"style":2291},[4560],{"type":47,"value":4561},"invalidateQueries",{"type":42,"tag":1385,"props":4563,"children":4564},{"style":2308},[4565],{"type":47,"value":2298},{"type":42,"tag":1385,"props":4567,"children":4568},{"style":1597},[4569],{"type":47,"value":4570},"{",{"type":42,"tag":1385,"props":4572,"children":4573},{"style":2308},[4574],{"type":47,"value":4575}," queryKey",{"type":42,"tag":1385,"props":4577,"children":4578},{"style":1597},[4579],{"type":47,"value":1624},{"type":42,"tag":1385,"props":4581,"children":4582},{"style":2308},[4583],{"type":47,"value":1861},{"type":42,"tag":1385,"props":4585,"children":4586},{"style":1597},[4587],{"type":47,"value":2432},{"type":42,"tag":1385,"props":4589,"children":4590},{"style":1408},[4591],{"type":47,"value":4417},{"type":42,"tag":1385,"props":4593,"children":4594},{"style":1597},[4595],{"type":47,"value":2432},{"type":42,"tag":1385,"props":4597,"children":4598},{"style":2308},[4599],{"type":47,"value":4600},"] ",{"type":42,"tag":1385,"props":4602,"children":4603},{"style":1597},[4604],{"type":47,"value":2508},{"type":42,"tag":1385,"props":4606,"children":4607},{"style":2308},[4608],{"type":47,"value":252},{"type":42,"tag":1385,"props":4610,"children":4611},{"style":1597},[4612],{"type":47,"value":3208},{"type":42,"tag":1385,"props":4614,"children":4615},{"class":1387,"line":2416},[4616],{"type":42,"tag":1385,"props":4617,"children":4618},{"style":1597},[4619],{"type":47,"value":1887},{"type":42,"tag":1385,"props":4621,"children":4622},{"class":1387,"line":2484},[4623,4627,4631],{"type":42,"tag":1385,"props":4624,"children":4625},{"style":1597},[4626],{"type":47,"value":4037},{"type":42,"tag":1385,"props":4628,"children":4629},{"style":2308},[4630],{"type":47,"value":252},{"type":42,"tag":1385,"props":4632,"children":4633},{"style":1597},[4634],{"type":47,"value":3208},{"type":42,"tag":1385,"props":4636,"children":4637},{"class":1387,"line":2493},[4638],{"type":42,"tag":1385,"props":4639,"children":4640},{"emptyLinePlaceholder":1447},[4641],{"type":47,"value":1450},{"type":42,"tag":1385,"props":4643,"children":4644},{"class":1387,"line":2502},[4645,4650,4655,4660,4665,4670,4674,4679],{"type":42,"tag":1385,"props":4646,"children":4647},{"style":2105},[4648],{"type":47,"value":4649},"  if",{"type":42,"tag":1385,"props":4651,"children":4652},{"style":2308},[4653],{"type":47,"value":4654}," (",{"type":42,"tag":1385,"props":4656,"children":4657},{"style":2116},[4658],{"type":47,"value":4659},"isLoading",{"type":42,"tag":1385,"props":4661,"children":4662},{"style":2308},[4663],{"type":47,"value":4664},") ",{"type":42,"tag":1385,"props":4666,"children":4667},{"style":2105},[4668],{"type":47,"value":4669},"return",{"type":42,"tag":1385,"props":4671,"children":4672},{"style":1597},[4673],{"type":47,"value":4151},{"type":42,"tag":1385,"props":4675,"children":4676},{"style":1402},[4677],{"type":47,"value":4678},"LoadingSpinner",{"type":42,"tag":1385,"props":4680,"children":4681},{"style":1597},[4682],{"type":47,"value":4683}," \u002F>;\n",{"type":42,"tag":1385,"props":4685,"children":4686},{"class":1387,"line":3492},[4687,4691,4695,4700,4705,4709,4713,4718,4723,4727,4732,4736,4741],{"type":42,"tag":1385,"props":4688,"children":4689},{"style":2105},[4690],{"type":47,"value":4146},{"type":42,"tag":1385,"props":4692,"children":4693},{"style":1597},[4694],{"type":47,"value":4151},{"type":42,"tag":1385,"props":4696,"children":4697},{"style":1402},[4698],{"type":47,"value":4699},"UserGrid",{"type":42,"tag":1385,"props":4701,"children":4702},{"style":1611},[4703],{"type":47,"value":4704}," users",{"type":42,"tag":1385,"props":4706,"children":4707},{"style":1597},[4708],{"type":47,"value":4165},{"type":42,"tag":1385,"props":4710,"children":4711},{"style":2116},[4712],{"type":47,"value":4080},{"type":42,"tag":1385,"props":4714,"children":4715},{"style":1597},[4716],{"type":47,"value":4717},"} ",{"type":42,"tag":1385,"props":4719,"children":4720},{"style":1611},[4721],{"type":47,"value":4722},"onCreate",{"type":42,"tag":1385,"props":4724,"children":4725},{"style":1597},[4726],{"type":47,"value":4165},{"type":42,"tag":1385,"props":4728,"children":4729},{"style":2116},[4730],{"type":47,"value":4731},"createUser",{"type":42,"tag":1385,"props":4733,"children":4734},{"style":1597},[4735],{"type":47,"value":1801},{"type":42,"tag":1385,"props":4737,"children":4738},{"style":2116},[4739],{"type":47,"value":4740},"mutate",{"type":42,"tag":1385,"props":4742,"children":4743},{"style":1597},[4744],{"type":47,"value":4745},"} \u002F>;\n",{"type":42,"tag":1385,"props":4747,"children":4748},{"class":1387,"line":3500},[4749],{"type":42,"tag":1385,"props":4750,"children":4751},{"style":1597},[4752],{"type":47,"value":1905},{"type":42,"tag":50,"props":4754,"children":4756},{"id":4755},"troubleshooting",[4757],{"type":47,"value":4758},"Troubleshooting",{"type":42,"tag":445,"props":4760,"children":4762},{"id":4761},"radix-ui-maintenance-concerns",[4763],{"type":47,"value":4764},"Radix UI Maintenance Concerns",{"type":42,"tag":57,"props":4766,"children":4767},{},[4768],{"type":47,"value":4769},"Radix UI is receiving fewer updates. For new projects or migration concerns:",{"type":42,"tag":74,"props":4771,"children":4772},{},[4773,4785,4790],{"type":42,"tag":78,"props":4774,"children":4775},{},[4776,4777,4783],{"type":47,"value":1161},{"type":42,"tag":135,"props":4778,"children":4780},{"className":4779},[],[4781],{"type":47,"value":4782},"references\u002Fradix-migration-guide.md",{"type":47,"value":4784}," for Base UI migration path",{"type":42,"tag":78,"props":4786,"children":4787},{},[4788],{"type":47,"value":4789},"shadcn\u002Fui now supports Base UI as an alternative",{"type":42,"tag":78,"props":4791,"children":4792},{},[4793],{"type":47,"value":4794},"React Aria is another excellent option (Adobe-backed, superior accessibility)",{"type":42,"tag":445,"props":4796,"children":4798},{"id":4797},"performance-issues",[4799],{"type":47,"value":4800},"Performance Issues",{"type":42,"tag":57,"props":4802,"children":4803},{},[4804],{"type":47,"value":4805},"If app feels slow:",{"type":42,"tag":121,"props":4807,"children":4808},{},[4809,4814,4819,4828],{"type":42,"tag":78,"props":4810,"children":4811},{},[4812],{"type":47,"value":4813},"Enable React Compiler for automatic memoization",{"type":42,"tag":78,"props":4815,"children":4816},{},[4817],{"type":47,"value":4818},"Check Core Web Vitals in Chrome DevTools",{"type":42,"tag":78,"props":4820,"children":4821},{},[4822,4823],{"type":47,"value":2819},{"type":42,"tag":135,"props":4824,"children":4826},{"className":4825},[],[4827],{"type":47,"value":1251},{"type":42,"tag":78,"props":4829,"children":4830},{},[4831],{"type":47,"value":4832},"Consider code-splitting with TanStack Router's lazy loading",{"type":42,"tag":445,"props":4834,"children":4836},{"id":4835},"build-tool-alternatives",[4837],{"type":47,"value":4838},"Build Tool Alternatives",{"type":42,"tag":57,"props":4840,"children":4841},{},[4842],{"type":47,"value":4843},"Newer Vite versions with Rolldown bundler may offer faster builds when stable. Monitor for stable releases.",{"type":42,"tag":50,"props":4845,"children":4847},{"id":4846},"system-requirements",[4848],{"type":47,"value":4849},"System Requirements",{"type":42,"tag":74,"props":4851,"children":4852},{},[4853,4863,4872],{"type":42,"tag":78,"props":4854,"children":4855},{},[4856,4861],{"type":42,"tag":113,"props":4857,"children":4858},{},[4859],{"type":47,"value":4860},"Node.js",{"type":47,"value":4862},": 18+ (or current LTS version)",{"type":42,"tag":78,"props":4864,"children":4865},{},[4866,4870],{"type":42,"tag":113,"props":4867,"children":4868},{},[4869],{"type":47,"value":491},{"type":47,"value":4871},": pnpm recommended for performance",{"type":42,"tag":78,"props":4873,"children":4874},{},[4875,4880],{"type":42,"tag":113,"props":4876,"children":4877},{},[4878],{"type":47,"value":4879},"OS",{"type":47,"value":4881},": macOS, Linux, or Windows with WSL2",{"type":42,"tag":50,"props":4883,"children":4885},{"id":4884},"next-steps",[4886],{"type":47,"value":4887},"Next Steps",{"type":42,"tag":57,"props":4889,"children":4890},{},[4891],{"type":47,"value":4892},"After scaffolding:",{"type":42,"tag":121,"props":4894,"children":4895},{},[4896,4901,4906,4911,4916,4921],{"type":42,"tag":78,"props":4897,"children":4898},{},[4899],{"type":47,"value":4900},"Review the stack template for your complexity level",{"type":42,"tag":78,"props":4902,"children":4903},{},[4904],{"type":47,"value":4905},"Consult design references for styling",{"type":42,"tag":78,"props":4907,"children":4908},{},[4909],{"type":47,"value":4910},"Create a PRD to plan features and design",{"type":42,"tag":78,"props":4912,"children":4913},{},[4914],{"type":47,"value":4915},"Implement following best practices",{"type":42,"tag":78,"props":4917,"children":4918},{},[4919],{"type":47,"value":4920},"Optimize for Core Web Vitals",{"type":42,"tag":78,"props":4922,"children":4923},{},[4924],{"type":47,"value":4925},"Deploy to production (Vercel, Netlify, etc.)",{"type":42,"tag":4927,"props":4928,"children":4929},"hr",{},[],{"type":42,"tag":57,"props":4931,"children":4932},{},[4933,4938],{"type":42,"tag":113,"props":4934,"children":4935},{},[4936],{"type":47,"value":4937},"Remember",{"type":47,"value":4939},": The goal is functional and performant web applications. Start simple, iterate based on user needs, and prioritize user experience over technical complexity.",{"type":42,"tag":4941,"props":4942,"children":4943},"style",{},[4944],{"type":47,"value":4945},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":4947,"total":1388},[4948],{"slug":4,"name":4,"fn":5,"description":6,"org":4949,"tags":4950,"stars":25,"repoUrl":26,"updatedAt":27},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4951,4952,4953,4954],{"name":20,"slug":21,"type":15},{"name":23,"slug":24,"type":15},{"name":13,"slug":14,"type":15},{"name":17,"slug":18,"type":15},{"items":4956,"total":5135},[4957,4981,4999,5015,5029,5045,5059,5071,5083,5095,5111,5123],{"slug":4958,"name":4958,"fn":4959,"description":4960,"org":4961,"tags":4962,"stars":4978,"repoUrl":4979,"updatedAt":4980},"qdrant-horizontal-scaling","guide Qdrant horizontal scaling decisions","Diagnoses and guides Qdrant horizontal scaling decisions. Use when someone asks 'vertical or horizontal?', 'how many nodes?', 'how many shards?', 'how to add nodes', 'resharding', 'data doesn't fit', or 'need more capacity'. Also use when data growth outpaces current deployment.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4963,4966,4969,4972,4975],{"name":4964,"slug":4965,"type":15},"AI Infrastructure","ai-infrastructure",{"name":4967,"slug":4968,"type":15},"Architecture","architecture",{"name":4970,"slug":4971,"type":15},"Capacity Planning","capacity-planning",{"name":4973,"slug":4974,"type":15},"Database","database",{"name":4976,"slug":4977,"type":15},"Qdrant","qdrant",36978,"https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot","2026-04-18T04:46:16.349561",{"slug":4982,"name":4982,"fn":4983,"description":4984,"org":4985,"tags":4986,"stars":4978,"repoUrl":4979,"updatedAt":4998},"qdrant-indexing-performance-optimization","optimize Qdrant indexing performance","Diagnoses and fixes slow Qdrant indexing and data ingestion. Use when someone reports 'uploads are slow', 'indexing takes forever', 'optimizer is stuck', 'HNSW build time too long', or 'data uploaded but search is bad'. Also use when optimizer status shows errors, segments won't merge, or indexing threshold questions arise.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4987,4990,4991,4994,4997],{"name":4988,"slug":4989,"type":15},"Data Engineering","data-engineering",{"name":4973,"slug":4974,"type":15},{"name":4992,"slug":4993,"type":15},"ETL","etl",{"name":4995,"slug":4996,"type":15},"Performance","performance",{"name":4976,"slug":4977,"type":15},"2026-04-18T04:46:02.766357",{"slug":5000,"name":5000,"fn":5001,"description":5002,"org":5003,"tags":5004,"stars":4978,"repoUrl":4979,"updatedAt":5014},"qdrant-memory-usage-optimization","optimize Qdrant memory usage","Diagnoses and reduces Qdrant memory usage. Use when someone reports 'memory too high', 'RAM keeps growing', 'node crashed', 'out of memory', 'memory leak', or asks 'why is memory usage so high?', 'how to reduce RAM?'. Also use when memory doesn't match calculations, quantization didn't help, or nodes crash during recovery.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5005,5008,5009,5012,5013],{"name":5006,"slug":5007,"type":15},"Cost Optimization","cost-optimization",{"name":4973,"slug":4974,"type":15},{"name":5010,"slug":5011,"type":15},"Observability","observability",{"name":4995,"slug":4996,"type":15},{"name":4976,"slug":4977,"type":15},"2026-04-18T04:46:01.525023",{"slug":5016,"name":5016,"fn":5017,"description":5018,"org":5019,"tags":5020,"stars":4978,"repoUrl":4979,"updatedAt":5028},"qdrant-minimize-latency","minimize Qdrant query latency","Guides Qdrant query latency optimization. Use when someone asks 'search is slow', 'how to reduce latency', 'p99 is too high', 'tail latency', 'single query too slow', 'how to make search faster', or 'latency spikes'.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5021,5022,5023,5024,5025],{"name":4967,"slug":4968,"type":15},{"name":4973,"slug":4974,"type":15},{"name":4995,"slug":4996,"type":15},{"name":4976,"slug":4977,"type":15},{"name":5026,"slug":5027,"type":15},"Search","search","2026-04-18T04:46:10.126667",{"slug":5030,"name":5030,"fn":5031,"description":5032,"org":5033,"tags":5034,"stars":4978,"repoUrl":4979,"updatedAt":5044},"qdrant-monitoring-debugging","debug Qdrant production issues with metrics","Diagnoses Qdrant production issues using metrics and observability tools. Use when someone reports 'optimizer stuck', 'indexing too slow', 'memory too high', 'OOM crash', 'queries are slow', 'latency spike', or 'search was fast now it's slow'. Also use when performance degrades without obvious config changes.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5035,5038,5041,5042,5043],{"name":5036,"slug":5037,"type":15},"Debugging","debugging",{"name":5039,"slug":5040,"type":15},"Monitoring","monitoring",{"name":5010,"slug":5011,"type":15},{"name":4995,"slug":4996,"type":15},{"name":4976,"slug":4977,"type":15},"2026-04-18T04:46:06.450784",{"slug":5046,"name":5046,"fn":5047,"description":5048,"org":5049,"tags":5050,"stars":4978,"repoUrl":4979,"updatedAt":5058},"qdrant-monitoring-setup","set up Qdrant monitoring and alerting","Guides Qdrant monitoring setup including Prometheus scraping, health probes, Hybrid Cloud metrics, alerting, and log centralization. Use when someone asks 'how to set up monitoring', 'Prometheus config', 'Grafana dashboard', 'health check endpoints', 'how to scrape Hybrid Cloud', 'what alerts to set', 'how to centralize logs', or 'audit logging'.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5051,5052,5053,5054,5055],{"name":4964,"slug":4965,"type":15},{"name":5039,"slug":5040,"type":15},{"name":5010,"slug":5011,"type":15},{"name":4976,"slug":4977,"type":15},{"name":5056,"slug":5057,"type":15},"SRE","sre","2026-04-18T04:46:05.217192",{"slug":5060,"name":5060,"fn":5061,"description":5062,"org":5063,"tags":5064,"stars":4978,"repoUrl":4979,"updatedAt":5070},"qdrant-scaling-data-volume","scale Qdrant data volume","Guides Qdrant data volume scaling decisions. Use when someone asks 'data doesn't fit on one node', 'too much data', 'need more storage', 'vertical or horizontal scaling', 'tenant scaling', 'time window rotation', or 'data growth exceeds capacity'.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5065,5066,5067,5068,5069],{"name":4964,"slug":4965,"type":15},{"name":4967,"slug":4968,"type":15},{"name":4970,"slug":4971,"type":15},{"name":4973,"slug":4974,"type":15},{"name":4976,"slug":4977,"type":15},"2026-04-18T04:46:07.684464",{"slug":5072,"name":5072,"fn":5073,"description":5074,"org":5075,"tags":5076,"stars":4978,"repoUrl":4979,"updatedAt":5082},"qdrant-scaling-qps","scale Qdrant query throughput","Guides Qdrant query throughput (QPS) scaling. Use when someone asks 'how to increase QPS', 'need more throughput', 'queries per second too low', 'batch search', 'read replicas', or 'how to handle more concurrent queries'.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5077,5078,5079,5080,5081],{"name":4964,"slug":4965,"type":15},{"name":4967,"slug":4968,"type":15},{"name":4973,"slug":4974,"type":15},{"name":4995,"slug":4996,"type":15},{"name":4976,"slug":4977,"type":15},"2026-04-18T04:46:08.905219",{"slug":5084,"name":5084,"fn":5085,"description":5086,"org":5087,"tags":5088,"stars":4978,"repoUrl":4979,"updatedAt":5094},"qdrant-scaling-query-volume","scale Qdrant query volume and pagination","Guides Qdrant query volume scaling. Use when someone asks 'query returns too many results', 'scroll performance', 'large limit values', 'paginating search results', 'fetching many vectors', or 'high cardinality results'.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5089,5090,5091,5092,5093],{"name":4967,"slug":4968,"type":15},{"name":4973,"slug":4974,"type":15},{"name":4995,"slug":4996,"type":15},{"name":4976,"slug":4977,"type":15},{"name":5026,"slug":5027,"type":15},"2026-04-18T04:46:11.371326",{"slug":5096,"name":5096,"fn":5097,"description":5098,"org":5099,"tags":5100,"stars":4978,"repoUrl":4979,"updatedAt":5110},"qdrant-search-quality-diagnosis","diagnose Qdrant search quality issues","Diagnoses Qdrant search quality issues. Use when someone reports 'results are bad', 'wrong results', 'not relevant results', 'missing matches', 'recall is low', 'approximate search worse than exact', 'which embedding model', or 'quality dropped after quantization'. Also use when search quality degrades without obvious changes.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5101,5104,5107,5108,5109],{"name":5102,"slug":5103,"type":15},"Analytics","analytics",{"name":5105,"slug":5106,"type":15},"Data Quality","data-quality",{"name":5036,"slug":5037,"type":15},{"name":4976,"slug":4977,"type":15},{"name":5026,"slug":5027,"type":15},"2026-04-18T04:46:17.579894",{"slug":5112,"name":5112,"fn":5113,"description":5114,"org":5115,"tags":5116,"stars":4978,"repoUrl":4979,"updatedAt":5122},"qdrant-search-speed-optimization","optimize Qdrant search speed","Diagnoses and fixes slow Qdrant search. Use when someone reports 'search is slow', 'high latency', 'queries take too long', 'low QPS', 'throughput too low', 'filtered search is slow', or 'search was fast but now it's slow'. Also use when search performance degrades after config changes or data growth.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5117,5118,5119,5120,5121],{"name":5102,"slug":5103,"type":15},{"name":4973,"slug":4974,"type":15},{"name":4995,"slug":4996,"type":15},{"name":4976,"slug":4977,"type":15},{"name":5026,"slug":5027,"type":15},"2026-04-18T04:46:03.987332",{"slug":5124,"name":5124,"fn":5125,"description":5126,"org":5127,"tags":5128,"stars":4978,"repoUrl":4979,"updatedAt":5134},"qdrant-search-strategies","select optimal Qdrant search strategies","Guides Qdrant search strategy selection. Use when someone asks 'should I use hybrid search?', 'BM25 or sparse vectors?', 'how to rerank?', 'results are not relevant', 'I don't get needed results from my dataset but they're there', 'retrieval quality is not good enough', 'results too similar', 'need diversity', 'MMR', 'relevance feedback', 'recommendation API', 'discovery API', 'ColBERT reranking', or 'missing keyword matches'",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[5129,5130,5131,5132,5133],{"name":4964,"slug":4965,"type":15},{"name":5102,"slug":5103,"type":15},{"name":4967,"slug":4968,"type":15},{"name":4976,"slug":4977,"type":15},{"name":5026,"slug":5027,"type":15},"2026-04-18T04:46:18.812306",45]