davidbirchall/squad-skills-frontend

standards for motion in Vue 3 and Nuxt 3 UIs covering the implementation order (CSS first, then Vue Transition and TransitionGroup, then VueUse), prefers-reduced-motion, duration and easing tokens, transform and opacity performance, flat BEM in scoped styles, Nuxt page transitions, and testing. Load when adding hover, enter/leave, list, loading, or page animations.

Patterns for the API layer in Nuxt 3 and Vue 3 apps, with axios as the default HTTP client (shared per-request instance, interceptors, typed service modules, AbortSignal), error normalisation, TanStack Query key and query/mutation organisation, where API code lives, auth headers, retries, and the Pinia boundary. Load when adding or changing API calls, query composables, error handling, or auth on requests.

rules for structuring Vue components by atomic design (atoms, molecules, organisms, pages) and where data and state may live. Load when deciding where a component belongs, splitting or composing components, or reviewing component boundaries.

Opinionated UI patterns for high-quality chat interfaces in Vue 3 and Nuxt 3 - message parts instead of strings, frame-batched streaming render, incremental markdown with sanitisation, code blocks with copy, scroll anchoring and jump-to-latest, virtualisation, the composer (autosize, Enter vs Shift+Enter, IME safety, drafts, attachments, paste and drop), stop/regenerate/edit/retry and branch navigation, optimistic messages with pending and failed states, tool calls and citations, empty/loading/error states, thread sidebar, accessibility, mobile viewport handling, and testing with a fake stream. Load when building or reviewing chat message lists, composers, streaming rendering, or conversation controls.

Rules for publishing shared Vue 3 and TypeScript libraries (the shared component library, shared config package) covering semver, changelogs, pnpm publish workflow, exports map and types, peer dependencies, Storybook docs, deprecation policy, and a breaking-change checklist. Load when releasing, versioning, or changing the public API of a shared library.

CSS standards for Vue components — native CSS in scoped styles, BEM, global design tokens, modern CSS features, and :deep() as last resort. Load when writing or reviewing component styles or design tokens.

Convert provided Figma or visual designs into responsive Nuxt/Vue components by inspecting tokens, reusing existing components, extracting assets, handling missing states, and adding accessibility. Validate at defined breakpoints. Load when implementing from Figma, screenshots, mockups, or visual specifications.

form standards for Vue/Nuxt — VeeValidate with schema validation (Yup in existing code, Zod for new), accessible error handling, atom/organism split, submitting via TanStack Query mutations, server error mapping. Load when building, migrating, reviewing or testing forms.

accessibility checklist for frontend work targeting WCAG 2.2 AA minimum (AAA where possible). Load when building or reviewing UI, forms, interactive components, colours, or motion.

rules for structuring Vue 3 and Nuxt 3 apps — folder layout (feature vs layer), where components, composables, services, utils, types, layouts, pages, plugins, middleware and server code live, module boundaries and dependency direction, naming, auto-import limits, shared vs feature-local code, barrel-file policy, when to extract a composable, layer or module, and the rules for writing Vue 3 components (script setup, SFC order, props/emits/defineModel, v-for, ref vs reactive, computed vs watch, template refs, generics), plus Vue and Nuxt typing (refs, provide/inject, props/emits/slots, generated types, vue-tsc). Load when creating or reorganising folders, deciding where code belongs, or writing or reviewing any .vue file or composable.

build standards for Vue 3 and Nuxt 3 (Vite-based) projects — nuxt.config.ts structure, shared Vite/Vitest config and aliases, environment variables and prefixes, build modes and Nitro presets, source maps, caching, dependency upgrades with pnpm, Node pinning via Corepack, reproducible CI builds, build failure triage, browserslist, script naming. Load when configuring or debugging builds, env vars, upgrades, CI install/build steps, or package scripts.

Tooling standards for Vue/Nuxt projects — ESLint, Prettier, TypeScript (strict), Husky + lint-staged, pnpm, with a shared config package such as @acme/config. Load when setting up or changing lint/format/typecheck config, git hooks, CI checks, or package management.

