Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
From xonovex-skill-react
Guides React 19+ development with patterns for server components, Form Actions, and new hooks. Use when building components or editing app routing.
How this skill is triggered — by the user, by Claude, or both
Slash command
/xonovex-skill-react:react-guideThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
- React ≥ 19, Vite ≥ 6, Tailwind ≥ 4, Headless UI.
eval-queries.jsonevals.jsonreferences/accessibility.mdreferences/activity-effect-event.mdreferences/component-design.mdreferences/hooks.mdreferences/migration-anti-patterns.mdreferences/migration-deprecations.mdreferences/migration-typescript.mdreferences/new-hooks.mdreferences/performance-optimization.mdreferences/react-compiler.mdreferences/server-components.mdreferences/state-management.mdreferences/suspense-streaming.md'use client' only for interactivityuseActionState and FormData instead of controlled inputs<title>, <meta>, <link> anywhere, auto-hoisted to <head>| Feature | React 18 | React 19+ |
|---|---|---|
| Memoization | Manual (useMemo, useCallback) | React Compiler (automatic) |
| Forward refs | forwardRef() wrapper | ref as regular prop |
| Context provider | <Context.Provider value={}> | <Context value={}> |
| Form state | Custom useState | useActionState hook |
| Optimistic updates | Manual state | useOptimistic hook |
| Read promises | Not possible | use() hook |
| Conditional context | Not possible | use(Context) after conditionals |
| Form pending | Manual tracking | useFormStatus hook |
// React 19 Form with Actions
"use client";
import {useActionState} from "react";
function ContactForm() {
const [state, formAction, isPending] = useActionState(
async (prev, formData) => {
const result = await submitForm(Object.fromEntries(formData));
if (result.error) return {error: result.error};
return {success: true};
},
null,
);
return (
<form action={formAction}>
<input name="email" type="email" disabled={isPending} />
<button disabled={isPending}>
{isPending ? "Submitting..." : "Submit"}
</button>
{state?.error && <p className="error">{state.error}</p>}
</form>
);
}
// ref as prop (no forwardRef needed)
function Input({ref, ...props}: {ref?: React.Ref<HTMLInputElement>}) {
return <input ref={ref} {...props} />;
}
// Context as provider
const ThemeContext = createContext("light");
function App({children}) {
return <ThemeContext value="dark">{children}</ThemeContext>;
}
useMemo/useCallback for effect deps only, see references/performance-optimization.mduseEffect — captured state from the render that scheduled the effect, not the current state; use refs or include in depsuseMemo/useCallback aren't free — the comparison + bookkeeping costs more than re-running cheap computationsvalue without onChange warns; switching mid-lifetime is silently buggy'use client'; mis-marking causes runtime errors onlyGuides collaborative design exploration before implementation: explores context, asks clarifying questions, proposes approaches, and writes a design doc for user approval.
Creates structured, bite-sized implementation plans from specs or requirements before writing code. Useful for breaking down multi-step tasks into testable steps with file structure and task boundaries.
Resolves in-progress git merge or rebase conflicts by analyzing history, understanding intent, and preserving both changes where possible. Runs automated checks after resolution.
npx claudepluginhub xonovex/platform --plugin xonovex-skill-react