vue-ssr

Architecture reference for the Vue SSR Starter Kit (e-xode/vue-ssr): Vue 3.5+ + Vite 7 + Express 5 + MongoDB 7 + Vuetify 4 + Pinia + Vue Router with locale-prefixed routing. Covers file structure, SSR lifecycle (entry-server/entry-client/renderToString), locale routing system (useLocalePath, /:locale(en|fr)/), layout system (public/minimal/app), shared utilities inventory (apiFetch, parseObjectId, dbHelpers, email, security), API endpoint patterns (setupXRoute), view/component naming, Vuetify gotchas, and environment variables. Trigger on any architecture question, file placement, new feature scaffolding, routing, SSR, or shared utility usage. Don't use for: auth flow details (→ vue-ssr-auth), Docker/CI deployment (→ vue-ssr-deployment), post-task validation (→ vue-ssr-hooks), UI/UX design (→ design agent).

Post-task validation system for the Vue SSR Starter Kit: the hooks agent runs a format → lint → build → test battery via the single `npm run validate` orchestrator, on user opt-in only. Covers the opt-in trigger (never automatic), the validate.mjs orchestrator (parallel stages, prettier/eslint --cache, git-digest sentinel skip), the short-circuit table (skip validation for non-code files, build only on .vue/.js), the dormant settings._json hooks, and the subagent validation blocker. Trigger on: validation failures, understanding why lint/build/test ran or didn't run, modifying the validation pipeline. Don't use for: app code architecture (→ vue-ssr-architecture), auth (→ vue-ssr-auth), deployment (→ vue-ssr-deployment), Claude config governance (→ claude-anthropic).

Material Design 3 / Vuetify 4 art-direction charter for the Vue SSR Starter Kit (e-xode/vue-ssr): the opinionated, screenshot-verifiable brand-identity layer above design-scss and design-ux. Defines the clean-minimal direction (single indigo brand accent, neutral-gray chrome, bordered flat MD3 surfaces, 8px rhythm, restraint over decoration) as DECIDABLE screenshot-checkable systems: quiet surface rhythm, canonical hover/elevation per component archetype with sibling consistency, palette roles, decorative restraint, and an evidence-based pre-delivery checklist graded by the visual-qa agent. Trigger on ANY visual/finition or polish work on rendered views: card hovers, surface backgrounds, elevation, accent usage, hero/CTA styling. Load BEFORE design-scss/design-ux when styling views. Don't use for: SCSS token/mixin mechanics (→ design-scss), UX methodology (→ design-ux), Vuetify component API (→ vuetify-components), design routing (→ vue-ssr-design), marketing copy (→ content-strategy).

Editorial method and content operations for the Vue SSR Starter Kit (e-xode/vue-ssr): the how-to-produce layer on top of the marketing-content facts, for content that markets the open-source kit. Covers the editorial workflow (research, propose, draft FR+EN, verify, optimize), operational tone and voice (Avoid/Prefer, no arrow character, bilingual discipline), per-channel playbooks (LinkedIn posts and long-form articles, landing/contact page copy via i18n, the GitHub/npm README storefront), audience personas and angles, the content inventory glossary (anti-duplication, follow-up radar), the editorial backlog, and the daily growth/SEO advisory playbook. Trigger when writing or improving a LinkedIn post or article, page marketing copy, README/storefront copy, brainstorming content ideas, or asking what to do today for content/SEO. Don't use for: canonical product/stack/feature facts (→ marketing-content), i18n key placement (→ translate), meta/JSON-LD/sitemap (→ seo), visuals or layout (→ design).

Marketing and product-knowledge FACTS for the Vue SSR Starter Kit (e-xode/vue-ssr): the source of truth for acquisition content that markets the open-source kit itself. Covers the canonical content rules (bilingual FR+EN, humble tone, concrete numbers, never the → arrow character), where assets live (src/assets/linkedin/, page copy via i18n, the GitHub/npm storefront), and product facts: what the kit is (Vue 3.5 + Vite + Express 5 + MongoDB 7 + Vuetify 4 SSR boilerplate with auth, i18n, admin), its stack/version snapshot (authoritative source = package.json), feature inventory, and differentiator (a curated Claude Code agent/skill fleet). Trigger when you need the facts behind acquisition content: what the kit is, its features, stack, positioning, audience, license, repo/npm location, or asset locations. Don't use for: the editorial method, tone/voice, inventory/backlog and writing workflow (→ content-strategy), i18n keys (→ translate), page meta/structured data (→ seo), visual/layout design (→ design).

