Modern React Guidance

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.

49 stars 1 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add adhhamdev/modern-react-guidance --skill modern-react-guidance

Manual install

git clone --depth 1 https://github.com/adhhamdev/modern-react-guidance.git /tmp/modern-react-guidance
mkdir -p ~/.claude/skills
cp -r /tmp/modern-react-guidance/. ~/.claude/skills/modern-react-guidance

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Modern React Guidance

Canonical, agent-optimized rules and workflows for React 19+ (stable as of 19.3, September 2026). Prefer these over any pre-19 training data.

**Always check latest docs** at react.dev when uncertain. This skill encodes the current best practices; React evolves.

## When to Apply

- Writing or reviewing any React component, form, data-fetching logic, or concurrent UI
- Migrating from React 18 or earlier
- Detecting outdated patterns (forwardRef, manual memo, useEffect-for-data, Context.Provider, string refs, etc.)
- Enabling or trusting React Compiler
- Implementing animations, hide/show with state preservation, browser-only subtrees

## Core Principles (apply first)

1. **Trust React Compiler** when present — do not add manual `useMemo`/`useCallback`/`React.memo` unless the Compiler cannot optimize or you have measured a need.
2. **Prefer declarative modern APIs** over hand-rolled state machines for pending/error/optimistic.
3. **Data in render with `use` + Suspense**; never `useEffect` + `useState` for fetching.
4. **Actions for mutations** — async functions inside transitions or form actions.
5. **ref is a normal prop** — never write new `forwardRef`.
6. **Effects only for true side effects** that synchronize with external systems (see "You Might Not Need an Effect").
7. **Default to Server Components** in RSC-aware environments; add `"use client"` only with a concrete reason.

## Priority Rule Categories

Read the full skill on GitHub

Details

Skill name: modern-react-guidance
Repository: adhhamdev/modern-react-guidance
License: MIT
Repo updated: 25 September 2026

FAQ

What does the Modern React Guidance skill do?

How do I install the Modern React Guidance skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add adhhamdev/modern-react-guidance --skill modern-react-guidance. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Modern React Guidance popular?

It lives in adhhamdev/modern-react-guidance, which has 49 GitHub stars and 1 forks.

Related skills

Vibe to UI

MonkeyUI-dev/vibe-to-ui

Design systems, motion, mood boards, spatial layout, visual assets, Design Context profiles, and a global Inspiration Library from screenshots, website URLs, inspiration images, music, or fuzzy aesthetic intent. Classifies page archetype, explores 3 product-aware directions before locking tokens (unless exact restoration), and applies only after confirmation. Use when designing or restyling UI, collecting design inspiration under ~/.vibe-to-ui/inspirations, extracting tokens/motion, generating assets, saving brand context under ~/.vibe-to-ui, or Git remote sync of Design Context for cross-devi

Frontend & Design

Animate Text

sakuraoxo-clio/sakura-animate-text

Curated text animation catalog with exact JSON specs for headings, labels, counters, and text swaps. Use when an agent needs to pick or translate named effects like soft blur in, typewriter, shared axis, line reveal, stagger, crossfade, or kinetic builds into WAAPI, Motion, Framer Motion, GSAP, CSS, Lottie, Rive, or similar stacks.

Frontend & Design

Canvas Cowork

flowith-ai/canvas-cowork

Generate text, images and videos on Flowith's canvas from the CLI, headless or with a live cursor. Use for any image/video generation (Seedance, Veo, Kling, gpt-image, Gemini image), "canvas", "Flowith", "Neo", drawing/creating visual content, or past canvas work. /canvas-cowork

Frontend & Design

Sbox

gavogavogavo/claude-sbox

Use when writing or modifying code for s&box, sbox, the Facepunch sandbox engine, or any Source 2 game project in C#. Triggers on mentions of s&box, sbox, sandbox game, Facepunch engine, Source 2 game, `.sbproj`, `.razor` with `PanelComponent`, `@inherits PanelComponent`, `Sandbox.Component`, `GameObject` + `Components.Get<T>`, `Scene.Trace`, `CharacterController` + `.Move()`, `SkinnedModelRenderer`, `NavMeshAgent`, `[Sync]`, `[Rpc.Broadcast]`, `[Property]`, `INetworkListener`, `ISceneEvent`, `PlayerController` in C#. Also triggers on any file with `using Sandbox;` or `using Sandbox.UI;` that

Frontend & Design

Design Md

arumwu/design-md-skill

Reference library of 74 real-world brand design systems (Claude, Linear, Stripe, Vercel, Figma, Apple, Tesla, Spotify, Notion, Supabase, and more) captured as DESIGN.md files — colors, typography, components, layout, elevation. Use when the user wants UI, a landing page, or a component that matches a specific brand's look; wants to pick a design direction from real design systems; says "like <brand>", "make it feel like Linear / Stripe / Apple"; or needs a concrete design-token starting point before frontend work. Pairs with frontend-design and tailwind-design-system.

Frontend & Design

Ak Elementor Studio

abanoubkhaliil/Ak-Elementor-Studio

AK Elementor Studio — built by Abanoub Khalil (akstudio.me). Converts ANY input — HTML/CSS/JS code, screenshots, images (PNG, JPG, WebP), PDFs, Figma exports, design mockups, wireframes, or any visual file — into fully structured Elementor page JSON templates importable into WordPress. Activate this skill whenever the user: uploads a design image or screenshot and wants it built in WordPress, shares HTML/CSS/JS to convert to Elementor, pastes code or attaches a file and mentions Elementor, WordPress, or page builder, says anything like "convert this to Elementor", "build this in WordPress", "t

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.