adhhamdev

Modern React Guidance — AI skill for Claude Code

AI community

Modern React Guidance — authoritative agent skill for React 19+ (Actions, use, Compiler, View Transitions, Fragment refs, Activity, browser(), useEffectEvent).

How to install Modern React Guidance

This entry records only its repository, not the path inside it, so there is no exact command to give. Open adhhamdev/modern-react-guidance and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Modern React Guidance does

Modern React Guidance — authoritative agent skill for React 19+ (Actions, use, Compiler, View Transitions, Fragment refs, Activity, browser(), useEffectEvent). Optimized for AI coding agents.

Alternatives in AI

Artifacts Builder — Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web tech 97.5k ★
Graphjin — GraphJin - An Automagical Compiler to Connect AI to Your Databases 3034 44 1 3k ★
Browserwing — BrowserWing turns your browser actions into MCP commands Or Claude Skill, allowing AI agents to control browse 1.2k ★

README

Modern React Guidance

**Authoritative agent skill for React 19+**

Optimized for AI coding agents (Claude Code, Cursor, Codex, Copilot, etc.).

Inspired by the proposal in [reactwg/async-react#12](https://github.com/reactwg/async-react/discussions/12) and structured after high-quality skills from Vercel, Callstack, and Margelo.

What it covers

React 19 / 19.1 / 19.2 / 19.3+ features
Actions, useActionState, useOptimistic, useFormStatus
use() + Suspense for data
React Compiler (trust it, drop unnecessary manual memo)
(stable in 19.3)
Fragment refs
useEffectEvent
browser() from react-dom
Official codemods for React 19 migration
“You Might Not Need an Effect” rules

Install

Via skills.sh / agent skills CLI

npx skills add adhhamdev/modern-react-guidance

(or the equivalent install command for your agent)

Manual

Copy the `modern-react-guidance/` folder into your agent’s skills directory.

Structure

modern-react-guidance/
├── SKILL.md                    # Core instructions (always loaded when triggered)
└── references/
    ├── actions-and-forms.md
    ├── api-cheatsheet.md
    ├── compiler-and-memo.md
    ├── concurrent-ux.md
    ├── effects-and-data.md
    └── migration-codemods.md