[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6JJFT8NWEM5VRDGWE9T97KC":3,"skill-same:01M6JJFT8NWEM5VRDGWE9T97KC":72},{"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":23,"publishedAt":44,"linkOnly":45,"markdownContent":46,"markdownBody":47,"frontMatter":48,"refName":50,"commitSha":51,"skillDirectory":52,"forksCount":53,"repositoryHtmlUrl":54,"repositoryHomepageUrl":6,"ownerHtmlUrl":55,"ownerBlogUrl":6,"ownerDescription":56,"updatedAt":57,"install":58,"resources":71},"01M6JJFT8NWEM5VRDGWE9T97KC","nextjs-best-practices",null,"Next.js App Router principles. Server Components, data fetching, routing patterns.","transaurus\u002Fstaging-davila7-claude-code-templates","transaurus","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F210882017?v=4","01M6JH1R6ZCRXGJCTDP5ZKZBE6","Page Turner Agent","01M6JH1RBBR2P6Y0XWDGM4B0G7",0,"MIT","https:\u002F\u002Fgithub.com\u002Ftransaurus\u002Fstaging-davila7-claude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Fnextjs-best-practices\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],"best practices","nextjs","nextjs best practices","write","app router","data fetching","Server Components","principles","app","next","patterns","router","edit","components","read","grep","Next.js","data","server","routing","2026-11-10 10:12:30",false,"---\nname: nextjs-best-practices\ndescription: Next.js App Router principles. Server Components, data fetching, routing patterns.\nallowed-tools: Read, Write, Edit, Glob, Grep\n---\n\n# Next.js Best Practices\n\n> Principles for Next.js App Router development.\n\n---\n\n## 1. Server vs Client Components\n\n### Decision Tree\n\n```\nDoes it need...?\n│\n├── useState, useEffect, event handlers\n│   └── Client Component ('use client')\n│\n├── Direct data fetching, no interactivity\n│   └── Server Component (default)\n│\n└── Both? \n    └── Split: Server parent + Client child\n```\n\n### By Default\n\n| Type | Use |\n|------|-----|\n| **Server** | Data fetching, layout, static content |\n| **Client** | Forms, buttons, interactive UI |\n\n---\n\n## 2. Data Fetching Patterns\n\n### Fetch Strategy\n\n| Pattern | Use |\n|---------|-----|\n| **Default** | Static (cached at build) |\n| **Revalidate** | ISR (time-based refresh) |\n| **No-store** | Dynamic (every request) |\n\n### Data Flow\n\n| Source | Pattern |\n|--------|---------|\n| Database | Server Component fetch |\n| API | fetch with caching |\n| User input | Client state + server action |\n\n---\n\n## 3. Routing Principles\n\n### File Conventions\n\n| File | Purpose |\n|------|---------|\n| `page.tsx` | Route UI |\n| `layout.tsx` | Shared layout |\n| `loading.tsx` | Loading state |\n| `error.tsx` | Error boundary |\n| `not-found.tsx` | 404 page |\n\n### Route Organization\n\n| Pattern | Use |\n|---------|-----|\n| Route groups `(name)` | Organize without URL |\n| Parallel routes `@slot` | Multiple same-level pages |\n| Intercepting `(.)` | Modal overlays |\n\n---\n\n## 4. API Routes\n\n### Route Handlers\n\n| Method | Use |\n|--------|-----|\n| GET | Read data |\n| POST | Create data |\n| PUT\u002FPATCH | Update data |\n| DELETE | Remove data |\n\n### Best Practices\n\n- Validate input with Zod\n- Return proper status codes\n- Handle errors gracefully\n- Use Edge runtime when possible\n\n---\n\n## 5. Performance Principles\n\n### Image Optimization\n\n- Use next\u002Fimage component\n- Set priority for above-fold\n- Provide blur placeholder\n- Use responsive sizes\n\n### Bundle Optimization\n\n- Dynamic imports for heavy components\n- Route-based code splitting (automatic)\n- Analyze with bundle analyzer\n\n---\n\n## 6. Metadata\n\n### Static vs Dynamic\n\n| Type | Use |\n|------|-----|\n| Static export | Fixed metadata |\n| generateMetadata | Dynamic per-route |\n\n### Essential Tags\n\n- title (50-60 chars)\n- description (150-160 chars)\n- Open Graph images\n- Canonical URL\n\n---\n\n## 7. Caching Strategy\n\n### Cache Layers\n\n| Layer | Control |\n|-------|---------|\n| Request | fetch options |\n| Data | revalidate\u002Ftags |\n| Full route | route config |\n\n### Revalidation\n\n| Method | Use |\n|--------|-----|\n| Time-based | `revalidate: 60` |\n| On-demand | `revalidatePath\u002FTag` |\n| No cache | `no-store` |\n\n---\n\n## 8. Server Actions\n\n### Use Cases\n\n- Form submissions\n- Data mutations\n- Revalidation triggers\n\n### Best Practices\n\n- Mark with 'use server'\n- Validate all inputs\n- Return typed responses\n- Handle errors\n\n---\n\n## 9. Anti-Patterns\n\n| ❌ Don't | ✅ Do |\n|----------|-------|\n| 'use client' everywhere | Server by default |\n| Fetch in client components | Fetch in server |\n| Skip loading states | Use loading.tsx |\n| Ignore error boundaries | Use error.tsx |\n| Large client bundles | Dynamic imports |\n\n---\n\n## 10. Project Structure\n\n```\napp\u002F\n├── (marketing)\u002F     # Route group\n│   └── page.tsx\n├── (dashboard)\u002F\n│   ├── layout.tsx   # Dashboard layout\n│   └── page.tsx\n├── api\u002F\n│   └── [resource]\u002F\n│       └── route.ts\n└── components\u002F\n    └── ui\u002F\n```\n\n---\n\n> **Remember:** Server Components are the default for a reason. Start there, add client only when needed.\n","# Next.js Best Practices\n\n> Principles for Next.js App Router development.\n\n---\n\n## 1. Server vs Client Components\n\n### Decision Tree\n\n```\nDoes it need...?\n│\n├── useState, useEffect, event handlers\n│   └── Client Component ('use client')\n│\n├── Direct data fetching, no interactivity\n│   └── Server Component (default)\n│\n└── Both? \n    └── Split: Server parent + Client child\n```\n\n### By Default\n\n| Type | Use |\n|------|-----|\n| **Server** | Data fetching, layout, static content |\n| **Client** | Forms, buttons, interactive UI |\n\n---\n\n## 2. Data Fetching Patterns\n\n### Fetch Strategy\n\n| Pattern | Use |\n|---------|-----|\n| **Default** | Static (cached at build) |\n| **Revalidate** | ISR (time-based refresh) |\n| **No-store** | Dynamic (every request) |\n\n### Data Flow\n\n| Source | Pattern |\n|--------|---------|\n| Database | Server Component fetch |\n| API | fetch with caching |\n| User input | Client state + server action |\n\n---\n\n## 3. Routing Principles\n\n### File Conventions\n\n| File | Purpose |\n|------|---------|\n| `page.tsx` | Route UI |\n| `layout.tsx` | Shared layout |\n| `loading.tsx` | Loading state |\n| `error.tsx` | Error boundary |\n| `not-found.tsx` | 404 page |\n\n### Route Organization\n\n| Pattern | Use |\n|---------|-----|\n| Route groups `(name)` | Organize without URL |\n| Parallel routes `@slot` | Multiple same-level pages |\n| Intercepting `(.)` | Modal overlays |\n\n---\n\n## 4. API Routes\n\n### Route Handlers\n\n| Method | Use |\n|--------|-----|\n| GET | Read data |\n| POST | Create data |\n| PUT\u002FPATCH | Update data |\n| DELETE | Remove data |\n\n### Best Practices\n\n- Validate input with Zod\n- Return proper status codes\n- Handle errors gracefully\n- Use Edge runtime when possible\n\n---\n\n## 5. Performance Principles\n\n### Image Optimization\n\n- Use next\u002Fimage component\n- Set priority for above-fold\n- Provide blur placeholder\n- Use responsive sizes\n\n### Bundle Optimization\n\n- Dynamic imports for heavy components\n- Route-based code splitting (automatic)\n- Analyze with bundle analyzer\n\n---\n\n## 6. Metadata\n\n### Static vs Dynamic\n\n| Type | Use |\n|------|-----|\n| Static export | Fixed metadata |\n| generateMetadata | Dynamic per-route |\n\n### Essential Tags\n\n- title (50-60 chars)\n- description (150-160 chars)\n- Open Graph images\n- Canonical URL\n\n---\n\n## 7. Caching Strategy\n\n### Cache Layers\n\n| Layer | Control |\n|-------|---------|\n| Request | fetch options |\n| Data | revalidate\u002Ftags |\n| Full route | route config |\n\n### Revalidation\n\n| Method | Use |\n|--------|-----|\n| Time-based | `revalidate: 60` |\n| On-demand | `revalidatePath\u002FTag` |\n| No cache | `no-store` |\n\n---\n\n## 8. Server Actions\n\n### Use Cases\n\n- Form submissions\n- Data mutations\n- Revalidation triggers\n\n### Best Practices\n\n- Mark with 'use server'\n- Validate all inputs\n- Return typed responses\n- Handle errors\n\n---\n\n## 9. Anti-Patterns\n\n| ❌ Don't | ✅ Do |\n|----------|-------|\n| 'use client' everywhere | Server by default |\n| Fetch in client components | Fetch in server |\n| Skip loading states | Use loading.tsx |\n| Ignore error boundaries | Use error.tsx |\n| Large client bundles | Dynamic imports |\n\n---\n\n## 10. Project Structure\n\n```\napp\u002F\n├── (marketing)\u002F     # Route group\n│   └── page.tsx\n├── (dashboard)\u002F\n│   ├── layout.tsx   # Dashboard layout\n│   └── page.tsx\n├── api\u002F\n│   └── [resource]\u002F\n│       └── route.ts\n└── components\u002F\n    └── ui\u002F\n```\n\n---\n\n> **Remember:** Server Components are the default for a reason. Start there, add client only when needed.\n",{"name":5,"description":7,"allowed-tools":49},"Read, Write, Edit, Glob, Grep","main","34fa6acf794b9a6310d298cbb8fb8c9420a5edcf","cli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Fnextjs-best-practices",2,"https:\u002F\u002Fgithub.com\u002Ftransaurus\u002Fstaging-davila7-claude-code-templates","https:\u002F\u002Fgithub.com\u002Ftransaurus","Automated works of Page Turner","2026-03-28 10:12:59",{"source":8,"skillName":5,"commands":59,"prompt":69,"zipAvailable":70},[60,63,66],{"tool":61,"command":62},"npx","npx skills add transaurus\u002Fstaging-davila7-claude-code-templates --skill nextjs-best-practices",{"tool":64,"command":65},"bunx","bunx skills add transaurus\u002Fstaging-davila7-claude-code-templates --skill nextjs-best-practices",{"tool":67,"command":68},"pnpm","pnpm dlx skills add transaurus\u002Fstaging-davila7-claude-code-templates --skill nextjs-best-practices","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Ftransaurus\u002Fstaging-davila7-claude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Fnextjs-best-practices\u002FSKILL.md",true,[],[73,102,123,147,167,193],{"skillNo":74,"name":75,"nameZh":6,"description":76,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":77,"categories":78,"keywords":82,"publishedAt":44},"01M6JMRJR3BE0HGWFWDZSB853S","zapier-make-patterns","No-code automation democratizes workflow building. Zapier and Make (formerly Integromat) let non-developers automate business processes without writing code. But no-code doesn't mean no-complexity - these platforms have their own patterns, pitfalls, and breaking points.  This skill covers when to use which platform, how to build reliable automations, and when to graduate to code-based solutions. Key insight: Zapier optimizes for simplicity and integrations (7000+ apps), Make optimizes for power","https:\u002F\u002Fgithub.com\u002Ftransaurus\u002Fstaging-davila7-claude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fworkflow-automation\u002Fzapier-make-patterns\u002FSKILL.md",[79],{"categoryNo":80,"categoryName":81,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[83,34,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101],"zapier make patterns","make","zapier","writing","workflow","automation","code","integrations","business","use","power","complexity","platform","apps","how to","No-Code","which","for","spawner",{"skillNo":103,"name":104,"nameZh":6,"description":105,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":108,"publishedAt":44},"01M6JMR8YK6SWPCTG1MCQTMN9S","yeet","Use only when the user explicitly asks to stage, commit, push, and open a GitHub pull request in one flow using the GitHub CLI (`gh`).","https:\u002F\u002Fgithub.com\u002Ftransaurus\u002Fstaging-davila7-claude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fworkflow-automation\u002Fyeet\u002FSKILL.md",[],[104,109,110,111,112,113,114,115,116,117,118,119,92,120,121,122],"cli","github","commit","pull request","openai","pull","push","flow","open","gh","user","only","stage","github cli",{"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":130,"publishedAt":44},"01M6JMQNFE64ZASQK90HARRXW8","workflow-automation","Workflow automation is the infrastructure that makes AI agents reliable. Without durable execution, a network hiccup during a 10-step payment flow means lost money and angry customers. With it, workflows resume exactly where they left off.  This skill covers the platforms (n8n, Temporal, Inngest) and patterns (sequential, parallel, orchestrator-worker) that turn brittle scripts into production-grade automation.  Key insight: The platforms make different tradeoffs. n8n optimizes for accessibility","https:\u002F\u002Fgithub.com\u002Ftransaurus\u002Fstaging-davila7-claude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fworkflow-automation\u002Fworkflow-automation\u002FSKILL.md",[129],{"categoryNo":80,"categoryName":81,"taxonomyType":21,"taxonomyTypeDesc":22},[87,88,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,100,101],"Workflow Automation","ai agents","accessibility","workflows","apache","execution","inngest","parallel","orchestrator","resume","n8n","payment","worker","scripts","temporal","with",{"skillNo":148,"name":149,"nameZh":6,"description":150,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":151,"categories":152,"keywords":153,"publishedAt":44},"01M6JMQDYJ0XETERPHGDR3EVGN","trigger-dev","Trigger.dev expert for background jobs, AI workflows, and reliable async execution with excellent developer experience and TypeScript-first design. Use when: trigger.dev, trigger dev, background task, ai background job, long running task.","https:\u002F\u002Fgithub.com\u002Ftransaurus\u002Fstaging-davila7-claude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fworkflow-automation\u002Ftrigger-dev\u002FSKILL.md",[],[154,155,156,157,158,134,159,135,136,160,92,161,162,163,164,165,166,146,100,101],"dev","trigger dev","trigger","design","typescript","async execution","first","async","developer experience","expert","task","background jobs","long",{"skillNo":168,"name":169,"nameZh":6,"description":170,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":171,"categories":172,"keywords":176,"publishedAt":44},"01M6JMQ5J6KK3GSX9FJCWWK6G6","planning-with-files","Transforms workflow to use Manus-style persistent markdown files for planning, progress tracking, and knowledge storage. Use when starting complex tasks, multi-step projects, research tasks, or when the user mentions planning, organizing work, tracking progress, or wants structured output.","https:\u002F\u002Fgithub.com\u002Ftransaurus\u002Fstaging-davila7-claude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fworkflow-automation\u002Fplanning-with-files\u002FSKILL.md",[173],{"categoryNo":174,"categoryName":175,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000021","资料检索与研究",[177,178,179,146,180,87,181,182,183,184,185,186,92,187,188,189,190,191,192,100],"planning with files","planning","files","with files","storage","tasks","markdown","knowledge","projects","work","manus","structured output","progress","transforms","multi","output",{"skillNo":194,"name":195,"nameZh":6,"description":196,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":197,"categories":198,"keywords":201,"publishedAt":44},"01M6JMPWAT60RXXNEC4V9TRBRS","n8n-workflow-patterns","Proven workflow architectural patterns from real n8n workflows. Use when building new workflows, designing workflow structure, choosing workflow patterns, planning workflow architecture, or asking about webhook processing, HTTP API integration, database operations, AI agent workflows, or scheduled tasks.","https:\u002F\u002Fgithub.com\u002Ftransaurus\u002Fstaging-davila7-claude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fworkflow-automation\u002Fn8n\u002Fn8n-workflow-patterns\u002FSKILL.md",[199,200],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":80,"categoryName":81,"taxonomyType":21,"taxonomyTypeDesc":22},[87,202,141,203,34,204,205,134,206,182,178,207,208,209,210,211,212,213,214,215],"n8n workflow patterns","workflow patterns","n8n workflow","ai agent","architecture","database","api","planning workflow","structure","database operations","webhook","processing","http api","scheduled"]