Pure-marketing strategy for the Vue SSR Starter Kit (e-xode/vue-ssr): the strategic layer above the content factory, for marketing the open-source MIT kit. Owns global strategy, the no-price monetization model (the kit is free; success = developer adoption that funnels inbound to E-XODE services), campaign planning, channel and social strategy (LinkedIn, GitHub, dev.to, Reddit r/vuejs, npm), positioning and ICP, competitive analysis, and growth/funnel thinking (stars, installs, forks). Decisions persist as references (positioning, pricing, campaigns, gtm, competitive) and are handed to the content agent. Trigger when defining strategy, the monetization stance, planning a campaign, choosing channels, analysing competitors, or reasoning about the adoption funnel. Don't use for: writing the actual posts/articles/README/page copy (→ content agent + content-strategy), product facts (→ marketing-content), i18n keys (→ translate), meta/JSON-LD/sitemap (→ seo), code (→ vue/server), visuals (→ design).

Deployment and CI/CD reference for the Vue SSR Starter Kit: Docker multi-stage build, docker-compose split into a base (app, remote DB) plus a docker-compose.local.yml override (local mongo) switched via the COMPOSE_FILE variable in .env, GitHub Actions workflows (npm-publish on tags, npm-test on PR, docker-build to GHCR), production configuration (Helmet CSP, COOKIE_SECRET, graceful shutdown SIGTERM/SIGINT), Dependabot weekly npm updates. Trigger on any deployment, Docker, docker-compose local-vs-remote DB switch, CI/CD, production config, or infrastructure question. Don't use for: app architecture (→ vue-ssr-architecture), auth flow (→ vue-ssr-auth), post-task validation (→ vue-ssr-hooks).

SCSS design-system reference for the Vue SSR Starter Kit: design tokens (spacing, radius, shadows, transitions, breakpoints in variables.scss), 11 mixins (flex-center, flex-between, flex-col, truncate, multiline-truncate, absolute-center, transition, hover-lift, button-reset, visually-hidden, respond-to), the auto-injection barrel (_inject.scss via Vite: variables/typography/mixins only), component-scoped SCSS conventions, and the inert _animations.scss/_utilities.scss partials (present but NOT bundled; classes render nothing). Trigger on ANY styling work: writing SCSS, choosing tokens, animations, component .scss files, Vuetify style overrides, layout utilities, or design-system questions. This is the token/mixin reference — the design agent loads this skill to produce SCSS. Don't use for: app architecture (→ vue-ssr-architecture), auth (→ vue-ssr-auth), Docker/CI (→ vue-ssr-deployment), validation (→ vue-ssr-hooks), Vuetify component API (→ vuetify-components), design delegation routing (→ vue-ssr-design).

Design and UX methodology for the Vue SSR Starter Kit: design-first thinking, visual hierarchy (size > color > weight > position), Material Design 3 alignment via Vuetify 4, 8px spacing rhythm ($spacing-unit multiples), color semantics (primary for CTAs, success/error for feedback, neutral for chrome), micro-interactions (meaningful, restrained, accessible), responsive UX (mobile-first, breakpoint semantics), and WCAG 2.1 AA accessibility. Trigger on: UI quality, design direction, visual hierarchy, accessibility audit, responsive decisions, animation design, color review, UX patterns, user feedback design. This is methodology — the design agent is the executor. Don't use for: SCSS implementation (→ design-scss), Vuetify component API (→ vuetify-components), app architecture (→ vue-ssr-architecture), auth flow (→ vue-ssr-auth), deciding when to delegate design work (→ vue-ssr-design).

