React 19 & Vite AGENTS.md Generator | 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

AGENTS.md

Execution Scope

Multi-Agent Root Invariants

Specification Format

Agent Standard (.md)

AI Tool Support

Antigravity, Codex & Windsurf

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:

AGENTS.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 AGENTS.md Multi-Agent Rules PresetsSame Directory

Frontend

Next.js 15 Autonomous Agents

→

Backend