[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6MB70PZ4NHACEV7RQ9ZRPJE":3,"skill-same:01M6MB70PZ4NHACEV7RQ9ZRPJE":79},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":43,"linkOnly":44,"markdownContent":45,"markdownBody":46,"frontMatter":47,"refName":52,"commitSha":53,"skillDirectory":54,"forksCount":13,"repositoryHtmlUrl":55,"repositoryHomepageUrl":6,"ownerHtmlUrl":56,"ownerBlogUrl":6,"ownerDescription":57,"updatedAt":58,"install":59,"resources":72},"01M6MB70PZ4NHACEV7RQ9ZRPJE","create-adaptable-composable",null,"Create a library-grade Vue composable that accepts maybe-reactive inputs (MaybeRef \u002F MaybeRefOrGetter) so callers can pass a plain value, ref, or getter. Normalize inputs with toValue()\u002FtoRef() inside reactive effects (watch\u002FwatchEffect) to keep behavior predictable and reactive. Use this skill when user asks for creating adaptable or reusable composables.","superhealth\u002Fskills-hub","superhealth","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F6292112?v=4","01M6JA6E7F21BYK5W3E4P270TT","01M6JA6EC0W8MPHKDJVBZDSEZ0",0,"MIT","https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fvuejs-ai\u002Fcreate-adaptable-composable\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42],"composable","create","create adaptable composable","value","github","reactive","effects","for","can","with","keep","normalize","project","maybe","reusable","use","behavior","nuxt","vue","library","2026-11-10 10:12:30",false,"---\nname: create-adaptable-composable\ndescription: Create a library-grade Vue composable that accepts maybe-reactive inputs (MaybeRef \u002F MaybeRefOrGetter) so callers can pass a plain value, ref, or getter. Normalize inputs with toValue()\u002FtoRef() inside reactive effects (watch\u002FwatchEffect) to keep behavior predictable and reactive. Use this skill when user asks for creating adaptable or reusable composables.\nlicense: MIT\nmetadata:\n  author: github.com\u002Fvuejs-ai\n  version: \"17.0.0\"\ncompatibility: Requires Vue 3 (or above) or Nuxt 3 (or above) project\n---\n\n# Create Adaptable Composable\n\nAdaptable composables are reusable functions that can accept both reactive and non-reactive inputs. This allows developers to use the composable in a variety of contexts without worrying about the reactivity of the inputs.\n\nSteps to design an adaptable composable in Vue.js:\n1. Confirm the composable's purpose and API design and expected inputs\u002Foutputs.\n2. Identify inputs params that should be reactive (MaybeRef \u002F MaybeRefOrGetter).\n3. Use `toValue()` or `toRef()` to normalize inputs inside reactive effects.\n4. Implement the core logic of the composable using Vue's reactivity APIs.\n\n## Core Type Concepts\n\n### Type Utilities\n\n```ts\n\u002F**\n * value or writable ref (value\u002Fref\u002FshallowRef\u002Fwritable computed)\n *\u002F\nexport type MaybeRef\u003CT = any> = T | Ref\u003CT> | ShallowRef\u003CT> | WritableComputedRef\u003CT>;\n\n\u002F**\n * MaybeRef\u003CT> + ComputedRef\u003CT> + () => T\n *\u002F\nexport type MaybeRefOrGetter\u003CT = any> = MaybeRef\u003CT> | ComputedRef\u003CT> | (() => T);\n```\n\n### Policy and Rules\n\n- Read-only, computed-friendly input: use `MaybeRefOrGetter`\n- Needs to be writable \u002F two-way input: use `MaybeRef`\n- Parameter might be a function value (callback\u002Fpredicate\u002Fcomparator): do not use `MaybeRefOrGetter`, or you may accidentally invoke it as a getter.\n- DOM\u002FElement targets: if you want computed\u002Fderived targets, use `MaybeRefOrGetter`.\n\nWhen `MaybeRefOrGetter` or `MaybeRef` is used: \n- resolve reactive value using `toRef()` (e.g. watcher source)\n- resolve non-reactive value using `toValue()`\n\n### Examples\n\nAdaptable `useDocumentTitle` Composable: read-only title parameter\n\n```ts\nimport { watch, toRef } from 'vue'\nimport type { MaybeRefOrGetter } from 'vue'\n\nexport function useDocumentTitle(title: MaybeRefOrGetter\u003Cstring>) {\n  watch(toRef(title), (t) => {\n    document.title = t\n  }, { immediate: true })\n}\n```\n\nAdaptable `useCounter` Composable: two-way writable count parameter\n\n```ts\nimport { watch, toRef } from 'vue'\nimport type { MaybeRef } from 'vue'\n\nfunction useCounter(count: MaybeRef\u003Cnumber>) {\n  const countRef = toRef(count)\n  function add() {\n    countRef.value++\n  }\n  return { add }\n}\n```\n","# Create Adaptable Composable\n\nAdaptable composables are reusable functions that can accept both reactive and non-reactive inputs. This allows developers to use the composable in a variety of contexts without worrying about the reactivity of the inputs.\n\nSteps to design an adaptable composable in Vue.js:\n1. Confirm the composable's purpose and API design and expected inputs\u002Foutputs.\n2. Identify inputs params that should be reactive (MaybeRef \u002F MaybeRefOrGetter).\n3. Use `toValue()` or `toRef()` to normalize inputs inside reactive effects.\n4. Implement the core logic of the composable using Vue's reactivity APIs.\n\n## Core Type Concepts\n\n### Type Utilities\n\n```ts\n\u002F**\n * value or writable ref (value\u002Fref\u002FshallowRef\u002Fwritable computed)\n *\u002F\nexport type MaybeRef\u003CT = any> = T | Ref\u003CT> | ShallowRef\u003CT> | WritableComputedRef\u003CT>;\n\n\u002F**\n * MaybeRef\u003CT> + ComputedRef\u003CT> + () => T\n *\u002F\nexport type MaybeRefOrGetter\u003CT = any> = MaybeRef\u003CT> | ComputedRef\u003CT> | (() => T);\n```\n\n### Policy and Rules\n\n- Read-only, computed-friendly input: use `MaybeRefOrGetter`\n- Needs to be writable \u002F two-way input: use `MaybeRef`\n- Parameter might be a function value (callback\u002Fpredicate\u002Fcomparator): do not use `MaybeRefOrGetter`, or you may accidentally invoke it as a getter.\n- DOM\u002FElement targets: if you want computed\u002Fderived targets, use `MaybeRefOrGetter`.\n\nWhen `MaybeRefOrGetter` or `MaybeRef` is used: \n- resolve reactive value using `toRef()` (e.g. watcher source)\n- resolve non-reactive value using `toValue()`\n\n### Examples\n\nAdaptable `useDocumentTitle` Composable: read-only title parameter\n\n```ts\nimport { watch, toRef } from 'vue'\nimport type { MaybeRefOrGetter } from 'vue'\n\nexport function useDocumentTitle(title: MaybeRefOrGetter\u003Cstring>) {\n  watch(toRef(title), (t) => {\n    document.title = t\n  }, { immediate: true })\n}\n```\n\nAdaptable `useCounter` Composable: two-way writable count parameter\n\n```ts\nimport { watch, toRef } from 'vue'\nimport type { MaybeRef } from 'vue'\n\nfunction useCounter(count: MaybeRef\u003Cnumber>) {\n  const countRef = toRef(count)\n  function add() {\n    countRef.value++\n  }\n  return { add }\n}\n```\n",{"name":5,"license":14,"metadata":48,"description":7,"compatibility":51},{"author":49,"version":50},"github.com\u002Fvuejs-ai","17.0.0","Requires Vue 3 (or above) or Nuxt 3 (or above) project","master","08cc2532077058aa50e6e18f54695bc256c88152","skills\u002Fvuejs-ai\u002Fcreate-adaptable-composable","https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub","https:\u002F\u002Fgithub.com\u002Fsuperhealth","java engineer","2026-04-06 22:07:23",{"source":8,"skillName":5,"commands":60,"prompt":70,"zipAvailable":71},[61,64,67],{"tool":62,"command":63},"npx","npx skills add superhealth\u002Fskills-hub --skill create-adaptable-composable",{"tool":65,"command":66},"bunx","bunx skills add superhealth\u002Fskills-hub --skill create-adaptable-composable",{"tool":68,"command":69},"pnpm","pnpm dlx skills add superhealth\u002Fskills-hub --skill create-adaptable-composable","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fvuejs-ai\u002Fcreate-adaptable-composable\u002FSKILL.md",true,[73],{"path":74,"resourceType":75,"resourceTypeDesc":76,"sizeBytes":77,"sourceHtmlUrl":78},"skill-report.json","REFERENCE","参考文档",12243,"https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fvuejs-ai\u002Fcreate-adaptable-composable\u002Fskill-report.json",[80,108,132,145,160,184],{"skillNo":81,"name":82,"nameZh":6,"description":83,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":84,"categories":85,"keywords":87,"publishedAt":43},"01M6MC9F3WHV8S8FZ2W4TRB0FE","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\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fzhanlincui\u002Fvercel-react-best-practices\u002FSKILL.md",[86],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107],"react","vercel react best practices","best practices","vercel","react best practices","data fetching","code","triggers","pages","next","patterns","refactoring","data","Optimization","tasks","guidelines","react components","components","performance","writing",{"skillNo":109,"name":110,"nameZh":6,"description":111,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":112,"categories":113,"keywords":118,"publishedAt":43},"01M6MB8KWE1Q5A5KERR7RFTQWP","vue-testing-best-practices","Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.","https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fvuejs-ai\u002Fvue-testing-best-practices\u002FSKILL.md",[114,117],{"categoryNo":115,"categoryName":116,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[119,120,41,90,121,122,123,124,125,38,126,98,127,128,30,129,130,27,131],"vue testing best practices","testing best practices","testing","testing patterns","js","e2e","vitest","component","test","mocking","utils","e2e testing","playwright",{"skillNo":133,"name":134,"nameZh":6,"description":135,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":136,"categories":137,"keywords":139,"publishedAt":43},"01M6MB8GK06M6GA4KVYNDV1BZP","vue-router-best-practices","Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.","https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fvuejs-ai\u002Fvue-router-best-practices\u002FSKILL.md",[138],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[90,41,140,141,142,98,143,144,126,27],"router","vue router best practices","route","navigation","lifecycle",{"skillNo":146,"name":147,"nameZh":6,"description":148,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":149,"categories":150,"keywords":152,"publishedAt":43},"01M6MB8DQF21TZMQ9XC3745ERW","vue-pinia-best-practices","Pinia stores, state management patterns, store setup, and reactivity with stores.","https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fvuejs-ai\u002Fvue-pinia-best-practices\u002FSKILL.md",[151],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[153,154,41,90,32,155,98,156,157,158,159,27],"vue pinia best practices","pinia","store","management","state","state management","setup",{"skillNo":161,"name":162,"nameZh":6,"description":163,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":164,"categories":165,"keywords":175,"publishedAt":43},"01M6MB8A7MC08747J9TV4GWQ9A","vue-options-api-best-practices","Vue 3 Options API style (data(), methods, this context). Each reference shows Options API solution only.","https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fvuejs-ai\u002Fvue-options-api-best-practices\u002FSKILL.md",[166,167,170],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":168,"categoryName":169,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":171,"categoryName":172,"taxonomyType":173,"taxonomyTypeDesc":174},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[41,176,177,178,90,179,180,181,182,100,27,183],"options","vue options api best practices","api","methods","reference","only","context","style",{"skillNo":185,"name":186,"nameZh":6,"description":187,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":188,"categories":189,"keywords":191,"publishedAt":43},"01M6MB85ZTQC24Q04X49MM4YXN","vue-development-guides","A collection of best practices and tips for developing applications using Vue.js. This skill MUST be apply when developing, refactoring or reviewing Vue.js or Nuxt projects.","https:\u002F\u002Fgithub.com\u002Fsuperhealth\u002Fskills-hub\u002Fblob\u002Fmaster\u002Fskills\u002Fvuejs-ai\u002Fvue-development-guides\u002FSKILL.md",[190],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[192,41,193,194,27,195,196,30,35,40,197,123,99,198,199,90],"development","guides","vue development guides","tips","apply","projects","collection","applications"]