AI Coding Assistants 1
▼
Uses GitHub Copilot for accelerating React development: JSX autocompletion, generating event handlers, writing TypeScript types. Accepts useful suggestions and rejects incorrect ones, understands Copilot limitations when generating React code.
Effectively applies Copilot for React development: component generation from comments, Vitest/Testing Library test autocompletion, refactoring through Copilot Chat. Writes descriptive comments and names to improve suggestion quality in React context.
Optimizes Copilot usage in React projects: custom instructions for project patterns (Next.js App Router, Zustand, Tailwind), Copilot Workspace for complex tasks. Defines effective usage patterns: where AI saves time, where it creates technical debt.
Standardizes Copilot in the React team: configuration for corporate policies, AI-generated code review guidelines, adoption and quality metrics. Defines strategy: Copilot Business/Enterprise, allowed repositories, CI integration for AI code verification.
Algorithms & Data Structures 2
▼
Understands basic O(n), O(1) complexity when working with arrays and lists in React components. Avoids nested loops when rendering lists through map(), uses key for optimizing React reconciliation algorithm.
Optimizes filtering and sorting algorithms in React applications using useMemo and useCallback. Understands the Virtual DOM diffing algorithm, applies memoization to prevent unnecessary recalculations in components with TanStack Query.
Designs efficient algorithms for processing large data volumes on the client considering main thread constraints. Applies Web Workers for heavy computations, uses list virtualization (TanStack Virtual) and incremental rendering strategies.
Defines algorithmic efficiency standards for the team's React applications. Introduces performance budgets for operation complexity, reviews optimization solutions for reconciliation and server components in Next.js App Router.
Works with arrays and objects in React component state, understands immutability when updating state through useState and Zustand. Correctly uses spread operator and array methods for UI updates.
Chooses optimal data structures for state normalization in Zustand/Jotai: Map for fast key-based access, Set for unique collections. Designs state shape for efficient React component updates without unnecessary re-renders.
Designs complex data structures for caching and normalization in TanStack Query and client state. Implements optimistic updates with rollback, uses immer for safe mutations of nested structures in React applications.
Standardizes data modeling approaches in the team's React applications: normalization, denormalization, cache invalidation. Defines architectural patterns for data handling between Next.js server and client components.
Application Security 1
▼
Understands main OWASP Top 10 vulnerabilities in the React context: XSS prevention through automatic JSX escaping, dangerouslySetInnerHTML dangers, CSRF tokens. Uses Content Security Policy headers in Next.js, validates user input.
Applies OWASP recommendations in React/Next.js applications: security headers configuration (CSP, HSTS, X-Frame-Options) through next.config.js, secure authentication through NextAuth.js, API route protection from injection. Conducts security code review, uses npm audit.
Designs security architecture for React applications following OWASP: authentication and authorization strategy, SSRF protection in Server Components, secure cookie management. Introduces automated security scanning in CI (Snyk, SAST), defines threat model for frontend applications.
Benchmarking 1
▼
Understands performance budget concepts for React applications: maximum bundle size, target Core Web Vitals values (LCP < 2.5s, CLS < 0.1). Checks Lighthouse score locally, monitors component sizes when adding dependencies to the project.
Configures performance budgets for React/Next.js applications: bundle size limits through bundlesize CI check, Lighthouse CI with threshold values, runtime performance monitoring. Responds to budget violations: optimizes code, moves to lazy load, replaces heavy libraries.
Designs performance budget system for React applications: per-route budgets (JS, CSS, images), automated CI/CD monitoring through Lighthouse CI and web-vitals, degradation alerts. Defines budgets based on competitive analysis and business requirements.
Standardizes performance budgets for the team's React projects: unified thresholds, monitoring dashboard, violation triage process. Introduces performance culture: regular audits, performance review in PR checklist, team training on React optimization.
Build Tools & Bundling 1
▼
Works with basic Vite configuration for React projects: understands dev server with HMR, TypeScript and JSX support, path configuration through resolve.alias. Uses standard @vitejs/plugin-react plugins, understands dev/build mode differences.
Configures advanced Vite setup for React: custom plugins, dependency optimization through optimizeDeps, API proxy configuration. Configures Vitest as test runner, env variables through .env files, production build setup.
Designs Vite configuration for complex React applications: multi-entry builds, library mode for UI packages, SSR configuration. Creates custom Vite plugins for specific transformations, optimizes cold start and HMR for large projects.
Standardizes Vite configuration for the team's React projects: shared preset in monorepo with Turborepo, unified optimization rules, webpack migration strategy. Defines build performance standards, monitors build times in CI.
CI/CD 1
▼
Understands basic CI/CD configuration for React projects in GitHub Actions: running linting (ESLint), type checking (tsc), tests (Vitest) on push and PR. Reads CI logs for error diagnosis, understands status checks for PRs.
Configures CI/CD pipeline for React/Next.js in GitHub Actions: node_modules caching, parallel jobs for lint/test/build, preview deployments through Vercel. Integrates Lighthouse CI, bundle size check, visual regression tests in PR workflow.
Designs CI/CD architecture for React applications: matrix builds (Node versions, browsers), E2E tests through Playwright in CI, automatic deployment to staging/production. Optimizes pipeline time: selective testing, Turborepo remote caching, parallel jobs.
Standardizes CI/CD for the team's React projects: reusable workflows for GitHub Actions, unified quality gates (tests, coverage, Lighthouse, a11y), deployment strategy (preview, staging, canary, production). Defines CI time SLA and hotfix process.
Clean Code & Refactoring 1
▼
Follows configured ESLint and Prettier rules in React projects, writes clean functional components. Uses meaningful names for components, hooks and variables, separates components by responsibility, adds basic TypeScript types.
Configures ESLint with eslint-plugin-react-hooks and @typescript-eslint for React code quality. Writes strictly typed components and hooks, applies TypeScript strict mode, configures husky + lint-staged for pre-commit checks.
Designs React code quality assurance system: custom ESLint rules for architectural conventions, automated bundle size analysis in CI, test coverage metrics. Introduces Storybook for component documentation and visual testing.
Defines code quality standards for the React team: style guide, architectural conventions, mandatory review checklists. Introduces automated quality gates in CI/CD: TypeScript strict, ESLint, tests, Lighthouse score, bundle analysis.
Code Review 1
▼
Participates in code review of React components: checks props correctness and typing, JSX readability, adherence to project conventions (Tailwind, naming). Gives constructive comments, learns from senior developer feedback, responds to reviews promptly.
Conducts thorough code review of React code: evaluates architectural decisions (component separation, state management), performance (unnecessary re-renders, memoization), accessibility, test coverage. Uses checklists for systematic PR review in React projects.
Mentors through code review in React projects: teaches architectural patterns, explains decision trade-offs (Server vs Client Components, state strategies). Creates review guidelines for the team, automates checks through danger.js and custom ESLint rules.
Defines code review process for the React team: review standards (time SLA, checklists), CODEOWNERS for critical modules, automated review strategy. Introduces culture of constructive feedback, balances thoroughness and velocity, mentors junior reviewers.
Concurrency & Parallelism 1
▼
Understands async/await and Promise for API work in React components. Uses useEffect for data loading, handles loading/error/success states in fetch requests, knows basic TanStack Query for response caching.
Manages complex async flows in React: parallel requests through Promise.all, dependent queries in TanStack Query, optimistic updates with mutations. Uses Suspense for declarative data loading and React.lazy for code splitting.
Designs async architecture for React applications: caching and invalidation strategies in TanStack Query, streaming SSR in Next.js, concurrent rendering with useTransition and useDeferredValue for responsive UI.
Standardizes async patterns in the team's React applications: unified approach to data fetching through TanStack Query, error handling through Error Boundaries, retry and fallback strategies. Defines Suspense zone boundaries in the architecture.
CSS & Styling 4
▼
Uses CSS-in-JS at a basic level. Creates simple components from design. Understands basic concepts and follows component guidelines.
Implements complex React UI components using styled-components or Emotion with dynamic theming and responsive styles. Optimizes rendering performance by avoiding unnecessary style recalculations. Writes unit tests for styled components and applies proper CSS-in-JS patterns for state-driven styling.
Designs React design system architecture with CSS-in-JS: token-based theming, variant APIs, and compound component patterns. Optimizes bundle size through static extraction and critical CSS strategies. Implements accessible, performant component libraries meeting Core Web Vitals targets.
Defines product-level CSS-in-JS architecture for React applications: selects styling solutions (runtime vs zero-runtime), establishes theming contracts, and enforces design token standards. Conducts architectural reviews ensuring performance, accessibility, and maintainability across teams.
Uses ready-made design system components on Radix UI in React applications: buttons, forms, modals, navigation. Understands component composition principles, applies correct variants and sizes according to design guidelines.
Creates reusable React components for design system based on Radix UI primitives: compound components, polymorphic components through asChild. Documents in Storybook with interactive examples, types props through TypeScript.
Designs React design system architecture: headless components with Radix UI, styling through Tailwind CSS + CVA, tokenization through CSS custom properties. Creates NPM package with tree-shaking, automated tests and visual regression testing.
Leads design system development for the team's React projects: defines component APIs, contribution process, versioning and breaking changes. Coordinates with designers to ensure Figma-to-code consistency through design tokens.
Proficient in modern CSS basics for React: flexbox and grid for layouts, CSS custom properties for variables, media queries for responsiveness. Applies CSS Modules or Tailwind CSS for style isolation in components.
Uses advanced CSS capabilities in React components: container queries, :has(), @layer for specificity management, CSS logical properties. Configures CSS Modules with typing through typed-css-modules, animations through Framer Motion.
Designs React application CSS architecture: design token system through CSS custom properties, adaptive typography through clamp(), CLS optimization through aspect-ratio. Ensures CSS strategy compatibility with React Server Components and streaming.
Standardizes CSS approaches in the team's React projects: methodology selection (Tailwind/Modules), conventions, analysis tools. Introduces automated CSS quality checks: stylelint, visual regression testing, CSS bundle size monitoring.
Applies basic Tailwind CSS utility classes for styling React components: padding, colors, typography, flexbox. Uses responsive prefixes (sm:, md:, lg:) for adaptive layouts, understands tailwind.config.js structure.
Creates custom Tailwind CSS configuration for React projects: extends theme, creates plugins, uses @apply for reusable styles. Integrates with Radix UI and Headless UI, configures purge for optimal bundle size with Vite.
Designs scalable Tailwind CSS architecture for React design system: custom plugins, design tokens, component variants through CVA (Class Variance Authority). Optimizes CSS output for Server Components and streaming SSR.
Standardizes Tailwind CSS usage in the team's React projects: unified configuration, shared preset for design system, naming conventions. Defines migration strategy from legacy CSS approaches, introduces visual style testing through Storybook.
E2E Testing 1
▼
Runs and understands E2E tests for React applications on Playwright: basic navigation scenarios, form filling, data display verification. Reads failure reports, analyzes screenshots and traces for error diagnosis.
Writes reliable E2E tests for React/Next.js with Playwright: Page Object Model, authentication fixtures, API mocking through route interception. Configures parallel execution, retries for flaky tests, HTML report generation with traces.
Designs E2E testing architecture for React applications: critical user flow coverage strategy, visual regression through Playwright screenshots, CI integration (sharding, selective testing). Optimizes stability: deterministic data, proper waits, isolated environments.
Standardizes E2E testing for the team's React projects: mandatory smoke tests for deployment, flaky test triage strategy, balance between E2E and integration tests. Defines E2E coverage for critical business flows, green pipeline SLA.
Frontend Architecture 1
▼
Understands the difference between SSR, SSG and CSR in the Next.js context. Uses App Router for creating server and client components, applies generateStaticParams for static generation, understands use client and use server directives.
Implements advanced rendering patterns in Next.js App Router: streaming SSR with Suspense, ISR with revalidate, parallel and intercepting routes. Optimizes TTFB through Server Components, configures data and full-page caching.
Designs rendering architecture for Next.js applications: SSR/SSG/ISR/PPR strategy selection per route, streaming architecture with nested Suspense boundaries, edge rendering for global applications. Ensures balance between performance and data freshness.
Defines rendering pattern standards for the team's Next.js projects: decision framework for rendering strategy selection, TTFB and FCP monitoring, conventions for organizing server and client components. Mentors on App Router architecture.
Frontend Testing 2
▼
Writes basic React component tests with React Testing Library and Vitest: rendering, checking text and elements through screen queries, basic user interactions (click, type). Follows the testing-library principle: test behavior, not implementation.
Creates comprehensive React component tests: mocking hooks and contexts, testing async operations with waitFor, integration tests with MSW for API mocking. Configures coverage reports, tests accessibility through jest-axe.
Designs React component testing strategy: test pyramid (unit/integration/E2E), shared test utilities and fixtures, custom render with providers. Creates testing-library/react extensions for project patterns, integrates with Storybook interaction tests.
Defines component testing standards for the React team: minimum coverage, mandatory test cases for PRs, test file structure. Introduces testing culture: TDD for complex logic, test-first approach for bugfixes, automated coverage reports.
Understands visual regression testing concepts for React components. Creates Storybook stories for main component states, runs basic visual diff tests through Chromatic or Percy for detecting unintended UI changes.
Configures visual regression testing for React components: Storybook integration with Chromatic for automatic screenshot comparison, Playwright visual testing for E2E scenarios. Covers key states: responsive breakpoints, dark mode, loading states.
Designs visual regression testing system for React design system: multi-theme and multi-viewport matrix in Storybook/Chromatic, CI integration for blocking checks. Optimizes test stability: deterministic fonts, fixed dates, mock data.
Defines visual testing strategy for the team's React projects: coverage targets, visual changes review process, balance between completeness and CI speed. Integrates visual testing into designer workflow for Figma-to-code validation.
GraphQL 1
▼
Uses GraphQL in React components through Apollo Client or urql: writing queries and mutations, handling loading and error states. Understands GraphQL schema basics, uses GraphQL Playground for API exploration, basic typing through codegen.
Implements advanced GraphQL patterns in React: fragments for field reuse, optimistic updates, cache normalization in Apollo Client. Configures GraphQL codegen for auto-generating TypeScript types and hooks, implements cursor-based pagination.
Designs GraphQL architecture for React applications: caching and invalidation strategy, persisted queries for security and performance, React Server Components integration. Optimizes query complexity, implements real-time subscriptions through WebSocket.
Defines GraphQL strategy for the team's React projects: query writing conventions, fragment structure, code generation approach. Coordinates with backend team: schema design, breaking changes management, GraphQL operation performance monitoring.
Networking 1
▼
Understands basic networking concepts for React web applications — HTTP/HTTPS requests with fetch/axios, CORS configuration, and SSR data fetching patterns. Follows team guidelines for configuring API clients, handling network errors, and debugging browser network activity.
Understands networking aspects of React/Next.js applications: CORS configuration for API routes, HTTP/2 and Server Push for load optimization, CDN caching for static assets. Optimizes network requests: compression, resource hints (preload, prefetch, preconnect).
Designs React application network architecture: CDN distribution strategy for Next.js, edge middleware for geolocation and A/B testing, WebSocket/SSE for real-time functionality. Optimizes TTFB through edge computing and strategic caching at all levels.
OOP & Design Patterns 1
▼
Applies basic React patterns: component composition, props drilling, conditional rendering. Understands the separation of presentational and container components, uses children and render props for logic reuse.
Proficient in advanced React patterns: compound components, render props, HOC, custom hooks for logic reuse. Applies provider pattern through React Context and Zustand for state management, uses TypeScript generics for type-safe components.
Designs React application architectural patterns: modular structure with feature-sliced approach, dependency inversion through DI containers. Creates libraries of reusable hooks and headless components based on Radix UI.
Defines architectural patterns for the team's React projects: convention over configuration, monorepo structure with Turborepo. Standardizes approaches to component composition, side-effects management and Next.js App Router integration.
React Ecosystem 2
▼
Uses Next.js at a basic level. Creates simple components from design. Understands basic concepts and follows component guidelines.
Independently implements complex UI components with Next.js. Optimizes rendering performance. Writes tests. Applies state management tools.
Architects Next.js applications with App Router, RSC, and streaming SSR. Optimizes Core Web Vitals through ISR, image optimization, and code splitting. Establishes frontend architecture patterns for the team.
Defines product-level frontend architecture with Next.js. Establishes standards and best practices. Conducts architectural reviews.
Uses React Core at a basic level. Creates simple components from design. Understands basic concepts and follows component guidelines.
Implements complex UI components with advanced React patterns like compound components and render props. Optimizes rendering with useMemo, useCallback, and React.memo. Writes comprehensive unit and integration tests with React Testing Library.
Deeply understands React 18+ internal mechanisms: Fiber architecture, concurrent rendering, update batching. Optimizes performance through useTransition, useDeferredValue, React.memo, designs Suspense boundary architecture for streaming SSR.
Defines architectural standards for React 18+ usage in the team: Server Components migration strategy, conventions for concurrent features, boundaries between client and server components. Mentors the team on advanced React patterns.
Specialized Testing 1
▼
Understands basic accessibility testing concepts including WCAG guidelines, semantic JSX, and ARIA roles in React components. Follows team checklists for running axe-core audits and keyboard navigation tests on React UI elements. Uses React Testing Library's accessibility queries (getByRole, getByLabelText) and browser DevTools to identify common a11y issues in React applications.
Independently writes accessibility tests for React components using React Testing Library, jest-axe, and Playwright/Cypress a11y assertions. Implements automated WCAG compliance scanning in CI/CD pipelines with configurable rule sets for React applications. Tests screen reader behavior for custom React hooks managing focus, announcements, and keyboard interactions across component hierarchies.
Designs comprehensive accessibility testing strategies for React application ecosystems covering WCAG 2.1 AA/AAA requirements. Implements advanced testing patterns including virtual DOM accessibility tree validation, dynamic route transition announcements, and complex state-driven widget testing with multiple assistive technologies. Builds reusable a11y testing utilities for React component libraries and establishes continuous accessibility monitoring for production React applications.
Defines accessibility testing standards and quality gates for React projects across the organization. Establishes automated a11y testing infrastructure, component library accessibility certification workflows, and WCAG compliance reporting for React-based products. Conducts architecture reviews ensuring React applications meet accessibility requirements and drives adoption of accessible-by-default component patterns across teams.
State Management 2
▼
Loads data in React components through TanStack Query: basic useQuery for GET requests, handling loading and error states. Understands caching and staleTime, uses fetch or axios for HTTP requests, displays skeletons during loading.
Implements advanced data fetching patterns in React: mutations with optimistic updates in TanStack Query, infinite scroll through useInfiniteQuery, parallel and dependent queries. Configures global error handling and retry strategies.
Designs data fetching architecture for React applications: server and client fetching strategy in Next.js App Router, caching and revalidation, streaming with Suspense. Implements API client abstraction layer with type safety through zod and TypeScript.
Standardizes data fetching approaches in the team's React projects: unified API client, TanStack Query usage conventions, cache invalidation strategy. Makes architectural decisions: Server Components vs client fetching, optimal strategies for each data type.
Manages local React component state through useState and useReducer. Uses Zustand for global state (theme, user, UI states), understands lifting state up and passing through props and React Context.
Designs state management in React applications: separation of server (TanStack Query) and client (Zustand/Jotai) state, re-render optimization through selectors and atomic state. Implements derived state, middleware in Zustand for logging and persistence.
Architects state management for complex React applications: domain-based state separation strategy, cross-tab synchronization through Zustand middleware, optimistic updates with rollback. Designs state machines through XState for complex UI flows.
Standardizes state management approaches in the team's React projects: unified stack (Zustand + TanStack Query), store structure conventions, patterns for typical scenarios. Defines boundaries between server and client state in Next.js App Router architecture.
Type Systems 1
▼
Uses basic TypeScript types in React components: interfaces for props, typing useState and events. Understands the difference between type and interface, applies React.FC, types event handlers onChange, onClick.
Creates strictly typed React components with generics, discriminated unions for props, conditional types. Types hooks, Zustand/Jotai contexts, TanStack Query responses. Uses zod for runtime validation at the API boundary.
Designs advanced type systems for React applications: type-safe form libraries, Next.js App Router routing, generic components for UI libraries. Creates utility types and type guards for complex business domains.
Standardizes typing approaches in the team's React projects: strict TypeScript configuration, shared types between frontend and backend, auto-generated types from API schemas (OpenAPI, GraphQL codegen). Defines migration strategy away from any.
Web Performance 2
▼
Understands the fundamentals of Bundle Optimization. Applies basic practices in daily work. Follows recommendations from the team and documentation.
Optimizes React application bundle: configures chunk splitting in Vite for optimal caching, implements route-based code splitting in Next.js, tree-shaking for UI libraries. Configures bundle size limits in CI, analyzes and eliminates dependency duplication.
Designs bundle optimization strategy for React applications: granular code splitting, prefetching through Speculation Rules API, module/nomodule approach. Introduces automated bundle size regression monitoring in CI, optimizes vendor chunks for long-term caching.
Standardizes bundle optimization approach in the team's React projects: per-route performance budgets, automatic PR comments with bundle diff, shared chunks in monorepo. Defines architectural patterns for minimizing JavaScript sent to the client.
Understands Core Web Vitals metrics (LCP, FID/INP, CLS) and their impact on React applications. Uses Lighthouse and React DevTools for basic performance analysis, applies Image component in Next.js for LCP optimization.
Optimizes Core Web Vitals in React/Next.js applications: LCP through load prioritization and Server Components, INP through useTransition and handler debouncing, CLS through reserving space for dynamic content and font display swap.
Designs React application architecture for optimal Core Web Vitals: rendering strategy (SSR/SSG/ISR/PPR) in Next.js, progressive hydration, selective streaming. Configures RUM monitoring through web-vitals library, defines performance budgets.
Defines Core Web Vitals performance standards for the team's React projects: threshold values, CI/CD monitoring through Lighthouse CI, degradation alerts. Introduces performance culture: dashboards, review checklists, regular performance audits.
Web Standards & APIs 4
▼
Understands PWA concepts including service workers and manifest configuration in React apps. Uses Workbox with Create React App for basic caching strategies. Implements installability prompts and offline fallback pages.
Implements PWA functionality in React/Next.js applications: caching strategies (cache-first, network-first) through Workbox, push notifications, offline fallback. Configures precaching of critical resources and runtime caching for API responses.
Designs PWA architecture for React applications: offline data synchronization strategy with TanStack Query server state, background sync, periodic synchronization. Ensures graceful degradation and progressive enhancement for all features.
Defines PWA strategy for the team's React projects: offline-first architecture standards, PWA quality metrics, testing processes. Coordinates PWA integration with existing Next.js infrastructure, defines offline functionality scope and boundaries.
Applies basic accessibility principles in React components: semantic HTML elements, alt for images, aria-label for interactive elements. Uses Radix UI for accessible UI primitives, checks basic keyboard navigation.
Implements accessible React components: uses React Aria (Adobe) or Radix UI for accessible primitives, manages focus through useRef and focus management, implements keyboard navigation for custom components. Tests with axe-core and verifies through screen readers (VoiceOver/NVDA).
Designs accessibility architecture for React applications: focus management system for SPA navigation in Next.js, ARIA strategy for complex interactive patterns, accessibility-first approach in design system. Introduces automated a11y testing in CI.
Standardizes accessibility in the organization's React ecosystem: defines a11y requirements for design system, creates testing playbooks for screen reader verification, introduces accessibility champions program. Conducts developer training and design reviews for WCAG compliance.
Uses basic Web APIs in React components: localStorage/sessionStorage for persistence, fetch for HTTP requests, DOM API through useRef. Understands subscription lifecycle in useEffect, correctly cleans up listeners on unmount.
Integrates advanced Web APIs in React applications: IntersectionObserver for lazy loading through hooks, ResizeObserver for adaptive components, History API for custom navigation. Creates reusable React hooks for typical Web API patterns.
Designs Web API abstractions for React applications: WebSocket managers with automatic reconnect and Zustand integration, Web Workers for heavy computations, Shared Workers for tab synchronization. Uses Streams API for large data processing.
Standardizes Web API usage in the team's React projects: hook wrapper library, polyfill strategy, fallback patterns. Makes architectural decisions for working with new APIs (View Transitions, Navigation API) in Next.js applications.
Understands Web Components standards (Custom Elements, Shadow DOM). Integrates third-party web components into React applications. Knows when to use native components vs React abstractions.
Creates React wrappers for Web Components with correct TypeScript typing: property mapping, event forwarding, ref support. Implements bidirectional integration between React components and Custom Elements for use in other frameworks.
Designs Web Components usage strategy in the React ecosystem: shared UI primitives as Custom Elements for framework-agnostic design system, Shadow DOM for encapsulation in micro-frontend architecture. Ensures SSR compatibility through Declarative Shadow DOM.
Defines Web Components strategy for the React team: when to use WC vs React components, standards for creating framework-agnostic components. Coordinates creation of a shared Custom Elements library for cross-framework usage.