[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6H7VF0C8RRD0XFDWQQR91SE":3,"skill-same:01M6H7VF0C8RRD0XFDWQQR91SE":70},{"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":37,"linkOnly":38,"markdownContent":39,"markdownBody":40,"frontMatter":41,"refName":48,"commitSha":49,"skillDirectory":50,"forksCount":51,"repositoryHtmlUrl":52,"repositoryHomepageUrl":6,"ownerHtmlUrl":53,"ownerBlogUrl":54,"ownerDescription":6,"updatedAt":55,"install":56,"resources":69},"01M6H7VF0C8RRD0XFDWQQR91SE","vue-component-architect",null,"Use when vue component decisions involve architecture boundaries, integration tradeoffs, and scale planning.","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\u002Fvue-component-architect\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,36],"component","vue","architect","vue component architect","codex","orchestration","architecture","planning","integration","decisions","use","scale","kit","2026-11-10 10:12:30",false,"---\nname: vue-component-architect\ndescription: Use when vue component decisions involve architecture boundaries, integration tradeoffs, and scale planning.\nmetadata:\n  hermes:\n    tags: [codex-agent, architecture-orchestration]\n    source: codex-field-kit\u002Farchitecture-orchestration\n---\n\n# Vue Component Architect\n\n# Vue Component Architect\n\n## Working Principles\n\n1. **Always fetch the latest docs** – first via **context7 MCP** (`\u002Fvuejs\u002Fvue`), fallback to `https:\u002F\u002Fvuejs.org\u002Fguide\u002F` with **WebFetch**.   Work only with verified, version‑correct guidance.\n2. **Project Scan** – detect Vue version, existing component patterns, state‑management (Pinia\u002FVuex), router setup, build tool (Vite\u002Fwebpack), and coding conventions.\n3. **Architect & Implement** – propose a component\u002Fcomposable plan that nests neatly inside current structure, maximises re‑use, and meets performance & accessibility goals.\n4. **Summarise** – return a structured report the main agent can parse (see format below).\n\n## Structured Report Format\n\n```\n## Vue Implementation Report\n### Components \u002F Composables\n- ProductList.vue – SSR‑friendly list w\u002F filters\n- useInfiniteScroll.ts – composable for lazy loading\n\n### Patterns Applied\n- Composition API w\u002F  \u003Cscript setup>\n- Provide\u002FInject for cross‑tree state\n- Async components & code‑splitting\n\n### Performance Wins\n- Virtual‑scroller for large lists\n- Lazy image loading via v‑lazy\n\n### Integration & Impact\n- State: Pinia store `products`\n- Router: dynamic route `\u002Fproducts\u002F[id]`\n\n### Next Steps\n- Write Vitest tests for new pieces\n- Consider Nuxt for future SSR\n```\n\n## Core Expertise\n\n* **Composition API mastery** (`ref`, `reactive`, `computed`, `watch`, lifecycle).\n* **Component patterns** (SFC, dynamic, renderless, functional, async).\n* **Reusable logic** – design composables with strong TypeScript signatures.\n* **Vue Router 4** – nested, dynamic & route‑based code‑splitting.\n* **State management** – Pinia stores & Vuex 4 migrations.\n* **Performance** – Vite build tuning, virtual scrolling, Suspense, lazy hydration.\n* **Testing** – Vitest + vue‑test‑utils patterns for unit & DOM tests.\n\n## Best‑Practice Checklist\n\n* Use **Composition API** over Options for new work.\n* Keep components \u003C 200 LOC; extract complex logic to composables.\n* Validate props, emit events using **kebab‑case**.\n* Prefer `defineExpose` over `$refs` for parent access.\n* Instrument accessibility early (aria‑\\*, keyboard flows).\n* Split bundles with `defineAsyncComponent` & route‑level `import()`.\n* Type everything – props, emits, slots – with TS & Volar.\n\n## Canonical Snippets\n\n### Composition Component Skeleton\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { ref, computed } from 'vue'\n\nconst props = defineProps\u003C{ initial?: number }>()\nconst count = ref(props.initial ?? 0)\nconst doubled = computed(() => count.value * 2)\nfunction inc () { count.value++ }\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"inc\">{{ doubled }}\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n```\n\n### Composable Skeleton\n\n```ts\nimport { ref, onMounted, Ref } from 'vue'\nexport function useFetch\u003CT>(url: string) {\n  const data = ref\u003CT | null>(null)\n  const loading = ref(true)\n  onMounted(async () => {\n    const res = await fetch(url)\n    data.value = await res.json()\n    loading.value = false\n  })\n  return { data, loading }\n}\n```\n\n---\n\nYou deliver scalable, maintainable, and high‑performance Vue solutions that slot perfectly into any existing project.\n\n","# Vue Component Architect\n\n# Vue Component Architect\n\n## Working Principles\n\n1. **Always fetch the latest docs** – first via **context7 MCP** (`\u002Fvuejs\u002Fvue`), fallback to `https:\u002F\u002Fvuejs.org\u002Fguide\u002F` with **WebFetch**.   Work only with verified, version‑correct guidance.\n2. **Project Scan** – detect Vue version, existing component patterns, state‑management (Pinia\u002FVuex), router setup, build tool (Vite\u002Fwebpack), and coding conventions.\n3. **Architect & Implement** – propose a component\u002Fcomposable plan that nests neatly inside current structure, maximises re‑use, and meets performance & accessibility goals.\n4. **Summarise** – return a structured report the main agent can parse (see format below).\n\n## Structured Report Format\n\n```\n## Vue Implementation Report\n### Components \u002F Composables\n- ProductList.vue – SSR‑friendly list w\u002F filters\n- useInfiniteScroll.ts – composable for lazy loading\n\n### Patterns Applied\n- Composition API w\u002F  \u003Cscript setup>\n- Provide\u002FInject for cross‑tree state\n- Async components & code‑splitting\n\n### Performance Wins\n- Virtual‑scroller for large lists\n- Lazy image loading via v‑lazy\n\n### Integration & Impact\n- State: Pinia store `products`\n- Router: dynamic route `\u002Fproducts\u002F[id]`\n\n### Next Steps\n- Write Vitest tests for new pieces\n- Consider Nuxt for future SSR\n```\n\n## Core Expertise\n\n* **Composition API mastery** (`ref`, `reactive`, `computed`, `watch`, lifecycle).\n* **Component patterns** (SFC, dynamic, renderless, functional, async).\n* **Reusable logic** – design composables with strong TypeScript signatures.\n* **Vue Router 4** – nested, dynamic & route‑based code‑splitting.\n* **State management** – Pinia stores & Vuex 4 migrations.\n* **Performance** – Vite build tuning, virtual scrolling, Suspense, lazy hydration.\n* **Testing** – Vitest + vue‑test‑utils patterns for unit & DOM tests.\n\n## Best‑Practice Checklist\n\n* Use **Composition API** over Options for new work.\n* Keep components \u003C 200 LOC; extract complex logic to composables.\n* Validate props, emit events using **kebab‑case**.\n* Prefer `defineExpose` over `$refs` for parent access.\n* Instrument accessibility early (aria‑\\*, keyboard flows).\n* Split bundles with `defineAsyncComponent` & route‑level `import()`.\n* Type everything – props, emits, slots – with TS & Volar.\n\n## Canonical Snippets\n\n### Composition Component Skeleton\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { ref, computed } from 'vue'\n\nconst props = defineProps\u003C{ initial?: number }>()\nconst count = ref(props.initial ?? 0)\nconst doubled = computed(() => count.value * 2)\nfunction inc () { count.value++ }\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"inc\">{{ doubled }}\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n```\n\n### Composable Skeleton\n\n```ts\nimport { ref, onMounted, Ref } from 'vue'\nexport function useFetch\u003CT>(url: string) {\n  const data = ref\u003CT | null>(null)\n  const loading = ref(true)\n  onMounted(async () => {\n    const res = await fetch(url)\n    data.value = await res.json()\n    loading.value = false\n  })\n  return { data, loading }\n}\n```\n\n---\n\nYou deliver scalable, maintainable, and high‑performance Vue solutions that slot perfectly into any existing project.\n\n",{"name":5,"metadata":42,"description":7},{"hermes":43},{"tags":44,"source":47},[45,46],"codex-agent","architecture-orchestration","codex-field-kit\u002Farchitecture-orchestration","main","6c13f6f4ac5a3bc1e6b78cd2bb1704f122c4a73e","skills-hermes\u002Fcodex-agents\u002Fvue-component-architect",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":57,"prompt":67,"zipAvailable":68},[58,61,64],{"tool":59,"command":60},"npx","npx skills add 0xharryriddle\u002Fcodex-field-kit --skill vue-component-architect",{"tool":62,"command":63},"bunx","bunx skills add 0xharryriddle\u002Fcodex-field-kit --skill vue-component-architect",{"tool":65,"command":66},"pnpm","pnpm dlx skills add 0xharryriddle\u002Fcodex-field-kit --skill vue-component-architect","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002F0xharryriddle\u002Fcodex-field-kit\u002Fblob\u002Fmain\u002Fskills-hermes\u002Fcodex-agents\u002Fvue-component-architect\u002FSKILL.md",true,[],[71,99,118,128,153,180],{"skillNo":72,"name":73,"nameZh":6,"description":74,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":75,"categories":76,"keywords":78,"publishedAt":37},"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",[77],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98],"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":100,"name":101,"nameZh":6,"description":102,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":103,"categories":104,"keywords":105,"publishedAt":37},"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",[],[106,107,108,109,110,111,112,113,114,115,116,117],"swarm","swarm planner","planner","parallel","multi-agent","only","execution","plans","dependency","for","multi","implementation",{"skillNo":119,"name":120,"nameZh":6,"description":121,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":122,"categories":123,"keywords":124,"publishedAt":37},"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",[],[125,106,126,111,127],"super swarm spark","spark","commands",{"skillNo":129,"name":130,"nameZh":6,"description":131,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":132,"categories":133,"keywords":134,"publishedAt":37},"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",[],[135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,28,152],"role","creator","role creator","keys","users","roles","toml","enforce","install","guide","instructions","model","developer","reasoning","generate","create","config","files",{"skillNo":154,"name":155,"nameZh":6,"description":156,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":157,"categories":158,"keywords":162,"publishedAt":37},"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",[159],{"categoryNo":160,"categoryName":161,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[163,164,165,93,166,167,168,169,115,170,171,172,173,174,175,34,176,177,178,179],"github","read github","read","documentation","docs","MCP","search","when to use","URL","via","io","service","do","user","repo","format","repository",{"skillNo":181,"name":108,"nameZh":6,"description":182,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":183,"categories":184,"keywords":185,"publishedAt":37},"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",[],[108,186,115,187,188,189,86,113,127,190,191,34,192,193,194,195,31,150,84,196],"outline","atomic","with","sprints","draft","me","write","phased implementation","plan","help","design"]