Select your current position
Pick a role and level — we'll show the growth path, skills and gap analysis.
Development path
Junior
0-2 years
Responsibility: Completing tasks under the guidance of senior colleagues. Learning the codebase, standards, and team processes. Writing code to spec, fixing simple bugs, writing tests.
Key skills:
Middle
2-5 years
Responsibility: Independently developing features from decomposition to deployment. Participating in code review. Optimizing performance. Mentoring junior developers. Taking part in architecture discussions.
Key skills:
Senior
5-8 years
Responsibility: Designing the architecture of components and services. Solving complex technical problems. Managing technical debt. Code review as a quality gatekeeper. Mentoring middle developers. Choosing technologies for new tasks.
Key skills:
Lead / Staff
7-12 years
Responsibility: Technical leadership of a team or area. Designing system architecture. Coordinating with other teams. Establishing standards and best practices. Participating in hiring. Planning the technical roadmap.
Key skills:
Principal
10+ years
Responsibility: Technical strategy at the company or domain level. Cross-organizational influence. Solving systemic business problems through technology. Mentoring lead engineers. Publicly representing the company.
Key skills:
Gap analysis: skills to develop
To reach the next level you'll need to develop:
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.
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.
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.
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.
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 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.
Independently implements complex UI components with Svelte/SvelteKit. Optimizes rendering performance. Writes tests. Applies state management tools.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.