Algorithms & Data Structures 1
▼
Works with arrays, objects, and Map/Set for storing state in Svelte components through $state. Understands immutable updates for correct reactivity, uses spread operator for updating nested structures.
Designs normalized data stores in Svelte stores and $state runes, applies trees and graphs for SvelteKit navigation structures. Uses WeakMap for component reference caching, optimizes structures for server load functions.
Standardizes data modeling approaches in Svelte projects, defines normalization patterns for complex domain models. Introduces unified data structure interfaces between client stores and SvelteKit server endpoints.
Shapes platform-level data architecture strategy, researches optimal structures for the Svelte 5 reactive system. Defines data serialization and transfer standards between SSR and client hydration in SvelteKit.
Benchmarking 1
▼
Understands the performance budgets concept for SvelteKit applications: bundle size limits, load time, number of requests. Checks metrics through Lighthouse, monitors Svelte component size and connected dependencies in the project.
Configures performance budgets for a SvelteKit project: limits in Lighthouse CI, JS/CSS bundle size budgets in Vite. Creates automatic checks in GitHub Actions, monitors Core Web Vitals through web-vitals, tracks dependency impact on bundle size.
Defines performance budgets for the team's Svelte projects: standards by page types, review process when exceeded. Builds performance-awareness culture, coordinates optimizations between teams, ensures accountability for budget compliance.
Shapes performance budget strategy at the organizational level, defines performance KPIs for all Svelte products. Researches ML-based predictive budgets, influences performance tooling development in SvelteKit, builds engineering culture of fast applications.
Build Tools & Bundling 1
▼
Understands Vite's role as a dev server and bundler in SvelteKit, uses standard vite.config.js configuration. Works with HMR for fast Svelte component development, understands dev/build mode differences and basic Vite environment variables.
Configures Vite for a SvelteKit project: custom path aliases, API proxy, dependency optimization (optimizeDeps). Connects Vite plugins for SVG components, imagetools, configures build optimizations and environment variables for different environments.
Standardizes Vite configuration in the team's Svelte projects: shared presets, plugin stack, build pipelines for monorepos. Defines Vite and SvelteKit upgrade strategy, ensures build stability and optimal build times in CI.
Defines build tooling strategy at the organizational level, researches Rolldown and future Vite optimizations for Svelte. Influences vite-plugin-svelte development, contributes to the Vite ecosystem, shapes architectural decisions for the platform's build infrastructure.
Clean Code & Refactoring 1
▼
Follows basic eslint-plugin-svelte and Prettier rules for consistent Svelte component formatting. Runs svelte-check to detect type and accessibility errors, follows file naming conventions in SvelteKit routes.
Configures advanced ESLint rules for Svelte 5 with rune and accessibility checks, integrates svelte-check in pre-commit hooks. Uses SonarQube or Code Climate for quality metrics, covers critical components with unit tests through Vitest.
Defines code quality standards for the entire Svelte team, creates shared ESLint and svelte-check configurations for monorepos. Implements automatic quality gates in GitHub Actions, trains the team on clean code practices in the Svelte ecosystem.
Shapes code quality culture at the organizational level, defines metrics and KPIs for Svelte projects. Researches cutting-edge static analysis tools for Svelte 5, influences eslint-plugin-svelte and svelte-check development through open-source contributions.
CSS & Styling 4
▼
Uses CSS-in-JS at a basic level. Creates simple components following design specs. Understands basic concepts and follows component guidelines.
Applies CSS-in-JS approaches within Svelte component styling, using scoped styles with dynamic class bindings and CSS custom properties. Optimizes rendering performance by leveraging Svelte's compile-time style optimization. Integrates design tokens and writes tests for component visual states.
Defines product-level styling architecture for Svelte applications: evaluates CSS-in-JS approaches vs Svelte native styling, establishes design token standards, and sets component styling guidelines. Conducts reviews ensuring consistent, performant, and accessible UI across all teams.
Defines strategy for choosing between Svelte scoped styles, Tailwind CSS, and CSS-in-JS solutions at the organizational level. Researches performance of different styling approaches in the Svelte compiler context, develops migration recommendations between styling systems.
Uses ready-made components from Skeleton UI or other Svelte UI libraries, following documented patterns. Applies design tokens (CSS variables) for colors and typography, creates simple reusable Svelte components according to guidelines.
Develops design system components on Svelte 5 with typed $props(), slots, and snippets for flexible composition. Configures Storybook for Svelte component documentation, creates variants through CSS variables and Tailwind classes.
Manages the team's design system development: component roadmap, version policy, contribution process. Coordinates designer and developer work, ensures Figma token synchronization with Svelte components and Tailwind configuration.
Defines design system strategy at the organizational level, ensures scaling across Svelte products. Researches cutting-edge approaches: style-dictionary integration, cross-framework tokens, automatic component generation from Figma for the Svelte ecosystem.
Uses scoped styles in Svelte components, applies CSS Grid and Flexbox for responsive layouts. Understands cascading in the Svelte context: component styles are isolated, global styles through :global(). Works with CSS variables for theming.
Applies advanced CSS features in Svelte: container queries, has(), nesting, cascade layers (@layer). Creates responsive layouts with dynamic viewport units, uses Svelte transitions and animations with CSS keyframes for smooth UI transitions.
Standardizes CSS practices in the Svelte team: scoped vs global style conventions, naming conventions, architectural patterns. Defines browser support strategy, introduces visual regression testing for Svelte components through Playwright.
Shapes CSS strategy at the organizational level, researches Svelte compiler capabilities for style optimization. Influences Svelte ecosystem CSS tooling development, defines direction from utility-first to component-scoped approaches at platform scale.
Applies basic Tailwind CSS utility classes in Svelte components for standard layouts: spacing, colors, flexbox. Uses @apply in scoped component styles for grouping repetitive classes, works with Tailwind configuration from the SvelteKit template.
Configures Tailwind CSS for a SvelteKit project: custom theme, plugins, content paths for Svelte files. Combines Tailwind with Svelte scoped styles and Skeleton UI, creates reusable component variants through class: directive and clsx.
Standardizes Tailwind CSS usage in the team's Svelte projects: unified configurations, presets, style linting rules. Defines component library architecture based on Skeleton UI, trains the team on efficient Tailwind patterns in the Svelte ecosystem.
Shapes CSS architecture strategy at the organizational level, defines balance between Tailwind utility-first and Svelte scoped styles. Researches Svelte compiler optimizations for styling, influences Skeleton UI and integration tool development through open-source.
Frontend Architecture 1
▼
Understands the difference between SSR, SSG, and CSR in SvelteKit, uses prerender: true for static pages. Works with +page.server.js for server rendering, understands hydration and data transfer from server to client through PageData.
Configures rendering strategies in SvelteKit: SSR for dynamic pages, prerender for static, CSR for SPA sections. Uses adapter-static and adapter-node, implements ISR-like patterns through caching headers and invalidation.
Defines rendering strategy standards in the Svelte team: SSR/SSG/CSR selection criteria, adapter architecture, caching. Coordinates DevOps for optimal SSR infrastructure, implements TTFB and hydration performance monitoring in production.
Shapes server rendering strategy at the organizational level, researches partial hydration and server components for SvelteKit. Influences rendering pattern evolution in the Svelte ecosystem, defines edge-first platform architecture with optimal DX.
Frontend Testing 2
▼
Writes basic Svelte component tests through @testing-library/svelte and Vitest: rendering, text checking, clicks. Tests simple props and component events, uses screen.getByRole for accessible selectors, runs tests via vitest --run.
Creates comprehensive Svelte component tests: mocking stores and $state, testing $derived computations, async operations. Tests components with context, slots, and snippets, configures Vitest coverage reports, creates test utilities for SvelteKit.
Defines component testing standards in the Svelte team: mandatory coverage, test patterns, review criteria. Introduces mutation testing through Stryker, trains the team on efficient testing of Svelte 5 runes and SvelteKit-specific patterns.
Shapes component testing strategy at the organizational level, researches new approaches for Svelte 5 (testing runes, snippets). Influences @testing-library/svelte development, defines architectural decisions for testing at monorepo scale.
Understands the visual regression testing concept for Svelte components, runs screenshot tests through Playwright. Sets up basic snapshot tests for key SvelteKit application pages, compares visual differences in pull requests.
Configures visual testing system for Svelte: Playwright with pixel comparison, Chromatic for Storybook components. Creates tests for different viewports and themes, integrates visual checks in CI through GitHub Actions, manages baseline snapshots.
Defines visual testing strategy for the Svelte team: critical UI path coverage, visual change review process. Implements automatic baseline updates, coordinates visual QA between designers and developers.
Shapes visual quality strategy at the organizational level, researches AI-powered visual testing for the Svelte ecosystem. Defines centralized visual testing platform architecture, integrates it with the design system and CI/CD pipeline.
OOP & Design Patterns 1
▼
Applies basic patterns in Svelte: component composition, prop and slot forwarding, using $props() for input data destructuring. Understands the container/presentation pattern for separating logic and display in components.
Implements Svelte 5 patterns: compound components through snippets, render delegation, context API for dependency injection. Applies the action pattern (use:action) for reusable DOM logic, designs adaptive layouts in SvelteKit.
Defines an architectural pattern catalog for the team's Svelte ecosystem, standardizes composition and reuse approaches. Reviews architectural decisions, ensuring pattern consistency in load functions, form actions, and SvelteKit API routes.
Develops evolutionary pattern strategy for Svelte 5 migration, influences community best practice formation. Researches new patterns for rune usage ($state, $derived, $effect) and snippets, publishes architectural recommendations.
Specialized Testing 1
▼
Understands basic accessibility testing concepts including WCAG guidelines, semantic HTML in Svelte templates, and ARIA attribute usage. Follows team checklists for running axe-core audits and verifying keyboard navigation in Svelte components. Uses Svelte's built-in a11y compiler warnings and browser DevTools accessibility panels to catch common accessibility violations during development.
Independently writes accessibility tests for Svelte components using Testing Library, axe-core integration, and Playwright a11y assertions. Implements automated WCAG compliance checks in CI/CD pipelines leveraging Svelte's compile-time a11y warnings and runtime validation. Tests screen reader compatibility for SvelteKit applications including route transition announcements, form validation feedback, and dynamic content updates.
Defines accessibility testing standards and quality gates for Svelte projects across the organization. Establishes automated a11y testing pipelines, Svelte component accessibility certification processes, and WCAG compliance audit workflows. Conducts architecture reviews ensuring Svelte applications leverage compile-time a11y checks and meet accessibility requirements, mentoring teams on Svelte-specific accessible component patterns.
Shapes the organization's accessibility testing strategy across Svelte and frontend ecosystems, positioning compile-time a11y validation as a quality differentiator. Drives innovation in accessibility tooling including Svelte compiler plugin extensions for custom a11y rules, automated assistive technology regression testing, and real-user accessibility analytics. Contributes to Svelte ecosystem accessibility standards and influences community best practices through open-source tooling.
State Management 2
▼
Uses SvelteKit load functions for fetching data on the server and client, handles loading states through {#await}. Understands the difference between +page.server.js and +page.js load functions, passes data to components via $page.data and export let data.
Implements advanced data fetching patterns in SvelteKit: parallel load functions, invalidateAll for updates, streaming with promises. Creates type-safe API wrappers, configures response caching through Cache-Control headers in server routes.
Standardizes data fetching patterns in the Svelte team: unified approaches to error handling, loading states, cache invalidation. Defines API layer architecture between SvelteKit and backend, implements latency and error rate monitoring for load functions.
Defines platform-level data fetching strategy, researches server components and streaming SSR for TTFB optimization. Influences data-fetching pattern evolution in SvelteKit, designs distributed caching architecture between edge and origin servers.
Manages local state in Svelte components through $state and $derived runes, uses writable/readable stores for shared state. Understands Svelte 5 reactivity: automatic dependency tracking, $effect for side effects on data changes.
Designs SvelteKit application state: global stores for auth and settings, context API for tree-scoped data, $state for forms. Implements optimistic updates through form actions, synchronizes server and client state through load invalidation.
Defines state management standards in the Svelte team: when to use $state vs stores vs context, patterns for server state. Trains the team on idiomatic Svelte 5 approach, introduces best practices for predictable data flow in SvelteKit applications.
Shapes state management strategy at the organizational level, researches new Svelte 5 rune capabilities for large-scale applications. Defines architectural patterns for state synchronization between SSR, client, and real-time sources in the SvelteKit ecosystem.
Svelte Ecosystem 1
▼
Uses Svelte/SvelteKit at a basic level. Creates simple components following design specs. Understands basic concepts and follows component guidelines.
Independently implements complex UI components with Svelte/SvelteKit. Optimizes rendering performance. Writes tests. Applies state management tools.
Defines product-level frontend architecture with Svelte/SvelteKit. Establishes standards and best practices. Conducts architectural reviews.
Defines technology strategy for the organization's Svelte platform evolution, participates in Svelte RFC process and influences framework direction. Researches Svelte 5 compiler limits, designs migration strategies between major versions, publishes open-source solutions.
Web Performance 2
▼
Understands the role of Vite and Rollup in SvelteKit application bundling, analyzes bundle size through rollup-plugin-visualizer. Applies basic optimizations: dynamic import() for lazy-loading routes, tree-shaking unused code from Svelte libraries.
Optimizes SvelteKit application bundle: configures code splitting by routes, manualChunks for vendor libraries, preload strategies. Minimizes CSS through Tailwind purge, analyzes dependency duplication, configures gzip/brotli compression on the server.
Defines bundle optimization standards for Svelte projects: size budgets, automatic checks, dependency review process. Implements bundle size monitoring in CI/CD, coordinates optimizations between teams, trains on efficient code splitting.
Shapes code delivery optimization strategy at the organizational level, researches cutting-edge bundling approaches in Svelte 5. Influences SvelteKit Vite integration development, defines architectural decisions for minimizing runtime and maximizing compiler optimizations.
Understands LCP, FID/INP, and CLS metrics in the context of SvelteKit applications, measures them through Lighthouse and PageSpeed Insights. Follows basic practices: optimizes image sizes, avoids layout shifts from dynamic content in Svelte components.
Optimizes Core Web Vitals in SvelteKit: preloads critical resources, lazy loading through Svelte actions, font optimization. Configures web-vitals library for RUM monitoring, improves INP through event handler debouncing and $effect optimization.
Defines Core Web Vitals standards for the team's Svelte projects: threshold values, monitoring, regression response process. Integrates performance review into the development process, coordinates optimization between the frontend team and SvelteKit infrastructure.
Shapes web performance strategy at the organizational level, defines architectural decisions for consistently high Core Web Vitals. Researches Svelte 5 compiler optimizations for metrics, influences SvelteKit development roadmap in the performance area.
Web Standards & APIs 3
▼
Understands PWA principles and applies them in SvelteKit applications. Configures service workers and manifest files for installability. Uses SvelteKit's built-in service worker support for basic offline capabilities.
Configures PWA in SvelteKit with a custom service worker: caching strategies (stale-while-revalidate, cache-first), offline fallback pages. Implements background data synchronization, push notifications, and SW updates without losing $state.
Defines PWA development standards in the Svelte team: Lighthouse metric checklists, offline testing, update strategies. Implements SW error and cache efficiency monitoring, coordinates PWA functionality integration with SvelteKit adapters for different platforms.
Shapes progressive enhancement strategy at the organizational level, researches Project Fugu API capabilities in SvelteKit applications. Defines offline-capable platform architecture, influences PWA integration development in the Svelte ecosystem through open-source contributions.
Uses basic Web APIs in Svelte components: Fetch API in load functions, localStorage for persistence, IntersectionObserver through use:action. Understands browser/server context differences in SvelteKit, checks API availability through typeof window.
Applies advanced Web APIs in Svelte: ResizeObserver and MutationObserver through actions, Web Workers for heavy computations, Clipboard API. Integrates Geolocation, Media API, and Notification API in SvelteKit, manages lifecycle through $effect cleanup.
Standardizes Web API approaches in Svelte projects: actions and utilities catalog, fallback strategies, feature detection. Defines polyfill and progressive enhancement policies, ensures consistent API operation between SSR and client in SvelteKit.
Defines Web Platform API usage strategy at the organizational level, researches new APIs (View Transitions, Speculation Rules) for SvelteKit. Influences Web API integration in the Svelte ecosystem, shapes architectural patterns for cross-platform solutions.
Understands Web Components and their interoperability with Svelte. Compiles Svelte components as custom elements for cross-framework reuse. Works with Shadow DOM and slot-based composition.
Creates Svelte components exported as Web Components through customElement: true, configures shadow DOM and property forwarding. Integrates third-party Web Component UI libraries in SvelteKit, ensures correct SSR hydration.
Defines Web Components strategy for the organization: when to use Svelte custom elements vs native, interaction standards. Coordinates shared component library creation, ensures documentation and testing for multi-framework consumers.
Shapes UI reuse architectural strategy at the organizational level through Web Components and Svelte. Researches Declarative Shadow DOM and HTML Modules prospects for SvelteKit SSR, influences custom element support in the Svelte compiler.