Front-End Developer
Role Profile

You may have read my article on Role Profiles. As a quick reminder: a role profile defines areas of contribution, skills and level of performance expected of a specific position.

HR and Talent Acquisition use Role Profiles in both recruitment and organizational developement. Put simply, they are the hidden checklist behind every resume screen, and interview question.

Wouldn't it be great if you knew exactly what to write about in your resume? What skill to improve on? What features you should include within your projects?

Role Profiles tell you exactly that!

Today, we're taclking the Front-End Developer role profile. This extensive profile will dive into Core Competencies, Tools & Technologies , Engineering Concepts, Measurements, and Leveling used to assess your resume.

Let's first define each of these components...

Core competencies are your key areas of contribution. They are not a list of requirements: you don’t have to master all these areas to secure a role. Inevitably, you’re going to be stronger (or more interested) in some aspects in comparison to others.

You should see these as the different areas of the skill set. These are all the “muscles” you can work on to get better at the sport. These same muscles are those you should flex on your resume.

I’ve divided core competencies into 2 categories: Primary and Secondary. This way, you’ll get a clear idea of what’s a “must” or a “nice to have”.

In your resume, your main job block (usually your most recent experience) should mention each of the “Primary” core competencies. That’s the mental checklist recruiters and hiring managers use to screen candidates.

After reading this, you’ll know exactly what topics to write about!

These are the tools you’ll actually use on the job: frameworks, libraries, platforms, and utilities. You don’t need to know them all, but you should understand what they’re used for, and why they’re important.

For each Core Competency, I’ve included a list of the key tools most sought after by recruiters and hiring managers.

These are the foundational engineering principles and techniques behind the work. Understanding these concepts is what makes you an engineer, and Hiring Managers are very keen on seeing them mentioned in your resume.

The goal here is to show that you understand how things work.

As explained in my Levels System, you should quantify your achievements when possible. Clients often ask me about which metrics to use to measure their impact: you’ll find a concrete list to choose from for each core competency.

This part is usually only available to HR and Talent Acquisition inside a company. These are the criteria used to evaluate your seniority and internal level/grade.

They are not made public, and you may not exactly know what’s expected of you for a Junior role versus a Mid-Career one. Let’s solve this: I’ve included a clear explanation of what’s expected for Juniors, Mid-Level and Senior Engineers for each Core Competency. Not only is this useful for resume writing, but it’s also a great tool to plan your personal development.

What the role is all about. You build and implement the visual components of a web application using HTML, CSS, and JavaScript. This means you write clean, maintainable code to bring static designs to life, handling layouts, typography, responsiveness, and cross-browser compatibility.

Markup & Styling: HTML, CSS (Sass, LESS)
JavaScript
Cross-Browser Testing: BrowserStack, CrossBrowserTesting, Developer Tools (Chrome/Firefox)

Semantic Markup & Accessibility: Semantic HTML, ARIA roles
Responsive Layout Techniques: Media queries, Flexbox, CSS Grid
Responsive Design: Media Queries, Flexbox, CSS Grid
Cross-Browser Compatibility: Progressive enhancement, graceful degradation, feature detection
Maintainable Styling Architecture: BEM methodology, modular CSS, preprocessor structuring (Sass, LESS)
Client-Side Rendering: DOM manipulation, event handling, rendering performance

Rendering performance: First Contentful Paint (FCP → 0.9s to 2.5s), Time to Interactive (TTI → < 5s), Layout Shift (CLS → < 0.1)
Responsiveness across devices: Viewport coverage (element scaling across breakpoints), touch target sizing (≥ 48x48px), responsive image loading (srcset match accuracy)
Cross-browser compatibility: Number of visual regressions across target browsers, percentage of passed layout consistency checks, polyfill fallback success rate
Semantic HTML & accessibility: HTML validation score (100% valid tags), ARIA role coverage, Lighthouse Accessibility score (target: ≥ 90)
Maintainability of styles: CSS specificity score (keep low: e.g., avg specificity under 0.1.0), duplication ratio in stylesheets (under 10%), modular CSS adherence (measured via BEM/architecture linting rules)

