React Skills

Algorithmic philosophies are computational aesthetic movements that are then expressed through code. Output.

Suite of tools for creating elaborate, multi-component claude.

Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code.

Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation).

Use when Codex is building or iterating on a web game (HTML/JS) and needs a reliable development + testing loop: implement small changes, run a Playwright-based test script with short input bursts and intentional pauses, inspect screenshots/text, and review console errors with render_game_to_text.

Create distinctive, production-grade frontend interfaces with high design quality.

Design reusable custom React hooks — composable state logic, data fetching patterns, cleanup and subscriptions, and proper TypeScript generics for type-safe hooks.

Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel.

Expert ReactFlow architect for building interactive graph applications with hierarchical node-edge systems, performance optimization, and auto-layout integration.

Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features.

Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns.

> Principles for building production-ready React applications. | Type | Use | State | |------|-----|-------|.

Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query.

Modern React UI patterns for loading states, error handling, and data fetching.

Master React Server Components in React 19 — server-only rendering, zero client JavaScript, data fetching patterns, and the Server/Client component boundary.

Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns.

> Modern utility-first CSS with CSS-native configuration. Use this skill when configuring Tailwind v4, using CSS-first theme and design tokens, or implementing container queries and modern Tailwind patterns.

Write effective React tests with Testing Library — user-centric queries, async testing, mocking, accessibility assertions, and testing hooks and context.

Suite of tools for creating elaborate, multi-component claude.