Algorithms & Data Structures 1
▼
Works with arrays and objects in reactive() and ref() Vue 3. Understands reactivity limitations when mutating nested structures, correctly uses shallowRef and shallowReactive for flat data.
Designs normalized data structures in Pinia stores for efficient UI updates. Uses Map and Set in composables, understands Vue 3 reactive proxy behavior with different collection types.
Defines data architecture for large-scale Vue applications — normalization, denormalization, indexing in client stores. Designs universal composables for working with typed collections through TypeScript generics.
Shapes data management strategy at the company's Vue application ecosystem level. Designs client-side data structure synchronization systems with server state, including CRDT and event sourcing patterns.
Application Security 1
▼
Understands basic web application vulnerabilities — XSS, CSRF and their prevention in Vue. Uses Vue 3 built-in XSS protection through automatic escaping in templates, avoids v-html with user data.
Implements Vue application protection against OWASP Top 10 — CSP headers in Nuxt, user input sanitization, secure cookie configuration. Configures Nuxt Security module, conducts dependency audit through npm audit.
Designs security system for Vue applications — security headers via Nitro middleware, auth flow with PKCE, subresource integrity. Conducts component security review, introduces automated vulnerability scanning in CI pipeline.
Build Tools & Bundling 1
▼
Uses Vite for Vue project development — HMR, dev server, basic vite.config.ts configuration. Understands the difference between dev and production modes, configures aliases and environment variables.
Configures Vite for Vue project — plugins (unplugin-auto-import, unplugin-vue-components), API proxy, dep pre-bundling optimization. Configures Vitest through vite.config, sets up SSR mode for Nuxt.
Defines Vite configuration standards for Vue teams — shared presets, plugin governance, migration guide. Introduces Turborepo for monorepo with Vue projects, optimizes CI/CD pipeline through Vite artifact caching.
Shapes build tooling strategy for company's Vue ecosystem — Vite vs Turbopack evaluation, plugin ecosystem contribution, build unification. Researches Rolldown, Module Federation 2.0 and other bundling evolutions.
Clean Code & Refactoring 1
▼
Follows ESLint rules with eslint-plugin-vue and Prettier for consistent code. Applies Vue Style Guide recommendations — component naming, option order, using script setup with defineProps and defineEmits.
Configures strict ESLint rules for Vue 3 — vue/recommended, TypeScript strict mode, auto-fix through Vite plugin. Introduces Husky + lint-staged for pre-commit checks, writes reusable composables with JSDoc.
Defines code quality standards for Vue teams — architectural guidelines, review checklist, automated CI checks. Builds code review culture focused on Composition API patterns and type safety.
Shapes code quality strategy across organizational Vue ecosystem. Introduces automated analysis systems — bundle analysis, dead code detection, dependency audit with Vite and Nuxt pipeline integration.
CSS & Styling 4
▼
Uses CSS-in-JS at basic level. Creates simple components from design. Understands basic concepts and follows component guidelines.
Implements complex Vue components using CSS-in-JS libraries (e.g., vue-styled-components) or scoped styles with dynamic bindings. Optimizes rendering by minimizing style recalculations in reactive contexts. Applies proper patterns for theme switching and state-driven styling in Vue SFCs.
Defines product-level CSS-in-JS architecture for Vue applications: evaluates styling strategies (SFC scoped vs CSS-in-JS libraries), establishes design token governance, and sets component API standards. Conducts architectural reviews ensuring scalable, accessible, and performant styling across teams.
Defines styling strategy for company's Vue ecosystem — zero-runtime CSS-in-JS through UnoCSS, atomic CSS approach with Tailwind, design token integration. Researches and introduces advanced approaches — CSS Layers, Container Queries, View Transitions API in Vue components.
Uses ready Vue design system components — Vuetify, PrimeVue, Headless UI. Follows documentation when customizing, understands slots and props for adapting components to project requirements.
Creates Vue component library with unified API — slots, expose, v-model customization. Documents components in Storybook with Histoire, writes component tests through Vitest and Vue Test Utils.
Defines organization's design system architecture on Vue — governance, versioning, adoption strategy. Builds synchronization process between designers (Figma) and Vue components through tokens and code generation.
Shapes design system strategy for the company's Vue application ecosystem — multi-brand support, cross-framework compatibility through Web Components, federated design system for micro-frontends.
Applies scoped styles and CSS variables in Vue SFC. Uses Flexbox and Grid for Vue component layouts, understands style cascading and specificity in the context of scoped and deep selectors in Vue.
Creates responsive layouts with Container Queries and CSS Grid in Vue components. Implements animations through CSS Transitions and Vue Transition/TransitionGroup, uses :deep() and :slotted() selectors.
Defines CSS architecture standards for Vue teams — methodologies, tooling, performance budgets for styles. Introduces automated CSS quality checking systems — Stylelint, visual regression through Playwright.
Shapes CSS strategy for the organization's Vue ecosystem — evaluation of styling approaches, design token integration, progressive enhancement. Researches and introduces new CSS capabilities — @scope, nesting, scroll-driven animations.
Applies basic Tailwind CSS utility classes in Vue components — spacing, colors, typography, flexbox. Uses @apply directives in scoped Vue SFC styles, understands tailwind.config configuration through Vite.
Creates custom design system on Tailwind for Vue project — custom theme, plugins, Headless UI components. Optimizes PurgeCSS configuration for Vite, uses @tailwindcss/typography and animations.
Defines Tailwind CSS usage standards for Vue team — naming conventions, component abstractions, Storybook integration. Introduces design token system synchronized between Figma and Tailwind configuration.
Shapes utility-first CSS strategy for organizational Vue ecosystem — Tailwind vs UnoCSS evaluation, atomic CSS optimization, design system integration. Researches new styling approaches — CSS Anchor Positioning, Scroll-driven Animations.
Frontend Architecture 1
▼
Understands differences between SSR, SSG and CSR in Nuxt 3 context. Configures basic Nuxt project with chosen rendering strategy, uses routeRules for hybrid rendering of individual pages.
Implements hybrid rendering in Nuxt 3 — ISR through routeRules, SWR caching, prerendering static pages. Solves hydration mismatch issues, configures client-only and server-only components.
Defines rendering strategy for organizational Vue projects — SSR vs SSG vs ISR for different content types, infrastructure requirements. Introduces SSR performance monitoring and Nuxt application deployment standards.
Shapes rendering strategy for company's Vue ecosystem — edge computing through Nitro, Islands Architecture, partial hydration. Researches and introduces Server Components, Resumability and other advanced rendering patterns.
Frontend Testing 2
▼
Writes basic Vue component tests through Vitest and Vue Test Utils — mount, render checking, props interaction. Tests emit events and slots, understands the difference between mount() and shallowMount().
Creates comprehensive component tests — mocking Pinia stores, Vue Router, API calls through MSW. Tests composables in isolation, uses Vitest snapshot tests and custom matchers for Vue-specific checks.
Defines component testing standards for Vue teams — coverage thresholds, testing patterns, review checklist. Introduces testing culture through training, templates and automated test quality checks in CI.
Shapes component testing strategy for the company's Vue ecosystem — shared test utilities, cross-team testing patterns, design system integration. Researches new approaches — component-level E2E, AI-assisted test generation.
Understands visual regression testing concept for Vue components. Configures Storybook for Vue 3 with Histoire, creates stories for UI components as a base for visual snapshots.
Configures visual regression tests for Vue components through Playwright and Percy/Chromatic. Integrates with Storybook — automated screenshot tests for each story, configures threshold and viewport breakpoints.
Defines visual testing strategy for Vue teams — tooling (Chromatic vs Percy vs Playwright), baseline approval governance, code review integration. Introduces visual validation processes when updating design system.
Shapes visual testing strategy for company's Vue ecosystem — cross-project baseline, automated UI consistency monitoring. Researches AI-powered visual testing and approaches to reducing flaky tests.
OOP & Design Patterns 1
▼
Applies basic Vue 3 patterns — props/emit for component communication, provide/inject for dependency injection. Uses Composition API for extracting repeating logic into composable functions.
Implements Renderless Components, Compound Components and Headless UI patterns in Vue 3. Designs reusable composables with inversion of control, applies Strategy and Observer through Vue reactivity system.
Defines pattern and anti-pattern catalog for Vue development in the organization. Introduces architectural solutions — Feature-Sliced Design, Clean Architecture adapted for Vue 3 and Nuxt 3 ecosystem.
Shapes architectural pattern strategy for the entire company's Vue ecosystem. Researches and adapts advanced patterns — Islands Architecture, Resumability (Qwik-approach), server components for Nuxt.
Specialized Testing 1
▼
Understands basic accessibility testing concepts including WCAG guidelines, semantic HTML in Vue templates, and ARIA binding patterns. Follows team checklists for running axe-core audits and keyboard navigation tests on Vue components. Uses vue-axe plugin and browser DevTools accessibility panels to identify common a11y violations in Vue single-file components during development.
Independently writes accessibility tests for Vue components using Vue Testing Library, axe-core integration, and Cypress/Playwright a11y plugins. Implements automated WCAG compliance scanning in CI/CD pipelines for Vue/Nuxt applications with configurable rule sets. Tests screen reader compatibility for Vue custom directives, transition groups, and dynamic component rendering including focus management across route changes.
Defines accessibility testing standards and quality gates for Vue projects across the organization. Establishes automated a11y testing pipelines, Vue component library accessibility certification workflows, and WCAG compliance reporting for Vue/Nuxt products. Conducts architecture reviews ensuring Vue applications meet accessibility requirements and drives adoption of accessible component design patterns across Vue development teams.
Shapes the organization's accessibility testing strategy across Vue and frontend ecosystems, embedding WCAG compliance as a first-class quality dimension. Drives innovation in Vue accessibility tooling including compile-time template a11y analysis, automated assistive technology regression frameworks, and production accessibility monitoring dashboards. Influences Vue community accessibility standards through ecosystem contributions and developer education initiatives.
State Management 2
▼
Uses useFetch and useAsyncData in Nuxt 3 for data loading. Understands the difference between server and client-side loading, handles loading and error states in Vue components through reactive ref.
Implements efficient data loading — caching through useFetch with keys, parallel requests, deduplication. Configures interceptors through ofetch, implements optimistic updates in Pinia stores with rollback on errors.
Defines data layer architecture for organizational Vue projects — API client standards, caching strategy, error handling patterns. Introduces end-to-end type safety through tRPC or typed route rules in Nuxt 3.
Shapes data fetching strategy for Vue ecosystem — GraphQL vs REST, edge caching, real-time sync between applications. Researches and introduces server components, hybrid rendering and streaming SSR patterns in Nuxt.
Uses Pinia for Vue application state management — defining stores through defineStore, reactive state, getters, actions. Understands when to use component local state vs Pinia store.
Designs Pinia store structure — modular organization, composable stores, plugins for persistence and devtools. Uses VueUse composables for global state — useStorage, useBreakpoints, createSharedComposable.
Defines state management strategy for Vue projects — modular Pinia architecture, cross-tab sync, migration patterns. Introduces store organization standards, trains teams on complex state management patterns.
Shapes state management strategy for Vue ecosystem — shared state between micro-frontends, event-driven architecture, CQRS. Researches signal-based reactivity, atomic stores and other state management evolutions.
Vue Ecosystem 2
▼
Uses Nuxt at basic level. Creates simple components from design. Understands basic concepts and follows component guidelines.
Independently implements complex UI components with Nuxt. Optimizes rendering performance. Writes tests. Applies state management tools.
Defines product-level frontend architecture with Nuxt. Establishes standards and best practices. Conducts architectural reviews.
Defines strategic Nuxt 3 infrastructure evolution for the company — custom Nuxt module development, Nitro server optimization, multi-tenant SSR architecture. Contributes to Nuxt ecosystem, shapes standards for Nuxt Layers and Islands Architecture.
Uses Vue Core at basic level. Creates simple components from design. Understands basic concepts and follows component guidelines.
Independently implements complex UI components with Vue Core. Optimizes rendering performance. Writes tests. Applies state management tools.
Defines product-level frontend architecture with Vue Core. Establishes standards and best practices. Conducts architectural reviews.
Shapes Vue architecture evolution strategy at organizational level — custom renderers, compiler macros, virtual DOM optimization. Influences Vue ecosystem through RFC process, researches and introduces Vapor Mode and other experimental Vue capabilities.
Web Performance 2
▼
Understands basic Vite bundling principles — entry points, chunks, tree shaking. Analyzes bundle size through vite-bundle-visualizer, applies dynamic import() for lazy loading Vue Router routes.
Optimizes Vue application bundle — configuring Vite rollupOptions for chunk splitting, manualChunks for vendor libraries. Configures code splitting by Nuxt 3 routes, optimizes Pinia store size through tree shaking.
Defines performance budgets for organizational Vue project bundles — automated size checks in CI, growth alerting. Introduces optimization strategy — dependency audit, bundle analysis, automated size regression testing.
Shapes bundle optimization strategy for the company's Vue ecosystem — shared chunks between micro-frontends, CDN strategies, edge-side rendering. Researches and introduces new approaches — module preload, import maps, Rolldown.
Understands Core Web Vitals metrics — LCP, FID, CLS and their impact on UX. Measures Vue application metrics through Lighthouse and Chrome DevTools, applies basic optimizations — lazy loading images, font-display.
Optimizes Vue application Core Web Vitals — code splitting through dynamic import(), LCP optimization with Nuxt Image, CLS elimination through skeleton screens and aspect-ratio for media content.
Defines performance budgets and Core Web Vitals SLA for organizational Vue projects. Introduces Lighthouse CI in pipeline, configures metric degradation alerting, trains teams on optimization.
Shapes web performance strategy for Vue ecosystem — monitoring automation, metric correlation with business KPIs. Researches new metrics (INP, Smoothness) and architectural approaches to their optimization in Vue/Nuxt.
Web Standards & APIs 3
▼
Understands PWA fundamentals and integrates them into Vue applications. Uses @vue/cli-plugin-pwa or vite-plugin-pwa for service worker generation. Configures caching strategies and offline support following Vue ecosystem patterns.
Configures PWA for Vue/Nuxt — Workbox caching strategies, push notifications, background sync. Implements offline-first approach with Pinia stores and IndexedDB, configures @vite-pwa/nuxt for Nuxt 3.
Defines PWA development standards for Vue teams — offline UX patterns, caching strategies, quality metrics. Introduces PWA testing processes through Lighthouse CI and automated pipeline checks.
Shapes PWA strategy for company's Vue ecosystem — multi-platform deployment, advanced caching, native API integration. Researches Project Fugu APIs and Web Push for extending Vue application capabilities.
Uses basic Web APIs in Vue components — Fetch, localStorage, IntersectionObserver. Integrates browser APIs through VueUse composables — useLocalStorage, useIntersectionObserver, useMediaQuery.
Implements Web API integration through custom composables — WebSocket, Geolocation, Notifications, Clipboard API. Uses VueUse as reference for patterns, handles permissions and fallbacks correctly.
Defines Web API usage standards for Vue projects — security review, permissions policy, privacy-first approach. Introduces architectural solutions for Platform API integration — Web Payments, Credential Management.
Shapes Web API usage strategy for Vue ecosystem — new API evaluation (WebGPU, WebCodecs), shared composable creation, abstraction standardization across teams and applications.
Understands Web Components and Vue's custom element support. Wraps Vue components as web components using defineCustomElement. Handles attribute/property binding and event communication.
Creates Web Components from Vue components through defineCustomElement for integration with other frameworks. Configures Vite for building component library as Web Components with correct styling and event handling.
Defines Web Components strategy for the organization — when to use Vue components vs Custom Elements, shared library governance. Introduces publishing and versioning processes for Web Components from Vue codebase.
Shapes cross-framework strategy through Web Components — interoperability between Vue and other frameworks, micro-frontend integration. Researches Declarative Shadow DOM, CSS Scope and other standard evolutions.