Junior: Juniors are expected to implement HTML, CSS, and JavaScript using existing patterns and guidance, focusing on clean and valid semantic HTML and basic responsive layout techniques like Flexbox and media queries. They should be able to ensure basic cross-browser compatibility through manual testing and use of tools like Developer Tools. At this stage, attention is placed on writing maintainable styles using methodologies like BEM, with support from reviews.

Mid-Level: At this level, you should be able to independently build complex, responsive UI components using CSS Grid, preprocessor structuring with Sass, and maintain strong modular CSS discipline. Mid-level engineers actively optimize rendering performance metrics like FCP and TTI, ensure consistent viewport scaling, and manage cross-browser regressions using tools like BrowserStack. You’re also expected to contribute to semantic markup and accessibility by incorporating ARIA roles and targeting high Lighthouse Accessibility scores.

Senior: Senior engineers drive architecture for maintainable styling systems, enforce CSS specificity standards, and evolve the codebase toward scalable modular CSS using custom design systems. They lead initiatives to improve client-side rendering efficiency and performance benchmarks such as CLS and TTI, and resolve complex cross-browser compatibility issues using feature detection and graceful degradation strategies. Seniors are also expected to champion accessibility-first development, audit code for ARIA coverage, and maintain 100% HTML validation across all user-facing components.

You break down complex UIs into reusable, isolated components using frameworks/libraries like React, Vue, or Svelte. This involves managing props, state, and lifecycles while keeping your code modular, testable, and easier to debug.

Component-Based UI Frameworks: React, Vue, Svelte, Angular
State & Props Management: React state/hooks, Vue reactive data, Svelte stores
Component Testing Tools: Storybook, React Testing Library, Vue Test Utils
Debugging & Dev Tools: React Developer Tools, Vue Devtools, Svelte Devtools

Modular Software Design: Component encapsulation, separation of concerns, single-responsibility principle
Reactive Programming: State management, unidirectional data flow, reactivity models
Lifecycle Management: Component mounting/unmounting, side-effect handling (e.g. useEffect in React)
Testability & Isolation: Unit testing of components, mocking props/state, snapshot testing
Debug-Driven Development: Devtools inspection, component-level state tracing, hot reloading

Component Reusability: Reuse ratio (e.g., number of reused components vs total components), Component size consistency (e.g., average lines of code per component: 30–100 LOC), Duplication reduction (e.g., duplicated UI patterns before/after refactoring)
Modularity & Maintainability: Component dependency depth (e.g., max 2–3 levels ideally), Cyclomatic complexity per component (target: ≤10), Component isolation test coverage (e.g., % of components with unit tests: 80–100%)
State Management Efficiency: Prop drilling depth (number of levels props pass through, ideally ≤2), State updates per render cycle (e.g., avoid >1 update per render), Number of unnecessary re-renders detected (using React Profiler or similar)
Debuggability & Development Experience: Time to identify bug using dev tools (e.g., sub 5 min per defect on average), Frequency of hot reload failures (e.g., under 2% during development cycles), Console warning/error count during development (target: 0 persistent issues)
Testability: Component unit test coverage (e.g., 90%+ coverage), Snapshot test stability (e.g., failure rate sub 5% after UI changes), Time to write/update test per component (e.g., 15–30 minutes)

Junior: Juniors are expected to build simple, reusable components using tools like React or Vue, manage basic props and local state, and follow foundational principles of modular software design such as component encapsulation and separation of concerns. They should write isolated units with basic snapshot tests using tools like React Testing Library and debug issues with devtools like React Developer Tools or Vue Devtools. Typical output includes small components (~30–100 LOC), shallow prop drilling, and adherence to maintainable, testable patterns.

Mid-Level: Mid-level engineers should architect larger component trees with strong reusability, handle reactive state management using hooks, stores, or context, and optimize for unidirectional data flow and lifecycle side-effect handling. They are responsible for enforcing testability and isolation across shared UI layers, using tools like Storybook and coverage reports to track unit test coverage and snapshot stability. They actively refactor to reduce component dependency depth, improve prop flow efficiency, and keep cyclomatic complexity low (≤10 per component).

Senior: Seniors lead architectural decisions around component-based UI architecture, designing systems with high component reusability, minimal prop drilling, and optimal state update efficiency across complex applications using frameworks like React, Vue, or Svelte. They enforce advanced patterns like higher-order components, lazy-loading, and manage side effects using custom hooks or middleware, ensuring test coverage (90%+), low debug time, and minimal hot reload failures. At this level, they mentor others in achieving high modularity, monitor performance metrics (e.g., render cycles, re-renders), and drive adoption of tools like React Profiler and Storybook to ensure a scalable and maintainable UI ecosystem.

You control how the app navigates between pages and keeps track of dynamic data across components. This involves tools like React Router, Vue Router, Redux, Zustand, or Vuex, and understanding when and where to store data for best user experience.

Routing Libraries: React Router, Vue Router, Angular Router, SvelteKit Router
State Management Libraries: Redux, Zustand, Vuex, Pinia, Jotai, Recoil, MobX

Routing Paradigms: Hash-based routing, History API routing, Nested routes, Dynamic route matching
State Management Strategies: Global vs local state, Derived state, Immutable updates, Store normalization
Data Flow Patterns: Unidirectional data flow, Event-driven updates, Pub/Sub architecture
Component Communication: Props drilling, Context API, Dependency injection (in Angular), Lifting state

Navigation performance: Page transition time (e.g., ≤ 100–200 ms), Route resolution latency (e.g., from route change to component render: ≤ 50–150 ms), Time to interactive after route change (e.g., ≤ 300 ms)
State consistency and correctness: State synchronization accuracy (e.g., number of desync errors across components: target = 0), Frequency of stale/incorrect data occurrences (e.g., <1% of renders), Integrity of derived state logic (e.g., unit test pass rate for selectors/derived state = 100%)
Maintainability of routing and state architecture: Lines of code per route/state module (e.g., <150 LOC to ensure modularity), Cyclomatic complexity of routing/state logic (e.g., target < 10), Number of shared/global state atoms/stores vs local state (qualitative: should match intended architecture)
Developer experience (DX) in managing routing/state logic: Onboarding time for new devs to understand routing/state setup (e.g., <2 days for full context), Documentation coverage for route and state flow (e.g., >90% of modules covered), Bug rate from misused state or incorrect routing (e.g., <1/month in stable branches)
User experience (UX) during navigation/state transitions: Flicker or loading artifacts during route change (e.g., target = 0 instances), Correct preloading of data on route change (e.g., ≥ 90% accuracy of prefetch logic), State preservation across navigation (e.g., >95% of scenarios preserve expected state)

Junior: Juniors are expected to implement basic client-side routing using tools like React Router or Vue Router, follow established patterns such as hash-based or history API routing, and use local or global state libraries like Redux or Zustand under supervision. They should maintain unidirectional data flow and avoid issues like props drilling through guided use of the Context API. At this level, they are responsible for ensuring their code contributes to a smooth page transition time and avoids introducing state desyncs in simple flows.

Mid-Level: Mid-level engineers should be able to design and manage routing structures with nested and dynamic routes, and architect efficient state management strategies using Redux, Pinia, or Recoil, balancing global vs local state while maintaining derived state correctness. They are expected to optimize for navigation performance and maintain modular and testable code, keeping cyclomatic complexity and LOC per module within maintainable bounds. At this level, engineers own features end-to-end, ensuring prefetching accuracy, state persistence, and assisting others in debugging state flow issues.

Senior: Senior engineers are responsible for architecting robust, scalable routing and state systems that align with long-term product goals, leveraging advanced data flow patterns like pub/sub architectures, store normalization, and event-driven updates. They drive decisions on library adoption, enforce state correctness via rigorous testing, and lead efforts to minimize navigation latency and loading artifacts to meet or exceed key UX and DX benchmarks. They mentor others on advanced topics like state lifecycles, reduce shared state misuse, and ensure that documentation and onboarding materials comprehensively cover routing/state logic.

