Frontend

Nuxt provides server-side rendering, auto-imports, and file-based routing for Vue apps. Use when building Nuxt apps, server routes, useFetch, middleware, or hybrid rendering.

Pinia is the official Vue state management library, type-safe and extensible. Use when defining stores, working with state/getters/actions, or implementing store patterns in Vue apps.

Slidev creates and presents web-based slidedecks for developers using Markdown, Vue components, code highlighting, animations, and interactive features. Use it for technical talks, code walkthroughs, and teaching materials.

tsdown bundles TypeScript and JavaScript libraries with Rolldown, generating type declarations and multiple output formats. Use it when building npm libraries, migrating from tsup, or optimizing bundles.

UnoCSS generates atomic CSS utilities using a flexible engine with presets for rules, shortcuts, and themes. Use it when configuring UnoCSS, writing utility rules, or working with presets like Wind, Icons, and Attributify.

Vite provides guidance on configuring the Vite build tool, using its plugin API, implementing SSR, and migrating to Vite 8 with Rolldown. Use when working with Vite projects, vite.config.ts, Vite plugins, or building libraries/SSR apps with Vite.

VitePress builds static documentation sites from Markdown with Vue components and a Vite-powered dev server. Use when creating docs, blogs, or configuring themes and custom layouts.

Vue covers Vue 3 Composition API, script setup macros, reactivity, and built-in components. Use when writing Vue SFCs, defineProps/defineEmits/defineModel, watchers, or using Transition/Teleport/Suspense/KeepAlive.

Vue Best Practices provides a structured workflow for Vue 3 development, enforcing Composition API with `<script setup>` and TypeScript, and covering reactivity, SFC structure, data flow, and composables. Use this skill for any Vue.js, Vue Router, Pinia, or Vite with Vue task to keep components focused and state predictable.

Vue Router Best Practices covers Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions. Use it to avoid common navigation pitfalls in Vue applications.

VueUse Functions applies VueUse composables to implement Vue.js/Nuxt features concisely. Use it to map requirements to composables for state, element, and browser use cases.

Web Design Guidelines reviews UI code against the Web Interface Guidelines to catch accessibility, UX, and design issues. Use it when asked to review a UI, audit design, or check a site against best practices.