Activate when building React frontends WITHOUT Next.js — typically Vite + React, Create React App, or Remix (when used outside the App Router pattern). Trigger phrases include "build a React app with Vite", "create the UI in React", "build a React component", "Vite + React", or when the user pastes a screenshot for a non-Next React project. Always check for `screenshots/` in the repo root. Always reference `questionnaire.md` in this skill folder — walk the user through it if unanswered. Use `frontend-next` for Next.js specifically. Do NOT trigger for Flutter, React Native, backend, or existing design systems that must be preserved.
Use when adding or improving tests in a React project that uses Vitest — covers component testing with Testing Library, mocking hooks, and coverage configuration.
Write and review React code as if the React Compiler is enabled. Skip manual useMemo, useCallback, and React.memo by default, and audit existing code for stale manual memoization. Use when writing or refactoring any React component in a React 19+ codebase, when reviewing a React PR, when setting up the eslint-plugin-react-hooks configuration, or when seeing memoization patterns in code an LLM produced. Counterweight to pre-compiler React in LLM training corpora, which biases default output toward manual memoization unless prompted otherwise.
React specialist for production-grade web applications. Invoke for component architecture, hooks, state management, Server Components, performance. Keywords: React, JSX, hooks, useState, useEffect, use(), Suspense, RSC.
React accessibility (WCAG 2.2 AA) — semantic HTML first, ARIA only when needed, focus management, keyboard navigation, screen reader support, color contrast, prefers-reduced-motion. Use when building any user-facing UI, forms, modals, menus, tabs, carousels, or when accessibility is in scope. Critical for Senior UX Engineer interview signal. Triggers on "a11y", "accessibility", "WCAG", "ARIA", "keyboard", "screen reader", "focus", "semantic".
Writes and runs tests for React components, hooks, and pages (React edition of SuperClaude /sc:test) using whatever the project has — Vitest/Jest + Testing Library, MSW, Playwright/Cypress. Use for "write tests", "run the tests", "coverage", "e2e test".
This skill should be used when the user asks to "create a new React project", "setup a react app", "new react frontend", "scaffold a react spa", "initialize a react frontend", or "start a new react app". Scaffolds a React 19 + Vite + TypeScript + Tailwind CSS v4 + shadcn/ui + Redux Toolkit SPA with auth and routing.
name: vercel-react-native-skills
description:
React Native and Expo best practices for building performant mobile apps. Use
when building React Native components, optimizing list performance,
implementing animations, or working
Fetches URLs and PDFs, then summarizes or returns clean Markdown. Use when asked to read, fetch, quote, cite, convert, or save a URL or PDF. Not for local text files already in the repo.
Use React/React Native code as the source of truth and implement the equivalent feature in iOS/Swift. Understands the feature behavior, components, state management, and logic from React, then creates idiomatic iOS code that matches the target codebase's existing patterns. Use when porting features from React/React Native to native iOS or building native alternatives to web components.
Authoritative guidance for modern React 19+ (Actions, use, Compiler, View Transitions, Fragment refs, Activity, browser, useEffectEvent). Use when writing, reviewing, refactoring, or migrating React components, forms, data fetching, concurrent UI, or upgrading to React 19+. Triggers on React, React 19, useActionState, useOptimistic, forwardRef, useEffect data fetch, React Compiler, ViewTransition, Suspense patterns, or codemods. Always prefer latest official patterns over training data.
Survey a whole React codebase as a senior React engineer, using React Doctor's scan as evidence, then produce a prioritized audit and self-contained implementation plans for other agents (or cheaper models) to execute. Read-only on source code — it plans improvements, it does not apply them. Use when the user asks to "improve the React code", "audit this codebase", "make this app faster / more robust", or wants a roadmap of fixes rather than a review of a single diff. For a regression check or a fix-it-now pass, use the `react-doctor` skill instead.
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 improvements.
Improve React code quality with modern React patterns. Use when building React components, refactoring React code, reviewing React code, fixing React bugs, or deciding how to structure React state, effects, hooks, rendering, accessibility, and component boundaries.
Scaffolds React Native libraries with create-react-native-library for standalone libraries or local native modules and views. Use when creating or working on React Native libraries or adding native functionality in an existing app.
Plain text files in a repository that tell a coding agent how the project works: commands to run, conventions to follow and things to avoid. CLAUDE.md, AGENTS.md, cursor rules and skills are the common kinds.
CLAUDE.md or AGENTS.md?
CLAUDE.md is read by Claude Code. AGENTS.md is an open format that Codex, Cursor and other agents read. Many projects keep one and point the other at it.
What is a skill?
A folder with a SKILL.md that describes one capability, such as filling PDFs or reviewing code. The agent loads it only when the task calls for it.
Can I search my own team's files too?
Your agents already can, over MCP, limited to the files you're allowed to read. Searching them from this page is coming.
DevdannnnySkill