You identify and fix performance bottlenecks that slow down the front-end experience. This involves optimizing asset loading, lazy-loading content, minimizing JavaScript bundles, and using tools like Lighthouse or WebPageTest.

Performance Monitoring Tools: Lighthouse, WebPageTest, Chrome DevTools (Performance tab), GTmetrix
Asset Optimization Tools: ImageOptim, Squoosh, SVGO, Terser, UglifyJS
Build Optimization Tools: Webpack (with code splitting), Vite, Rollup, esbuild
Lazy Loading & Code Splitting: React.lazy, Suspense, dynamic import(), Intersection Observer
Caching & Delivery: Service Workers, Workbox, HTTP/2, CDN (e.g., Cloudflare, Fastly)

Performance Profiling & Analysis: runtime profiling, frame rate analysis, time-to-interactive measurement, network request auditing
Asset Optimization: image compression, vector optimization, tree shaking, minification
Build Optimization: code splitting, bundling strategy, dependency graph analysis
Resource Loading Strategies: lazy loading, deferred loading, priority hints, preloading & prefetching
Caching & Delivery Mechanisms: HTTP caching, CDN utilization, service worker caching, protocol optimization (HTTP/2)

Rendering Performance: First Contentful Paint (FCP → 1–2s), Largest Contentful Paint (LCP → <2.5s), Time to Interactive (TTI → <5s)
Loading Efficiency: Page Load Speed (fully loaded → <3s), Total Blocking Time (TBT → <300ms), Speed Index (→ <3s)
JavaScript Optimization: Bundle Size (KB/MB of JS → <250KB), Number of JS Requests (→ <30), Script Execution Time (→ <200ms)
Image & Asset Optimization: Image Size (per image → <100KB for critical images), Compression Ratio (→ 70–90%), Number of Requests (→ <50)
Caching & Delivery: Cache Hit Ratio (→ >80%), CDN Latency (→ <100ms), Service Worker Response Time (→ <50ms)

Junior: Juniors are expected to follow guidance when using tools like Lighthouse, WebPageTest, or Chrome DevTools to detect obvious performance bottlenecks, and can implement basic fixes such as image compression, minification, or lazy loading with Intersection Observer under supervision.

Mid-Level: At this level, engineers should independently identify and resolve issues affecting Time to Interactive, Largest Contentful Paint, or bundle size, using tools like Webpack with code splitting, dynamic import(), and service workers to implement efficient build and resource loading strategies.

Senior: Senior engineers are expected to lead performance initiatives across complex applications, applying runtime profiling, dependency graph analysis, and protocol optimization (e.g., HTTP/2) to architect for sub-200ms script execution, <250KB JS bundles, and >80% cache hit ratios, while mentoring others and aligning performance work with business KPIs.

You build interfaces that are usable by everyone, including people with disabilities. This means writing semantic HTML, managing keyboard navigation, using ARIA roles correctly, and testing with screen readers and contrast tools.

Accessibility Testing Tools: axe-core, Lighthouse (a11y audit), WAVE, pa11y, ARC Toolkit
Screen Readers: NVDA, JAWS, VoiceOver, TalkBack
Linting & Static Analysis: eslint-plugin-jsx-a11y, TypeScript with a11y-focused rules
ARIA & Semantic HTML: WAI-ARIA attributes, semantic HTML5 elements (e.g., <nav>, <main>, <button>)
Keyboard Navigation & Focus Management: focus-trap, tabbable, React Focus Lock

Inclusive Design Principles: semantic HTML, WAI-ARIA roles, accessibility heuristics
Keyboard Interaction Handling: focus management, tabbable elements, event handling for keyboard inputs
Assistive Technology Compatibility: screen reader interoperability, ARIA roles, semantic annotations
Accessibility Testing Methodologies: automated a11y testing, manual screen reader testing, contrast analysis
Standards Compliance: WCAG guidelines, WAI-ARIA specifications, HTML5 semantics