SEO reference for the Vue SSR Starter Kit (e-xode/vue-ssr): how the kit's server-side SEO is wired and the per-page checklist. Covers meta injection in src/entry-server.js (title/description/keywords/robots/theme-color/author built from route meta i18n keys via t()), JSON-LD structured data (Organization site-wide, WebSite + SearchAction on the home route, BreadcrumbList on deep pages, suppressed on noindex routes), Open Graph + Twitter Cards, bilingual hreflang alternates (en/fr + x-default to /en), and the dynamic robots.txt + sitemap.xml served by server.js (public paths only, 1h cache). Trigger on any SEO work: meta tags, canonical, structured data, sitemap, robots, hreflang, Core Web Vitals, or per-page SEO checklists. Don't use for: routing internals (→ vue-ssr-architecture), translation copy of meta keys (→ translate), off-site/LinkedIn marketing content (→ marketing-content/content-strategy), visual/perf styling (→ design-scss).

Release workflow for the Vue SSR Starter Kit (e-xode/vue-ssr): version bumping (patch/minor/major), CHANGELOG generation from git log, release branch creation (release/vX.Y.Z), package-lock sync, commit/push/tag proposal. Trigger on any release request, version bump, changelog update, or when the user says 'release'. Delegates to the release agent. Don't use for: deployment/CI (→ vue-ssr-deployment), code changes (→ vue agent), post-task validation (→ vue-ssr-hooks).

Govern Claude/Anthropic configuration of the Vue SSR Starter Kit (e-xode/vue-ssr): rules and audit method for CLAUDE.md, skills under .claude/skills/, path-scoped rules under .claude/rules/, sub-agents under .claude/agents/, and hooks under .claude/hooks/. Trigger when creating, modifying, reviewing or auditing a skill / rule / sub-agent / CLAUDE.md / hook, when deciding between a rule vs a skill for a constraint, or when asking about Anthropic doctrine (model spec, agent design, progressive disclosure). Co-load with skill-creator when authoring a skill. Don't use for: the create/eval/iterate loop itself (→ skill-creator), post-task code validation (→ vue-ssr-hooks + hooks agent), app architecture (→ vue-ssr-architecture), or auth flow (→ vue-ssr-auth).

Design delegation and coordination reference for the Vue SSR Starter Kit: when to delegate to the design agent vs handle styling inline, division of concerns between design agent and design-ux/design-scss/vuetify-components skills, design workflow for new features (design-first → implement → validate), starter-kit design principles (clean, minimal, customizable, Material Design 3). Trigger on: deciding whether a task needs the design agent, planning UI work that mixes logic and design, new feature design direction, design-system extension decisions, visual debt triage. Don't use for: actual SCSS implementation (→ design-scss), UX methodology (→ design-ux), Vuetify component API (→ vuetify-components), Vue logic (→ vue3-composition), app architecture (→ vue-ssr-architecture).

Server/backend reference for the Vue SSR Starter Kit (e-xode/vue-ssr): Express 5 API layer (createApiRouter(db) entry, setupXRoute(app, db) route-module pattern, routes under src/api/auth|admin|contact), auth/admin middleware guards (requireAuth, requireAdmin, setMiddlewareDb), MongoDB singleton lifecycle (mongoConnect/mongoClose, ensureIndexes), data-access helpers (parseObjectId, parsePagination from dbHelpers.js), per-endpoint rate limiters (createLimiter, production-only), and server-only shared utilities (email, security, captcha, log). Trigger on backend/API route work: adding or editing an Express route, wiring the router, MongoDB queries and indexes, request validation, rate limiting, or server-side shared utilities. Don't use for: auth flow specifics like security codes/sessions/captcha logic (→ vue-ssr-auth), file structure/SSR lifecycle/routing (→ vue-ssr-architecture), Docker/CI/production config (→ vue-ssr-deployment), post-task validation (→ vue-ssr-hooks), Vue/client code (→ vue agent).

Vuetify 4 general display and feedback components for the Vue SSR Starter Kit: containers and content (v-card, v-list/v-list-item, v-chip, v-avatar), overlays and feedback (v-dialog with reusable confirm-dialog pattern, v-snackbar toasts, v-alert, v-tooltip), and loading indicators (v-progress-linear, v-progress-circular, v-skeleton-loader). Trigger on: building cards, lists, chips, avatars, dialogs/modals, snackbars, alerts, tooltips, progress, or skeleton loaders. Don't use for: form inputs (→ vuetify-forms), data tables/pagination (→ vuetify-data), app shell/navigation/tabs (→ vuetify-layout), component selection overview and defaults (→ vuetify-overview), theming (→ vuetify-theming), icons (→ vuetify-icons), Vue-level Teleport/Suspense/Transition (→ vue3-builtin-components).

