Magnus HedemarkandGitHub
befe2e26fc
Squash-merge verified React and Vite expertise at exact head d4fd6cf70d. Required validate and paired evaluation checks passed; advisory droid review had no blocking findings.
react — Build and diagnose React applications
Why Install This Skill
React projects accumulate framework-specific failure modes: hooks that resynchronize unnecessarily, stale requests that overwrite newer data, routes that break under a subpath, and Vite environment values accidentally shipped to browsers. This skill gives your agent a focused operating loop for those problems.
After installation, your agent can inspect a React/Vite project safely, make component and state changes that fit its existing conventions, protect accessible interaction states, and verify the result with the project's own checks. It also includes a read-only doctor for quick diagnostics without installing dependencies or exposing environment values.
What You Get
| Directory | Purpose |
|---|---|
SKILL.md |
React-specific implementation workflow, guardrails, handoffs, and verification steps |
references/component-and-state.md |
Component boundaries, hooks, effects, async state, and forms |
references/vite-diagnostics.md |
Vite environment, build, asset-base, and deployment diagnostics |
scripts/react-doctor.py |
Bounded Python diagnostic with human-readable or JSON output |
scripts/test_react_doctor.py |
Offline tests for diagnostic behavior and safety guarantees |
evals/evals.json |
Six substantive output-quality cases for React and Vite work |
Quick Start
python3 scripts/react-doctor.py --json .
python3 scripts/react-doctor.py .
The doctor reads project files only. It does not install packages, run scripts, contact the network, or print environment values.
Triggers
Load this skill when working with React, JSX/TSX, hooks, React Router, Vite React configuration, React component/state implementation, or React build failures. Use it for a focused project diagnosis before editing.
Requirements
- Python 3.8+ for the bundled diagnostic and tests.
- Node.js and the project's package manager for application builds and tests.
- Existing React/Vite project files; no API key is required.
- Use
frontend-engineeringfor framework-agnostic frontend architecture,playwrightfor browser automation, andweb-accessibilityfor dedicated accessibility audits.