[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6ADCGEF8B96SAZD1GG6DXJG":3,"skill-same:01M6ADCGEF8B96SAZD1GG6DXJG":122},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":37,"publishedAt":48,"linkOnly":49,"markdownContent":50,"markdownBody":51,"frontMatter":52,"refName":53,"commitSha":54,"skillDirectory":55,"forksCount":56,"repositoryHtmlUrl":57,"repositoryHomepageUrl":6,"ownerHtmlUrl":58,"ownerBlogUrl":59,"ownerDescription":60,"updatedAt":61,"install":62,"resources":75},"01M6ADCGEF8B96SAZD1GG6DXJG","spark-app-template",null,"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.","github\u002Fcopilot-plugins","github","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F9919?v=4","01M6AC83DS133TPXFSP1DHNCC6","GitHub","01M6ADCBKW1Y1AK9R99YBK00JX",383,"MIT","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fspark\u002Fskills\u002Fspark-app-template\u002FSKILL.md",[18,23,26,29,34],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000013","分析与可视化",{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":30,"categoryName":31,"taxonomyType":32,"taxonomyTypeDesc":33},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",{"categoryNo":35,"categoryName":36,"taxonomyType":32,"taxonomyTypeDesc":33},"01JBSEEDCAT000000000000033","数据分析师",[38,39,40,41,42,43,44,45,46,47],"spark","spark app template","design","dashboard","web","project structure","design philosophy","design system","create","code","2026-11-10 10:12:30",false,"---\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","# 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",{"name":5,"description":7},"main","b0216dbc8f6f7ac1cfce85e925dfa5d5e423876a","plugins\u002Fspark\u002Fskills\u002Fspark-app-template",161,"https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-plugins","https:\u002F\u002Fgithub.com\u002Fgithub","https:\u002F\u002Fgithub.com\u002Fabout","How people build software.","2026-10-14 08:18:58",{"source":8,"skillName":5,"commands":63,"prompt":73,"zipAvailable":74},[64,67,70],{"tool":65,"command":66},"npx","npx skills add github\u002Fcopilot-plugins --skill spark-app-template",{"tool":68,"command":69},"bunx","bunx skills add github\u002Fcopilot-plugins --skill spark-app-template",{"tool":71,"command":72},"pnpm","pnpm dlx skills add github\u002Fcopilot-plugins --skill spark-app-template","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fspark\u002Fskills\u002Fspark-app-template\u002FSKILL.md",true,[76,82,86,90,94,98,102,106,110,114,118],{"path":77,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":80,"sourceHtmlUrl":81},"references\u002Fcolor-palettes.md","REFERENCE","参考文档",11916,"https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fspark\u002Fskills\u002Fspark-app-template\u002Freferences\u002Fcolor-palettes.md",{"path":83,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":84,"sourceHtmlUrl":85},"references\u002Fcomponent-patterns.md",25590,"https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fspark\u002Fskills\u002Fspark-app-template\u002Freferences\u002Fcomponent-patterns.md",{"path":87,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":88,"sourceHtmlUrl":89},"references\u002Fdesign-system.md",14688,"https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fspark\u002Fskills\u002Fspark-app-template\u002Freferences\u002Fdesign-system.md",{"path":91,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":92,"sourceHtmlUrl":93},"references\u002Fperformance-checklist.md",13022,"https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fspark\u002Fskills\u002Fspark-app-template\u002Freferences\u002Fperformance-checklist.md",{"path":95,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":96,"sourceHtmlUrl":97},"references\u002Fprd-template.md",8392,"https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fspark\u002Fskills\u002Fspark-app-template\u002Freferences\u002Fprd-template.md",{"path":99,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":100,"sourceHtmlUrl":101},"references\u002Fradix-migration-guide.md",7258,"https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fspark\u002Fskills\u002Fspark-app-template\u002Freferences\u002Fradix-migration-guide.md",{"path":103,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":104,"sourceHtmlUrl":105},"references\u002Ftypography-pairings.md",11569,"https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fspark\u002Fskills\u002Fspark-app-template\u002Freferences\u002Ftypography-pairings.md",{"path":107,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":108,"sourceHtmlUrl":109},"stacks\u002Fcomplex-application.md",22712,"https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fspark\u002Fskills\u002Fspark-app-template\u002Fstacks\u002Fcomplex-application.md",{"path":111,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":112,"sourceHtmlUrl":113},"stacks\u002Fcontent-showcase.md",11732,"https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fspark\u002Fskills\u002Fspark-app-template\u002Fstacks\u002Fcontent-showcase.md",{"path":115,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":116,"sourceHtmlUrl":117},"stacks\u002Fdata-dashboard.md",10878,"https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fspark\u002Fskills\u002Fspark-app-template\u002Fstacks\u002Fdata-dashboard.md",{"path":119,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":120,"sourceHtmlUrl":121},"stacks\u002Fdefault-webapp.md",9988,"https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fspark\u002Fskills\u002Fspark-app-template\u002Fstacks\u002Fdefault-webapp.md",[123],{"skillNo":124,"name":125,"nameZh":6,"description":126,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":127,"categories":128,"keywords":129,"publishedAt":48},"01M6ADCD481NCST5K5HPVFADAC","build-performance-analysis","Analyze C++ build performance using vcperf.exe and ETL traces. Use this skill when the user wants to profile a build, understand compile bottlenecks, identify expensive headers or templates, generate JSON analysis reports, or interpret vcperf output. Covers tracing workflows, the \u002FjsonAnalysis flag, reading the resulting JSON schema, and actionable remediation strategies for each bottleneck category.","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fbuild-perf-cpp\u002Fskills\u002Fbuild-performance-analysis\u002FSKILL.md",[],[130,131,132,133,134,135,136,137,138],"performance","build performance analysis","workflows","windows","json schema","generate","etl","compile","tracing"]