Accessibility Coverage: WCAG success criteria coverage (%), automated test coverage (e.g., Lighthouse a11y score 90–100), number of violations detected (axe-core, pa11y reports)
Semantic & ARIA Usage Quality: Correctness of ARIA role usage, semantic HTML element audit results, misuse rate of ARIA attributes
Keyboard Navigation Effectiveness: Number of interactive elements reachable via keyboard, tab order correctness, presence of focus indicators, time to complete navigation task via keyboard
Assistive Technology Compatibility: Screen reader compatibility verification across NVDA, VoiceOver, etc., clarity of screen reader announcements, correctness of label associations
Color Contrast & Visual Accessibility: Contrast ratio compliance with WCAG AA/AAA (e.g., 4.5:1 for text), number of contrast violations, font sizing/resizability testing metrics

Junior: Juniors are expected to apply semantic HTML and basic WAI-ARIA roles correctly, ensure simple keyboard navigation, and run automated accessibility testing tools like Lighthouse or axe-core to flag common issues, aiming for good WCAG success criteria coverage.

Mid-Level: Mid-level engineers should proactively incorporate inclusive design principles, manage focus states using tools like focus-trap or tabbable, and verify screen reader compatibility across devices like NVDA and VoiceOver, while analyzing and resolving violations flagged in pa11y or eslint-plugin-jsx-a11y.

Senior: Senior engineers are expected to lead accessibility architecture, conduct thorough manual screen reader testing, ensure assistive technology interoperability, and enforce WCAG and WAI-ARIA standards through scalable testing strategies, while mentoring others on optimizing keyboard interaction handling, contrast compliance, and ARIA usage quality across complex interfaces.

You use version control systems to manage code changes and work with others on the same project without stepping on each other’s toes. This involves using Git (and platforms like GitHub or GitLab), managing branches, resolving conflicts, and contributing to pull requests and code reviews.

Version Control Systems: Git, SVN
Hosting Platforms: GitHub, GitLab, Bitbucket
Collaboration & Code Review Tools: GitHub Pull Requests, GitLab Merge Requests, Code Owners, Reviewpad
Branching & Workflow Tools: Git Flow, trunk-based development, GitHub Actions for PR workflows

Software Configuration Management: version control, change tracking, branch management, merge conflict resolution
Collaborative Software Development: peer review practices, pull/merge request workflows, code ownership
Development Workflow Models: Git Flow, trunk-based development, continuous integration in collaborative settings

Code Integration Efficiency: Merge frequency per developer per week (e.g., 5–10 merges/week), Time to resolve merge conflicts (e.g., avg. <2 hours per conflict), Pull request (PR) cycle time (e.g., open to merge within 1–2 days)
Code Review Effectiveness: Review coverage rate (e.g., % of PRs with at least 1 reviewer – target: 100%), Review response time (e.g., first comment within 4 business hours), Defect detection rate via review (e.g., 1–2 issues flagged per PR on average)
Collaboration Health & Participation: Number of PR comments per review (e.g., 3–5 meaningful comments), Ratio of approvals vs. requests for changes (e.g., 70% approvals on first review), Contributor participation rate (e.g., % of team members reviewing others’ code – target: >75%)
Branching & Workflow Compliance: Adherence to branching model (e.g., % of features developed on named branches – target: 100%), Number of hotfixes outside standard workflow (e.g., <2 per release cycle), CI workflow success rate (e.g., successful builds on PR branches – target: >95%)
Conflict Resolution & Change Management: Frequency of merge conflicts (e.g., <1 per developer per week), Time to resolve change ownership disputes (e.g., <1 business day), Reversion rate due to merge errors (e.g., <1% of merged PRs reverted)

Junior: Juniors are expected to use Git confidently for basic tasks like committing, pushing, and creating pull requests, while following an established branching model such as Git Flow or trunk-based development under guidance. They should participate in code reviews by responding to feedback, resolving merge conflicts with support, and ensuring their code is reviewed before merging. At this stage, the focus is on developing habits around version control discipline, increasing merge frequency, and improving pull request cycle time.

