[!IMPORTANT]

⚠️ Project Notice

This project has been miragted to the Vue AI organization and is now jointly maintained there.

👉 https://github.com/vuejs-ai/skills

Vue Skills

Agent Skills for Vue.js development.

[!IMPORTANT] (WIP) This project is under development. The skills provided here are experimental and may change in the future. Use them with caution and at your own risk, feedbacks are welcome!

[!NOTE] I started vue-skills to offer reusable, community-friendly Vue.js agent skills that make AI-assisted development easier to adopt in Vue projects.

(Unofficial) This project is not a official Vue.js project, if it proves useful and fits the community’s needs, I’m happy to transferring it to the Vue organization for collaborative and long-term maintenance.

• 🛡️ High Reliability: Optimized prompts for consistent results on lower-tier models.
• 📚 Comprehensive Best Practices: Combines official guidance with real-world production experience.
• ⚡ Modern Vue.js Stack: Built for Vue 3 and Nuxt 3 with TypeScript.
• 🔌 Offline-First Design: Works fully offline without extra permissions.

Installation

npx skills add serkodev/vue-skills

Skills

vue-best-practices

This skill enforces best practices when developing Vue.js or Nuxt applications.

create-agnostic-composable

This skill help to create a reusable composable (VueUse-like) for controlling hidden for an element.

Demos

🪄 vue-best-practices

Demo - Todo App

Prompt

create a todo app

🔎 See demo full output.

Changes after using skill

• More readable code
• Components splited
• Moved states into composables (useTodos.ts)
• Use shallowRef for primitive reactive data (see Reactivity Guide)

---

🪄 create-agnostic-composable

Demo - useHidden

Prompt

create a reusable composable for controling hidden for a element

🔎 See demo full output.

Changes after using skill

• Used MaybeRef and MaybeRefOrGetter for input parameters for reactivity flexibility.

export interface UseHiddenOptions {
  hidden?: MaybeRef<boolean>
  initialHidden?: MaybeRefOrGetter<boolean>
  syncAria?: boolean
}

export function useHidden(
  target?: MaybeRefOrGetter<HTMLElement | null | undefined>,
  options: UseHiddenOptions = {},
)

Related Projects

• vueuse/skills - Agent skills for VueUse development
• onmax/nuxt-skills - Agent skills for Nuxt development
• hyf0/vue-skills - Agent skills for Vue 3 development

License

MIT