[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6H79DZBF40ERG3ZX1KMAYMF":3,"skill-same:01M6H79DZBF40ERG3ZX1KMAYMF":69},{"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":36,"linkOnly":37,"markdownContent":38,"markdownBody":39,"frontMatter":40,"refName":47,"commitSha":48,"skillDirectory":49,"forksCount":50,"repositoryHtmlUrl":51,"repositoryHomepageUrl":6,"ownerHtmlUrl":52,"ownerBlogUrl":53,"ownerDescription":6,"updatedAt":54,"install":55,"resources":68},"01M6H79DZBF40ERG3ZX1KMAYMF","nextjs-expert",null,"Use when implementing nextjs 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-expert\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35],"nextjs","expert","nextjs expert","frontend","codex","ui","Production","use","patterns","with","kit","implementing","2026-11-10 10:12:30",false,"---\nname: nextjs-expert\ndescription: Use when implementing nextjs 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 Expert\n\n## Focus Areas\n\n- Mastery of Next.js server-side rendering (SSR) and static site generation (SSG)\n- Implementation of API routes with Next.js\n- Integration with popular CMS and headless CMS options\n- Configuration of custom document and app in Next.js\n- Next.js Image Optimization techniques\n- Use of React hooks and context in a Next.js environment\n- Managing static and dynamic routing in Next.js\n- Employing code splitting and lazy loading for performance\n- Authentication and authorization strategies within Next.js\n- Leveraging TypeScript for Next.js projects\n\n## Approach\n\n- Utilize `getStaticProps` and `getServerSideProps` for optimal data fetching\n- Configure Next.js for both CDN and serverless deployments\n- Favor static generation with incremental static regeneration where possible\n- Use API routes for serverless function scalability\n- Integrate third-party services through environment variables\n- Optimize build performance with webpack and custom Babel configurations\n- Implement custom server logic without ejecting from Next.js\n- Apply industry best practices for SEO in Next.js apps\n- Utilize Vercel's deployment and preview features for dev workflows\n- Structure project for scalability and maintainability\n\n## Quality Checklist\n\n- Ensure all pages render correctly with SSR and SSG\n- Verify API routes return expected JSON responses\n- Review Image component usage for optimized loading\n- Check custom client and server configurations align\n- Validate TypeScript types across the codebase\n- Ensure routing is intuitive and can handle edge cases\n- Confirm static assets are correctly cached\n- Test performance and loading times meet standards\n- Debug and fix any hydration errors\n- Conduct thorough accessibility audits\n\n## Output\n\n- High-performance Next.js applications tailored to static and dynamic content needs\n- APIs seamlessly integrated with external and internal data sources\n- Consistent UI\u002FUX with React and Next.js best practices\n- Modular, maintainable code following Next.js conventions\n- Effective error handling and loading states implemented\n- CI\u002FCD pipelines configured for automatic deployments with Vercel\n- Documented code with inline comments and README guides\n- Optimized media assets using Next.js built-in tools\n- Responsive design with server-side responsive data\n- Secure Next.js apps with environments for different stages\n\n","# Nextjs Expert\n\n## Focus Areas\n\n- Mastery of Next.js server-side rendering (SSR) and static site generation (SSG)\n- Implementation of API routes with Next.js\n- Integration with popular CMS and headless CMS options\n- Configuration of custom document and app in Next.js\n- Next.js Image Optimization techniques\n- Use of React hooks and context in a Next.js environment\n- Managing static and dynamic routing in Next.js\n- Employing code splitting and lazy loading for performance\n- Authentication and authorization strategies within Next.js\n- Leveraging TypeScript for Next.js projects\n\n## Approach\n\n- Utilize `getStaticProps` and `getServerSideProps` for optimal data fetching\n- Configure Next.js for both CDN and serverless deployments\n- Favor static generation with incremental static regeneration where possible\n- Use API routes for serverless function scalability\n- Integrate third-party services through environment variables\n- Optimize build performance with webpack and custom Babel configurations\n- Implement custom server logic without ejecting from Next.js\n- Apply industry best practices for SEO in Next.js apps\n- Utilize Vercel's deployment and preview features for dev workflows\n- Structure project for scalability and maintainability\n\n## Quality Checklist\n\n- Ensure all pages render correctly with SSR and SSG\n- Verify API routes return expected JSON responses\n- Review Image component usage for optimized loading\n- Check custom client and server configurations align\n- Validate TypeScript types across the codebase\n- Ensure routing is intuitive and can handle edge cases\n- Confirm static assets are correctly cached\n- Test performance and loading times meet standards\n- Debug and fix any hydration errors\n- Conduct thorough accessibility audits\n\n## Output\n\n- High-performance Next.js applications tailored to static and dynamic content needs\n- APIs seamlessly integrated with external and internal data sources\n- Consistent UI\u002FUX with React and Next.js best practices\n- Modular, maintainable code following Next.js conventions\n- Effective error handling and loading states implemented\n- CI\u002FCD pipelines configured for automatic deployments with Vercel\n- Documented code with inline comments and README guides\n- Optimized media assets using Next.js built-in tools\n- Responsive design with server-side responsive data\n- Secure Next.js apps with environments for different stages\n\n",{"name":5,"metadata":41,"description":7},{"hermes":42},{"tags":43,"source":46},[44,45],"codex-agent","frontend-ui","codex-field-kit\u002Ffrontend-ui","main","6c13f6f4ac5a3bc1e6b78cd2bb1704f122c4a73e","skills-hermes\u002Fcodex-agents\u002Fnextjs-expert",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":56,"prompt":66,"zipAvailable":67},[57,60,63],{"tool":58,"command":59},"npx","npx skills add 0xharryriddle\u002Fcodex-field-kit --skill nextjs-expert",{"tool":61,"command":62},"bunx","bunx skills add 0xharryriddle\u002Fcodex-field-kit --skill nextjs-expert",{"tool":64,"command":65},"pnpm","pnpm dlx skills add 0xharryriddle\u002Fcodex-field-kit --skill nextjs-expert","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002F0xharryriddle\u002Fcodex-field-kit\u002Fblob\u002Fmain\u002Fskills-hermes\u002Fcodex-agents\u002Fnextjs-expert\u002FSKILL.md",true,[],[70,98,117,127,152,179],{"skillNo":71,"name":72,"nameZh":6,"description":73,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":74,"categories":75,"keywords":77,"publishedAt":36},"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",[76],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97],"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":99,"name":100,"nameZh":6,"description":101,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":102,"categories":103,"keywords":104,"publishedAt":36},"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",[],[105,106,107,108,109,110,111,112,113,114,115,116],"swarm","swarm planner","planner","parallel","multi-agent","only","execution","plans","dependency","for","multi","implementation",{"skillNo":118,"name":119,"nameZh":6,"description":120,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":121,"categories":122,"keywords":123,"publishedAt":36},"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",[],[124,105,125,110,126],"super swarm spark","spark","commands",{"skillNo":128,"name":129,"nameZh":6,"description":130,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":131,"categories":132,"keywords":133,"publishedAt":36},"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",[],[134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,28,151],"role","creator","role creator","keys","users","roles","toml","enforce","install","guide","instructions","model","developer","reasoning","generate","create","config","files",{"skillNo":153,"name":154,"nameZh":6,"description":155,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":156,"categories":157,"keywords":161,"publishedAt":36},"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",[158],{"categoryNo":159,"categoryName":160,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[162,163,164,92,165,166,167,168,114,169,170,171,172,173,174,31,175,176,177,178],"github","read github","read","documentation","docs","MCP","search","when to use","URL","via","io","service","do","user","repo","format","repository",{"skillNo":180,"name":107,"nameZh":6,"description":181,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":182,"categories":183,"keywords":184,"publishedAt":36},"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",[],[107,185,114,186,33,187,85,112,126,188,189,31,190,191,192,193,194,149,83,195],"outline","atomic","sprints","draft","me","write","phased implementation","plan","help","planning","design"]