[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-75121":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":9,"languages":9,"totalLinesOfCode":9,"stars":10,"forks":11,"watchers":12,"openIssues":13,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":15,"stars7d":16,"stars30d":17,"stars90d":14,"forks30d":14,"starsTrendScore":18,"compositeScore":19,"rankGlobal":9,"rankLanguage":9,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":9,"pushedAt":9,"updatedAt":25,"readmeContent":26,"aiSummary":27,"trendingCount":14,"starSnapshotCount":14,"syncStatus":28,"lastSyncTime":29,"discoverSource":30},75121,"skills","vuejs-ai\u002Fskills","vuejs-ai","Agent skills for Vue 3 development",null,2558,147,19,10,0,22,52,169,66,28.51,"MIT License",false,"main",true,[],"2026-06-12 02:03:32","# vue-skills\n\nAgent skills for Vue 3 development.\n\n> 🚧 **Early Experiment \u002F Community Project**\n>\n> This repository is an early experiment in creating specialized skills for AI agents to enhance Vue 3 development. Skills are derived from real-world issues but may be incomplete due to hallucinations—please give feedback. If valuable, I plan to propose transferring this project to the Vue organization to benefit the wider community.\n\n## Installation\n\n```bash\nnpx skills add vuejs-ai\u002Fskills\n```\n\n### Claude Code Marketplace\n\nAn alternative for Claude Code users:\n\n```bash\n# Add marketplace\n\u002Fplugin marketplace add vuejs-ai\u002Fskills\n\n# Install all skills at once\n\u002Fplugin install vue-skills-bundle@vue-skills\n\n# Install individual skills\n\u002Fplugin install vue-best-practices@vue-skills\n\n# Install multiple skills\n\u002Fplugin install vue-best-practices@vue-skills vue-router-best-practices@vue-skills\n```\n\n## Usage\n\nFor most reliable results, prefix your prompt with `use vue skill`:\n\n```\nUse vue skill, \u003Cyour prompt here>\n```\n\nThis explicitly triggers the skill and ensures the AI follows the documented patterns. Without the prefix, skill triggering may be inconsistent depending on how closely your prompt matches the skill's description keywords.\n\n## Available Skills\n\n| Skill | When to use | Description |\n|-------|-------------|-------------|\n| **vue-best-practices** | Vue 3 + Composition API + TypeScript | Best practices, common gotchas, SSR guidance, performance |\n| **vue-options-api-best-practices** | Options API (`data()`, `methods`) | `this` context, lifecycle, TypeScript with Options API |\n| **vue-router-best-practices** | Vue Router 4 | Navigation guards, route params, route-component lifecycle |\n| **vue-pinia-best-practices** | Pinia for state management | Store setup, reactivity, state patterns |\n| **vue-testing-best-practices** | Writing component or E2E tests | Vitest, Vue Test Utils, Playwright |\n| **vue-jsx-best-practices** | JSX in Vue | Syntax differences from React JSX |\n| **vue-debug-guides** | Debugging Vue 3 issues | Runtime errors, warnings, async error handling, hydration issues |\n| **create-adaptable-composable** | Creating reusable composables | `MaybeRef`\u002F`MaybeRefOrGetter` input patterns |\n\n## Examples\n\n### vue-best-practices\n\n#### Demo - Todo App\n\nPrompt\n\n```\ncreate a todo app\n```\n\n🔎 See demo [full output](https:\u002F\u002Fgithub.com\u002Fvuejs-ai\u002Fskills\u002Ftree\u002Fdev\u002Fdemo\u002Ftodo-app).\n\n#### Changes after using skill\n\n- More readable [code](https:\u002F\u002Fgithub.com\u002Fvuejs-ai\u002Fskills\u002Ftree\u002Fdev\u002Fdemo\u002Ftodo-app\u002Fwith-skills\u002FApp.vue)\n- [Components](https:\u002F\u002Fgithub.com\u002Fvuejs-ai\u002Fskills\u002Ftree\u002Fdev\u002Fdemo\u002Ftodo-app\u002Fwith-skills\u002Fcomponents) split\n- Moved states into composables ([useTodos.ts](https:\u002F\u002Fgithub.com\u002Fvuejs-ai\u002Fskills\u002Ftree\u002Fdev\u002Fdemo\u002Ftodo-app\u002Fwith-skills\u002Fcomposables\u002FuseTodos.ts))\n- Use `shallowRef` for primitive reactive data (see [Reactivity](skills\u002Fvue-best-practices\u002Freferences\u002Freactivity.md) reference)\n\n### create-adaptable-composable\n\nOriginal from `create-agnostic-composable` of [`serkodev\u002Fvue-skills`](https:\u002F\u002Fgithub.com\u002Fserkodev\u002Fvue-skills\u002Ftree\u002Fmain)\n\n#### Demo - useHidden\n\nPrompt\n\n```\ncreate a reusable composable for controlling hidden for a element\n```\n\n🔎 See demo [full output](https:\u002F\u002Fgithub.com\u002Fvuejs-ai\u002Fskills\u002Ftree\u002Fdev\u002Fdemo\u002Fhidden-composable).\n\n#### Changes after using skill\n\n- Used `MaybeRef` and `MaybeRefOrGetter` for input parameters for reactivity flexibility.\n\n```ts\nexport interface UseHiddenOptions {\n  hidden?: MaybeRef\u003Cboolean>\n  initialHidden?: MaybeRefOrGetter\u003Cboolean>\n  syncAria?: boolean\n}\n\nexport function useHidden(\n  target?: MaybeRefOrGetter\u003CHTMLElement | null | undefined>,\n  options: UseHiddenOptions = {},\n)\n```\n\n## Methodology\n\n### Skill Types\n\nSkills are classified into two categories:\n\n- **Capability**: AI *cannot* solve the problem without the skill. These address version-specific issues, undocumented behaviors, recent features, or edge cases outside AI's training data.\n\n- **Efficiency**: AI *can* solve the problem but not well. These provide optimal patterns, best practices, and consistent approaches that improve solution quality.\n\n### Validation Process\n\nEach skill rule is validated through automated evals:\n\n1. **Baseline**: Run without skill installed\n2. **With-skill**: Run with skill installed\n\nA rule is kept only if it enables the model to solve problems it couldn't solve without it.\n\n| Baseline | With Skill | Action |\n|----------|------------|--------|\n| Fail | Pass | Keep |\n| Pass | Pass | Considered removed |\n\n## Contributing\n\nDevelopment happens on the `dev` branch. The `main` branch is reserved for published skills only.\n\n1. Create a feature branch from `dev`\n2. Submit a PR to `dev`\n3. After approval, changes are merged to `dev`\n4. Maintainers sync `dev` → `main` via GitHub Action when ready to publish\n\n## Related projects\n\n- [antfu\u002Fskills](https:\u002F\u002Fgithub.com\u002Fantfu\u002Fskills) - Anthony Fu's curated collection of agent skills for Vue\u002FVite\u002FNuxt\n- [vueuse\u002Fvueuse-skills](https:\u002F\u002Fgithub.com\u002Fvueuse\u002Fvueuse-skills) - Agent skills for VueUse development\n- [onmax\u002Fnuxt-skills](https:\u002F\u002Fgithub.com\u002Fonmax\u002Fnuxt-skills) - Agent skills for Nuxt development\n\n## License\n\nMIT\n","vuejs-ai\u002Fskills 是一个为 Vue 3 开发提供增强功能的 AI 代理技能库。其核心功能包括一系列针对不同开发场景的最佳实践指南，如使用 Composition API 和 TypeScript 的最佳实践、Vue Router 4 的导航守卫与路由参数处理技巧等。这些技能旨在帮助开发者遵循官方推荐模式，提高代码质量和开发效率。适用于需要提升 Vue 3 应用程序性能、可维护性和测试覆盖率的场景，特别是对于那些希望利用 AI 辅助来快速学习和应用 Vue 框架高级特性的开发者来说非常有用。",2,"2026-06-11 03:52:25","high_star"]