Roles · Frontend Developer (Svelte) · Junior
23 core skills, 51 in total. Expectations per skill, and what changes at the next level.
This page lists what a Junior } 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.
Grouped by area. The label on the right is the expected depth: Awareness, Working, Advanced or Expert.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Uses CSS-in-JS at a basic level. Creates simple components following design specs. Understands basic concepts and follows component guidelines.
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.
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.
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.
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.
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.
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.
Uses Svelte/SvelteKit at a basic level. Creates simple components following design specs. Understands basic concepts and follows component guidelines.
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.
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.
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.
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.
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.
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.
Not assessed by the team, but part of the self-assessment and the development plan.
51 skills get a higher expectation or become core when moving from Junior to Mid-level. The biggest jumps first.
} in the open competency matrix: 51 skills across 5 levels. The matrix is free for individuals and stays free.