React 19 & Vite Claude Skill (.md) | Free & Offline

Production-grade architectural rulebook for React 19 & Vite. Engineered to eliminate LLM hallucinations, enforce strict deterministic conventions, and prevent architectural drift across Cursor IDE, Claude Code CLI, and autonomous multi-agent pipelines.

Target Path

.claude/skills/react-19/SKILL.md

Execution Scope

Trigger Phrase / CLI Tool

Specification Format

Folder Skill (SKILL.md)

AI Tool Support

Claude Code CLI & Desktop

02 / DRIFT ANALYSIS & VALUE PROPOSITION

Failure Patterns Prevented for React 19 & Vite

Without This Rule (Default LLM Behavior)Vulnerable

React 19 introduces the React Compiler, useActionState, useOptimistic, and the `use` API. AI models trained on older codebases constantly produce obsolete useEffect state synchronization, manual mounting flags, and unnecessary forwardRef wrappers.

Hallucination Symptoms

Invokes deprecated or removed APIs from older model training weights
Generates conflicting configuration files and invalid imports
Silently drops type-safety, boundaries, or transaction isolation

With This Rule (Guaranteed Invariants)Deterministic

Use React 19 action hooks (useActionState, useOptimistic, useFormStatus) for async mutations.

Never forwardRef; pass ref directly as a standard component prop in React 19.

Ban redundant useEffect state synchronization; calculate derived state synchronously during render.

Separate server state (TanStack Query/SWR) from ephemeral UI state (useState).

Do not use React.FC typing; declare explicit component props interfaces.

03 / VERIFIED CODE PATTERNS

Code Standards: Anti-Pattern vs Verified Implementation

Discouraged Anti-Pattern

// Discouraged: Anti-pattern useEffect duplicating state
export function BadItems({ items, query }: any) {
  const [filtered, setFiltered] = useState([]);
  useEffect(() => {
    setFiltered(items.filter((i: any) => i.name.includes(query)));
  }, [items, query]);
  return <ul>{filtered.map((i: any) => <li key={i.id}>{i.name}</li>)}</ul>;
}

Verified Production Standard

// Good: Derived state computed synchronously during render
export function FilteredItems({ items, query }: { items: Item[]; query: string }) {
  const filtered = useMemo(
    () => items.filter((i) => i.name.toLowerCase().includes(query.toLowerCase())),
    [items, query]
  );
  return <ul>{filtered.map(i => <li key={i.id}>{i.name}</li>)}</ul>;
}

04 / REPOSITORY PLACEMENT & INSTALLATION

Where to Save This Rule in Your Repository

Export the rules from the interactive editor above or download the full ZIP bundle. Ensure the file is placed at the exact path below relative to your project root so the AI engine automatically loads it:

.claude/skills/react-19/SKILL.md

05 / ROUTE DIRECTORY & CROSS-TOOLING

Alternative AI Formats for React 19 & ViteCross-Tooling

/ai-skill-studio/cursor-rules/nextjs-15Next.js 15 Cursor Rules

→

/ai-skill-studio/cursor-rules/tailwind-v4Tailwind CSS v4 Cursor Rules

→

Related Claude Code Skills (SKILL.md) PresetsSame Directory

Frontend

Next.js 15 App Router

→

Backend