Shapes data processing architectural strategy for large-scale React applications. Defines the balance between client and server computations through React Server Components, designs edge-computing patterns for latency minimization.
Roles · Frontend Developer (React) · Principal
What a Principal } should know
36 core skills, 52 in total. Expectations per skill, and what changes at the next level.
This page lists what a Principal } is expected to know and do, skill by skill. Core skills are the ones a manager and peers assess in a review cycle; the rest count only in self-assessment. Main areas: Programming Fundamentals, Frontend Development, API & Integration.
Core skills for a Principal
Grouped by area. The label on the right is the expected depth: Awareness, Working, Advanced or Expert.
Programming Fundamentals · 6
Defines async data processing strategy for the React application ecosystem. Designs architecture with React Server Components for server-side data fetching, edge functions for latency reduction, real-time subscriptions through WebSocket/SSE.
Shapes code quality culture in the React organization. Develops shared ESLint configs and TypeScript configurations for the project ecosystem, defines quality metrics and SLAs, introduces automated technical debt monitoring.
Develops data management strategy for the React application ecosystem. Designs universal data models ensuring consistency between React Server Components, client cache and persistent storage.
Shapes architectural pattern system for large-scale React ecosystems. Defines reuse strategy through shared libraries, micro-frontends on Module Federation, unified conventions for dozens of organization's React applications.
Defines type safety strategy for the React application ecosystem. Designs end-to-end type safety from DB to UI through tRPC/GraphQL codegen, shared type packages in monorepo, automatic type generation from contracts.
Frontend Development · 18
Defines bundle optimization strategy for the React application ecosystem: shared dependencies through Module Federation, optimal CDN strategies, resource loading architecture. Designs platform-level solutions for automatic bundle optimization across all products.
Shapes component testing strategy for the React application ecosystem: shared testing infrastructure, cross-project test utilities, design system standards. Defines test quality metrics and investments in testing infrastructure at organizational level.
Shapes organization-level performance strategy: Core Web Vitals SLAs for all React products, architectural patterns for achieving targets, edge infrastructure investments. Evaluates the impact of performance on business metrics and conversion.
Defines CSS architecture strategy for the React application ecosystem: choosing between Tailwind CSS, CSS Modules and styled-components considering Server Components compatibility. Designs zero-runtime solutions for SSR, standardizes design tokens and theming across the organization.
Defines data fetching strategy for the React application ecosystem: BFF architecture with React Server Components, edge caching, GraphQL federation. Designs platform-level solutions for unified data access, real-time synchronization and offline support.
Defines design system strategy for the organization's React application ecosystem. Designs multi-brand architecture with shared core, white-label theming, governance model for distributed teams and company-wide adoption strategy.
Defines long-term CSS strategy for the React ecosystem: token architecture, theming approach, accessibility standards. Evaluates new CSS specifications and their impact on styling architecture, plans migration paths.
Defines the organization's Next.js platform evolution strategy: App Router architecture with React Server Components, edge runtime for global distribution, ISR/PPR for optimal performance-freshness balance. Shapes middleware, caching and deployment standards.
Shapes PWA strategy for the organization's React application ecosystem. Defines distributed caching architecture between Service Worker, React Server Components and edge CDN, designs unified offline-first approach for all products.
Shapes the organization's long-term React platform strategy. Defines architecture for transitioning to React Server Components, evaluates adoption of new React APIs (use, Actions), designs framework-agnostic layer to reduce vendor lock-in.
Shapes rendering strategy for the organization's React application ecosystem: edge rendering architecture, PPR for optimal balance, global CDN caching strategy. Evaluates new patterns (React Server Actions, PPR) and defines adoption roadmap.
Defines state management strategy for the React application ecosystem: distributed state architecture, synchronization between micro-frontends, legacy solution migration strategy. Shapes platform-level abstractions for unified state management.
Defines CSS strategy for the organization's React application ecosystem. Designs shared Tailwind preset as npm package for consistent UI, defines theming architecture (dark mode, white-label), ensures RSC compatibility.
Shapes visual quality strategy for the React application ecosystem: unified visual testing platform, cross-product consistency checks, automatic design drift detection. Defines investments in tooling and visual QA processes at organizational level.
Defines build strategy for the React application ecosystem: choosing between Vite and Turbopack for different scenarios, monorepo build architecture, CI/CD pipeline optimization. Evaluates new tools (Turbopack, Rspack) and plans migration paths.
Shapes accessibility strategy for the organization's React application ecosystem. Defines WCAG compliance roadmap, design system standards, audit and certification processes. Ensures legal compliance and inclusive design principles across the entire company.
Defines Web Platform API adaptation strategy for the React application ecosystem. Evaluates new APIs (View Transitions, Speculation Rules) for UX improvement, designs platform-abstraction layer for cross-platform React solutions.
Shapes Web Components architectural strategy for the organization: standards-based UI primitives, portability strategy between React and other frameworks, design system integration. Defines long-term direction: React-specific vs Web Standards.
API & Integration · 2
Shapes GraphQL strategy for the React application ecosystem: GraphQL Federation for microservices, schema governance, REST migration strategy. Defines architectural decisions: Relay vs Apollo, server-driven UI, edge caching for GraphQL at the organization level.
Defines API architecture strategy for the React application ecosystem: API Gateway, BFF per frontend, contract-first development. Designs platform-level solutions for API management, monitoring, rate limiting and backward compatibility.
Cloud & Infrastructure · 1
Defines containerization strategy for the React application ecosystem: orchestration through Kubernetes, deployment strategy (Vercel vs self-hosted), cold start optimization for serverless. Designs infrastructure-as-code for all organization's React products.
DevOps & CI/CD · 1
Defines CI/CD strategy for the React application ecosystem: platform team workflows, shared infrastructure for monorepo with Turborepo, progressive delivery (feature flags, canary releases). Designs developer experience pipeline for maximum productivity.
Testing & QA · 3
Shapes the organization's accessibility testing strategy across React and frontend ecosystems, embedding WCAG compliance into the development lifecycle. Drives innovation in accessibility automation including component-level a11y contracts, cross-browser assistive technology testing frameworks, and real-user accessibility monitoring in production. Influences React community accessibility practices through open-source contributions and a11y tooling ecosystem development.
Defines E2E strategy for the React application ecosystem: cross-product scenarios, shared test infrastructure, micro-frontend testing strategy. Shapes test environment architecture, investments in test platform and E2E test reliability metrics.
Defines unit testing strategy for the React application ecosystem: shared test infrastructure in monorepo, test quality metrics (mutation score), standards for libraries and design system. Shapes investment strategy in test infrastructure.
AI-Assisted Development · 2
Shapes AI-augmented development strategy for the organization: LLM integration into developer workflow, custom fine-tuning for project conventions, ROI metrics for AI tools. Defines governance framework for AI-assisted development in the React ecosystem.
Shapes GitHub Copilot strategy for the organization: enterprise deployment, security and IP policies, productivity ROI analysis. Defines Copilot integration with other AI tools, custom model training for the React ecosystem, governance and compliance framework.
Version Control & Collaboration · 2
Shapes code review culture for the organization: cross-team review practices, architecture review board for significant React changes. Defines review quality standards, efficiency metrics (cycle time, review coverage), mentorship program for reviewers.
Defines Git strategy for the organization's React application ecosystem: monorepo vs polyrepo architecture, management tools (Turborepo, Nx), migration strategy. Shapes standards for cross-team collaboration, inner source practices and open source governance.
Performance Engineering · 1
Defines performance strategy for the organization's React application ecosystem: Core Web Vitals SLAs for all products, platform solutions for automatic optimization, ROI model linking performance to business metrics. Shapes performance engineering culture.
Additional skills
Not assessed by the team, but part of the self-assessment and the development plan.
} in the open competency matrix: 52 skills across 5 levels. The matrix is free for individuals and stays free.