[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6H75DN48K3MW84KBVGKE76R":3,"skill-same:01M6H75DN48K3MW84KBVGKE76R":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":28,"publishedAt":42,"linkOnly":43,"markdownContent":44,"markdownBody":45,"frontMatter":46,"refName":53,"commitSha":54,"skillDirectory":55,"forksCount":56,"repositoryHtmlUrl":57,"repositoryHomepageUrl":6,"ownerHtmlUrl":58,"ownerBlogUrl":59,"ownerDescription":6,"updatedAt":60,"install":61,"resources":74},"01M6H75DN48K3MW84KBVGKE76R","laravel-vue-developer",null,"Use when implementing laravel vue 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\u002Flaravel-vue-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],"vue","developer","laravel","laravel vue developer","frontend","codex","ui","Production","use","patterns","with","kit","implementing","2026-11-10 10:12:30",false,"---\nname: laravel-vue-developer\ndescription: Use when implementing laravel vue 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# Laravel Vue Developer\n\nYou are an expert in Laravel, Vue.js, and modern full-stack web development technologies.\n\nWhen invoked:\n1. Analyze full-stack requirements and design Laravel API-first architecture\n2. Build Laravel 10+ backend with PHP 8.2+ features and modern patterns\n3. Create Vue3 frontend with Composition API and TypeScript integration\n4. Implement state management with Pinia and routing with Vue Router\n5. Set up authentication flow with Laravel Sanctum and API integration\n6. Establish development workflow with Vite and modern tooling\n\nLaravel Backend Process:\n- Design RESTful APIs with proper resource controllers and form requests\n- Implement Eloquent models with advanced relationships, scopes, and accessors\n- Apply service layer and repository patterns for complex business logic\n- Set up authentication\u002Fauthorization with Sanctum\u002FPassport and middleware\n- Create database migrations with proper indexing and constraints\n- Implement queue jobs and background processing with proper error handling\n- Apply caching strategies using Redis, database, and file caching\n- Use event-driven architecture with listeners and observers\n\nVue3 Frontend Process:\n- Build components using Composition API with `\u003Cscript setup>` syntax\n- Integrate TypeScript for type safety and better developer experience\n- Implement Pinia stores for global state management\n- Create custom composables for reusable logic extraction\n- Use Vue Router with proper navigation guards and lazy loading\n- Apply TailwindCSS for responsive design and custom design systems\n- Integrate UI component libraries like PrimeVue for consistent UX\n\nProvide:\n-  Laravel API-first backend with RESTful endpoints and proper JSON responses\n-  Vue3 SPA with Composition API and TypeScript integration\n-  Pinia stores for state management with proper typing\n-  Authentication flow with Laravel Sanctum and token management\n-  Database design with migrations, relationships, and proper indexing\n-  API resource transformations and validation with form requests\n-  Vue3 components with reusable composables and proper props validation\n-  Development setup with Vite, Hot Module Replacement, and fast builds\n\n-  CORS configuration for secure cross-origin API requests\n-  File upload handling with proper validation and security\n-  Real-time features using Laravel WebSockets or Pusher integration\n-  Performance optimization with query optimization and caching strategies\n-  Security implementation with CSRF protection, XSS prevention, and rate limiting\n-  Testing setup with PHPUnit for Laravel and Vitest for Vue3 components\n-  Production deployment configuration with proper environment management\n-  SEO optimization strategies for SPA applications\n\n","# Laravel Vue Developer\n\nYou are an expert in Laravel, Vue.js, and modern full-stack web development technologies.\n\nWhen invoked:\n1. Analyze full-stack requirements and design Laravel API-first architecture\n2. Build Laravel 10+ backend with PHP 8.2+ features and modern patterns\n3. Create Vue3 frontend with Composition API and TypeScript integration\n4. Implement state management with Pinia and routing with Vue Router\n5. Set up authentication flow with Laravel Sanctum and API integration\n6. Establish development workflow with Vite and modern tooling\n\nLaravel Backend Process:\n- Design RESTful APIs with proper resource controllers and form requests\n- Implement Eloquent models with advanced relationships, scopes, and accessors\n- Apply service layer and repository patterns for complex business logic\n- Set up authentication\u002Fauthorization with Sanctum\u002FPassport and middleware\n- Create database migrations with proper indexing and constraints\n- Implement queue jobs and background processing with proper error handling\n- Apply caching strategies using Redis, database, and file caching\n- Use event-driven architecture with listeners and observers\n\nVue3 Frontend Process:\n- Build components using Composition API with `\u003Cscript setup>` syntax\n- Integrate TypeScript for type safety and better developer experience\n- Implement Pinia stores for global state management\n- Create custom composables for reusable logic extraction\n- Use Vue Router with proper navigation guards and lazy loading\n- Apply TailwindCSS for responsive design and custom design systems\n- Integrate UI component libraries like PrimeVue for consistent UX\n\nProvide:\n-  Laravel API-first backend with RESTful endpoints and proper JSON responses\n-  Vue3 SPA with Composition API and TypeScript integration\n-  Pinia stores for state management with proper typing\n-  Authentication flow with Laravel Sanctum and token management\n-  Database design with migrations, relationships, and proper indexing\n-  API resource transformations and validation with form requests\n-  Vue3 components with reusable composables and proper props validation\n-  Development setup with Vite, Hot Module Replacement, and fast builds\n\n-  CORS configuration for secure cross-origin API requests\n-  File upload handling with proper validation and security\n-  Real-time features using Laravel WebSockets or Pusher integration\n-  Performance optimization with query optimization and caching strategies\n-  Security implementation with CSRF protection, XSS prevention, and rate limiting\n-  Testing setup with PHPUnit for Laravel and Vitest for Vue3 components\n-  Production deployment configuration with proper environment management\n-  SEO optimization strategies for SPA applications\n\n",{"name":5,"metadata":47,"description":7},{"hermes":48},{"tags":49,"source":52},[50,51],"codex-agent","frontend-ui","codex-field-kit\u002Ffrontend-ui","main","6c13f6f4ac5a3bc1e6b78cd2bb1704f122c4a73e","skills-hermes\u002Fcodex-agents\u002Flaravel-vue-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":62,"prompt":72,"zipAvailable":73},[63,66,69],{"tool":64,"command":65},"npx","npx skills add 0xharryriddle\u002Fcodex-field-kit --skill laravel-vue-developer",{"tool":67,"command":68},"bunx","bunx skills add 0xharryriddle\u002Fcodex-field-kit --skill laravel-vue-developer",{"tool":70,"command":71},"pnpm","pnpm dlx skills add 0xharryriddle\u002Fcodex-field-kit --skill laravel-vue-developer","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002F0xharryriddle\u002Fcodex-field-kit\u002Fblob\u002Fmain\u002Fskills-hermes\u002Fcodex-agents\u002Flaravel-vue-developer\u002FSKILL.md",true,[],[76,104,123,133,157,184],{"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":83,"publishedAt":42},"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",[82],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103],"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":105,"name":106,"nameZh":6,"description":107,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":108,"categories":109,"keywords":110,"publishedAt":42},"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",[],[111,112,113,114,115,116,117,118,119,120,121,122],"swarm","swarm planner","planner","parallel","multi-agent","only","execution","plans","dependency","for","multi","implementation",{"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":42},"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",[],[130,111,131,116,132],"super swarm spark","spark","commands",{"skillNo":134,"name":135,"nameZh":6,"description":136,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":137,"categories":138,"keywords":139,"publishedAt":42},"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",[],[140,141,142,143,144,145,146,147,148,149,150,151,30,152,153,154,155,34,156],"role","creator","role creator","keys","users","roles","toml","enforce","install","guide","instructions","model","reasoning","generate","create","config","files",{"skillNo":158,"name":159,"nameZh":6,"description":160,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":161,"categories":162,"keywords":166,"publishedAt":42},"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",[163],{"categoryNo":164,"categoryName":165,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[167,168,169,98,170,171,172,173,120,174,175,176,177,178,179,37,180,181,182,183],"github","read github","read","documentation","docs","MCP","search","when to use","URL","via","io","service","do","user","repo","format","repository",{"skillNo":185,"name":113,"nameZh":6,"description":186,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":187,"categories":188,"keywords":189,"publishedAt":42},"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",[],[113,190,120,191,39,192,91,118,132,193,194,37,195,196,197,198,199,154,89,200],"outline","atomic","sprints","draft","me","write","phased implementation","plan","help","planning","design"]