[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6H79BD9FX790H9G1RFJCS41":3,"skill-same:01M6H79BD9FX790H9G1RFJCS41":77},{"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":28,"publishedAt":44,"linkOnly":45,"markdownContent":46,"markdownBody":47,"frontMatter":48,"refName":55,"commitSha":56,"skillDirectory":57,"forksCount":58,"repositoryHtmlUrl":59,"repositoryHomepageUrl":6,"ownerHtmlUrl":60,"ownerBlogUrl":61,"ownerDescription":6,"updatedAt":62,"install":63,"resources":76},"01M6H79BD9FX790H9G1RFJCS41","nextjs-app-router-developer",null,"Use when implementing nextjs app router functionality with production-grade patterns and safeguards.","0xharryriddle\u002Fcodex-field-kit","0xharryriddle","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F100945007?v=4","01M6H686JV0QKZYP2RWG6B2B8T","harryriddle","01M6H686PVZ8JGKWEG7B3GM5PD",3,"MIT","https:\u002F\u002Fgithub.com\u002F0xharryriddle\u002Fcodex-field-kit\u002Fblob\u002Fmain\u002Fskills-hermes\u002Fcodex-agents\u002Fnextjs-app-router-developer\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],"developer","nextjs","router","app","nextjs app router","nextjs app router developer","frontend","codex","ui","Production","use","patterns","with","kit","implementing","2026-11-10 10:12:30",false,"---\nname: nextjs-app-router-developer\ndescription: Use when implementing nextjs app router functionality with production-grade patterns and safeguards.\nmetadata:\n  hermes:\n    tags: [codex-agent, frontend-ui]\n    source: codex-field-kit\u002Ffrontend-ui\n---\n\n# Nextjs App Router Developer\n\nYou are a Next.js App Router specialist with deep expertise in the latest Next.js features and patterns.\n\nWhen invoked:\n1. Analyze requirements and design Next.js 14+ App Router architecture\n2. Implement React Server Components and Client Components with proper boundaries\n3. Create Server Actions for mutations and form handling\n4. Set up Partial Pre-Rendering (PPR) for optimal performance\n5. Configure advanced caching strategies and revalidation patterns\n6. Implement streaming SSR with Suspense boundaries and loading states\n\nProcess:\n- Start with Server Components by default for optimal performance\n- Add Client Components only when needed for interactivity or browser APIs\n- Implement file-based routing with proper conventions (page.tsx, layout.tsx, loading.tsx, error.tsx)\n- Use Server Actions for mutations and form handling with proper validation\n- Configure caching strategies based on data requirements and revalidation needs\n- Apply Partial Pre-Rendering (PPR) for static and dynamic content optimization\n- Implement streaming with Suspense boundaries and granular loading states\n- Design proper error boundaries and fallback mechanisms at multiple levels\n- Follow TypeScript strict typing and accessibility guidelines\n- Monitor Core Web Vitals and optimize for performance\n\nProvide:\n-  Modern App Router file structure with proper routing conventions\n-  Server and Client Components with clear boundaries and \"use client\" directives\n-  Server Actions with form handling, validation, and error management\n-  Suspense boundaries with loading UI and skeleton screens\n-  Advanced caching configuration (Request Memoization, Data Cache, Route Cache)\n-  Revalidation strategies (revalidatePath, revalidateTag, time-based)\n-  Parallel routes and intercepting routes for complex layouts\n-  Metadata API implementation for SEO optimization\n-  Performance optimization with PPR, streaming, and bundle splitting\n-  TypeScript integration with strict typing for components and actions\n-  Authentication patterns with middleware and route protection\n-  Error handling with not-found pages and global error boundaries\n\n","# Nextjs App Router Developer\n\nYou are a Next.js App Router specialist with deep expertise in the latest Next.js features and patterns.\n\nWhen invoked:\n1. Analyze requirements and design Next.js 14+ App Router architecture\n2. Implement React Server Components and Client Components with proper boundaries\n3. Create Server Actions for mutations and form handling\n4. Set up Partial Pre-Rendering (PPR) for optimal performance\n5. Configure advanced caching strategies and revalidation patterns\n6. Implement streaming SSR with Suspense boundaries and loading states\n\nProcess:\n- Start with Server Components by default for optimal performance\n- Add Client Components only when needed for interactivity or browser APIs\n- Implement file-based routing with proper conventions (page.tsx, layout.tsx, loading.tsx, error.tsx)\n- Use Server Actions for mutations and form handling with proper validation\n- Configure caching strategies based on data requirements and revalidation needs\n- Apply Partial Pre-Rendering (PPR) for static and dynamic content optimization\n- Implement streaming with Suspense boundaries and granular loading states\n- Design proper error boundaries and fallback mechanisms at multiple levels\n- Follow TypeScript strict typing and accessibility guidelines\n- Monitor Core Web Vitals and optimize for performance\n\nProvide:\n-  Modern App Router file structure with proper routing conventions\n-  Server and Client Components with clear boundaries and \"use client\" directives\n-  Server Actions with form handling, validation, and error management\n-  Suspense boundaries with loading UI and skeleton screens\n-  Advanced caching configuration (Request Memoization, Data Cache, Route Cache)\n-  Revalidation strategies (revalidatePath, revalidateTag, time-based)\n-  Parallel routes and intercepting routes for complex layouts\n-  Metadata API implementation for SEO optimization\n-  Performance optimization with PPR, streaming, and bundle splitting\n-  TypeScript integration with strict typing for components and actions\n-  Authentication patterns with middleware and route protection\n-  Error handling with not-found pages and global error boundaries\n\n",{"name":5,"metadata":49,"description":7},{"hermes":50},{"tags":51,"source":54},[52,53],"codex-agent","frontend-ui","codex-field-kit\u002Ffrontend-ui","main","6c13f6f4ac5a3bc1e6b78cd2bb1704f122c4a73e","skills-hermes\u002Fcodex-agents\u002Fnextjs-app-router-developer",0,"https:\u002F\u002Fgithub.com\u002F0xharryriddle\u002Fcodex-field-kit","https:\u002F\u002Fgithub.com\u002F0xharryriddle","https:\u002F\u002Fharryriddle.vercel.app","2026-04-11 11:49:51",{"source":8,"skillName":5,"commands":64,"prompt":74,"zipAvailable":75},[65,68,71],{"tool":66,"command":67},"npx","npx skills add 0xharryriddle\u002Fcodex-field-kit --skill nextjs-app-router-developer",{"tool":69,"command":70},"bunx","bunx skills add 0xharryriddle\u002Fcodex-field-kit --skill nextjs-app-router-developer",{"tool":72,"command":73},"pnpm","pnpm dlx skills add 0xharryriddle\u002Fcodex-field-kit --skill nextjs-app-router-developer","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002F0xharryriddle\u002Fcodex-field-kit\u002Fblob\u002Fmain\u002Fskills-hermes\u002Fcodex-agents\u002Fnextjs-app-router-developer\u002FSKILL.md",true,[],[78,106,125,135,159,186],{"skillNo":79,"name":80,"nameZh":6,"description":81,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":82,"categories":83,"keywords":85,"publishedAt":44},"01M6H7ZKE6MR33HC84QZ1TA6MV","vercel-react-best-practices","React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React\u002FNext.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.","https:\u002F\u002Fgithub.com\u002F0xharryriddle\u002Fcodex-field-kit\u002Fblob\u002Fmain\u002Fskills\u002Fvercel-react-best-practices\u002FSKILL.md",[84],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105],"react best practices","react","vercel react best practices","best practices","vercel","tasks","data fetching","triggers","pages","next","performance optimization","refactoring","Next.js","Optimization","code","guidelines","react components","components","performance","writing",{"skillNo":107,"name":108,"nameZh":6,"description":109,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":110,"categories":111,"keywords":112,"publishedAt":44},"01M6H7ZGC2WK8SEKYHWDNTMDA9","swarm-planner","[EXPLICIT INVOCATION ONLY] Creates dependency-aware implementation plans optimized for parallel multi-agent execution.","https:\u002F\u002Fgithub.com\u002F0xharryriddle\u002Fcodex-field-kit\u002Fblob\u002Fmain\u002Fskills\u002Fswarm-planner\u002FSKILL.md",[],[113,114,115,116,117,118,119,120,121,122,123,124],"swarm","swarm planner","planner","parallel","multi-agent","only","execution","plans","dependency","for","multi","implementation",{"skillNo":126,"name":127,"nameZh":6,"description":128,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":129,"categories":130,"keywords":131,"publishedAt":44},"01M6H7ZD93853RZCYQWH1D38TM","super-swarm-spark","Only to be triggered by explicit super-swarm-spark commands.","https:\u002F\u002Fgithub.com\u002F0xharryriddle\u002Fcodex-field-kit\u002Fblob\u002Fmain\u002Fskills\u002Fsuper-swarm-spark\u002FSKILL.md",[],[132,113,133,118,134],"super swarm spark","spark","commands",{"skillNo":136,"name":137,"nameZh":6,"description":138,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":139,"categories":140,"keywords":141,"publishedAt":44},"01M6H7Z987QBY49JCCPT953EAZ","role-creator","Create and install Codex custom agent roles in ~\u002F.codex\u002Fconfig.toml, generate role config files, enforce supported keys, and guide users through required role inputs (model, reasoning effort, developer_instructions).","https:\u002F\u002Fgithub.com\u002F0xharryriddle\u002Fcodex-field-kit\u002Fblob\u002Fmain\u002Fskills\u002Frole-creator\u002FSKILL.md",[],[142,143,144,145,146,147,148,149,150,151,152,153,29,154,155,156,157,36,158],"role","creator","role creator","keys","users","roles","toml","enforce","install","guide","instructions","model","reasoning","generate","create","config","files",{"skillNo":160,"name":161,"nameZh":6,"description":162,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":163,"categories":164,"keywords":168,"publishedAt":44},"01M6H7Z5TRPMDQ7YSZQXPN1G60","read-github","Read and search GitHub repository documentation via gitmcp.io MCP service.\n\n**WHEN TO USE:**\n- User provides a GitHub URL\n- User mentions a specific repo in owner\u002Frepo format\n- User asks \"what does this repo do?\", \"read the docs for X repo\", or similar\n- User wants to search code or docs within a repo","https:\u002F\u002Fgithub.com\u002F0xharryriddle\u002Fcodex-field-kit\u002Fblob\u002Fmain\u002Fskills\u002Fread-github\u002FSKILL.md",[165],{"categoryNo":166,"categoryName":167,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[169,170,171,100,172,173,174,175,122,176,177,178,179,180,181,39,182,183,184,185],"github","read github","read","documentation","docs","MCP","search","when to use","URL","via","io","service","do","user","repo","format","repository",{"skillNo":187,"name":115,"nameZh":6,"description":188,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":189,"categories":190,"keywords":191,"publishedAt":44},"01M6H7Z215CTKYJ4Y1X6EQWN6M","Create comprehensive, phased implementation plans with sprints and atomic tasks. Use when user says: \"make a plan\", \"create a plan\", \"plan this out\", \"plan the implementation\", \"help me plan\", \"design a plan\", \"draft a plan\", \"write a plan\", \"outline the steps\", \"break this down into tasks\", \"what's the plan for\", or any similar planning request. Also triggers on explicit \"\u002Fplanner\" or \"\u002Fplan\" commands.","https:\u002F\u002Fgithub.com\u002F0xharryriddle\u002Fcodex-field-kit\u002Fblob\u002Fmain\u002Fskills\u002Fplanner\u002FSKILL.md",[],[115,192,122,193,41,194,93,120,134,195,196,39,197,198,199,200,201,156,91,202],"outline","atomic","sprints","draft","me","write","phased implementation","plan","help","planning","design"]