Vuetify 4 data presentation for the Vue SSR Starter Kit: server-side paginated tables (v-data-table-server with headers/items/items-length, options watcher, custom item slots for chips and action buttons), client-side v-data-table, and standalone v-pagination. Trigger on: building a data table, server-side pagination, table headers/columns, custom cell rendering, or pagination controls. Don't use for: forms and inputs (→ vuetify-forms), cards/lists/chips/dialogs (→ vuetify-components), navigation/tabs (→ vuetify-layout), general component choice (→ vuetify-overview), the apiFetch call itself (→ vue-ssr-architecture), SCSS styling (→ design-scss).

Vuetify 4 form building for the Vue SSR Starter Kit: form inputs (v-text-field, v-select, v-switch, v-checkbox, v-textarea, v-radio), the v-form wrapper with ref-based validation, validation rules (required/email/custom returning i18n keys), async submit with form.validate(), and project input defaults (outlined, comfortable density, rounded). Trigger on: building a form, adding inputs, validation rules, form submission, or input component props. Don't use for: data tables (→ vuetify-data), dialogs/snackbars/alerts (→ vuetify-components), navigation (→ vuetify-layout), general component choice (→ vuetify-overview), i18n key creation (→ translate agent), SCSS styling (→ design-scss).

Vuetify 4 iconography for the Vue SSR Starter Kit using @mdi/js tree-shakeable SVG icons: importing named icon paths (mdiAccount, mdiEmail, ...), binding via :icon / prepend-icon / append-inner-icon, the common-icon catalog, and why icon font classes (mdi-account) are forbidden. Trigger on: adding an icon, importing from @mdi/js, icon props on buttons/fields, or the icon catalog. Don't use for: component selection (→ vuetify-overview), theming (→ vuetify-theming), form/field APIs beyond the icon prop (→ vuetify-forms), SCSS (→ design-scss).

Vuetify 4 layout and navigation for the Vue SSR Starter Kit: application shell (v-app, v-main), the 12-column grid (v-container/v-row/v-col), top bar (v-app-bar), side navigation (v-navigation-drawer with rail/temporary), context menus (v-menu), tab navigation (v-tabs + v-tabs-window), breadcrumbs, and responsive navigation. Trigger on: building the page shell, grid layout, app bar, navigation drawer, menus, tabs, breadcrumbs, or responsive navigation. Don't use for: which-component decision tree and useDisplay breakpoint basics (→ vuetify-overview), cards/dialogs/alerts (→ vuetify-components), forms (→ vuetify-forms), data tables (→ vuetify-data), theming (→ vuetify-theming), SCSS layout mixins like flex-center/respond-to (→ design-scss).

Vuetify 4 (Material Design 3) entry point and global configuration for the Vue SSR Starter Kit: component selection decision tree (which v-component for which UI need), project-wide defaults in src/plugins/vuetify.js (rounded, variants, density per component), the semantic color palette (primary/secondary/accent/success/warning/error), SSR-safe instantiation (createApplicationVuetify(ssr) flag), and responsive breakpoints via the useDisplay composable. Trigger on: choosing which Vuetify component to use, project default props, color tokens by name, SSR Vuetify setup, useDisplay/breakpoint behavior, or a general 'which Vuetify component' question. Don't use for: specific component APIs — forms (→ vuetify-forms), data tables (→ vuetify-data), cards/dialogs/alerts (→ vuetify-components), app-bar/drawer/tabs (→ vuetify-layout), theming/dark mode (→ vuetify-theming), icons (→ vuetify-icons), SCSS tokens (→ design-scss).

