[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6DXRFRCNAP6TAGAG45PDBJ4":3,"skill-same:01M6DXRFRCNAP6TAGAG45PDBJ4":75},{"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":41,"linkOnly":42,"markdownContent":43,"markdownBody":44,"frontMatter":45,"refName":47,"commitSha":48,"skillDirectory":49,"forksCount":14,"repositoryHtmlUrl":50,"repositoryHomepageUrl":6,"ownerHtmlUrl":51,"ownerBlogUrl":52,"ownerDescription":53,"updatedAt":54,"install":55,"resources":68},"01M6DXRFRCNAP6TAGAG45PDBJ4","nextjs-best-practices",null,"Next.js App Router principles. Server Components, data fetching, routing patterns.","EthanSheehan\u002FGrid-Sentinel","EthanSheehan","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F174215275?v=4","01M6DX9589ENESB2AYW9YK4Y50","Ethan Sheehan","01M6DX95P06JXASASFQZRFQ1NM",0,"MIT","https:\u002F\u002Fgithub.com\u002FEthanSheehan\u002FGrid-Sentinel\u002Fblob\u002Fmain\u002F.agent\u002Fskills\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],"best practices","nextjs","nextjs best practices","js","app","next","patterns","router","edit","write","read","grep","components","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":46},"Read, Write, Edit, Glob, Grep","main","33d99efaac9ea5758fc27120b467eca96ad020d9",".agent\u002Fskills\u002Fnextjs-best-practices","https:\u002F\u002Fgithub.com\u002FEthanSheehan\u002FGrid-Sentinel","https:\u002F\u002Fgithub.com\u002FEthanSheehan","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fethan-sheehan\u002F","Aerospace Engineering Student at the University of Bristol \u002F\u002F Propulsion Lead at HyPower Bristol","2026-05-22 21:19:23",{"source":8,"skillName":5,"commands":56,"prompt":66,"zipAvailable":67},[57,60,63],{"tool":58,"command":59},"npx","npx skills add EthanSheehan\u002FGrid-Sentinel --skill nextjs-best-practices",{"tool":61,"command":62},"bunx","bunx skills add EthanSheehan\u002FGrid-Sentinel --skill nextjs-best-practices",{"tool":64,"command":65},"pnpm","pnpm dlx skills add EthanSheehan\u002FGrid-Sentinel --skill nextjs-best-practices","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FEthanSheehan\u002FGrid-Sentinel\u002Fblob\u002Fmain\u002F.agent\u002Fskills\u002Fnextjs-best-practices\u002FSKILL.md",true,[69],{"path":70,"resourceType":71,"resourceTypeDesc":72,"sizeBytes":73,"sourceHtmlUrl":74},"resources\u002Fimplementation-playbook.md","REFERENCE","参考文档",19874,"https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fgdpr-data-handling\u002Fresources\u002Fimplementation-playbook.md",[76,105,138,158,172,197],{"skillNo":77,"name":78,"nameZh":6,"description":79,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":80,"categories":81,"keywords":85,"publishedAt":41},"01M6DY3X97YDSKHCCZG9KMASHA","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\u002FEthanSheehan\u002FGrid-Sentinel\u002Fblob\u002Fmain\u002F.agent\u002Fskills\u002Fzapier-make-patterns\u002FSKILL.md",[82],{"categoryNo":83,"categoryName":84,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[86,30,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104],"zapier make patterns","workflow","integrations","how to","apps","platform","but","build","complexity","power","simplicity","use","business","automate","how","apache","code","automation","writing",{"skillNo":106,"name":107,"nameZh":6,"description":108,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":109,"categories":110,"keywords":117,"publishedAt":41},"01M6DY3SVP128ZZPF2478H9JYZ","Cross-Site Scripting and HTML Injection Testing","This skill should be used when the user asks to \"test for XSS vulnerabilities\", \"perform cross-site scripting attacks\", \"identify HTML injection flaws\", \"exploit client-side injection vulnerabilities\", \"steal cookies via XSS\", or \"bypass content security policies\". It provides comprehensive techniques for detecting, exploiting, and understanding XSS and HTML injection attack vectors in web applications.","https:\u002F\u002Fgithub.com\u002FEthanSheehan\u002FGrid-Sentinel\u002Fblob\u002Fmain\u002F.agent\u002Fskills\u002Fxss-html-injection\u002FSKILL.md",[111,114],{"categoryNo":112,"categoryName":113,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":115,"categoryName":116,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发",[118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137],"html injection testing","Cross Site Scripting and HTML Injection Testing","injection","scripting","site","html","testing","exploit","user","applications","xss","cookies","content","web","test","vectors","via","steal","security","vulnerabilities",{"skillNo":139,"name":140,"nameZh":6,"description":141,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":142,"categories":143,"keywords":153,"publishedAt":41},"01M6DY3D694G80Y5N79CD1J575","writing-skills","Use when creating new skills, editing existing skills, or verifying skills work before deployment","https:\u002F\u002Fgithub.com\u002FEthanSheehan\u002FGrid-Sentinel\u002Fblob\u002Fmain\u002F.agent\u002Fskills\u002Fwriting-skills\u002FSKILL.md",[144,145,148],{"categoryNo":112,"categoryName":113,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":146,"categoryName":147,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":149,"categoryName":150,"taxonomyType":151,"taxonomyTypeDesc":152},"01JBSEEDCAT000000000000036","内容创作者","PROFESSION","适用职业",[104,154,155,97,156,157],"writing skills","deployment","editing","work",{"skillNo":159,"name":160,"nameZh":6,"description":161,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":162,"categories":163,"keywords":166,"publishedAt":41},"01M6DY3A7BM31W5Q2QARW00JHS","writing-plans","Use when you have a spec or requirements for a multi-step task, before touching code","https:\u002F\u002Fgithub.com\u002FEthanSheehan\u002FGrid-Sentinel\u002Fblob\u002Fmain\u002F.agent\u002Fskills\u002Fwriting-plans\u002FSKILL.md",[164,165],{"categoryNo":146,"categoryName":147,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":149,"categoryName":150,"taxonomyType":151,"taxonomyTypeDesc":152},[167,104,168,169,170,97,102,171],"writing plans","plans","requirements","task","spec",{"skillNo":173,"name":174,"nameZh":6,"description":175,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":176,"categories":177,"keywords":179,"publishedAt":41},"01M6DY36NSATM95HR7HMVZJYB3","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\u002FEthanSheehan\u002FGrid-Sentinel\u002Fblob\u002Fmain\u002F.agent\u002Fskills\u002Fworkflow-automation\u002FSKILL.md",[178],{"categoryNo":83,"categoryName":84,"taxonomyType":21,"taxonomyTypeDesc":22},[180,103,87,181,182,183,101,184,185,186,187,188,189,190,191,192,193,194,195,196],"Workflow Automation","Production","flow","network","workflows","accessibility","ai agents","execution","scripts","worker","payment","n8n","money","resume","orchestrator","parallel","inngest",{"skillNo":198,"name":199,"nameZh":6,"description":200,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":201,"categories":202,"keywords":204,"publishedAt":41},"01M6DY32QTGD80MQHJ8TPDH53H","WordPress Penetration Testing","This skill should be used when the user asks to \"pentest WordPress sites\", \"scan WordPress for vulnerabilities\", \"enumerate WordPress users, themes, or plugins\", \"exploit WordPress vulnerabilities\", or \"use WPScan\". It provides comprehensive WordPress security assessment methodologies.","https:\u002F\u002Fgithub.com\u002FEthanSheehan\u002FGrid-Sentinel\u002Fblob\u002Fmain\u002F.agent\u002Fskills\u002Fwordpress-penetration-testing\u002FSKILL.md",[203],{"categoryNo":112,"categoryName":113,"taxonomyType":21,"taxonomyTypeDesc":22},[124,199,205,206,207,208,209,210,125,97,126,211,212,137,136],"penetration testing","wordpress","security assessment","sites","scan","pentest","plugins","assessment"]