Designs efficient algorithms for large list virtualization and complex filtering in SvelteKit applications. Analyzes reactive dependency graph complexity, optimizes $effect chains to minimize unnecessary DOM updates.
Roles · Frontend Developer (Svelte) · Senior
What a Senior } should know
36 core skills, 51 in total. Expectations per skill, and what changes at the next level.
This page lists what a Senior } is expected to know and do, skill by skill. Core skills are the ones a manager and peers assess in a review cycle; the rest count only in self-assessment. Main areas: Programming Fundamentals, Frontend Development, API & Integration.
Core skills for a Senior
Grouped by area. The label on the right is the expected depth: Awareness, Working, Advanced or Expert.
Programming Fundamentals · 6
Designs complex async flows in SvelteKit: streaming SSR, parallel and sequential load chains, server-sent events. Implements optimistic UI updates with rollback through form actions, manages concurrent data mutations.
Designs comprehensive Svelte project code quality strategy: architectural linters, custom ESLint rules for business conventions, automated CI checks. Introduces technical debt metrics, code coverage gates, and mandatory reviews for SvelteKit routes.
Develops complex data structures for client cache and offline storage in SvelteKit applications. Designs immutable patterns for predictable $state updates, creates type-safe structure wrappers with TypeScript generics.
Designs architectural patterns for scalable Svelte applications: headless components, machine patterns for complex state, plugin architecture. Creates abstractions over SvelteKit hooks and middleware for cross-cutting concerns.
Designs end-to-end type safety from server load functions to client components through SvelteKit type auto-generation. Creates type-safe API wrappers, implements branded types and discriminated unions for the Svelte application domain model.
Frontend Development · 18
Designs bundling strategy for large-scale SvelteKit applications: granular code splitting, module federation, edge optimizations. Creates custom Vite plugins for specific optimizations, implements differential loading and automatic performance budgets in CI.
Designs component testing strategy for Svelte applications: test patterns for headless components, integration tests for SvelteKit layouts. Creates custom render wrappers with providers, tests SSR component rendering, ensures 80%+ coverage.
Designs SvelteKit application architecture prioritizing Core Web Vitals: streaming SSR for LCP, route-based code splitting, predictive prefetching. Creates performance budgets in CI, automates metric regression testing through Playwright and Lighthouse CI.
Designs Svelte design system architecture combining scoped CSS with CSS-in-JS patterns for cross-project consistency. Optimizes bundle size and Core Web Vitals through Svelte's zero-runtime CSS approach. Creates reusable, accessible component libraries with comprehensive theming and variant support.
Designs data fetching architecture for SvelteKit applications: load function-level caching, optimistic updates through form actions, real-time subscriptions. Implements GraphQL integration or tRPC for type-safe API, creates middleware for request deduplication.
Designs Svelte design system architecture: headless components, token system, themeable architecture with CSS custom properties. Creates npm package library with auto-generated documentation, ensures WCAG 2.1 AA and SvelteKit SSR support.
Designs micro-frontend architecture with Svelte: defines when to use Svelte MFE (lightweight, performance-critical sections), configures SvelteKit for SSR micro-frontends, designs incremental adoption strategy for adding Svelte MFE to existing React/Vue hosts.
Designs CSS architecture for scalable Svelte applications: token methodology, style layers, responsive design strategy. Optimizes Critical CSS for SvelteKit SSR, introduces CSS Houdini API and @property for advanced animations.
Designs offline-first SvelteKit PWA architecture: IndexedDB for persistent storage, background sync, periodic sync API. Creates caching strategy for SSR/SSG pages and API responses, implements smooth app updates through Svelte transitions.
Designs hybrid rendering strategy for SvelteKit applications: route-level SSR/SSG/streaming selection, edge rendering through adapter-cloudflare. Optimizes TTFB through streaming SSR, implements partial prerendering and progressive hydration for critical paths.
Develops state management architecture for complex Svelte applications: state machines through XState, normalized stores, event-driven patterns. Designs offline-first state with IndexedDB synchronization, creates dev tools for debugging $state and stores.
Designs frontend architecture with Svelte/SvelteKit. Optimizes bundle size and Core Web Vitals. Creates design systems and reusable components. Mentors the team.
Designs scalable design system on Tailwind CSS and Skeleton UI for Svelte applications. Optimizes CSS bundle size through purge settings, creates custom Tailwind plugins for specific UI patterns, integrates dark mode through CSS variables.
Designs visual testing infrastructure for SvelteKit applications: parallel execution, dynamic thresholds, cross-browser coverage. Creates custom reporters for visual diffs, integrates testing with the design system and Skeleton UI components.
Designs advanced Vite configuration for SvelteKit: custom plugins, SSR externals, conditional builds for different adapters. Optimizes build speed through persistent cache, parallel transforms, creates Vite plugins for code generation and metrics.
Designs accessibility system for SvelteKit applications: WCAG 2.1 AA compliance, accessible routing with page announcements, adaptive components. Creates a11y wrappers and actions for common patterns, integrates automated testing through axe-core and Playwright.
Designs Web API abstractions for the Svelte ecosystem: reactive wrappers through $state, reusable actions, SSR-safe utilities. Implements WebSocket integration in SvelteKit server routes, creates SharedWorker patterns for cross-tab interaction.
Designs micro-frontend architecture with Svelte Web Components: style isolation, communication through CustomEvent, shared state. Creates a framework-agnostic component library on Svelte, ensures compatibility with React/Vue/Angular consumers.
API & Integration · 2
Designs GraphQL architecture for SvelteKit applications: schema-first approach, resolver composition, DataLoader for N+1. Creates GraphQL BFF on SvelteKit server routes, implements persisted queries for security, optimizes queries through complexity analysis.
Designs scalable API architecture in SvelteKit: versioning, rate limiting through hooks, OpenAPI documentation. Creates abstractions for BFF pattern between SvelteKit and microservices, implements ETags and conditional requests for traffic optimization.
Cloud & Infrastructure · 1
Designs Docker infrastructure for SvelteKit applications: multi-stage builds with Vite caching, image size optimization. Creates Docker configurations for different SvelteKit adapters, implements canary deployment and rollback strategies with containers.
DevOps & CI/CD · 1
Designs advanced CI/CD pipelines for SvelteKit: matrix strategies for cross-browser testing, performance budgets. Implements automatic Lighthouse checks, visual regression tests, conditional deploys for different SvelteKit adapters.
Testing & QA · 3
Designs comprehensive accessibility testing strategies for Svelte application suites covering WCAG 2.1 AA/AAA compliance. Implements advanced testing patterns including compile-time accessibility rule customization, Svelte action-based a11y testing utilities, and cross-browser assistive technology verification for SvelteKit SSR/CSR modes. Builds reusable a11y testing infrastructure for Svelte component libraries and integrates continuous accessibility monitoring into production deployments.
Designs E2E strategy for SvelteKit applications: critical path coverage, API mocking through route handlers, visual assertions. Implements SSR vs CSR behavior testing, accessibility checks through axe-playwright, performance metrics in E2E scenarios.
Designs unit testing strategy for SvelteKit applications: test pyramid, unit vs integration boundaries, test doubles. Creates test utilities and fixtures for SvelteKit context, implements property-based testing through fast-check for validators.
AI-Assisted Development · 2
Integrates AI tools into Svelte team workflows: AI code review, Vitest test generation, component documentation. Creates custom prompt templates for SvelteKit patterns, evaluates and selects AI tools for specific development tasks.
Optimizes Copilot usage in Svelte projects: creating .github/copilot-instructions for SvelteKit context, prompt engineering. Integrates Copilot into workflow through workspace commands, evaluates suggestion quality for Svelte 5 runes and SvelteKit patterns.
Version Control & Collaboration · 2
Defines code review standards for Svelte projects: checklists for components, SvelteKit routes, stores, architectural changes. Conducts architectural reviews of major features, focusing on scalability, performance, and maintainability of Svelte code.
Designs Git workflow for SvelteKit projects: trunk-based development with feature flags, release branching for SvelteKit adapters. Creates automations through Git hooks and GitHub Actions, configures monorepo strategies with turborepo or pnpm workspaces for Svelte.
Performance Engineering · 1
Designs performance budget system for SvelteKit applications: granular per-route budgets, adaptive thresholds, alerting. Integrates Lighthouse CI and bundlesize into CI/CD, creates trend tracking dashboards, automates regression detection.
Additional skills
Not assessed by the team, but part of the self-assessment and the development plan.
What changes at Lead
51 skills get a higher expectation or become core when moving from Senior to Lead. The biggest jumps first.
- Accessibility Testing: Advanced → Expert
- Algorithms & Complexity: Advanced → Expert
- Async Programming: Advanced → Expert
- Bundle Optimization: Advanced → Expert
- ChatGPT / Claude: Advanced → Expert
- Code Quality & Refactoring: Advanced → Expert
- Code Review: Advanced → Expert
- Component Testing: Advanced → Expert
- Core Web Vitals: Advanced → Expert
- CSS-in-JS: Advanced → Expert
} in the open competency matrix: 51 skills across 5 levels. The matrix is free for individuals and stays free.