Vuetify 4 theming for the Vue SSR Starter Kit: theme configuration (light/dark themes), theme tokens and CSS custom properties, dark-mode switching, per-component defaults via the defaults object, and Vuetify CSS utility classes. Trigger on: configuring or switching themes, dark mode, defining theme colors, the defaults provider, or Vuetify utility classes. Don't use for: choosing a color token by name or general component selection (→ vuetify-overview), SCSS design tokens/variables.scss (→ design-scss), component APIs (→ vuetify-components/forms/data/layout), icons (→ vuetify-icons).

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics. Don't use for: the Vue SSR Starter Kit's own UI, which must follow its Material Design 3 / Vuetify 4 design system and tokens (→ design agent with design-ux, design-scss, vuetify-components, vue-ssr-design); this skill is for greenfield/standalone distinctive interfaces, not the kit's conventions.

Code-review specialist for the Vue SSR Starter Kit (e-xode/vue-ssr). Performs a structured, severity-categorized review of a branch, PR, or uncommitted diff against the project's documented conventions and skills. Read-only — never modifies code. Delegate to this agent whenever the user asks to review, code-review, audit a branch/PR, check changes against conventions, or wants a second opinion on a diff before merge. Returns a markdown report tagged with anomaly types (security, bug, regression, perf, i18n, convention, test-gap). Don't use for: making code changes (do it yourself or use task agents), post-task validation (→ vue-ssr-hooks + hooks agent), Claude config audit (→ claude-anthropic).

Create new skills, modify and improve existing skills, and measure skill performance for the Vue SSR Starter Kit. Use when users want to create a skill from scratch, edit or optimize an existing skill, run evals to test a skill, or optimize a skill's description for better triggering accuracy. ALWAYS load together with the claude-anthropic skill: skill-creator owns the create/eval/iterate workflow, claude-anthropic owns the project rules (naming, placement, frontmatter conventions, anti-triggers, references layout, post-creation audit checklist). Don't use for: project-specific skill conventions, audit of existing skills, or CLAUDE.md/agents/hooks governance (→ claude-anthropic skill).

Post-fork/clone adaptation guide for the Vue SSR Starter Kit Claude configuration. Trigger when: setting up a new project from this starter, customizing Claude config after fork, updating skill descriptions after dependency changes, removing starter-kit-specific skills, adding project-specific skills/rules/agents, or adapting the agent fleet for a new domain. Don't use for: day-to-day feature work (→ domain skills), Claude config governance rules (→ claude-anthropic), skill authoring workflow (→ skill-creator).

i18n and translation reference for the Vue SSR Starter Kit (e-xode/vue-ssr): 2-locale system (EN/FR) with vue-i18n 11 in Composition API mode, nested JSON locale files at src/translate/{en,fr}.json, key naming conventions (section.subsection.camelCase), interpolation syntax ({param}), locale-aware routing via useLocalePath composable, and parity enforcement between locales. Trigger on any i18n work: adding/editing translations, creating new locale keys, fixing missing translations, checking locale parity, using t() in templates, locale routing, or internationalization questions. Don't use for: app architecture (→ vue-ssr-architecture), auth flow (→ vue-ssr-auth), post-task validation (→ vue-ssr-hooks), component styling (→ design-scss).

Authentication and security reference for the Vue SSR Starter Kit: email-based security code flow (signup → verify → dashboard), 6-digit code generation (crypto.randomInt), SHA-256 hashing, timingSafeEqual verification, bcryptjs password hashing, express-session with file-store, rate limiting per endpoint type, IP blocking, session destruction, reCAPTCHA v3 integration (client composable + server verification). Trigger on any auth work: login, signup, password reset, session management, security code, rate limiting, or captcha. Don't use for: general app architecture (→ vue-ssr-architecture), Docker/CI (→ vue-ssr-deployment), post-task validation (→ vue-ssr-hooks), UI/UX design (→ design agent).

Vue 3 built-in components for the Vue SSR Starter Kit: Teleport (overlays/modals, SSR notes), Suspense (async setup, SSR caveats), KeepAlive (component caching, include/exclude, with router-view), Transition and TransitionGroup (enter/leave classes, JS hooks, list move transitions, key requirement). JavaScript only, <script setup>, SSR-safe. Trigger on: Teleport, Suspense, KeepAlive, Transition or TransitionGroup usage, custom overlays/modals at Vue level, async-component loading states, animating element or list enter/leave. Don't use for: Vuetify dialogs/menus/overlays and their built-in transitions (→ vuetify-components), SCSS animations and prefers-reduced-motion (→ design-scss), reactivity (→ vue3-composition), SSR lifecycle/architecture (→ vue-ssr-architecture).

