bem-stylesUse when writing or reviewing the styles of a Vue component — the <style scoped> block, BEM class names for its block, elements and modifiers, state classes bound from the template, design tokens as CSS variables, SCSS inside the component, Stylelint complaints about selector patterns, or moving rul
component-architectureUse before creating a Vue component or when deciding where one lives and what it may know — a reusable UI primitive, a feature component bound to the domain, a layout piece of the app chrome, a page or view, a component that only exists for one parent. Also when a component grew into two, when a fea
composables-vueuseUse when a Vue component needs behaviour that is not display — reading or writing local storage, the colour scheme or a media query, the clock, window size, an event source or websocket, a debounce or throttle, the clipboard, focus, keyboard shortcuts, intersection, drag position, fetch with abort —
motionUse when adding or reviewing motion in a Vue app — a sheet or dialog that fades in, a list whose rows enter and leave, a highlight that pulses on new items, a route transition, a drawer that slides, a counter that animates, a skeleton shimmer — or when choosing between CSS transitions, Vue Transitio
nuxt-conventionsUse when the project is Nuxt 3 or 4 — creating pages, layouts, server routes or middleware, fetching data with useFetch or useAsyncData, relying on auto-imports, choosing rendering (SSR, SSG, SPA, hybrid routes), configuring modules in nuxt.config, handling runtime config and environment, or reviewi
sfc-conventionsUse when writing, editing or reviewing a Vue single-file component — the <script setup lang=\"ts\"> block, props and emits and their types, defineModel, slots, template syntax, refs and computeds, watchers, lifecycle, the order of blocks in the .vue file, component and file naming. Also for converti
state-piniaUse when a Vue app needs state that more than one component reads or writes — the current user or workspace, lists from the server, selections, filters, marks — or when creating, editing, reviewing or splitting a Pinia store, deciding whether something belongs in a store at all, loading server data
testingUse when writing, fixing or reviewing tests for a Vue project — a unit test for a composable or a lib function, a component test with Vue Test Utils or Testing Library for Vue, a Pinia store test, a Nuxt test with @nuxt/test-utils, an end-to-end flow with Playwright — or when deciding what to test a
toolingUse when setting up, changing or running the toolchain of a Vue project — ESLint with eslint-plugin-vue and typescript-eslint, Prettier, Stylelint with the BEM selector pattern, vue-tsc type checking, the one `npm run check` that runs all of them with the tests, the pre-push hook or CI job that gate