Frontend Developer Job Description Template (2026)

Full JD (copy-ready)

Paste this into your ATS or careers page. Edit the company name and any bracketed placeholders.

# Frontend Developer — Job Description

## Role summary
A Frontend Developer owns the user interface of our product across React, Vue, or Svelte: translating Figma into pixel-accurate, accessible, performant components, enforcing a Core Web Vitals budget per route, maintaining the component library in Storybook, and partnering with designers and backend engineers to ship UI that feels fast on every device. They care about hydration costs, bundle weight, keyboard interaction, and the long tail of browser quirks that most backend engineers never see.

## Responsibilities
- Translate Figma designs into responsive, accessible components that match spacing, type, and color tokens exactly and behave on iPhone SE, iPad, and 1440px desktop.
- Build and maintain a TypeScript component library with Storybook stories, controls, docs, and Chromatic or Percy visual regression coverage per component.
- Hit Core Web Vitals budgets per route: LCP under 2.5s, INP under 200ms, CLS under 0.1, enforced in Lighthouse CI on every pull request.
- Profile renders with React DevTools or Vue DevTools, diagnose wasted re-renders, and fix them with memoization, signal reactivity, or component splitting.
- Shrink bundle size through route-level code splitting, dynamic imports, tree-shakable exports, and replacing heavy libraries with smaller equivalents.
- Meet WCAG 2.1 AA on every shipped component: semantic HTML, keyboard traversal, focus management, screen reader passes with VoiceOver or NVDA.
- Wire up server state with TanStack Query, SWR, or RTK Query including cache invalidation, optimistic updates, and error boundaries.
- Handle forms with schema validation (Zod, Valibot, Yup), accessible error messages, and correct focus behavior on submit failure.
- Write Vitest or Jest tests with React Testing Library or Vue Test Utils, plus Playwright E2E tests for auth, checkout, and other critical paths.
- Partner with designers on edge cases that Figma never shows: empty states, 40-character names, RTL languages, 300% browser zoom.
- Review peer PRs with specific feedback on component API design, accessibility, and performance; push back on leaky abstractions.

## Must-have skills
- 3+ years shipping production frontend in TypeScript in at least one of React 18+, Vue 3, or SvelteKit.
- Fluency with at least one server-state library (TanStack Query, SWR, RTK Query) and one client-state library (Redux Toolkit, Zustand, Pinia, or Jotai).
- Working knowledge of WCAG 2.1 AA, ARIA patterns, and accessible keyboard interaction models (menus, modals, combobox).
- Performance profiling with browser DevTools, React/Vue DevTools, and Lighthouse; can diagnose slow paints and long tasks without hand-holding.
- Comfortable writing tests with Vitest/Jest and Playwright and reading bundle analyzer output.
- CSS fluency including flex, grid, container queries, logical properties, and the specificity / cascade rules.
- Git-based PR workflow, Storybook-first component development, and async written code review.

## Nice-to-have skills
- Experience migrating a Pages Router app to App Router (Next.js) or a Nuxt 2-to-3 migration.
- Contributions to a published design system or open-source frontend library.
- Familiarity with visual regression tooling (Chromatic, Percy, Lost Pixel).
- Micro-frontend architecture (Module Federation) or monorepo tooling (Nx, Turborepo).
- Native app experience through React Native or Expo for cross-platform work.
- Build tooling internals: Vite plugins, Webpack config, or Rollup bundling.

## Tools and technology
- React / Vue / Svelte
- TypeScript
- Next.js / Nuxt / SvelteKit
- TanStack Query
- Tailwind CSS
- Storybook
- Vitest & Playwright
- Chromatic or Percy
- Lighthouse CI
- Figma

## Reporting structure
Reports to the Engineering Manager or Frontend Lead. Collaborates daily with product designers on Figma handoff, with backend engineers on API contracts, and with QA on cross-browser and cross-device verification.

## Success metrics (KPIs)
- Core Web Vitals (LCP, INP, CLS) per route kept within budget; releases blocked if breached.
- Zero WCAG 2.1 AA critical issues flagged by axe on shipped flows.
- Storybook coverage: every new component ships with a story and controls.
- Frontend error rate in Sentry trending flat or down quarter-over-quarter.
- Bundle size per route tracked with a budget; regressions caught in CI, not production.
- PR review turnaround under 1 business day on peer PRs.