Vue 3 component design and communication for the Vue SSR Starter Kit: props (definition, validation, one-way data flow), emits/events (declaration + validation), component v-model via defineModel, slots (default, named, scoped, conditional), provide/inject (reactive injection, injection keys), fallthrough attributes (inheritAttrs), dynamic components (<component :is>), and async components (defineAsyncComponent). JavaScript only, <script setup>, SSR-safe. Trigger on: designing component props/events, parent-child communication, slot patterns, provide/inject, dynamic or async components, building reusable custom components. Don't use for: ref/computed/watch/lifecycle reactivity (→ vue3-composition), Vuetify component API/props (→ vuetify-components), template directives/v-for/native v-model (→ vue3-templates), SCSS styling (→ design-scss), app architecture/routing (→ vue-ssr-architecture).

Vue 3 Composition API reference for the Vue SSR Starter Kit (e-xode/vue-ssr): ref(), computed(), watch(), onMounted(), nextTick(), <script setup>, composable authoring (useXxx pattern), template refs, defineProps/defineEmits/defineModel, SSR-safe reactivity patterns, and common pitfalls (.value, destructuring loss). Trigger on any Vue 3 reactivity question, component authoring, composable creation, lifecycle hook usage, watcher setup, ref vs reactive decision, script setup syntax, defineProps, defineEmits, or template ref pattern. Don't use for: app architecture or file structure (→ vue-ssr-architecture), auth flow (→ vue-ssr-auth), deployment (→ vue-ssr-deployment), post-task validation (→ vue-ssr-hooks), UI/UX design or styling (→ design agent).

Vue 3 performance optimization for the Vue SSR Starter Kit: reactivity perf (shallowRef/shallowReactive, markRaw, computed caching, avoiding over-reactivity), rendering perf (v-memo, v-once, stable keys), component perf (async/lazy components + code splitting), large lists (virtual scrolling via Vuetify, pagination), and SSR perf (light setup, avoiding hydration mismatches). JavaScript only, <script setup>, SSR-safe. Trigger on: optimizing render/update performance, slow large lists or tables, shallowRef/markRaw decisions, v-memo/v-once, lazy-loading components, hydration-mismatch or SSR performance issues. Don't use for: build/bundle/production deployment config (→ vue-ssr-deployment), reactivity basics (→ vue3-composition), Vuetify component API (→ vuetify-components), app architecture (→ vue-ssr-architecture).

Vue 3 reusability via custom directives and plugins for the Vue SSR Starter Kit: custom directives (mounted/updated hooks, SSR client-side caveats, function shorthand, arguments and modifiers, directive vs component decision) and plugins (app.use, install function, app-level provide injections, global properties used sparingly). JavaScript only, SSR-safe. Trigger on: writing a custom directive (v-xxx), authoring a Vue plugin, app-level install logic, deciding directive vs component vs composable. Don't use for: composables which are the primary reuse mechanism (→ vue3-composition), component props/slots (→ vue3-components), Vuetify usage (→ vuetify-components), app architecture (→ vue-ssr-architecture).

Vue 3 template syntax for the Vue SSR Starter Kit: text interpolation, directives (v-bind/:, v-on/@, v-if/v-else/v-show, v-for with mandatory key), class and style bindings (array/object syntax), event handling (inline vs method handlers, .stop/.prevent/.self and key modifiers), native-element v-model (.lazy/.number/.trim), and rendering best practices (v-if vs v-show, never v-if together with v-for). JavaScript only, <script setup>. Trigger on: writing template markup, directives, list/conditional rendering, event handling and modifiers, class/style bindings, v-model on native HTML inputs. Don't use for: component props/slots/emits/component v-model (→ vue3-components), Vuetify form components and validation (→ vuetify-components), choosing color/spacing tokens (→ design-scss), reactivity primitives (→ vue3-composition).