Pipeline run
ba19df1d-e348-40e7-92a7-5746138cbb0f
Client output enrichment
v2 Skill cluster · Nature of work · AI index · Tech stack maturity · Evidence · KRA descriptionvocab breakdown (legacy)
1 LLM mention extraction + deterministic catalog sweep
2 Six-layer resolution cascade (exact → alias → fuzzy → embedding → judge → AI-prediction lane)
3 Table-lookup layering: dim_members → role_dim_map tiers, served verbatim
React Frontend Developer
in_db alias family · frontend-developerslug: react-frontend-developer · role_id: 45d09250-830a-52f6-aa88-446a731e7eef · catalog: skill_library_v4 (tiers served verbatim from role_dim_map)
The role is for a Senior Frontend Engineer specializing in React, based in Bengaluru with a hybrid work model requiring three days in the office. The core technology stack includes React, TypeScript, Redux Toolkit, and Next.js, with a focus on building a customer-facing console for a payments platform. Key requirements include strong experience with React and TypeScript in a production environment, as well as proficiency in state management and automated testing. The position involves collaboration with backend engineers and a product designer, and candidates should have a bachelor's degree in Computer Science or equivalent experience.
Job description
Senior Frontend Engineer (React) - Bengaluru (Hybrid, 3 days in office) About the role We are building the new customer-facing console for our payments platform and are looking for a Senior Frontend Engineer to own the front end of it end to end. You will work alongside two backend engineers, a product designer and a product manager, and you will be the person who decides how the interface is built. Experience: 5-8 years of professional frontend engineering experience. What you will do - Build and own major surfaces of a large React application: dashboards, data-heavy tables, multi-step forms and a real-time transaction feed. - Write everything in TypeScript. We are strict about types; the codebase has no implicit any. - Manage application state with Redux Toolkit, and know when a store is the wrong answer. - Ship server-rendered pages with Next.js (App Router) and keep the client bundle honest. - Own frontend performance: Core Web Vitals, bundle budgets, code splitting, and profiling with React DevTools when a page gets slow. - Write tests that actually catch regressions - React Testing Library for components, Playwright for the flows that pay the bills. - Work directly with the designer in Figma and turn the design system into reusable components. - Make the console accessible - WCAG 2.1 AA is a requirement, not a stretch goal. - Review pull requests and mentor two mid-level engineers. Must have - Strong React (hooks, context, composition, rendering behaviour). - TypeScript in a production codebase. - Redux Toolkit or equivalent state management at scale. - Next.js. - CSS at a senior level - Tailwind or CSS-in-JS, responsive layout, no pixel guessing. - REST and GraphQL API integration. - Automated testing (Jest / React Testing Library). - Webpack or Vite build configuration. Nice to have - Experience with a component library or design system used by more than one team. - Micro-frontend architecture. - WebSockets for real-time data. - Charting libraries (D3, Recharts). You will also touch a little infrastructure The frontend ships through our own pipeline, so you should be comfortable with Git, reading a GitHub Actions workflow, and debugging a Docker build when the CI image breaks. You will not be running the cluster - our platform team owns Kubernetes and AWS - but you should not be blocked when a deploy fails. Education: Bachelor's degree in Computer Science or equivalent practical experience. Location: Bengaluru. Hybrid, 3 days a week in the Indiranagar office. Notice period: 30 days preferred.
Skills from this JD
L0–L3 tiers come verbatim from the role's role_dim_map; violet AI GENERATED chips are AI-prediction-lane skills pending review in the queue.
This skill is in Secondary as the JD says "You will not be running the cluster - our platform team owns Kubernetes and AWS - but you should not be blocked when a deploy fails." - it's a recognized skill, but it sits outside the React Frontend Developer role's core dimensions.
This skill is in Secondary as the JD says "Charting libraries (D3, Recharts)" - it isn't in this role's skill catalog yet, so it's tracked for review.
This skill is in Secondary as the JD says "Experience with a component library or design system used by more than one team" - it isn't in this role's skill catalog yet, so it's tracked for review.
This skill is in Secondary as the JD says "debugging a Docker build when the CI image breaks" - it's a recognized skill, but it sits outside the React Frontend Developer role's core dimensions.
This skill is in Secondary as the JD says "You will not be running the cluster - our platform team owns Kubernetes and AWS - but you should not be blocked when a deploy fails." - it's a recognized skill, but it sits outside the React Frontend Developer role's core dimensions.
This skill is in Secondary as the JD says "Micro-frontend architecture" - the JD marks it as "nice to have" rather than required.
This skill is in Secondary as the JD says "Charting libraries (D3, Recharts)" - it isn't in this role's skill catalog yet, so it's tracked for review.
This skill is in Secondary as the JD says "- Work directly with the designer in Figma and turn the design system into reusable components." - it's a recognized skill, but it sits outside the React Frontend Developer role's core dimensions.
This skill is in Secondary as the JD says "- Ship server-rendered pages with Next.js (App Router) and keep the client bundle honest." - it's a recognized skill, but it sits outside the React Frontend Developer role's core dimensions.
This skill is in Secondary as the JD says "WebSockets for real-time data" - the JD marks it as "nice to have" rather than required.
Vue.js — Frontend Frameworks (L0)
Service Workers — Web Platform & Browser APIs (L0)
Server-Side Rendering — Meta-Frameworks & Rendering (L1)
Zustand — State Management & Client Data (L1)
Mock Service Worker — Testing Frameworks (L1)
styled-components — UI Styling & Component Systems (L1)
Library artifacts (this run)
nano JD Parser — gpt-4.1-nano click to toggle
Show raw JSON
{
"JD_type": "pass",
"about_company": null,
"ai_kras": [],
"certifications": [],
"client_details": null,
"company_name": null,
"company_size": null,
"ctc": null,
"domain": {
"primary": {
"aliases": [
"ITES",
"BPO"
],
"domain": "IT Services \u0026 Consulting"
},
"secondary": null
},
"education": [
{
"level": "Bachelor\u0027s",
"qualification": "BTECH/BE - Computer Science (or equivalent)",
"raw": "Bachelor\u0027s degree in Computer Science or equivalent practical experience",
"requirement": "required"
}
],
"experience": {
"max": 8,
"min": 5,
"raw": "5-8 years of professional frontend engineering experience"
},
"job_locations": [
{
"aliases": [
"Bangalore"
],
"city": "Bengaluru",
"country": "India",
"state": "Karnataka",
"work_mode": "hybrid"
}
],
"notice_period": {
"days": 30,
"raw": "30 days preferred"
},
"open_to_relocate": false,
"role": "Senior Frontend Engineer (React)",
"role_aliases": [
{
"name": "Frontend Engineer",
"reasoning": "generalized form of the picked role",
"relation": "synonym"
},
{
"name": "React Developer",
"reasoning": "common industry alt for the same archetype",
"relation": "synonym"
},
{
"name": "UI Engineer",
"reasoning": "JD focuses on user interface development",
"relation": "synonym"
}
],
"role_archetype": "Engineering",
"roles_and_responsibilities": [
{
"bullet_count": 0,
"heading": "About the role",
"heading_was_present": true,
"source_marker": {
"first_5_words": "We are building the new",
"last_5_words": "how the interface is built."
},
"text": "We are building the new customer-facing console for our payments platform and are looking for a Senior Frontend Engineer to own the front end of it end to end. You will work alongside two backend engineers, a product designer and a product manager, and you will be the person who decides how the interface is built.",
"word_count": 50
},
{
"bullet_count": 9,
"heading": "What you will do",
"heading_was_present": true,
"source_marker": {
"first_5_words": "Build and own major surfaces",
"last_5_words": "mentor two mid-level engineers."
},
"text": "- Build and own major surfaces of a large React application: dashboards, data-heavy tables, multi-step forms and a real-time transaction feed.\n- Write everything in TypeScript. We are strict about types; the codebase has no implicit any.\n- Manage application state with Redux Toolkit, and know when a store is the wrong answer.\n- Ship server-rendered pages with Next.js (App Router) and keep the client bundle honest.\n- Own frontend performance: Core Web Vitals, bundle budgets, code splitting, and profiling with React DevTools when a page gets slow.\n- Write tests that actually catch regressions - React Testing Library for components, Playwright for the flows that pay the bills.\n- Work directly with the designer in Figma and turn the design system into reusable components.\n- Make the console accessible - WCAG 2.1 AA is a requirement, not a stretch goal.\n- Review pull requests and mentor two mid-level engineers.",
"word_count": 139
},
{
"bullet_count": 8,
"heading": "Must have",
"heading_was_present": true,
"source_marker": {
"first_5_words": "Strong React (hooks, context,",
"last_5_words": "Webpack or Vite build configuration."
},
"text": "- Strong React (hooks, context, composition, rendering behaviour).\n- TypeScript in a production codebase.\n- Redux Toolkit or equivalent state management at scale.\n- Next.js.\n- CSS at a senior level - Tailwind or CSS-in-JS, responsive layout, no pixel guessing.\n- REST and GraphQL API integration.\n- Automated testing (Jest / React Testing Library).\n- Webpack or Vite build configuration.",
"word_count": 66
},
{
"bullet_count": 4,
"heading": "Nice to have",
"heading_was_present": true,
"source_marker": {
"first_5_words": "Experience with a component library",
"last_5_words": "libraries (D3, Recharts)."
},
"text": "- Experience with a component library or design system used by more than one team.\n- Micro-frontend architecture.\n- WebSockets for real-time data.\n- Charting libraries (D3, Recharts).",
"word_count": 36
},
{
"bullet_count": 0,
"heading": "You will also touch a little infrastructure",
"heading_was_present": true,
"source_marker": {
"first_5_words": "The frontend ships through our",
"last_5_words": "when a deploy fails."
},
"text": "The frontend ships through our own pipeline, so you should be comfortable with Git, reading a GitHub Actions workflow, and debugging a Docker build when the CI image breaks. You will not be running the cluster - our platform team owns Kubernetes and AWS - but you should not be blocked when a deploy fails.",
"word_count": 54
}
],
"urls": []
}
API 1 — extract-from-jd click to toggle
{
"catalog": "v4",
"consider_adding": [
{
"dimension": "Frontend Frameworks",
"reason": "In the role canon\u0027s Frontend Frameworks - adding it narrows the candidate pool.",
"skill": "Vue.js",
"tier": "L0"
},
{
"dimension": "Web Platform \u0026 Browser APIs",
"reason": "In the role canon\u0027s Web Platform \u0026 Browser APIs - adding it narrows the candidate pool.",
"skill": "Service Workers",
"tier": "L0"
},
{
"dimension": "Meta-Frameworks \u0026 Rendering",
"reason": "In the role canon\u0027s Meta-Frameworks \u0026 Rendering - adding it narrows the candidate pool.",
"skill": "Server-Side Rendering",
"tier": "L1"
},
{
"dimension": "State Management \u0026 Client Data",
"reason": "In the role canon\u0027s State Management \u0026 Client Data - adding it narrows the candidate pool.",
"skill": "Zustand",
"tier": "L1"
},
{
"dimension": "Testing Frameworks",
"reason": "In the role canon\u0027s Testing Frameworks - adding it narrows the candidate pool.",
"skill": "Mock Service Worker",
"tier": "L1"
},
{
"dimension": "UI Styling \u0026 Component Systems",
"reason": "In the role canon\u0027s UI Styling \u0026 Component Systems - adding it narrows the candidate pool.",
"skill": "styled-components",
"tier": "L1"
}
],
"final_skills": [
{
"dimension": {
"display_name": "Frontend Frameworks",
"slug": "frontend-frameworks"
},
"is_primary": true,
"layer": "L0",
"layer_source": "catalog_v4",
"origin": "catalog",
"rationale": "the finalized role is the React specialization of the Frontend family; the component framework is the role\u0027s identity, and framework choice ",
"skill_id": "6fd37974-9083-5b70-a17d-e362ddcadf0d",
"skill_name": "React"
},
{
"dimension": {
"display_name": "Programming Languages",
"slug": "programming-languages"
},
"is_primary": true,
"layer": "L0",
"layer_source": "catalog_v4",
"origin": "catalog",
"rationale": "the craft is exercised in JavaScript/TypeScript; without the language there is no frontend engineering.",
"skill_id": "66b4a089-12da-580f-9425-9d6411ae90ab",
"skill_name": "TypeScript"
},
{
"dimension": {
"display_name": "State Management \u0026 Client Data",
"slug": "state-management-client-data"
},
"is_primary": true,
"layer": "L1",
"layer_source": "catalog_v4",
"origin": "catalog",
"rationale": "daily output \u2014 every non-trivial feature decides where state lives and how server data reaches the UI; store and query-cache code is written",
"skill_id": "198d5db0-93ad-56dc-9a8c-c2e072e991ad",
"skill_name": "Redux Toolkit"
},
{
"dimension": {
"display_name": "Meta-Frameworks \u0026 Rendering",
"slug": "meta-frameworks-rendering"
},
"is_primary": true,
"layer": "L1",
"layer_source": "catalog_v4",
"origin": "catalog",
"rationale": "the meta-framework is the daily application chassis \u2014 routing, rendering mode, and data loading run through it on almost every feature (owns",
"skill_id": "cf18cd0c-6167-5f62-910e-1d3dd144648d",
"skill_name": "Next.js"
},
{
"dimension": {
"display_name": "Frontend Frameworks",
"slug": "frontend-frameworks"
},
"is_primary": true,
"layer": "L0",
"layer_source": "catalog_v4",
"origin": "catalog",
"rationale": "the finalized role is the React specialization of the Frontend family; the component framework is the role\u0027s identity, and framework choice ",
"skill_id": "f8ba3a25-9bd8-5d80-8fc7-33b0c11e9deb",
"skill_name": "React DevTools"
},
{
"dimension": {
"display_name": "Frontend Frameworks",
"slug": "frontend-frameworks"
},
"is_primary": true,
"layer": "L0",
"layer_source": "catalog_v4",
"origin": "catalog",
"rationale": "the finalized role is the React specialization of the Frontend family; the component framework is the role\u0027s identity, and framework choice ",
"skill_id": "e6768f7d-3af1-57df-8269-995a19b1e861",
"skill_name": "React Testing Library"
},
{
"dimension": {
"display_name": "Testing Frameworks",
"slug": "testing-frameworks"
},
"is_primary": true,
"layer": "L1",
"layer_source": "catalog_v4",
"origin": "catalog",
"rationale": "tests are written alongside every component and journey; owns_4 makes automated testing a first-class quality gate of the role\u0027s own output.",
"skill_id": "bb3333f1-1c0c-5d95-9ea4-c264e320661f",
"skill_name": "Playwright"
},
{
"dimension": {
"display_name": "UI Styling \u0026 Component Systems",
"slug": "ui-styling-component-systems"
},
"is_primary": true,
"layer": "L1",
"layer_source": "catalog_v4",
"origin": "catalog",
"rationale": "daily output is styled UI; the charter owns the design-system-in-code layer (owns_3), making styling architecture primary craft rather than ",
"skill_id": "8e40ffcb-1cf3-5bc9-8ffc-0da7c6f39ffb",
"skill_name": "Figma"
},
{
"dimension": {
"display_name": "UI Styling \u0026 Component Systems",
"slug": "ui-styling-component-systems"
},
"is_primary": true,
"layer": "L1",
"layer_source": "catalog_v4",
"origin": "catalog",
"rationale": "daily output is styled UI; the charter owns the design-system-in-code layer (owns_3), making styling architecture primary craft rather than ",
"skill_id": "f522fdb4-327a-59fd-ae62-714ed43e60f7",
"skill_name": "Tailwind CSS"
},
{
"dimension": {
"display_name": "API Design \u0026 Protocols",
"slug": "api-design-protocols"
},
"is_primary": false,
"layer": "L2",
"layer_source": "catalog_v4",
"origin": "catalog",
"rationale": "the API contract is owned by the backend neighbour (collaborates_2); this role consumes and co-designs it but its daily output is the client",
"skill_id": "b22d242c-517d-5b7d-95b2-88716b17806d",
"skill_name": "REST"
},
{
"dimension": {
"display_name": "API Design \u0026 Protocols",
"slug": "api-design-protocols"
},
"is_primary": false,
"layer": "L2",
"layer_source": "catalog_v4",
"origin": "catalog",
"rationale": "the API contract is owned by the backend neighbour (collaborates_2); this role consumes and co-designs it but its daily output is the client",
"skill_id": "64231581-b451-5b0a-b5cd-ea261f3c7083",
"skill_name": "GraphQL"
},
{
"dimension": {
"display_name": "Testing Frameworks",
"slug": "testing-frameworks"
},
"is_primary": true,
"layer": "L1",
"layer_source": "catalog_v4",
"origin": "catalog",
"rationale": "tests are written alongside every component and journey; owns_4 makes automated testing a first-class quality gate of the role\u0027s own output.",
"skill_id": "3569a7ec-6dfc-5f28-8f55-3eb8eb6bbe16",
"skill_name": "Jest"
},
{
"dimension": {
"display_name": "Build \u0026 Dependency Tools",
"slug": "build-dependency-tools"
},
"is_primary": false,
"layer": "L2",
"layer_source": "catalog_v4",
"origin": "catalog",
"rationale": "the bundler/toolchain is the working environment the role configures and maintains (owns_5), but daily output is UI, not tooling \u2014 environme",
"skill_id": "efc19401-b86c-58bf-aa16-9c28b2d42af8",
"skill_name": "webpack"
},
{
"dimension": {
"display_name": "Build \u0026 Dependency Tools",
"slug": "build-dependency-tools"
},
"is_primary": false,
"layer": "L2",
"layer_source": "catalog_v4",
"origin": "catalog",
"rationale": "the bundler/toolchain is the working environment the role configures and maintains (owns_5), but daily output is UI, not tooling \u2014 environme",
"skill_id": "1b97c8f6-420a-57fb-9aea-00ca0fa4530c",
"skill_name": "Vite"
},
{
"dimension": {
"display_name": "Version Control",
"slug": "version-control"
},
"is_primary": false,
"layer": "L3",
"layer_source": "catalog_v4",
"origin": "catalog",
"rationale": "fluent Git collaboration is expected of every practitioner at target seniority and differentiates almost no one.",
"skill_id": "69a9e960-a4b1-5e7e-b55c-04980465e177",
"skill_name": "Git"
},
{
"dimension": {
"display_name": "CI/CD \u0026 Delivery",
"slug": "ci-cd-delivery"
},
"is_primary": false,
"layer": "L3",
"layer_source": "catalog_v4",
"origin": "catalog",
"rationale": "riding pipelines for preview and production deploys is baseline (collaborates_4); pipeline ownership belongs to DevOps.",
"skill_id": "a0542588-a88f-577b-8e0c-4e41c040cebc",
"skill_name": "GitHub Actions"
},
{
"dimension": {
"display_name": "Accessibility \u0026 Web Standards",
"slug": "accessibility-web-standards"
},
"is_primary": false,
"layer": "L2",
"layer_source": "catalog_v4",
"origin": "catalog",
"rationale": "Rule 3 over Rule 4: conformance is expected of owned surfaces (owns_4) but depth genuinely differentiates candidates and gaps are coachable ",
"skill_id": "02824ef6-6032-5212-ba72-635a196154ec",
"skill_name": "WCAG"
},
{
"dimension": {
"display_name": "Web Performance Optimization",
"slug": "web-performance-optimization"
},
"is_primary": true,
"layer": "L1",
"layer_source": "catalog_v4",
"origin": "catalog",
"rationale": "owns_4 sets Core Web Vitals budgets as continuous acceptance criteria; performance work is recurring engineering practice here, not occasion",
"skill_id": "0814b79e-80eb-5b7e-ae31-fe9f3a0598b9",
"skill_name": "Core Web Vitals"
},
{
"dimension": {
"display_name": "Web Performance Optimization",
"slug": "web-performance-optimization"
},
"is_primary": true,
"layer": "L1",
"layer_source": "catalog_v4",
"origin": "catalog",
"rationale": "owns_4 sets Core Web Vitals budgets as continuous acceptance criteria; performance work is recurring engineering practice here, not occasion",
"skill_id": "b8591215-3dfe-5cf8-b0ab-ca2c0dd443ef",
"skill_name": "Code Splitting"
},
{
"dimension": {
"display_name": "Build \u0026 Dependency Tools",
"slug": "build-dependency-tools"
},
"is_primary": false,
"layer": "L2",
"layer_source": "catalog_v4",
"origin": "catalog",
"rationale": "the bundler/toolchain is the working environment the role configures and maintains (owns_5), but daily output is UI, not tooling \u2014 environme",
"skill_id": "a76d730e-30c7-5304-8424-155ca0c9c8e9",
"skill_name": "GNU Make"
},
{
"dimension": {
"display_name": "UI Styling \u0026 Component Systems",
"slug": "ui-styling-component-systems"
},
"is_primary": true,
"layer": "L1",
"layer_source": "catalog_v4",
"origin": "catalog",
"rationale": "daily output is styled UI; the charter owns the design-system-in-code layer (owns_3), making styling architecture primary craft rather than ",
"skill_id": "742cb052-4050-5651-8154-1d82a218fa8a",
"skill_name": "CSS"
},
{
"dimension": {
"display_name": "Programming Languages",
"slug": "programming-languages"
},
"is_primary": true,
"layer": "L0",
"layer_source": "catalog_v4",
"origin": "catalog",
"rationale": "the craft is exercised in JavaScript/TypeScript; without the language there is no frontend engineering.",
"skill_id": "7f5a5b42-c9d8-5642-a8e6-84fd41f1f783",
"skill_name": "JavaScript"
},
{
"dimension": {
"display_name": "Web Platform \u0026 Browser APIs",
"slug": "web-platform-browser-apis"
},
"is_primary": true,
"layer": "L0",
"layer_source": "catalog_v4",
"origin": "catalog",
"rationale": "the browser is the deployment target.",
"skill_id": "245e9eb6-4448-5c83-9267-41ed37dcdeb7",
"skill_name": "WebSocket"
},
{
"dimension": {
"display_name": "UI Styling \u0026 Component Systems",
"slug": "ui-styling-component-systems"
},
"is_primary": true,
"layer": "L1",
"layer_source": "ai_predicted",
"origin": "ai_predicted",
"rationale": "TaBuddy AI prediction \u2014 not in the skill library yet; placed under UI Styling \u0026 Component Systems pending admin review.",
"skill_id": "97782451-7704-5cab-a70d-a4f4151747de",
"skill_name": "CSS-in-JS"
}
],
"history_run_id": null,
"jd_parameters": {
"certifications": [],
"clientDetails": null,
"company": null,
"companySize": null,
"ctc": {
"currency": null,
"max": null,
"min": null,
"period": null,
"raw": null
},
"educationRequirements": [
"BTECH/BE - Computer Science (or equivalent)"
],
"experience": {
"max": 8,
"min": 5,
"raw": "5-8 years of professional frontend engineering experience"
},
"industryDomain": "IT Services \u0026 Consulting",
"knockouts": {
"certifications": [],
"ctc": {
"currency": null,
"max": null,
"min": null
},
"educationRequirements": [
"BTECH/BE - Computer Science (or equivalent)"
],
"experience": {
"max": 8,
"min": 5
},
"location": [
"Bengaluru, India",
"Hybrid"
],
"noticePeriod": 30
},
"locations": [
"Bengaluru, India",
"Hybrid"
],
"noticePeriod": 30,
"openToRelocate": false,
"role": "Senior Frontend Engineer (React)",
"roleSynonyms": [
"Frontend Engineer",
"React Developer",
"UI Engineer"
]
},
"jd_summary": "The role is for a Senior Frontend Engineer specializing in React, based in Bengaluru with a hybrid work model requiring three days in the office. The core technology stack includes React, TypeScript, Redux Toolkit, and Next.js, with a focus on building a customer-facing console for a payments platform. Key requirements include strong experience with React and TypeScript in a production environment, as well as proficiency in state management and automated testing. The position involves collaboration with backend engineers and a product designer, and candidates should have a bachelor\u0027s degree in Computer Science or equivalent experience.",
"layer_conflicts": [],
"nano_parsed": {
"JD_type": "pass",
"about_company": null,
"ai_kras": [],
"certifications": [],
"client_details": null,
"company_name": null,
"company_size": null,
"ctc": null,
"domain": {
"primary": {
"aliases": [
"ITES",
"BPO"
],
"domain": "IT Services \u0026 Consulting"
},
"secondary": null
},
"education": [
{
"level": "Bachelor\u0027s",
"qualification": "BTECH/BE - Computer Science (or equivalent)",
"raw": "Bachelor\u0027s degree in Computer Science or equivalent practical experience",
"requirement": "required"
}
],
"experience": {
"max": 8,
"min": 5,
"raw": "5-8 years of professional frontend engineering experience"
},
"job_locations": [
{
"aliases": [
"Bangalore"
],
"city": "Bengaluru",
"country": "India",
"state": "Karnataka",
"work_mode": "hybrid"
}
],
"notice_period": {
"days": 30,
"raw": "30 days preferred"
},
"open_to_relocate": false,
"role": "Senior Frontend Engineer (React)",
"role_aliases": [
{
"name": "Frontend Engineer",
"reasoning": "generalized form of the picked role",
"relation": "synonym"
},
{
"name": "React Developer",
"reasoning": "common industry alt for the same archetype",
"relation": "synonym"
},
{
"name": "UI Engineer",
"reasoning": "JD focuses on user interface development",
"relation": "synonym"
}
],
"role_archetype": "Engineering",
"roles_and_responsibilities": [
{
"bullet_count": 0,
"heading": "About the role",
"heading_was_present": true,
"source_marker": {
"first_5_words": "We are building the new",
"last_5_words": "how the interface is built."
},
"text": "We are building the new customer-facing console for our payments platform and are looking for a Senior Frontend Engineer to own the front end of it end to end. You will work alongside two backend engineers, a product designer and a product manager, and you will be the person who decides how the interface is built.",
"word_count": 50
},
{
"bullet_count": 9,
"heading": "What you will do",
"heading_was_present": true,
"source_marker": {
"first_5_words": "Build and own major surfaces",
"last_5_words": "mentor two mid-level engineers."
},
"text": "- Build and own major surfaces of a large React application: dashboards, data-heavy tables, multi-step forms and a real-time transaction feed.\n- Write everything in TypeScript. We are strict about types; the codebase has no implicit any.\n- Manage application state with Redux Toolkit, and know when a store is the wrong answer.\n- Ship server-rendered pages with Next.js (App Router) and keep the client bundle honest.\n- Own frontend performance: Core Web Vitals, bundle budgets, code splitting, and profiling with React DevTools when a page gets slow.\n- Write tests that actually catch regressions - React Testing Library for components, Playwright for the flows that pay the bills.\n- Work directly with the designer in Figma and turn the design system into reusable components.\n- Make the console accessible - WCAG 2.1 AA is a requirement, not a stretch goal.\n- Review pull requests and mentor two mid-level engineers.",
"word_count": 139
},
{
"bullet_count": 8,
"heading": "Must have",
"heading_was_present": true,
"source_marker": {
"first_5_words": "Strong React (hooks, context,",
"last_5_words": "Webpack or Vite build configuration."
},
"text": "- Strong React (hooks, context, composition, rendering behaviour).\n- TypeScript in a production codebase.\n- Redux Toolkit or equivalent state management at scale.\n- Next.js.\n- CSS at a senior level - Tailwind or CSS-in-JS, responsive layout, no pixel guessing.\n- REST and GraphQL API integration.\n- Automated testing (Jest / React Testing Library).\n- Webpack or Vite build configuration.",
"word_count": 66
},
{
"bullet_count": 4,
"heading": "Nice to have",
"heading_was_present": true,
"source_marker": {
"first_5_words": "Experience with a component library",
"last_5_words": "libraries (D3, Recharts)."
},
"text": "- Experience with a component library or design system used by more than one team.\n- Micro-frontend architecture.\n- WebSockets for real-time data.\n- Charting libraries (D3, Recharts).",
"word_count": 36
},
{
"bullet_count": 0,
"heading": "You will also touch a little infrastructure",
"heading_was_present": true,
"source_marker": {
"first_5_words": "The frontend ships through our",
"last_5_words": "when a deploy fails."
},
"text": "The frontend ships through our own pipeline, so you should be comfortable with Git, reading a GitHub Actions workflow, and debugging a Docker build when the CI image breaks. You will not be running the cluster - our platform team owns Kubernetes and AWS - but you should not be blocked when a deploy fails.",
"word_count": 54
}
],
"urls": []
},
"pipeline": "v4",
"rejected": false,
"rejection_code": null,
"rejection_reason": null,
"role": {
"canonical_name": "React Frontend Developer",
"family": "frontend-developer",
"match_method": "alias",
"resolution": "in_db",
"role_id": "45d09250-830a-52f6-aa88-446a731e7eef",
"similarity": null,
"slug": "react-frontend-developer"
},
"role_coverage": [
{
"is_jd_role": true,
"name": "React Frontend Developer",
"pct": 0.85,
"role": "react-frontend-developer",
"share": 29.8
},
{
"is_jd_role": false,
"name": "Angular Developer",
"pct": 0.67,
"role": "angular-developer",
"share": 23.5
},
{
"is_jd_role": false,
"name": "Node.js Full-Stack Developer",
"pct": 0.5,
"role": "nodejs-fullstack-developer",
"share": 17.5
},
{
"is_jd_role": false,
"name": "Node.js Backend Developer",
"pct": 0.42,
"role": "nodejs-backend-developer",
"share": 14.7
},
{
"is_jd_role": false,
"name": "DevOps Engineer",
"pct": 0.41,
"role": "devops-engineer",
"share": 14.4
}
],
"run_id": "jdv4-10c5853489c9",
"secondary_meta": [
{
"audit_reasoning": "This skill is in Secondary as the JD says \"You will not be running the cluster - our platform team owns Kubernetes and AWS - but you should not be blocked when a deploy fails.\" - it\u0027s a recognized skill, but it sits outside the React Frontend Developer role\u0027s core dimensions.",
"jd_quote": "You will not be running the cluster - our platform team owns Kubernetes and AWS - but you should not be blocked when a deploy fails.",
"provenance": "listed",
"reason_code": "out_of_role_scope",
"skill": "AWS"
},
{
"audit_reasoning": "This skill is in Secondary as the JD says \"Charting libraries (D3, Recharts)\" - it isn\u0027t in this role\u0027s skill catalog yet, so it\u0027s tracked for review.",
"jd_quote": "Charting libraries (D3, Recharts)",
"origin": "ai_predicted",
"provenance": "listed",
"reason_code": "not_in_catalog",
"skill": "D3.js"
},
{
"audit_reasoning": "This skill is in Secondary as the JD says \"Experience with a component library or design system used by more than one team\" - it isn\u0027t in this role\u0027s skill catalog yet, so it\u0027s tracked for review.",
"jd_quote": "Experience with a component library or design system used by more than one team",
"origin": "ai_predicted",
"provenance": "listed",
"reason_code": "not_in_catalog",
"skill": "Design System"
},
{
"audit_reasoning": "This skill is in Secondary as the JD says \"debugging a Docker build when the CI image breaks\" - it\u0027s a recognized skill, but it sits outside the React Frontend Developer role\u0027s core dimensions.",
"jd_quote": "debugging a Docker build when the CI image breaks",
"provenance": "verb-backed",
"reason_code": "out_of_role_scope",
"skill": "Docker"
},
{
"audit_reasoning": "This skill is in Secondary as the JD says \"You will not be running the cluster - our platform team owns Kubernetes and AWS - but you should not be blocked when a deploy fails.\" - it\u0027s a recognized skill, but it sits outside the React Frontend Developer role\u0027s core dimensions.",
"jd_quote": "You will not be running the cluster - our platform team owns Kubernetes and AWS - but you should not be blocked when a deploy fails.",
"provenance": "listed",
"reason_code": "out_of_role_scope",
"skill": "Kubernetes"
},
{
"audit_reasoning": "This skill is in Secondary as the JD says \"Micro-frontend architecture\" - the JD marks it as \"nice to have\" rather than required.",
"jd_quote": "Micro-frontend architecture",
"provenance": "listed",
"reason_code": "jd_preferred",
"skill": "Micro-Frontends"
},
{
"audit_reasoning": "This skill is in Secondary as the JD says \"Charting libraries (D3, Recharts)\" - it isn\u0027t in this role\u0027s skill catalog yet, so it\u0027s tracked for review.",
"jd_quote": "Charting libraries (D3, Recharts)",
"origin": "ai_predicted",
"provenance": "listed",
"reason_code": "not_in_catalog",
"skill": "Recharts"
},
{
"audit_reasoning": "This skill is in Secondary as the JD says \"- Work directly with the designer in Figma and turn the design system into reusable components.\" - it\u0027s a recognized skill, but it sits outside the React Frontend Developer role\u0027s core dimensions.",
"jd_quote": "- Work directly with the designer in Figma and turn the design system into reusable components.",
"provenance": "listed",
"reason_code": "out_of_role_scope",
"skill": "Reusable Transformations"
},
{
"audit_reasoning": "This skill is in Secondary as the JD says \"- Ship server-rendered pages with Next.js (App Router) and keep the client bundle honest.\" - it\u0027s a recognized skill, but it sits outside the React Frontend Developer role\u0027s core dimensions.",
"jd_quote": "- Ship server-rendered pages with Next.js (App Router) and keep the client bundle honest.",
"provenance": "listed",
"reason_code": "out_of_role_scope",
"skill": "Router and Filter Logic"
},
{
"audit_reasoning": "This skill is in Secondary as the JD says \"WebSockets for real-time data\" - the JD marks it as \"nice to have\" rather than required.",
"jd_quote": "WebSockets for real-time data",
"provenance": "listed",
"reason_code": "jd_preferred",
"skill": "WebSockets"
}
],
"secondary_skills": [
"AWS",
"D3.js",
"Design System",
"Docker",
"Kubernetes",
"Micro-Frontends",
"Recharts",
"Reusable Transformations",
"Router and Filter Logic",
"WebSockets"
],
"skill_layers": [
{
"label": "Anchor",
"layer": "L0",
"skills": [
{
"dimension": {
"display_name": "Frontend Frameworks",
"slug": "frontend-frameworks"
},
"name": "React",
"origin": "catalog",
"rationale": "the finalized role is the React specialization of the Frontend family; the component framework is the role\u0027s identity, and framework choice "
},
{
"dimension": {
"display_name": "Programming Languages",
"slug": "programming-languages"
},
"name": "TypeScript",
"origin": "catalog",
"rationale": "the craft is exercised in JavaScript/TypeScript; without the language there is no frontend engineering."
},
{
"dimension": {
"display_name": "Frontend Frameworks",
"slug": "frontend-frameworks"
},
"name": "React DevTools",
"origin": "catalog",
"rationale": "the finalized role is the React specialization of the Frontend family; the component framework is the role\u0027s identity, and framework choice "
},
{
"dimension": {
"display_name": "Frontend Frameworks",
"slug": "frontend-frameworks"
},
"name": "React Testing Library",
"origin": "catalog",
"rationale": "the finalized role is the React specialization of the Frontend family; the component framework is the role\u0027s identity, and framework choice "
},
{
"dimension": {
"display_name": "Programming Languages",
"slug": "programming-languages"
},
"name": "JavaScript",
"origin": "catalog",
"rationale": "the craft is exercised in JavaScript/TypeScript; without the language there is no frontend engineering."
},
{
"dimension": {
"display_name": "Web Platform \u0026 Browser APIs",
"slug": "web-platform-browser-apis"
},
"name": "WebSocket",
"origin": "catalog",
"rationale": "the browser is the deployment target."
}
]
},
{
"label": "Primary",
"layer": "L1",
"skills": [
{
"dimension": {
"display_name": "State Management \u0026 Client Data",
"slug": "state-management-client-data"
},
"name": "Redux Toolkit",
"origin": "catalog",
"rationale": "daily output \u2014 every non-trivial feature decides where state lives and how server data reaches the UI; store and query-cache code is written"
},
{
"dimension": {
"display_name": "Meta-Frameworks \u0026 Rendering",
"slug": "meta-frameworks-rendering"
},
"name": "Next.js",
"origin": "catalog",
"rationale": "the meta-framework is the daily application chassis \u2014 routing, rendering mode, and data loading run through it on almost every feature (owns"
},
{
"dimension": {
"display_name": "Testing Frameworks",
"slug": "testing-frameworks"
},
"name": "Playwright",
"origin": "catalog",
"rationale": "tests are written alongside every component and journey; owns_4 makes automated testing a first-class quality gate of the role\u0027s own output."
},
{
"dimension": {
"display_name": "UI Styling \u0026 Component Systems",
"slug": "ui-styling-component-systems"
},
"name": "Figma",
"origin": "catalog",
"rationale": "daily output is styled UI; the charter owns the design-system-in-code layer (owns_3), making styling architecture primary craft rather than "
},
{
"dimension": {
"display_name": "UI Styling \u0026 Component Systems",
"slug": "ui-styling-component-systems"
},
"name": "Tailwind CSS",
"origin": "catalog",
"rationale": "daily output is styled UI; the charter owns the design-system-in-code layer (owns_3), making styling architecture primary craft rather than "
},
{
"dimension": {
"display_name": "Testing Frameworks",
"slug": "testing-frameworks"
},
"name": "Jest",
"origin": "catalog",
"rationale": "tests are written alongside every component and journey; owns_4 makes automated testing a first-class quality gate of the role\u0027s own output."
},
{
"dimension": {
"display_name": "Web Performance Optimization",
"slug": "web-performance-optimization"
},
"name": "Core Web Vitals",
"origin": "catalog",
"rationale": "owns_4 sets Core Web Vitals budgets as continuous acceptance criteria; performance work is recurring engineering practice here, not occasion"
},
{
"dimension": {
"display_name": "Web Performance Optimization",
"slug": "web-performance-optimization"
},
"name": "Code Splitting",
"origin": "catalog",
"rationale": "owns_4 sets Core Web Vitals budgets as continuous acceptance criteria; performance work is recurring engineering practice here, not occasion"
},
{
"dimension": {
"display_name": "UI Styling \u0026 Component Systems",
"slug": "ui-styling-component-systems"
},
"name": "CSS",
"origin": "catalog",
"rationale": "daily output is styled UI; the charter owns the design-system-in-code layer (owns_3), making styling architecture primary craft rather than "
},
{
"dimension": {
"display_name": "UI Styling \u0026 Component Systems",
"slug": "ui-styling-component-systems"
},
"name": "CSS-in-JS",
"origin": "ai_predicted",
"rationale": "TaBuddy AI prediction \u2014 not in the skill library yet; placed under UI Styling \u0026 Component Systems pending admin review."
}
]
},
{
"label": "Environment",
"layer": "L2",
"skills": [
{
"dimension": {
"display_name": "API Design \u0026 Protocols",
"slug": "api-design-protocols"
},
"name": "REST",
"origin": "catalog",
"rationale": "the API contract is owned by the backend neighbour (collaborates_2); this role consumes and co-designs it but its daily output is the client"
},
{
"dimension": {
"display_name": "API Design \u0026 Protocols",
"slug": "api-design-protocols"
},
"name": "GraphQL",
"origin": "catalog",
"rationale": "the API contract is owned by the backend neighbour (collaborates_2); this role consumes and co-designs it but its daily output is the client"
},
{
"dimension": {
"display_name": "Build \u0026 Dependency Tools",
"slug": "build-dependency-tools"
},
"name": "webpack",
"origin": "catalog",
"rationale": "the bundler/toolchain is the working environment the role configures and maintains (owns_5), but daily output is UI, not tooling \u2014 environme"
},
{
"dimension": {
"display_name": "Build \u0026 Dependency Tools",
"slug": "build-dependency-tools"
},
"name": "Vite",
"origin": "catalog",
"rationale": "the bundler/toolchain is the working environment the role configures and maintains (owns_5), but daily output is UI, not tooling \u2014 environme"
},
{
"dimension": {
"display_name": "Accessibility \u0026 Web Standards",
"slug": "accessibility-web-standards"
},
"name": "WCAG",
"origin": "catalog",
"rationale": "Rule 3 over Rule 4: conformance is expected of owned surfaces (owns_4) but depth genuinely differentiates candidates and gaps are coachable "
},
{
"dimension": {
"display_name": "Build \u0026 Dependency Tools",
"slug": "build-dependency-tools"
},
"name": "GNU Make",
"origin": "catalog",
"rationale": "the bundler/toolchain is the working environment the role configures and maintains (owns_5), but daily output is UI, not tooling \u2014 environme"
}
]
},
{
"label": "Hygiene",
"layer": "L3",
"skills": [
{
"dimension": {
"display_name": "Version Control",
"slug": "version-control"
},
"name": "Git",
"origin": "catalog",
"rationale": "fluent Git collaboration is expected of every practitioner at target seniority and differentiates almost no one."
},
{
"dimension": {
"display_name": "CI/CD \u0026 Delivery",
"slug": "ci-cd-delivery"
},
"name": "GitHub Actions",
"origin": "catalog",
"rationale": "riding pipelines for preview and production deploys is baseline (collaborates_4); pipeline ownership belongs to DevOps."
}
]
}
],
"unmapped_skills": [
"component library"
]
}
API 2 — extract-details
{}
API 3 — final-role-output
{}
LLM Calls
Every model call made for this run, in pipeline order. Click a card to see the model's response.