AI Coding Assistants 1
▼
Uses GitHub Copilot for auto-completing Svelte components, templates, and TypeScript code in SvelteKit. Understands Copilot suggestion context, accepts or rejects suggestions, verifies generated code for Svelte 5 syntax compliance with runes.
Effectively uses Copilot for Svelte development: Vitest test generation, writing load functions, creating TypeScript types. Configures Copilot for SvelteKit context through comments and file structure, combines with Copilot Chat for refactoring.
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.
Implements GitHub Copilot in the Svelte team: configures organizational policies, trains for effective usage. Defines guidelines for reviewing Copilot code in SvelteKit projects, measures productivity and quality impact, creates shared Copilot instructions.
Algorithms & Data Structures 2
▼
Understands basic sorting and search algorithms, evaluates O(n) of simple loops in Svelte components. Uses Array.filter/map/reduce for data processing in $derived reactive expressions, avoiding unnecessary recalculations in templates.
Optimizes list and tree processing algorithms in Svelte applications, applies memoization through $derived for computation caching. Profiles reactive chain performance, selects optimal structures for keyed each blocks.
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.
Defines algorithmic efficiency architectural standards for Svelte projects, introduces performance benchmarks for reactive computations. Conducts code reviews focused on O-notation in critical rendering paths and SvelteKit load functions.
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.
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.
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.
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.
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.
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.
CI/CD 1
▼
Uses ready-made GitHub Actions workflows for SvelteKit: npm install, svelte-check, vitest, build. Understands YAML file structure, triggers on push/pull_request, reads CI logs to diagnose Svelte component build errors.
Configures CI/CD pipeline for SvelteKit in GitHub Actions: node_modules caching, parallel jobs for linting and tests. Adds Playwright E2E tests, preview deployment on Vercel/Cloudflare, automatic svelte-check and type checking in PR.
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.
Defines CI/CD standards for the team's Svelte projects: mandatory checks, quality gates, deployment strategies. Optimizes pipeline time through caching and parallelism, implements automatic rollback mechanisms and failure notifications.
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.
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.
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.
Code Review 1
▼
Participates in code review of Svelte components: checks readability, naming, correct usage of $state and $derived runes. Leaves constructive comments in PRs, learns from senior developer feedback on SvelteKit patterns and best practices.
Conducts quality Svelte code reviews: checks component architecture, type safety, accessibility, performance. Evaluates correctness of load functions and form actions in SvelteKit, proposes justified improvements, mentors juniors through reviews.
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.
Builds code review culture in the Svelte team: review SLA, escalation process, automated CODEOWNERS for SvelteKit modules. Conducts review skills training, implements automated review through ESLint and svelte-check, balances review speed and quality.
Concurrency & Parallelism 1
▼
Uses async/await in SvelteKit load functions for data fetching, handles Promises in {#await} template blocks. Understands the async operation lifecycle in components, correctly displays loading and error states.
Implements parallel data loading through Promise.all in SvelteKit load functions, manages race conditions through $effect.tracking(). Creates reusable async wrappers for stores, handles request cancellation through AbortController.
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.
Standardizes async programming patterns in Svelte projects: unified approaches to error boundaries, retry logic, and timeouts. Implements async operation monitoring, defines SLA for load functions and SvelteKit server routes.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
E2E Testing 1
▼
Writes basic E2E tests for SvelteKit with Playwright: page navigation, form filling, text verification. Uses page.goto, locator.click, expect(page).toHaveText for main user flows, runs tests locally and in CI.
Creates comprehensive E2E scenarios for SvelteKit: testing form actions, server validation, client navigation with prefetch. Configures Page Object Model, authentication fixtures, parallel Playwright execution on multiple browsers in GitHub Actions.
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.
Defines E2E testing standards in the Svelte team: mandatory release scenarios, flaky test policy, environment management. Implements Playwright reporting with video and traces, coordinates QA automation, ensures test suite stability in CI.
Frontend Architecture 2
▼
Understands micro-frontends in Svelte: knows that Svelte's compiler-first approach creates standalone bundles ideal for micro-frontends, understands how svelte-custom-element enables creating Web Components. Knows Svelte limitations for MFE.
Works with micro-frontends in Svelte: uses vite-plugin-federation for Svelte Module Federation, implements Svelte components as Web Components for integration with any framework. Configures shared state through writable stores with cross-MFE synchronization via events.
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.
Defines Svelte MFE strategy: creates build tooling for Svelte micro-frontends, designs shared design system compatible with Svelte and other frameworks through CSS custom properties. Defines Svelte adoption roadmap in the micro-frontend ecosystem.
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.
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.
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.
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.
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.
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.
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.
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.
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.
GraphQL 1
▼
Connects a GraphQL client (urql, houdini) to a SvelteKit application, executes basic queries in load functions. Understands GraphQL schema, types, and variables, displays data in Svelte components through reactive stores of the client library.
Integrates GraphQL into SvelteKit through Houdini or type generation: mutations with optimistic UI, subscriptions for real-time. Configures client-level caching, creates fragments for reusable fields, types responses through codegen.
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.
Defines GraphQL standards in the Svelte team: schema conventions, query patterns, caching strategy, monitoring. Coordinates schema evolution with backend teams, implements GraphQL playground and documentation, trains the team on efficient patterns with Houdini.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Designs frontend architecture with Svelte/SvelteKit. Optimizes bundle size and Core Web Vitals. Creates design systems and reusable components. Mentors the team.
Defines product-level frontend architecture with Svelte/SvelteKit. Establishes standards and best practices. Conducts architectural reviews.
Type Systems 1
▼
Uses TypeScript in Svelte components with lang="ts", types $props() and basic $state variables. Understands basic types for SvelteKit load functions (PageData, PageServerLoad), applies built-in Svelte types for component events.
Creates strict TypeScript interfaces for component props, types stores and $derived runes with generics. Configures svelte-check in strict mode, types form actions, server hooks, and SvelteKit API endpoints with full type safety.
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.
Standardizes typing strategy for the team's Svelte projects: shared types between packages, auto-generation from OpenAPI schemas, strict tsconfig settings. Ensures zero-any policy, introduces incremental typing during Svelte 5 and TypeScript strict migration.
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.
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.
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.
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.
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.
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.
Web Standards & APIs 4
▼
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.
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.
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.
Follows basic accessibility rules in Svelte: semantic markup, alt attributes, ARIA roles. Uses the built-in a11y warnings from the Svelte compiler, ensures keyboard navigation for interactive components in a SvelteKit application.
Implements advanced accessibility in Svelte components: live regions for dynamic content, focus management during SvelteKit navigation. Configures aria-* attributes for custom widgets, creates skip-links and correct heading hierarchies in layouts.
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.
Builds accessibility culture in the Svelte team: mandatory a11y checks in CI through svelte-check, component standards, training. Defines accessibility roadmap, coordinates audits with WCAG experts, ensures legal compliance.
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.
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.
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.
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.
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.
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.