[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6GXHYPRJ43SHFPFJTF87GS8":3,"skill-same:01M6GXHYPRJ43SHFPFJTF87GS8":92},{"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":34,"publishedAt":55,"linkOnly":56,"markdownContent":57,"markdownBody":58,"frontMatter":59,"refName":69,"commitSha":70,"skillDirectory":71,"forksCount":72,"repositoryHtmlUrl":73,"repositoryHomepageUrl":73,"ownerHtmlUrl":74,"ownerBlogUrl":75,"ownerDescription":76,"updatedAt":77,"install":78,"resources":91},"01M6GXHYPRJ43SHFPFJTF87GS8","Vue.js Review",null,"Deep review of Vue.js applications — Composition API patterns, reactivity traps, component design, Pinia state management, and performance pitfalls.","malayvuong\u002Fagent-orchestra","malayvuong","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F13240975?v=4","01M6GXCDVPB2VPZMDZK1KF98M0","Nguyen Minh Vuong","01M6GXCE176VDX3XV4Z4KNR33J",1,"MIT","https:\u002F\u002Fgithub.com\u002Fmalayvuong\u002Fagent-orchestra\u002Fblob\u002Fmain\u002F.agent-orchestra\u002Fskills\u002Fvue-review\u002FSKILL.md",[18,23,26,29],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":30,"categoryName":31,"taxonomyType":32,"taxonomyTypeDesc":33},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54],"review","Vue js Review","js","vue","state management","state","deep review","component","api patterns","applications","api","Composition","performance","pinia","management","deep","logic","pitfalls","pinia state","design","2026-11-10 10:12:30",false,"---\nname: Vue.js Review\ndescription: Deep review of Vue.js applications — Composition API patterns, reactivity traps, component design, Pinia state management, and performance pitfalls.\nversion: 2026.3.1\nlicense: MIT\ntriggers:\n  lenses:\n    - logic\n    - performance\n  keywords:\n    - vue\n    - vuejs\n    - composition api\n    - pinia\n    - ref\n    - reactive\n    - computed\n---\n\nWhen reviewing Vue.js code, apply the following framework-specific checks.\n\n## Reactivity Traps\n\nFlag destructuring of reactive objects without `toRefs()` — destructured properties lose reactivity. Check for:\n\n- `const { name, age } = props` in `\u003Cscript setup>` — use `toRefs(props)` or access `props.name` directly\n- `const { count } = store` where `store` is a Pinia store — use `storeToRefs(store)`\n- Replacing a reactive object's value instead of mutating it: `state = { ...newState }` breaks reactive references\n\nVerify `ref()` is used for primitives and `reactive()` for objects. Flag `reactive()` wrapping a primitive — it has no effect. Flag `.value` access on reactive objects (not needed) and missing `.value` on refs in script (needed).\n\n## Computed Properties\n\nFlag computed properties with side effects (API calls, mutations, DOM manipulation) — computeds must be pure derivations. Flag computed properties that return new object\u002Farray references on every evaluation — this defeats Vue's change detection and causes unnecessary re-renders.\n\nVerify expensive computations are wrapped in `computed()` and not recalculated in the template or in `watchEffect`. Flag template expressions that perform filtering, sorting, or mapping inline — extract to computed.\n\n## Watchers\n\nFlag `watch()` and `watchEffect()` that modify the same reactive source they observe — this creates infinite loops. Verify `watch()` uses the correct source signature: watching a ref requires `() => ref.value` or just `ref`, not `ref.value` (which captures a static primitive).\n\nCheck that watchers have cleanup via `onCleanup` parameter when they start async operations (timers, fetch, subscriptions). Flag `watchEffect()` used where `watch()` with explicit dependencies would be clearer about intent.\n\n## Component Design\n\nVerify props use TypeScript types with `defineProps\u003CT>()` — not runtime-only validation. Flag components with more than 10 props — consider splitting into smaller components or using a configuration object prop. Check that `defineEmits\u003CT>()` is typed for all emitted events.\n\nFlag `v-model` on complex objects passed as props — parent and child both modify the same reference, breaking one-way data flow. Verify `provide\u002Finject` is typed with `InjectionKey\u003CT>` for type safety.\n\n## Pinia State Management\n\nVerify stores use the setup syntax (`defineStore('id', () => { ... })`) for Composition API consistency. Flag direct mutations of store state from components — use actions for state changes that involve logic.\n\nCheck that store getters are used for derived state instead of computing it in each component. Flag stores that hold UI state (modal open\u002Fclose, tab selection) alongside domain data — separate concerns into distinct stores.\n\n## Template Performance\n\nFlag `v-if` and `v-for` on the same element — `v-if` has higher priority and may cause unexpected behavior. Verify `v-for` always has a `:key` binding with a unique identifier, not the array index. Flag `:key=\"index\"` — index keys cause rendering bugs when the list is reordered or filtered.\n\nCheck for expensive method calls in templates that run on every re-render. Flag deep object comparison in templates (`v-if=\"JSON.stringify(a) === JSON.stringify(b)\"`) — use computed properties.\n\n## Lifecycle and Async\n\nVerify `onMounted` is used for DOM-dependent initialization, not `setup()` body. Flag `await` in `setup()` without `\u003CSuspense>` wrapper in the parent — the component will not render until the promise resolves. Check that `onUnmounted` cleans up event listeners, timers, and subscriptions.\n\nFor each finding, report: the component file, the specific Vue pattern violated, and the recommended fix.\n","When reviewing Vue.js code, apply the following framework-specific checks.\n\n## Reactivity Traps\n\nFlag destructuring of reactive objects without `toRefs()` — destructured properties lose reactivity. Check for:\n\n- `const { name, age } = props` in `\u003Cscript setup>` — use `toRefs(props)` or access `props.name` directly\n- `const { count } = store` where `store` is a Pinia store — use `storeToRefs(store)`\n- Replacing a reactive object's value instead of mutating it: `state = { ...newState }` breaks reactive references\n\nVerify `ref()` is used for primitives and `reactive()` for objects. Flag `reactive()` wrapping a primitive — it has no effect. Flag `.value` access on reactive objects (not needed) and missing `.value` on refs in script (needed).\n\n## Computed Properties\n\nFlag computed properties with side effects (API calls, mutations, DOM manipulation) — computeds must be pure derivations. Flag computed properties that return new object\u002Farray references on every evaluation — this defeats Vue's change detection and causes unnecessary re-renders.\n\nVerify expensive computations are wrapped in `computed()` and not recalculated in the template or in `watchEffect`. Flag template expressions that perform filtering, sorting, or mapping inline — extract to computed.\n\n## Watchers\n\nFlag `watch()` and `watchEffect()` that modify the same reactive source they observe — this creates infinite loops. Verify `watch()` uses the correct source signature: watching a ref requires `() => ref.value` or just `ref`, not `ref.value` (which captures a static primitive).\n\nCheck that watchers have cleanup via `onCleanup` parameter when they start async operations (timers, fetch, subscriptions). Flag `watchEffect()` used where `watch()` with explicit dependencies would be clearer about intent.\n\n## Component Design\n\nVerify props use TypeScript types with `defineProps\u003CT>()` — not runtime-only validation. Flag components with more than 10 props — consider splitting into smaller components or using a configuration object prop. Check that `defineEmits\u003CT>()` is typed for all emitted events.\n\nFlag `v-model` on complex objects passed as props — parent and child both modify the same reference, breaking one-way data flow. Verify `provide\u002Finject` is typed with `InjectionKey\u003CT>` for type safety.\n\n## Pinia State Management\n\nVerify stores use the setup syntax (`defineStore('id', () => { ... })`) for Composition API consistency. Flag direct mutations of store state from components — use actions for state changes that involve logic.\n\nCheck that store getters are used for derived state instead of computing it in each component. Flag stores that hold UI state (modal open\u002Fclose, tab selection) alongside domain data — separate concerns into distinct stores.\n\n## Template Performance\n\nFlag `v-if` and `v-for` on the same element — `v-if` has higher priority and may cause unexpected behavior. Verify `v-for` always has a `:key` binding with a unique identifier, not the array index. Flag `:key=\"index\"` — index keys cause rendering bugs when the list is reordered or filtered.\n\nCheck for expensive method calls in templates that run on every re-render. Flag deep object comparison in templates (`v-if=\"JSON.stringify(a) === JSON.stringify(b)\"`) — use computed properties.\n\n## Lifecycle and Async\n\nVerify `onMounted` is used for DOM-dependent initialization, not `setup()` body. Flag `await` in `setup()` without `\u003CSuspense>` wrapper in the parent — the component will not render until the promise resolves. Check that `onUnmounted` cleans up event listeners, timers, and subscriptions.\n\nFor each finding, report: the component file, the specific Vue pattern violated, and the recommended fix.\n",{"name":5,"license":15,"version":60,"triggers":61,"description":7},"2026.3.1",{"lenses":62,"keywords":63},[51,47],[38,64,65,48,66,67,68],"vuejs","composition api","ref","reactive","computed","main","eac6069a8690d89fd23f08d2d14e4874ed376a77",".agent-orchestra\u002Fskills\u002Fvue-review",0,"https:\u002F\u002Fgithub.com\u002Fmalayvuong\u002Fagent-orchestra","https:\u002F\u002Fgithub.com\u002Fmalayvuong","www.malayvuong.com","Just a newbie at everything","2026-10-09 12:52:45",{"source":8,"skillName":5,"commands":79,"prompt":89,"zipAvailable":90},[80,83,86],{"tool":81,"command":82},"npx","npx skills add malayvuong\u002Fagent-orchestra --skill \"Vue.js Review\"",{"tool":84,"command":85},"bunx","bunx skills add malayvuong\u002Fagent-orchestra --skill \"Vue.js Review\"",{"tool":87,"command":88},"pnpm","pnpm dlx skills add malayvuong\u002Fagent-orchestra --skill \"Vue.js Review\"","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fmalayvuong\u002Fagent-orchestra\u002Fblob\u002Fmain\u002F.agent-orchestra\u002Fskills\u002Fvue-review\u002FSKILL.md",true,[],[93,113,131,155,175,194],{"skillNo":94,"name":95,"nameZh":6,"description":96,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":97,"categories":98,"keywords":99,"publishedAt":55},"01M6GXHSPDDH1PQEN61ENMCEF5","Unity Review","Deep review of Unity C# code — object pooling, Update allocation, physics patterns, UI performance, serialization, and mobile optimization.","https:\u002F\u002Fgithub.com\u002Fmalayvuong\u002Fagent-orchestra\u002Fblob\u002Fmain\u002F.agent-orchestra\u002Fskills\u002Funity-review\u002FSKILL.md",[],[35,100,95,47,101,102,41,103,104,105,106,107,108,50,51,109,110,111,112],"unity","update","code","ui","serialization","Optimization","mobile","patterns","physics","C#","mobile optimization","object","allocation",{"skillNo":114,"name":115,"nameZh":6,"description":116,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":117,"categories":118,"keywords":119,"publishedAt":55},"01M6GXHNKTH12CGSRWDGF2H1Q9","TypeScript Review","Deep review of TypeScript code — type safety, generics patterns, strict mode compliance, type narrowing, module boundaries, and common escape hatches.","https:\u002F\u002Fgithub.com\u002Fmalayvuong\u002Fagent-orchestra\u002Fblob\u002Fmain\u002F.agent-orchestra\u002Fskills\u002Ftypescript-review\u002FSKILL.md",[],[35,120,121,102,41,122,123,124,125,107,50,51,126,127,128,129,130],"typescript","typescript review","compliance","Type Safety","Safety","common","module","type","interface","consistency","mode",{"skillNo":132,"name":133,"nameZh":6,"description":134,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":135,"categories":136,"keywords":143,"publishedAt":55},"01M6GXHH3DMZD272RVH4800C67","Test Conventions","Testing patterns and conventions for code review. Covers naming, AAA structure, boundary testing, mock vs real dependencies, and coverage expectations.","https:\u002F\u002Fgithub.com\u002Fmalayvuong\u002Fagent-orchestra\u002Fblob\u002Fmain\u002F.agent-orchestra\u002Fskills\u002Ftest-conventions\u002FSKILL.md",[137,140],{"categoryNo":138,"categoryName":139,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000007","代码审查",{"categoryNo":141,"categoryName":142,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",[144,145,133,146,147,35,102,148,149,150,107,151,152,153,154],"test","conventions","code review","testing","testing patterns","boundary","coverage","dependencies","structure","mock","naming",{"skillNo":156,"name":157,"nameZh":6,"description":158,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":159,"categories":160,"keywords":165,"publishedAt":55},"01M6GXHCAQSJDVNVRFFD1HJWTN","Terraform Review","Deep review of Terraform\u002FOpenTofu configuration — state management, module design, security hardening, drift prevention, and production safety patterns.","https:\u002F\u002Fgithub.com\u002Fmalayvuong\u002Fagent-orchestra\u002Fblob\u002Fmain\u002F.agent-orchestra\u002Fskills\u002Fterraform-review\u002FSKILL.md",[161,164],{"categoryNo":162,"categoryName":163,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000011","运维与部署",{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},[35,166,157,54,167,39,40,41,168,169,170,171,124,172,49,173,174,50,51,126],"terraform","security","cloud","aws","hardening","Production","opentofu","iac","drift",{"skillNo":176,"name":177,"nameZh":6,"description":178,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":179,"categories":180,"keywords":182,"publishedAt":55},"01M6GXH83F11CK4BQEAJPN6HDE","Swift Review","Deep review of Swift code — memory management, concurrency patterns, optionals, protocol design, SwiftUI lifecycle, and iOS platform patterns.","https:\u002F\u002Fgithub.com\u002Fmalayvuong\u002Fagent-orchestra\u002Fblob\u002Fmain\u002F.agent-orchestra\u002Fskills\u002Fswift-review\u002FSKILL.md",[181],{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},[183,35,177,54,184,47,102,185,41,186,187,188,189,190,49,50,51,191,192,193],"swift","memory","protocol","ios","concurrency","lifecycle","swiftui","uikit","xcode","apple","platform",{"skillNo":195,"name":196,"nameZh":6,"description":197,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":198,"categories":199,"keywords":204,"publishedAt":55},"01M6GXH22YZZ9AES24EB27BGNX","SQL Query Review","Deep review of SQL queries — execution plans, index utilization, join efficiency, subquery patterns, locking behavior, and performance anti-patterns.","https:\u002F\u002Fgithub.com\u002Fmalayvuong\u002Fagent-orchestra\u002Fblob\u002Fmain\u002F.agent-orchestra\u002Fskills\u002Fsql-query-review\u002FSKILL.md",[200,201],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":202,"categoryName":203,"taxonomyType":32,"taxonomyTypeDesc":33},"01JBSEEDCAT000000000000033","数据分析师",[35,205,206,196,47,41,207,208,209,210,211,212,213,214,215,216,50,51,217,218],"sql","query","index","execution","explain","select","behavior","utilization","anti-patterns","sql queries","queries","efficiency","plans","join"]