Skill

react

review, design, scaffold, refactor, and troubleshoot react applications and component libraries. use when the user asks for react component design, hooks, state ownership, context, rendering patterns, testing, performance tradeoffs, or migration guidance.

Install

npx claudepluginhub alisonaquinas/llm-web-design-skills

Tool Access

This skill uses the workspace's default tool permissions.

Preview

Use this skill to keep React work grounded in maintainable architecture, predictable delivery, and framework-appropriate conventions.

Supporting Assets

agents/claude.yamlagents/openai.yamlreferences/best-practices.mdreferences/workflows.md

SKILL.md

Similar Skills

cache-components

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

139.0k

claude-opus-4-5-migration

2 files

Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.

claude-opus-4-5-migration

83.2k

bmad-help

Analyzes BMad project state from catalog CSV, configs, artifacts, and query to recommend next skills or answer questions. Useful for help requests, 'what next', or starting BMad.

bmad-pro-skills

43.8k

Stats

Stars1

Forks0

Last CommitMar 16, 2026

Actions

View Source View Plugin View on GitHub View README

React

Use this skill to keep React work grounded in maintainable architecture, predictable delivery, and framework-appropriate conventions.

Intent Router

Need	Load
core conventions, structure, review priorities, and common red flags for React	`references/best-practices.md`
setup, migration, testing, build, delivery, and day-two workflow guidance for React	`references/workflows.md`

Quick Start

Confirm React version and host framework, client-only or server-rendered delivery, local state, context, reducer, or store posture, and design-system or product-app scope.
Identify whether the task is greenfield scaffolding, incremental refactoring, troubleshooting, migration planning, or code review.
Apply the defaults in references/best-practices.md before proposing custom architecture.
Prefer the smallest change set that improves clarity, safety, operability, and long-term maintainability.

Workflow

start from the owning feature or component boundary
keep effects narrow and traceable
test user-visible behavior instead of implementation detail
verify host-framework build and test paths after changes

Typical Focus Areas

React version and host framework
client-only or server-rendered delivery
local state, context, reducer, or store posture
design-system or product-app scope

Outputs to Prefer

summarize rendering host and state posture first
group findings by component boundaries, state ownership, accessibility, and tests
recommend concrete refactors that preserve public component contracts

First Response Pattern

restate the host framework, rendering model, and state ownership posture before suggesting changes
anchor the plan at the owning component or feature boundary instead of broad abstraction churn
name the verification loop up front: host build or test commands plus a smoke test of the affected interaction

Common Requests

Review this React component tree for state ownership, hook usage, accessibility, and test gaps.

Refactor this React feature to simplify composition and reduce incidental re-renders without changing behavior.

Safety Notes

preserve externally visible behavior unless the user explicitly requests a redesign or a breaking change
avoid style-only churn when the current repository already has working conventions and automation