Mid-Level: Mid-level engineers are responsible for owning feature branches, managing merge conflicts independently, and contributing actively to peer reviews using tools like GitHub Pull Requests or GitLab Merge Requests. They are expected to follow and advocate for best practices in software configuration management and collaborative software development, including setting up CI workflows and ensuring high review coverage rates and review response times. They help maintain team velocity by optimizing PR cycle time, enforcing branching compliance, and minimizing the number of hotfixes outside the main workflow.

Senior: Senior engineers drive the design and enforcement of collaborative development workflows, owning and evolving processes like code ownership, trunk-based development, and GitHub Actions for automated quality gates. They proactively resolve systemic issues affecting merge efficiency, reduce reversion rates, and improve conflict resolution through tooling and mentoring. At this level, they are measured not just by their own merge frequency or defect detection rate, but by the team's overall collaboration health, such as maintaining high review participation rates and low change ownership disputes.

You connect your front-end to external services or back-end systems through APIs. This involves making HTTP requests, parsing JSON, handling errors, and working with tools like Axios, Fetch API, or GraphQL clients.

HTTP Clients: Axios, Fetch API, SuperAgent
Data Fetching Libraries: React Query, SWR, Apollo Client (for GraphQL), TanStack Query
State & Cache Management: Redux Toolkit Query (RTK Query), Zustand (with async logic), Vue Query
API Testing & Mocking Tools: Postman, Insomnia, MSW (Mock Service Worker), Swagger UI
Data Serialization & Validation: JSON, FormData, Zod, Yup, Joi

Networking & Communication Protocols: HTTP methods, RESTful principles, GraphQL, request/response lifecycle, status codes, CORS
Asynchronous Programming: Promises, async/await, event loop, concurrency models
Data Serialization & Parsing: JSON structure, form encoding (FormData), schema validation
Error Handling & Resilience: Try/catch patterns, retry strategies, timeout handling, error boundaries

API Request Performance: Latency (response time: avg. 100–300 ms per API call), Request throughput (50–200 requests per second), Payload size (keep JSON responses under 100 KB for optimal parsing speed)
Data Handling Accuracy & Integrity: Schema validation coverage (100% of incoming/outgoing data validated via Zod or Yup), Parsing success rate (<1% failure rate in JSON/form data parsing across environments)
Error Handling Efficiency: Error rate on API calls (<2% 4xx/5xx response rate under normal conditions), Retry success ratio (80–90% success on retryable requests within 2 attempts)
User-Facing Data Responsiveness (UX impact): Time to first data render (under 500 ms after route navigation or component mount), Perceived loading indicators coverage (>95% of async interactions have loading feedback)
Testing & Reliability Coverage: API test coverage (90%+ endpoints tested via Postman or Insomnia), Mocking utilization (MSW coverage on 100% of client-side API interactions in dev/test)

Junior: Juniors are expected to connect the front-end to APIs using Axios or the Fetch API, handle basic HTTP methods like GET and POST, and parse JSON responses with minimal supervision. They should understand async/await, manage simple error handling using try/catch, and ensure loading indicators are displayed during data fetches. Basic use of tools like Postman and MSW is encouraged for learning and testing API calls.

Mid-Level: Mid-level engineers should confidently integrate both RESTful and GraphQL APIs using tools like React Query, Apollo Client, or SWR, and manage request/response lifecycles, status codes, and CORS behavior effectively. At this level, you should implement schema validation using Zod or Yup, apply retry strategies, and ensure high data parsing success rates and low API error rates across environments. They’re also expected to maintain 90%+ API test coverage and simulate endpoints using Mock Service Worker (MSW).

Senior: Senior engineers are expected to architect resilient API integration layers using advanced libraries like TanStack Query or RTK Query, optimize latency and payload sizes, and enforce schema validation across all external interactions. They lead initiatives to improve retry success ratios, establish enterprise-grade error boundaries, and monitor time-to-first-data-render and other performance KPIs in real-time. Seniors mentor others in implementing concurrency models, champion mocking strategies across the org, and uphold system-wide data integrity and resilience standards.

You write tests and debug code to ensure your application is reliable and bug-free. This includes writing unit and integration tests with tools like Jest or Testing Library and using browser dev tools to step through logic and inspect the DOM.

