II.
Role overview
Reference · liverole:frontend-engineer
Frontend Engineer overview
Crafts responsive, accessible, and performant user interfaces that translate product designs into working browser and web application experiences. Collaborates tightly with product designers, UX researchers, and backend engineers to ship cohesive features end-to-end. Advocates for web performance, accessibility standards, and robust client-side state management across the team.
Attributes
displayName
Frontend Engineer
isAgentic
false
automatability
0.8
description
Crafts responsive, accessible, and performant user interfaces that translate product
designs into working browser and web application experiences. Collaborates tightly
with product designers, UX researchers, and backend engineers to ship cohesive
features end-to-end. Advocates for web performance, accessibility standards, and
robust client-side state management across the team.
seniority
mid
Outgoing edges
holds_responsibility3
- responsibility:code-review·ResponsibilityCode Review
- responsibility:performance-optimization·ResponsibilityPerformance Optimization
- responsibility:documentation·ResponsibilityDocumentation
requires_expertise6
- skill-area:react-components·SkillAreaReact Component Design
- skill-area:react-state-management·SkillAreaReact State Management
- skill-area:web-vitals·SkillAreaWeb Vitals & Field Performance
- skill-area:web-accessibility·SkillAreaWeb Accessibility (a11y)
- skill-area:css-architecture·SkillAreaCSS Architecture
- skill-area:design-systems·SkillAreaDesign Systems
requires_skill3
- domain:web-development·DomainWeb Development
- specialization:frontend-react·SpecializationFrontend (React)
- specialization:web-development·Specialization
Incoming edges
delegates_to2
- role:engineering-manager·RoleEngineering Manager
- role:tech-lead·RoleTech Lead
has_member1
- org-unit:engineering·OrgUnitEngineering
held_by4
- responsibility:accessibility-wcag-compliance·ResponsibilityWCAG accessibility compliance
- responsibility:performance-budget-enforcement·ResponsibilityPerformance budget enforcement
- responsibility:accessibility-compliance·ResponsibilityAccessibility compliance
- responsibility:localization-management·ResponsibilityLocalization management
involves_role8
- workflow:code-review·WorkflowCode Review Workflow
- workflow:pull-request-lifecycle·WorkflowPull Request Lifecycle
- workflow:feature-development·WorkflowFeature Development
- workflow:framework-upgrade-cycle·WorkflowFramework Upgrade Cycle
- workflow:analytics-instrumentation-audit·WorkflowAnalytics Instrumentation Audit
- workflow:dependency-upgrade-cycle·WorkflowDependency Upgrade Cycle
- workflow:localization-workflow·WorkflowLocalization Workflow
- workflow:heuristic-evaluation-audit·WorkflowHeuristic Evaluation Audit
lib_involves_role156
- lib-agent:ai-agents-conversational--mcp-ui-developer·LibraryAgentmcp-ui-developer
- lib-agent:cryptography-blockchain--web3-frontend·LibraryAgentweb3-frontend
- lib-agent:education--elearning-developer·LibraryAgentelearning-developer
- lib-agent:ux-ui-design--design-token-manager·LibraryAgentdesign-token-manager
- lib-agent:ux-ui-design--developer-handoff·LibraryAgentdeveloper-handoff-agent
- lib-agent:ux-ui-design--figma-integration·LibraryAgentfigma-integration
- lib-agent:ux-ui-design--performance-auditor·LibraryAgentperformance-auditor-agent
- lib-agent:ux-ui-design--refinement-planner·LibraryAgentrefinement-planner
- lib-agent:ux-ui-design--responsive-design-validator·LibraryAgentresponsive-design-validator
- lib-agent:ux-ui-design--responsive-verifier·LibraryAgentresponsive-verifier
- lib-agent:ux-ui-design--storybook-integration·LibraryAgentstorybook-integration-agent
- lib-agent:ux-ui-design--ui-implementer·LibraryAgentui-implementer
- lib-agent:web-development--accessibility-auditor·LibraryAgentaccessibility-auditor
- lib-agent:web-development--angular-developer·LibraryAgentangular-developer
- lib-agent:web-development--animation-developer·LibraryAgentanimation-developer
- lib-agent:web-development--architecture-documentation·LibraryAgentarchitecture-documentation
- lib-agent:web-development--bundle-analyzer·LibraryAgentbundle-analyzer
- lib-agent:web-development--ci-cd·LibraryAgentci-cd
- lib-agent:web-development--code-quality·LibraryAgentcode-quality
- lib-agent:web-development--code-reviewer·LibraryAgentcode-reviewer
- lib-agent:web-development--component-developer·LibraryAgentcomponent-developer
- lib-agent:web-development--component-documentation·LibraryAgentcomponent-documentation
- lib-agent:web-development--e2e-testing·LibraryAgente2e-testing
- lib-agent:web-development--environment-setup·LibraryAgentenvironment-setup
- lib-agent:web-development--forms-developer·LibraryAgentforms-developer
- lib-agent:web-development--frontend-architect·LibraryAgentfrontend-architect
- lib-agent:web-development--hooks-developer·LibraryAgenthooks-developer
- lib-agent:web-development--lighthouse·LibraryAgentlighthouse
- lib-agent:web-development--micro-frontend-architect·LibraryAgentmicro-frontend-architect
- lib-agent:web-development--nextjs-developer·LibraryAgentnextjs-developer
- lib-agent:web-development--performance-auditor·LibraryAgentperformance-auditor
- lib-agent:web-development--performance-testing·LibraryAgentperformance-testing
- lib-agent:web-development--react-developer·LibraryAgentreact-developer
- lib-agent:web-development--seo-auditor·LibraryAgentseo-auditor
- lib-agent:web-development--unit-testing·LibraryAgentunit-testing
- lib-agent:web-development--visual-regression·LibraryAgentvisual-regression
- lib-agent:web-development--vue-developer·LibraryAgentvue-developer
- lib-process:qa-testing-automation--accessibility-testing·LibraryProcessspecializations/qa-testing-automation/accessibility-testing
- lib-process:qa-testing-automation--cross-browser-testing·LibraryProcessspecializations/qa-testing-automation/cross-browser-testing
- lib-process:qa-testing-automation--visual-regression·LibraryProcessspecializations/qa-testing-automation/visual-regression
- lib-process:web-development--accessibility-audit-remediation·LibraryProcessspecializations/web-development/accessibility-audit-remediation
- lib-process:web-development--angular-enterprise-development·LibraryProcessspecializations/web-development/angular-enterprise-development
- lib-process:web-development--aria-implementation·LibraryProcessspecializations/web-development/aria-implementation
- lib-process:web-development--bundle-size-optimization·LibraryProcessspecializations/web-development/bundle-size-optimization
- lib-process:web-development--cicd-github-actions·LibraryProcessspecializations/web-development/cicd-github-actions
- lib-process:web-development--component-library-radix·LibraryProcessspecializations/web-development/component-library-radix
- lib-process:web-development--content-security-policy·LibraryProcessspecializations/web-development/content-security-policy
- lib-process:web-development--cross-browser-compatibility·LibraryProcessspecializations/web-development/cross-browser-compatibility
- lib-process:web-development--css-in-js-styled-components·LibraryProcessspecializations/web-development/css-in-js-styled-components
- lib-process:web-development--dev-environment-onboarding·LibraryProcessspecializations/web-development/dev-environment-onboarding
- lib-process:web-development--e2e-testing-playwright·LibraryProcessspecializations/web-development/e2e-testing-playwright
- lib-process:web-development--eslint-prettier-configuration·LibraryProcessspecializations/web-development/eslint-prettier-configuration
- lib-process:web-development--frontend-caching-service-workers·LibraryProcessspecializations/web-development/frontend-caching-service-workers
- lib-process:web-development--google-analytics-integration·LibraryProcessspecializations/web-development/google-analytics-integration
- lib-process:web-development--image-optimization·LibraryProcessspecializations/web-development/image-optimization
- lib-process:web-development--keyboard-navigation-focus·LibraryProcessspecializations/web-development/keyboard-navigation-focus
- lib-process:web-development--micro-frontend-module-federation·LibraryProcessspecializations/web-development/micro-frontend-module-federation
- lib-process:web-development--mobile-first-responsive·LibraryProcessspecializations/web-development/mobile-first-responsive
- lib-process:web-development--nextjs-fullstack-app·LibraryProcessspecializations/web-development/nextjs-fullstack-app
- lib-process:web-development--nuxtjs-fullstack-app·LibraryProcessspecializations/web-development/nuxtjs-fullstack-app
- lib-process:web-development--nx-monorepo·LibraryProcessspecializations/web-development/nx-monorepo
- lib-process:web-development--pwa-development·LibraryProcessspecializations/web-development/pwa-development
- lib-process:web-development--react-app-development·LibraryProcessspecializations/web-development/react-app-development
- lib-process:web-development--react-query-server-state·LibraryProcessspecializations/web-development/react-query-server-state
- lib-process:web-development--redux-state-management·LibraryProcessspecializations/web-development/redux-state-management
- lib-process:web-development--storybook-component-testing·LibraryProcessspecializations/web-development/storybook-component-testing
- lib-process:web-development--svelte-sveltekit-development·LibraryProcessspecializations/web-development/svelte-sveltekit-development
- lib-process:web-development--tailwind-design-system·LibraryProcessspecializations/web-development/tailwind-design-system
- lib-process:web-development--technical-seo-implementation·LibraryProcessspecializations/web-development/technical-seo-implementation
- lib-process:web-development--turborepo-monorepo·LibraryProcessspecializations/web-development/turborepo-monorepo
- lib-process:web-development--typescript-configuration·LibraryProcessspecializations/web-development/typescript-configuration
- lib-process:web-development--unit-testing-react·LibraryProcessspecializations/web-development/unit-testing-react
- lib-process:web-development--vercel-deployment·LibraryProcessspecializations/web-development/vercel-deployment
- lib-process:web-development--vite-build-configuration·LibraryProcessspecializations/web-development/vite-build-configuration
- lib-process:web-development--vue-app-development·LibraryProcessspecializations/web-development/vue-app-development
- lib-process:web-development--web-components-lit·LibraryProcessspecializations/web-development/web-components-lit
- lib-process:web-development--web-performance-optimization·LibraryProcessspecializations/web-development/web-performance-optimization
- lib-process:web-development--zustand-state-management·LibraryProcessspecializations/web-development/zustand-state-management
- lib-skill:code-migration-modernization--ui-component-migrator·LibrarySkillui-component-migrator
- lib-skill:cryptography-blockchain--wallet-integration·LibrarySkillwallet-integration
- lib-skill:performance-optimization--memlab-analysis·LibrarySkillmemlab-analysis
- lib-skill:qa-testing-automation--axe-accessibility·LibrarySkillaxe-accessibility
- lib-skill:qa-testing-automation--backstopjs-visual·LibrarySkillBackstopJS Visual Testing
- lib-skill:qa-testing-automation--cypress-e2e·LibrarySkillCypress E2E Testing
- lib-skill:qa-testing-automation--jest-testing·LibrarySkillJest Testing
- lib-skill:qa-testing-automation--percy-visual·LibrarySkillPercy Visual Testing
- lib-skill:ux-ui-design--browser-stack·LibrarySkillbrowser-stack
- lib-skill:ux-ui-design--component-inventory·LibrarySkillcomponent-inventory
- lib-skill:ux-ui-design--css-precision-editor·LibrarySkillcss-precision-editor
- lib-skill:ux-ui-design--design-system-validator·LibrarySkilldesign-system-validator
- lib-skill:ux-ui-design--design-token-transformer·LibrarySkilldesign-token-transformer
- lib-skill:ux-ui-design--lighthouse·LibrarySkilllighthouse
- lib-skill:ux-ui-design--responsive-image·LibrarySkillresponsive-image
- lib-skill:ux-ui-design--screenshot-comparison·LibrarySkillscreenshot-comparison
- lib-skill:ux-ui-design--svg-optimizer·LibrarySkillsvg-optimizer
- lib-skill:web-development--analytics·LibrarySkillanalytics
- lib-skill:web-development--angular-development·LibrarySkillangular-development
- lib-skill:web-development--aria·LibrarySkillaria
- lib-skill:web-development--browser-automation·LibrarySkillbrowser-automation
- lib-skill:web-development--bundle-optimization·LibrarySkillbundle-optimization
- lib-skill:web-development--caching·LibrarySkillcaching
- lib-skill:web-development--core-web-vitals·LibrarySkillcore-web-vitals
- lib-skill:web-development--csp·LibrarySkillcsp
- lib-skill:web-development--css-modules·LibrarySkillcss-modules
- lib-skill:web-development--cypress·LibrarySkillcypress
- lib-skill:web-development--design-tokens·LibrarySkilldesign-tokens
- lib-skill:web-development--esbuild·LibrarySkillesbuild
- lib-skill:web-development--eslint·LibrarySkilleslint
- lib-skill:web-development--frontend-e2e-testing·LibrarySkillfrontend-e2e-testing
- lib-skill:web-development--git·LibrarySkillgit
- lib-skill:web-development--github-actions-web·LibrarySkillgithub-actions-web
- lib-skill:web-development--hydration·LibrarySkillhydration
- lib-skill:web-development--image-optimization·LibrarySkillimage-optimization
- lib-skill:web-development--jest·LibrarySkilljest
- lib-skill:web-development--keyboard-navigation·LibrarySkillkeyboard-navigation
- lib-skill:web-development--lit·LibrarySkilllit
- lib-skill:web-development--msw·LibrarySkillmsw
- lib-skill:web-development--netlify·LibrarySkillnetlify
- lib-skill:web-development--nextjs·LibrarySkillnextjs
- lib-skill:web-development--nextjs-app-router·LibrarySkillnextjs-app-router
- lib-skill:web-development--ngrx·LibrarySkillngrx
- lib-skill:web-development--nuxt·LibrarySkillnuxt
- lib-skill:web-development--nx·LibrarySkillnx
- lib-skill:web-development--pinia·LibrarySkillpinia
- lib-skill:web-development--playwright·LibrarySkillplaywright
- lib-skill:web-development--pnpm-workspaces·LibrarySkillpnpm-workspaces
- lib-skill:web-development--prettier·LibrarySkillprettier
- lib-skill:web-development--progressive-enhancement·LibrarySkillprogressive-enhancement
- lib-skill:web-development--radix-ui·LibrarySkillradix-ui
- lib-skill:web-development--react-development·LibrarySkillreact-development
- lib-skill:web-development--react-hooks·LibrarySkillreact-hooks
- lib-skill:web-development--react-query·LibrarySkillreact-query
- lib-skill:web-development--react-server-components·LibrarySkillreact-server-components
- lib-skill:web-development--react-testing-library·LibrarySkillreact-testing-library
- lib-skill:web-development--redux-toolkit·LibrarySkillredux-toolkit
- lib-skill:web-development--rxjs·LibrarySkillrxjs
- lib-skill:web-development--screen-reader·LibrarySkillscreen-reader
- lib-skill:web-development--seo·LibrarySkillseo
- lib-skill:web-development--shadcn·LibrarySkillshadcn
- lib-skill:web-development--storybook·LibrarySkillstorybook
- lib-skill:web-development--structured-data·LibrarySkillstructured-data
- lib-skill:web-development--styled-components·LibrarySkillstyled-components
- lib-skill:web-development--svelte·LibrarySkillsvelte
- lib-skill:web-development--tailwind-css·LibrarySkilltailwind-css
- lib-skill:web-development--turbopack·LibrarySkillturbopack
- lib-skill:web-development--turborepo·LibrarySkillturborepo
- lib-skill:web-development--typescript·LibrarySkilltypescript
- lib-skill:web-development--vercel·LibrarySkillvercel
- lib-skill:web-development--vite·LibrarySkillvite
- lib-skill:web-development--vitest·LibrarySkillvitest
- lib-skill:web-development--vue-development·LibrarySkillvue-development
- lib-skill:web-development--wcag·LibrarySkillwcag
- lib-skill:web-development--web-action-grounding·LibrarySkillweb-action-grounding
- lib-skill:web-development--web-performance·LibrarySkillweb-performance
- lib-skill:web-development--webpack·LibrarySkillwebpack
- lib-skill:web-development--zustand·LibrarySkillzustand
used_by_role46
- stack-profile:voice-ai-agent·StackProfileVoice AI Agent Stack (Whisper, TTS, WebSocket, FastAPI, React)
- stack-profile:ecommerce-nextjs·StackProfileE-Commerce Stack (Next.js, Stripe, Shopify, PostgreSQL, Redis)
- stack-profile:monorepo-fullstack·StackProfileMonorepo Full-Stack Stack (Turborepo, Next.js, NestJS, Prisma, PostgreSQL)
- stack-profile:content-management-platform·StackProfileContent Management Platform (Strapi/Directus + Next.js + PostgreSQL)
- stack-profile:real-time-collaboration·StackProfileReal-Time Collaboration (WebSocket + CRDT + React + PostgreSQL)
- stack-profile:desktop-application·StackProfileDesktop Application (Electron/Tauri + React + SQLite + TypeScript)
- stack-profile:graphql-api-platform·StackProfileGraphQL API Platform (Apollo Server + Prisma + PostgreSQL + React + TypeScript)
- stack-profile:saas-starter·StackProfileSaaS Starter Stack (Next.js, Prisma, Stripe, Auth.js, Tailwind)
- stack-profile:project-management-app·StackProfileProject Management App Stack (React, WebSocket, PostgreSQL, Redis, Docker)
- stack-profile:learning-management-system·StackProfileLearning Management System Stack (Next.js, PostgreSQL, S3, Stripe, React)
- stack-profile:chat-messaging-platform·StackProfileChat / Messaging Platform Stack (React, Socket.io, Redis, PostgreSQL, TypeScript)
- stack-profile:analytics-dashboard·StackProfileAnalytics Dashboard Stack (React, D3, Recharts, Python, FastAPI, Grafana)
- stack-profile:static-site-cdn·StackProfileStatic Site + CDN Stack (Astro, Markdown, Cloudflare Workers, TypeScript)
- stack-profile:headless-cms-ssg·StackProfileHeadless CMS + SSG Stack (Strapi, Astro, PostgreSQL, Cloudflare Workers, TypeScript)
- stack-profile:prompt-engineering-workbench·StackProfilePrompt Engineering Workbench (TypeScript, React, PostgreSQL, LLM APIs, Redis)
- stack-profile:documentation-site·StackProfileDocumentation Site Stack (Docusaurus/VitePress, MDX, Algolia, GitHub Actions, Vercel)
- stack-profile:storybook-design-system·StackProfileStorybook Design System Stack (React, Storybook, Chromatic, Tailwind, TypeScript)
- stack-profile:vscode-extension·StackProfileVS Code Extension Stack (TypeScript, VS Code API, esbuild, Vitest)
- stack-profile:react-native-enterprise·StackProfileReact Native Enterprise Stack (React Native, TypeScript, Redux, Jest, Detox, FastAPI)
- stack-profile:progressive-web-app·StackProfileProgressive Web App Stack (Next.js, Workbox, IndexedDB, Tailwind, TypeScript)
- stack-profile:e2e-testing-platform·StackProfileE2E Testing Platform (Playwright, Vitest, Docker, GitHub Actions, TypeScript)
- stack-profile:visual-regression-testing·StackProfileVisual Regression Testing (Chromatic, Storybook, Playwright, React, TypeScript)
- stack-profile:api-mocking-simulation·StackProfileAPI Mocking & Simulation (WireMock, Docker, OpenAPI, TypeScript, Pact)
- stack-profile:restaurant-pos-system·StackProfileRestaurant / POS System (React, Node.js, Stripe, PostgreSQL, WebSocket, Docker)
- stack-profile:booking-scheduling·StackProfileBooking / Scheduling (Next.js, Prisma, Stripe, Redis, TypeScript)
- stack-profile:survey-forms-platform·StackProfileSurvey / Forms Platform (React, FastAPI, PostgreSQL, Redis, S3, TypeScript)
- stack-profile:digital-signage·StackProfileDigital Signage (React, Electron, Node.js, WebSocket, Redis, S3)
- stack-profile:enterprise-search-platform·StackProfileEnterprise Search (Elasticsearch, Python, React, Redis, Kubernetes, FastAPI)
- stack-profile:news-publishing-cms·StackProfileNews / Publishing CMS (Next.js, Strapi, Elasticsearch, Redis, TypeScript)
- stack-profile:live-streaming-broadcast·StackProfileLive Streaming / Broadcast (Node.js, Redis, React, Docker, Socket.IO)
- stack-profile:forum-discussion-board·StackProfileForum / Discussion Board (Next.js, PostgreSQL, Redis, Elasticsearch, TypeScript)
- stack-profile:community-marketplace·StackProfileCommunity Marketplace (Next.js, Stripe, PostgreSQL, Elasticsearch, Redis)
- stack-profile:micro-frontend·StackProfileMicro-Frontend (React, Webpack, TypeScript, Docker)
- stack-profile:backend-for-frontend·StackProfileBackend for Frontend — BFF (TypeScript, Express, GraphQL, React, Docker)
- stack-profile:browser-extension·StackProfileBrowser Extension (TypeScript, React, Webpack, Vitest)
- stack-profile:mobile-first-stack·StackProfileMobile-First Stack (React Native/Flutter, Firebase, GraphQL, Expo)
- stack-profile:nextjs-supabase-stripe·StackProfileNext.js + Supabase + Stripe
- stack-profile:mern-stack·StackProfileMERN Stack (MongoDB, Express, React, Node.js)
- stack-profile:mean-stack·StackProfileMEAN Stack (MongoDB, Express, Angular, Node.js)
- stack-profile:sveltekit-stack·StackProfileSvelteKit + Tailwind + TypeScript
- stack-profile:laravel-vue-stack·StackProfileLaravel + Vue.js + PHP
- stack-profile:dotnet-blazor-stack·StackProfile.NET Blazor + Entity Framework + SQL Server
- stack-profile:remix-prisma-stack·StackProfileRemix + Prisma + PostgreSQL
- stack-profile:nuxt-supabase-stack·StackProfileNuxt + Supabase + TypeScript
- stack-profile:jamstack·StackProfileJamstack (JavaScript, APIs, Markup)
- stack-profile:t3-stack·StackProfileT3 Stack (Next.js + tRPC + Prisma + Tailwind)