guidance for using and evolving a design system in Vue 3 and Nuxt 3 apps covering design tokens as CSS custom properties with primitive, semantic and component layers, theming, token naming and governance, consistent component APIs (variants, sizes, states, slots, a11y props), spacing scale, composition over configuration, Storybook documentation, contribution, versioning, deprecation, migration, visual regression, avoiding one-off overrides, and accessibility built in. Load when adding or changing tokens or shared components, theming, adopting the design system in an app, or reviewing for design consistency.

i18n standards for Vue 3 and Nuxt 3 using @nuxtjs/i18n (vue-i18n) — when to add i18n, locale file structure and key naming, message format and pluralisation, lazy-loaded locales, routing strategy and SEO alternates, locale detection and cookie persistence, Intl formatting, RTL and text expansion, translated validation/alt/aria text, lang/dir attributes, testing and translation workflow. Load when adding or changing translations, locales, localized routing, formatting of dates/numbers/currency, or reviewing user-facing strings.

performance standards for Vue/Nuxt frontends — Core Web Vitals targets, per-route rendering choice, images (@nuxt/image or plain img), lazy loading, fonts, bundle budgets, reactivity cost, third-party scripts, INP. Load when building pages, adding images/fonts/scripts/dependencies, or reviewing or debugging slow UI.

security standards for Vue/Nuxt frontends — auth token storage decision, XSS (v-html, dynamic URLs), CSP and security headers, env/secrets, dependency hygiene, server-route input validation. Load when handling auth/tokens, rendering user content, configuring headers or env, adding dependencies, or writing server routes.

testing standards for Vue/Nuxt frontends - layering of Vitest, Vue Testing Library and Vue Test Utils for unit and component tests with Playwright and axe for e2e, component versus e2e split, testing composables, mocking fetch and streams, MSW usage, Nuxt test utilities, coverage policy, flaky-test rules, and what not to test. Load when writing, reviewing, or planning frontend tests.

patterns for Nuxt 3 projects — data fetching (useAsyncData vs TanStack Query with axios services), server routes with Zod, runtimeConfig, SEO, routeRules, Pinia. Load when building pages, server/api routes, or configuring a Nuxt 3 app.

Playwright end-to-end testing for Nuxt 3 apps - scoping e2e to critical user journeys, role/label/test-id locators, auto-waiting instead of sleeps, fixtures and storageState auth reuse, API seeding, parallel isolation with per-test data, network mocking versus real backend, controlled streamed responses, visual snapshot policy, traces and screenshots on failure, flake triage and quarantine, CI with pnpm, axe accessibility checks, and headless runs against a built app. Load when adding or fixing Playwright tests, setting up e2e CI, debugging flaky tests, or deciding what to cover end to end.

rules for deciding where state lives in Vue 3 and Nuxt 3 apps — local ref, composable or provide/inject, Pinia setup stores for global client state, TanStack Query for server state, URL state, VeeValidate form state, and persisted state — plus Pinia rules (storeToRefs, actions, one store per domain), SSR safety and hydration, reset on logout, derived state, avoiding watch-based syncing, and testing stores. Load when adding state, creating or changing a Pinia store, deciding between Pinia and TanStack Query, handling SSR state, or reviewing state flow.

Storybook standards for Vue components - CSF3 stories in TypeScript, story organisation by atomic level, required states, play-function interaction tests, a11y addon with CI failure, visual regression, autodocs, decorators for providers, Nuxt integration caveats, and CI test running. Load when creating or reviewing a component, writing a story, or setting up Storybook.

Rules for consuming server-sent token streams in the browser with Vue 3 and Nuxt 3 - fetch plus ReadableStream versus EventSource, robust SSE frame parsing (partial chunks, multi-line data, TextDecoder stream mode), typed and validated event schemas, AbortController for stop and navigation, reconnect with Last-Event-ID and resume, event-id dedupe, retry and backoff, auth on long streams, a useChatStream composable with a status state machine, store ownership, SSR and client-only caveats, unmount cleanup, and testing with mocked streams. Load when implementing or debugging a streaming chat client, SSE parsing, stop or resume behaviour, or stream error handling.

Turborepo conventions for monorepos only — task pipeline (lint, typecheck, test, build, storybook build), caching, PR filtering, shared config package, pnpm workspaces. Load when the repo is already a monorepo; never for single-package projects.