These skills do not affect the main grade but show the breadth of your profile.
AI Coding Assistants
▼
Uses ChatGPT/Claude for assistance in React development: component generation, error debugging, explaining React concepts. Formulates queries with project context (TypeScript, Next.js, Tailwind), verifies generated code before use.
Effectively applies LLMs for React development: component refactoring, API migration (class → hooks, Pages → App Router), test generation with Vitest and Testing Library. Creates prompt templates for typical tasks, critically evaluates AI suggestions.
Standardizes LLM usage in the React team: approved tools, code generation prompt guidelines, AI-generated code review processes. Defines ethical and legal frameworks for AI usage in commercial React projects, monitors AI output quality.
Uses Cursor IDE for basic React development: component code autocompletion, built-in chat for React/TypeScript questions, generating simple components through Cmd+K. Understands project context (tsconfig, package.json) for more accurate suggestions.
Effectively applies Cursor for React development: multi-file editing for refactoring, Vitest test generation from components, using .cursorrules for project conventions (Tailwind, App Router, Zustand). Configures context for accurate suggestions.
Standardizes Cursor usage in the React team: shared .cursorrules for project conventions, guidelines for effective prompts, AI-generated code verification process. Determines which tasks to effectively delegate to AI and which require manual implementation.
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.
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
▼
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.
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.
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.
API Management
▼
Understands the importance of API documentation for frontend development and can work with Swagger/OpenAPI. Reads server API documentation for correct integration in React components.
Creates documentation for React components and custom hooks using Storybook and JSDoc. Documents frontend-API interaction contracts, including types, errors and edge cases.
Defines documentation standards for the organization's frontend ecosystem: components, hooks, API integrations. Introduces docs-as-code with automatic freshness verification on changes.
Application Security
▼
Knows main vulnerabilities in React applications: XSS, CSRF, insecure data storage. Understands React's built-in XSS protection mechanisms and basic secure coding rules.
Applies secure coding practices in React: user input sanitization, safe handling of dangerouslySetInnerHTML, clickjacking protection. Configures CSP headers for the application.
Defines secure coding standards for the frontend team, including code review checklists and SAST. Organizes developer training on React application security specifics.
Caching
▼
Understands the role of Redis in server-side caching for accelerating React application performance. Knows how server caching affects API response time and frontend performance.
Designs server-side caching strategies with Redis for accelerating React applications: SSR cache, API cache, session store. Implements cache invalidation on content updates.
Defines caching strategy for the organization's frontend infrastructure with Redis. Establishes standards for SSR response and API data caching for optimal performance.
CI/CD
▼
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.
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
▼
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.
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.
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.
Cloud Providers
▼
Understands basic AWS services for hosting React applications: S3 for statics, CloudFront for CDN. Can work with AWS Console to view deployments and frontend resource configuration.
Configures AWS infrastructure for React applications: S3+CloudFront for SSG, Amplify for SSR, Lambda@Edge for middleware. Configures caching and invalidation for optimal content delivery.
Defines cloud strategy for the organization's frontend products, including CI/CD for React applications. Manages AWS budgets and introduces FinOps practices for frontend infrastructure.
Code Review
▼
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.
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
▼
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.
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.
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.
Understands basic concurrency concepts for React: Web Workers for offloading heavy computation, React concurrent features basics, understanding of event loop and microtasks. Follows team conventions for keeping UI responsive in React applications.
Uses Web Workers to offload heavy computations from the main thread of React applications. Implements off-main-thread data processing, parsing and transformations for smooth user experience.
Defines threading standards for the organization's frontend projects. Trains the team on off-main-thread architecture patterns and main thread blocking monitoring in React.
Containerization
▼
Understands basic Docker concepts for React development: multi-stage builds for React apps, nginx/node containers for SSR/SPA serving, basic docker-compose for local development stack. Follows team conventions for containerized frontend builds.
Creates optimized Dockerfiles for React/Next.js applications: multi-stage build, standalone output in Next.js, node_modules caching through layers. Configures docker-compose for full-stack development, optimizes image size through Alpine and .dockerignore.
Standardizes Docker practices for the team's React projects: base images, Dockerfile conventions, security scanning. Defines containerization strategy for different React application types (SPA, SSR, static), integrates with CI/CD pipeline.
Database Optimization
▼
Understands basic database indexing concepts for frontend-relevant contexts: how indexes affect API response times, IndexedDB performance optimization, and browser storage query efficiency. Follows team practices for IndexedDB index creation.
Analyzes API query performance from React applications considering backend indexing. Collaborates with server team to optimize slow endpoints through proper indexing.
Coordinates data access optimization between frontend and backend teams. Defines API performance monitoring standards considering the impact of indexing on user experience.
Distributed Tracing
▼
Understands basics of OpenTelemetry for React web application observability. Follows team guidelines for integrating OTel browser SDK to capture page load traces, user interaction spans, and API request telemetry. Reads distributed traces to debug frontend-to-backend latency issues.
Configures OpenTelemetry in React applications for metrics collection: Web Vitals, navigation timing, rendering errors. Integrates browser SDK for sending traces to the server collector.
Defines observability standards for the organization's frontend products based on OpenTelemetry. Introduces mandatory instrumentation of critical user paths in React applications.
E2E Testing
▼
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.
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
▼
Understands the micro-frontend concept: why to split monolithic frontend into independent modules, what problems it solves (team autonomy, independent deployment). Knows main approaches: iframe, Web Components, Module Federation.
Works with micro-frontends in React: configures Webpack Module Federation for sharing components between applications, implements runtime remote module loading, manages shared dependencies (React, React DOM) to prevent duplication. Integrates micro-frontend into host application.
Defines micro-frontend strategy for the organization: chooses between Module Federation, single-spa and custom solution, standardizes shared design system for visual consistency. Designs developer experience: local development with mock remotes, testing strategy, version management.
Git & Workflows
▼
Proficient in basic Git operations for React projects: creating feature branches, commits with meaningful messages (feat:, fix: per Conventional Commits), pull requests. Resolves simple conflicts in components, understands .gitignore for React/Next.js.
Applies advanced Git practices in React projects: interactive rebase for clean history, cherry-pick for hotfixes, stash for context switching. Configures git hooks through husky: pre-commit (lint-staged with ESLint/Prettier), commit-msg (commitlint).
Standardizes Git practices for the team's React projects: branching model, merge strategy (squash vs merge), mandatory review policies. Defines release management process: semantic versioning, automated releases, hotfix procedures for Next.js deployments.
GraphQL
▼
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.
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.
Infrastructure as Code
▼
Understands basic Terraform concepts for frontend infrastructure: S3 buckets, CloudFront distributions, Route53 DNS. Can modify existing configurations for static site hosting and CDN setup. Runs terraform plan/apply for frontend deployment infrastructure.
Describes infrastructure for React applications in Terraform: S3 buckets, CloudFront distributions, Route53 DNS records. Manages development and production environments through Terraform modules.
Defines IaC standards for the organization's frontend infrastructure. Introduces Terraform governance: modular library for CDN configurations and automated security checks.
Integration Testing
▼
Understands the role of integration tests in React applications for verifying component interactions. Writes basic tests with React Testing Library, checking component-hook-context bundles.
Develops integration tests for React applications: testing routing, forms with validation, API interactions. Uses MSW for mocking server responses in the test environment.
Defines integration testing standards for the organization's frontend projects. Introduces mandatory integration gates in CI/CD and test coverage quality metrics for React applications.
Kubernetes & Orchestration
▼
Understands basic Kubernetes concepts for deploying React application containers and Node.js SSR services. Follows kubectl commands to check frontend pod status and review build/serve logs. Uses team-provided Helm charts for deploying React SPA and SSR configurations.
Deploys SSR servers for React applications in Kubernetes with autoscaling and health checks configuration. Understands the relationship between Kubernetes resources and server-side rendering performance.
Defines orchestration strategy for the organization's SSR frontend product infrastructure. Establishes Kubernetes configuration standards for React server reliability and scalability.
Logging
▼
Understands the importance of structured logging in React applications for debugging and monitoring. Uses console methods with contextual information: component, user action, state.
Implements structured logging in React projects with JSON format and correlation IDs. Configures client log delivery to the server with grouping by sessions and user actions.
Defines logging standards for the organization's frontend projects: levels, format, collection policies. Introduces observability practices for React applications with consideration for user data privacy.
Metrics & Monitoring
▼
Understands basic Prometheus & Grafana for frontend monitoring context: reading backend performance dashboards relevant to frontend API calls, understanding latency and error metrics for user-facing services, navigating Grafana panels for Core Web Vitals tracking. Follows team conventions for frontend performance monitoring.
Configures frontend metrics collection from React applications: Web Vitals, load time, rendering errors. Creates Grafana dashboards for monitoring user experience and performance.
Defines frontend application monitoring strategy for the organization with Prometheus and Grafana. Introduces performance budgets and SLI/SLO for React applications based on collected metrics.
Networking
▼
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).
OOP & Design Patterns
▼
Understands basic OOP principles: encapsulation, inheritance, polymorphism as applied to React development. Uses TypeScript classes and interfaces for typing component props and state.
Applies SOLID principles when designing React components and services. Uses composition over inheritance patterns, Dependency Injection for creating loosely coupled frontend architecture.
Defines architectural standards for OOP application in the organization's React projects. Trains the team on proper use of abstractions and SOLID principles in the context of modern frontend.
Prompt Engineering
▼
Composes basic prompts for React tasks: describes context (React 18, TypeScript, Next.js), formulates specific questions, provides code examples. Uses chain-of-thought for complex tasks, iteratively refines queries for precise code.
Creates effective prompts for React development: few-shot examples with project conventions, system prompts for code generation, templates for typical tasks (component, test, migration). Applies structured output for generating typed code with the correct stack.
Standardizes prompt engineering in the React team: shared prompt library for typical tasks, guidelines for effective AI usage, team training. Defines AI output verification processes, prompt quality metrics and ROI from prompt optimization.
Relational Databases
▼
Understands basic PostgreSQL concepts for React full-stack context: how API data flows from database to React components, basic understanding of relational data for state management design, reading query patterns for debugging data fetching issues. Follows team conventions for data-driven React component architecture.
Interacts with PostgreSQL through server APIs in React applications: understands data mapping, pagination, filtering. Designs efficient API queries considering database structure.
Defines standards for frontend team interaction with PostgreSQL data layer. Coordinates API design between React frontend and server team for optimal performance.
REST API
▼
Consumes REST API in React components through TanStack Query and fetch: GET requests for reading data, POST/PUT/DELETE for mutations. Understands HTTP statuses, handles errors, uses response typing through TypeScript interfaces and zod.
Designs efficient React application interaction with REST API: response normalization, optimistic mutations in TanStack Query, retry and error handling strategies. Creates a type-safe API client with interceptors, implements pagination and filtering.
Standardizes REST API integrations in the team's React projects: unified API client, error handling conventions, versioning strategy. Coordinates with backend team: API contracts, documentation through OpenAPI, type generation for end-to-end type safety.
System Design
▼
Understands basic system design principles in the React frontend context. Knows how React applications interact with APIs, CDNs, caches and backend services at a high level.
Designs React application architecture considering scalability: state management, routing, data fetching strategies. Chooses appropriate patterns for SSR/SSG/CSR based on requirements.
Defines architectural standards for the organization's React projects, including decision records. Makes key decisions on rendering strategies and frontend system design.
Type Systems
▼
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.
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.
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.
Unit Testing
▼
Writes basic unit tests for React with Vitest: testing utility functions, hooks through renderHook, simple components with React Testing Library. Follows AAA pattern (Arrange, Act, Assert), understands matchers and basic mocks.
Creates comprehensive unit tests for React logic: module and API mocking through vi.mock, testing custom hooks with various states, snapshot tests for stable components. Configures coverage reports, achieves meaningful business logic coverage.
Standardizes unit testing practices for the React team: minimum coverage, mandatory test cases for PRs, shared testing utilities. Introduces testing culture: TDD for business logic, mutation testing for test quality assessment, training on testing patterns.
Web Standards & APIs
▼
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).
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.
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.