Unit & Component Testing: Jest, Vitest, Mocha, Testing Library (React Testing Library, Vue Testing Library)
End-to-End (E2E) Testing: Cypress, Playwright, Selenium, TestCafe
Integration Testing: Jest, Testing Library, Cypress (for mid-level integration)
Mocking & Stubbing: MSW (Mock Service Worker), Sinon, Nock, jest.mock
Debugging Tools: Chrome DevTools, React Developer Tools, Redux DevTools, Vue DevTools
Code Coverage: Istanbul (nyc), Jest coverage, c8

Software Testing Principles: Unit testing, integration testing, end-to-end testing, test isolation, mocking, stubbing
Debugging Methodologies: Step-through debugging, breakpoints, call stack inspection, DOM inspection
Test Automation: Automated test execution, continuous integration testing, test runners, headless browser testing
Code Quality & Reliability: Code coverage analysis, fault detection, test-driven development (TDD)

Test Coverage: Code coverage percentage (e.g., 80–100%), branch coverage, function coverage
Test Reliability & Stability: Flaky test rate (% of non-deterministic test runs), test pass rate (e.g., > 95%)
Debugging Efficiency: Qualitative metrics: Mean time to detect (MTTD) and mean time to resolve (MTTR) bugs during development
Test Execution Time: Average test suite run duration (e.g., < 3 mins for unit tests, < 10 mins for E2E), test parallelization efficiency
Test Coverage of Features/Scenarios: Ratio of key user flows/scenarios covered by automated tests; traceability of tests to acceptance criteria

Junior: Juniors are expected to write basic unit and component tests using tools like Jest and Testing Library, and demonstrate a grasp of software testing principles such as test isolation and mocking. They should be comfortable using Chrome DevTools to perform DOM inspection and simple step-through debugging to find and fix straightforward bugs. At this level, maintaining adequate test coverage and learning to interpret test pass rates are key developmental goals.

Mid-Level: Mid-level engineers should independently implement integration tests and end-to-end testing using Cypress, Playwright, or similar tools, and confidently apply test automation practices within CI pipelines. They are expected to use advanced debugging methodologies like call stack inspection and breakpoints, and manage mocking/stubbing strategies with tools like MSW or jest.mock. Their contributions should improve test reliability, reduce flaky test rates, and help ensure feature traceability to acceptance criteria.

Senior: Senior engineers lead the design of test architectures and enforce robust test-driven development (TDD) workflows, ensuring high code coverage (e.g., >90%) across unit, integration, and E2E layers. They optimize test execution time through parallelization, manage headless browser testing environments, and mentor others in writing maintainable and scalable tests. Seniors drive improvements in debugging efficiency, reducing MTTD and MTTR, and align testing strategies with product goals to maximize test coverage of critical user flows.

You configure and maintain the build process that prepares your code for production. This involves bundling with tools like Webpack or Vite, minifying assets, setting up environment variables, and working with CI/CD systems.

Build Tools: Webpack, Vite, Rollup, esbuild, Parcel
Task Runners & Scripting: npm scripts, Gulp
CI/CD Platforms: GitHub Actions, GitLab CI/CD, CircleCI, Travis CI, Jenkins
Deployment Platforms: Vercel, Netlify, Firebase Hosting, AWS Amplify, Surge

Build Automation & Optimization: build pipelines, code bundling, asset minification, tree shaking
Environment Configuration: environment variables, build-time configuration, secrets management
Continuous Integration & Deployment (CI/CD): automated testing, build triggers, deployment pipelines
Dependency Management: package resolution, module bundling, transitive dependencies
Developer Experience (DX) Engineering: local dev workflows, fast rebuilds, hot module replacement (HMR)

