React Query v4 (TanStack Query) best practices, patterns, and troubleshooting. Use when working with useQuery, useMutation, query invalidation, caching, WebSocket integration, or any async state management in React. Based on TkDodo's comprehensive blog series.
How to architect frontend features in React + TypeScript apps. Use when planning or building a new frontend feature — deciding structure, component breakdown, data fetching, state, and file placement.
Estrutura a arquitetura de um app React Native seguindo Clean Architecture — camadas, fluxo de dados unidirecional, módulos coesos e limites claros. Use ao criar módulos/features, definir estrutura de pastas ou organizar o fluxo dados→UI.
Use when writing, reviewing, or refactoring React or Next.js code — components, hooks, state management, testing, performance, TypeScript patterns, server components, or project structure. Always apply these standards to all React work.
Build new MCP Apps (MCP servers with React UI output) using @modelcontextprotocol/ext-apps and the MCP SDK. Use when asked to scaffold or implement MCP App servers, add UI-rendering tools/resources, or migrate a standard MCP server to an MCP App with Vite single-file UI bundles.
Build UIs with React Spectrum S2 (Spectrum 2), Adobe's component library for React. Use when developers are using @react-spectrum/s2 or need Adobe design system components. Includes React Aria Components docs as a reference for building custom components on top of unstyled primitives.
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
Locks in opinionated frontend code patterns for Next.js 16 + TanStack Query v5 + FSD projects. ALWAYS invoke when writing data-fetching code (NEVER useEffect+fetch — always TanStack Query), creating forms (always react-hook-form + zod), introducing client state (Zustand for client-global only — NEVER for server data…
Bootstrap or extend a new or early-stage Next.js App Router + TypeScript repository around a Ralph-style task-promotion loop. Use when Codex needs to ask the founder product and architecture questions, generate or update the repo-local markdown knowledge base, create the initial scaffold or the next feature wave…
Convert a Figma design into a working React application using Salt Design System components. Use when the user provides a Figma screenshot, design description, or Figma file and wants it translated into Salt DS code.
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance…
Build composable, responsive React charts with Recharts library. Use when creating data visualizations including line charts, area charts, bar charts, pie charts, scatter plots, and composed charts. Handles chart customization, responsive sizing, tooltips, legends, axes configuration, performance optimization, and…
Deep technical audit of a React codebase via the Dendro MCP server — complexity hotspots, circular deps, rerender risks, actionable recommendations. Triggers: /dendro-audit, 'audit this React codebase', 'dendro audit'.
Use when executing next-safe-action actions from React client components or building optimistic UI -- useAction, useOptimisticAction, useStateAction, useOptimisticStateAction, status/callbacks (onSuccess/onError/onSettled), execute vs executeAsync, formAction, reset, and queued or serialized mutations such as…
Architect and implement modern web frontends using React and Next.js. Covers project structure, routing, server vs client components, state management, data fetching, performance, and responsive patterns. Use when building web pages, creating React components, setting up a Next.js project, or when the user asks about…
★not rated 0 6mo agoA69 tokens
At most 3 mods per repository are shown here, and a mod shipped inside a plugin is left to that plugin's page — the rest are on their repository pages: