frontend▌

CSS architecture patterns for scalable, maintainable styling systems across teams and projects. \n \n Covers three core methodologies: BEM (Block Element Modifier) for component naming, SMACSS for modular organization, and CSS-in-JS with Styled Components for dynamic styling \n Includes reference guides for CSS Variables, Utility-First CSS (Tailwind pattern), and practical implementation examples \n Best suited for large-scale stylesheets, component-based design systems, and multi-team collabora

Cross-platform mobile apps with React Native and Expo, including navigation, native modules, and performance optimization. \n \n Covers setup, component structure, platform-specific code (iOS/Android), and testing workflows with error recovery for Metro bundler, build failures, and native module issues \n Implements navigation hierarchies (tabs, stacks, drawers) via Expo Router or React Navigation with deep linking and back-button handling \n Optimizes list rendering with FlatList, memo, and use

Write and review React Native component tests using Testing Library v13 and v14. \n \n Covers render patterns, screen queries (getBy/getAllBy/queryBy/findBy variants), Jest matchers, userEvent interactions, fireEvent, and async patterns with version-specific behavior \n Automatically detects your project's RNTL version (v13 for React 18, v14 for React 19+) and applies correct API signatures and sync/async rules \n Provides query priority guidance (getByRole first), interaction best practices (us

Utility-first CSS framework for rapidly building custom interfaces with composed utility classes. \n \n Covers layout (flexbox, grid, positioning, sizing, spacing), transforms, typography, visual effects, and interactivity through organized utility categories \n Supports responsive design with mobile-first breakpoints, container queries, and conditional variants for state, pseudo-classes, and media queries \n Tailwind v4 introduces CSS-first configuration using theme variables and directives ( @

Extract and formalize domain terminology from the current conversation into a consistent glossary, saved to a local file.

Memoization, code splitting, and virtualization patterns for optimizing React application performance. \n \n Covers four core optimization techniques: memoization (React.memo, useMemo, useCallback), code splitting with lazy/Suspense, virtualization for large lists, and state management strategies to minimize render cascades \n Includes React 18+ concurrent features (useTransition, useDeferredValue) for improved responsiveness and perceived performance \n Provides profiling workflow using React D

$23

React patterns for hooks, effects, refs, and component design with escape hatch guidance. \n \n Effects synchronize with external systems only (WebSocket, third-party libraries, browser APIs); most component logic should avoid Effects entirely \n Common anti-patterns: derived state, expensive calculations, prop-change resets, and event handling all belong outside Effects—use render calculations, useMemo, key props, and event handlers instead \n Effect dependencies must never be suppressed; use u

Comprehensive Next.js development guidelines covering file structure, RSC patterns, data fetching, optimization, and error handling. \n \n Covers 15+ topic areas including file conventions, route segments, RSC boundaries, async patterns, metadata generation, and image/font optimization \n Provides runtime selection guidance, directive usage, and error handling strategies with specific file conventions like error.tsx and not-found.tsx \n Includes data fetching patterns, route handler best practic

Evaluates Next.js App Router code against best practices for Server Components, Client Components, Server Actions, caching strategies, and production-readiness criteria. Produces actionable findings categorized by severity with concrete code examples. Delegates to typescript-software-architect-review agent for architectural analysis.