Build Performance: Build time duration (e.g., cold build: 120–300s, rebuild: <5s), Bundle size (e.g., < 250KB gzipped), Tree shaking effectiveness (% of unused code eliminated, e.g., dead code < 5%)
Deployment Efficiency: CI/CD pipeline execution time (e.g., 3–7 mins), Pipeline success rate (e.g., 95–100% without manual intervention), Rollback time (e.g., <2 minutes to restore stable version)
Environment Configuration Accuracy: Environment variable coverage across dev/staging/prod, Secrets exposure incidents (goal: 0), Configuration correctness per build
Developer Experience Metrics: HMR latency (e.g., <1.5s), First successful local build time (e.g., under 10 mins), Build script reliability (e.g., >98% success across team)

Junior: Juniors are expected to follow established build pipelines using tools like Webpack or Vite, contribute to simple npm scripts, and troubleshoot local build errors with guidance; their focus is on ensuring their code successfully integrates into the larger CI/CD process without disrupting the workflow.

Mid-Level: Mid-level engineers should be able to configure and optimize build automation, manage environment variables across different environments, and maintain CI/CD pipelines using tools like GitHub Actions or GitLab CI/CD; they are expected to improve build performance and ensure reliable deployment efficiency by identifying bottlenecks or flaky steps.

Senior: At this level, engineers are expected to architect and evolve scalable deployment pipelines, implement advanced build optimizations such as tree shaking and code splitting, enforce secure and consistent environment configuration, and monitor metrics like pipeline success rate, HMR latency, and rollback time to improve developer experience and production resilience across the team.

You use and contribute to shared sets of UI standards that keep your app visually and functionally consistent. This involves using component libraries like Material UI or Tailwind, documenting reusable patterns, and aligning with designers using tools like Figma.

Design System Frameworks: Storybook, Bit, Backlight
Component Libraries: Material UI, Chakra UI, Ant Design, Bootstrap, Tailwind UI
Style Guides & Documentation: Markdown, MDX, Zeroheight, Figma (for handoff and design tokens)
Design Token Management: Style Dictionary, Figma Tokens, Token Studio

UI Consistency & Reusability: Component-driven development, atomic design, DRY principles
Design-System Architecture: Modular design, scalability, separation of concerns
Documentation as Code: Living documentation, doc-driven development
Visual Abstraction & Theming: Design tokens, theming strategies, abstraction layers

Design Consistency Compliance: % of UI components matching the design system (via design audits or visual regression tools like Chromatic or Percy), Number of design deviations per release
Component Reusability Rate: % of UI built from shared components vs custom code, Number of duplicate components or variants across codebase
Documentation Coverage & Accuracy: % of components documented in Storybook/MDX/Zeroheight, Designer/developer satisfaction score with documentation clarity (via surveys or feedback)
Design Token Usage & Theming Accuracy: % of styles driven by tokens (vs hardcoded values), Number of design token inconsistencies across themes or components
Contribution & Adoption Metrics: Number of merged contributions to shared design system (per developer/team), Adoption rate of updated components or tokens across consuming apps

Junior: Juniors are expected to use shared UI standards by leveraging established component libraries like Material UI or Tailwind UI, ensuring basic UI consistency and avoiding custom implementations unless necessary. They follow documented patterns in tools like Figma and Storybook, and contribute to documentation under guidance. Their work should reflect a growing awareness of design-system architecture and reusability, with support from more senior engineers.

Mid-Level: At this level, engineers should proactively adopt and extend design systems, creating new reusable components using atomic design principles and contributing to living documentation via MDX or Zeroheight. They collaborate cross-functionally with designers via tools like Figma Tokens and ensure high component reusability rates and design consistency compliance. They may lead small initiatives to refactor legacy code toward token-based theming and modular design.

Senior: Senior engineers are expected to architect and evolve design systems at scale, ensuring alignment across teams through well-structured abstraction layers, advanced theming strategies, and strategic use of design tokens via tools like Style Dictionary. They drive measurable improvements in documentation coverage, component adoption, and token usage accuracy, while mentoring others in DRY principles and separation of concerns. Their influence is reflected in high-impact contributions to shared libraries and in elevating the developer and designer experience across the organization.

That's it!

Follow these guidelines and you will find yourself with a Profile Summary that helps your resume convert.

If you want to learn how to improve the rest of your resume, I suggest checking out the article on my formula to write amazing bullet points.