Opinionated conventions for building maintainable Vue 3 apps with TypeScript and the Composition API.
# Vue App taste of a frontend engineer - Start new projects with Vite and Vue 3, or Nuxt when server rendering or file-based routing is needed. Confidence: 0.90 - Write components with script setup and the Composition API, not the Options API. Confidence: 0.90 - Use TypeScript everywhere and check templates with vue-tsc in CI. Confidence: 0.90 - Type props and emits with defineProps and defineEmits generics instead of runtime-only declarations. Confidence: 0.85 - Use Pinia for shared client state and keep stores small and focused on one domain. Confidence: 0.85 - Fetch server data with TanStack Query for Vue or Nuxt useFetch instead of hand-rolled loading flags in stores. Confidence: 0.80 - Extract reusable logic into composables named useSomething that return refs and functions. Confidence: 0.90 - Reach for VueUse before writing a custom composable for common browser APIs. Confidence: 0.75 - Prefer computed over watch, and use watch only for side effects. Confidence: 0.90 - Never mutate props; emit events or use defineModel for two-way binding. Confidence: 0.95 - Always give v-for items a stable key from the data, never the index. Confidence: 0.90 - Never combine v-if and v-for on the same element. Confidence: 0.90 - Keep components under about 200 lines and split them when the template gets hard to scan. Confidence: 0.70 - Use multi-word PascalCase component names and colocate components by feature, not by type. Confidence: 0.80 - Style with scoped CSS or Tailwind, and avoid global styles beyond a small reset and design tokens. Confidence: 0.75 - Lazy load route components with dynamic imports in Vue Router. Confidence: 0.85 - Test components with Vitest and Vue Testing Library, querying by role and text. Confidence: 0.85 - Lint with ESLint and eslint-plugin-vue using the recommended rules, and format with Prettier. Confidence: 0.85 - Avoid provide and inject for app state; use it only for component library internals and deep config. Confidence: 0.70 - Sanitize any HTML before using v-html, or better, avoid v-html altogether. Confidence: 0.95
Audits foreground/background color pairs for WCAG 2.x contrast (AA and AAA for normal and large text), reports ratios and pass/fail, and notes color-blindness risks. Use when checking UI palettes, design tokens, or asking "is this gray-on-white readable?". Includes a stdlib Python contrast checker with --self-test.
AST-based code pattern analysis using ast-grep for security, performance, and structural issues. Use when (1) reviewing code for security vulnerabilities, (2) analyzing React hook dependencies or performance patterns, (3) detecting structural anti-patterns across large codebases, (4) needing systematic pattern matching beyond manual inspection.
Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).
Compares an OpenAPI YAML/JSON spec to a list of implemented routes and flags drift: missing operations, extra routes, method mismatches, and path-parameter shape differences. Use when reviewing API PRs, before a release, or asking "does our code still match the OpenAPI?". Includes a stdlib Python checker with --self-test.
