mirror of
https://github.com/magnus919/agent-skills.git
synced 2026-09-12 03:56:53 +03:00
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.
39 lines
2.2 KiB
Markdown
39 lines
2.2 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
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-engineering` for framework-agnostic frontend architecture, `playwright` for browser automation, and `web-accessibility` for dedicated accessibility audits.
|