Defines algorithmic efficiency standards for the team's React applications. Introduces performance budgets for operation complexity, reviews optimization solutions for reconciliation and server components in Next.js App Router.
Roles · Frontend Developer (React) · Lead
What a Lead } should know
37 core skills, 54 in total. Expectations per skill, and what changes at the next level.
This page lists what a Lead } 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, API & Integration.
Core skills for a Lead
Grouped by area. The label on the right is the expected depth: Awareness, Working, Advanced or Expert.
Programming Fundamentals · 6
Standardizes async patterns in the team's React applications: unified approach to data fetching through TanStack Query, error handling through Error Boundaries, retry and fallback strategies. Defines Suspense zone boundaries in the architecture.
Defines code quality standards for the React team: style guide, architectural conventions, mandatory review checklists. Introduces automated quality gates in CI/CD: TypeScript strict, ESLint, tests, Lighthouse score, bundle analysis.
Standardizes data modeling approaches in the team's React applications: normalization, denormalization, cache invalidation. Defines architectural patterns for data handling between Next.js server and client components.
Defines architectural patterns for the team's React projects: convention over configuration, monorepo structure with Turborepo. Standardizes approaches to component composition, side-effects management and Next.js App Router integration.
Standardizes typing approaches in the team's React projects: strict TypeScript configuration, shared types between frontend and backend, auto-generated types from API schemas (OpenAPI, GraphQL codegen). Defines migration strategy away from any.
Frontend Development · 19
Standardizes bundle optimization approach in the team's React projects: per-route performance budgets, automatic PR comments with bundle diff, shared chunks in monorepo. Defines architectural patterns for minimizing JavaScript sent to the client.
Defines component testing standards for the React team: minimum coverage, mandatory test cases for PRs, test file structure. Introduces testing culture: TDD for complex logic, test-first approach for bugfixes, automated coverage reports.
Defines Core Web Vitals performance standards for the team's React projects: threshold values, CI/CD monitoring through Lighthouse CI, degradation alerts. Introduces performance culture: dashboards, review checklists, regular performance audits.
Defines product-level CSS-in-JS architecture for React applications: selects styling solutions (runtime vs zero-runtime), establishes theming contracts, and enforces design token standards. Conducts architectural reviews ensuring performance, accessibility, and maintainability across teams.
Standardizes data fetching approaches in the team's React projects: unified API client, TanStack Query usage conventions, cache invalidation strategy. Makes architectural decisions: Server Components vs client fetching, optimal strategies for each data type.
Leads design system development for the team's React projects: defines component APIs, contribution process, versioning and breaking changes. Coordinates with designers to ensure Figma-to-code consistency through design tokens.
Defines micro-frontend strategy for the organization: chooses between Module Federation, single-spa and custom solution, standardizes shared design system for visual consistency. Designs developer experience: local development with mock remotes, testing strategy, version management.
Standardizes CSS approaches in the team's React projects: methodology selection (Tailwind/Modules), conventions, analysis tools. Introduces automated CSS quality checks: stylelint, visual regression testing, CSS bundle size monitoring.
Defines product-level frontend architecture with Next.js. Establishes standards and best practices. Conducts architectural reviews.
Defines PWA strategy for the team's React projects: offline-first architecture standards, PWA quality metrics, testing processes. Coordinates PWA integration with existing Next.js infrastructure, defines offline functionality scope and boundaries.
Defines architectural standards for React 18+ usage in the team: Server Components migration strategy, conventions for concurrent features, boundaries between client and server components. Mentors the team on advanced React patterns.
Defines rendering pattern standards for the team's Next.js projects: decision framework for rendering strategy selection, TTFB and FCP monitoring, conventions for organizing server and client components. Mentors on App Router architecture.
Standardizes state management approaches in the team's React projects: unified stack (Zustand + TanStack Query), store structure conventions, patterns for typical scenarios. Defines boundaries between server and client state in Next.js App Router architecture.
Standardizes Tailwind CSS usage in the team's React projects: unified configuration, shared preset for design system, naming conventions. Defines migration strategy from legacy CSS approaches, introduces visual style testing through Storybook.
Defines visual testing strategy for the team's React projects: coverage targets, visual changes review process, balance between completeness and CI speed. Integrates visual testing into designer workflow for Figma-to-code validation.
Standardizes Vite configuration for the team's React projects: shared preset in monorepo with Turborepo, unified optimization rules, webpack migration strategy. Defines build performance standards, monitors build times in CI.
Standardizes accessibility in the organization's React ecosystem: defines a11y requirements for design system, creates testing playbooks for screen reader verification, introduces accessibility champions program. Conducts developer training and design reviews for WCAG compliance.
Standardizes Web API usage in the team's React projects: hook wrapper library, polyfill strategy, fallback patterns. Makes architectural decisions for working with new APIs (View Transitions, Navigation API) in Next.js applications.
Defines Web Components strategy for the React team: when to use WC vs React components, standards for creating framework-agnostic components. Coordinates creation of a shared Custom Elements library for cross-framework usage.
API & Integration · 2
Defines GraphQL strategy for the team's React projects: query writing conventions, fragment structure, code generation approach. Coordinates with backend team: schema design, breaking changes management, GraphQL operation performance monitoring.
Standardizes REST API integrations in the team's React projects: unified API client, error handling conventions, versioning strategy. Coordinates with backend team: API contracts, documentation through OpenAPI, type generation for end-to-end type safety.
Cloud & Infrastructure · 1
Standardizes Docker practices for the team's React projects: base images, Dockerfile conventions, security scanning. Defines containerization strategy for different React application types (SPA, SSR, static), integrates with CI/CD pipeline.
DevOps & CI/CD · 1
Standardizes CI/CD for the team's React projects: reusable workflows for GitHub Actions, unified quality gates (tests, coverage, Lighthouse, a11y), deployment strategy (preview, staging, canary, production). Defines CI time SLA and hotfix process.
Testing & QA · 3
Defines accessibility testing standards and quality gates for React projects across the organization. Establishes automated a11y testing infrastructure, component library accessibility certification workflows, and WCAG compliance reporting for React-based products. Conducts architecture reviews ensuring React applications meet accessibility requirements and drives adoption of accessible-by-default component patterns across teams.
Standardizes E2E testing for the team's React projects: mandatory smoke tests for deployment, flaky test triage strategy, balance between E2E and integration tests. Defines E2E coverage for critical business flows, green pipeline SLA.
Standardizes unit testing practices for the React team: minimum coverage, mandatory test cases for PRs, shared testing utilities. Introduces testing culture: TDD for business logic, mutation testing for test quality assessment, training on testing patterns.
AI-Assisted Development · 2
Standardizes LLM usage in the React team: approved tools, code generation prompt guidelines, AI-generated code review processes. Defines ethical and legal frameworks for AI usage in commercial React projects, monitors AI output quality.
Standardizes Copilot in the React team: configuration for corporate policies, AI-generated code review guidelines, adoption and quality metrics. Defines strategy: Copilot Business/Enterprise, allowed repositories, CI integration for AI code verification.
Version Control & Collaboration · 2
Defines code review process for the React team: review standards (time SLA, checklists), CODEOWNERS for critical modules, automated review strategy. Introduces culture of constructive feedback, balances thoroughness and velocity, mentors junior reviewers.
Standardizes Git practices for the team's React projects: branching model, merge strategy (squash vs merge), mandatory review policies. Defines release management process: semantic versioning, automated releases, hotfix procedures for Next.js deployments.
Performance Engineering · 1
Standardizes performance budgets for the team's React projects: unified thresholds, monitoring dashboard, violation triage process. Introduces performance culture: regular audits, performance review in PR checklist, team training on React optimization.
Additional skills
Not assessed by the team, but part of the self-assessment and the development plan.
What changes at Principal
0 skills get a higher expectation or become core when moving from Lead to Principal. The biggest jumps first.
} in the open competency matrix: 54 skills across 5 levels. The matrix is free for individuals and stays free.