llms.txt is an open proposal for a short Markdown file that lists a project's key docs and links, so AI tools can find them without crawling every page.

Where should llms.txt be deployed?

At /llms.txt on your documentation site, or in your repository root. Tools read it when they fetch it; nothing loads it automatically.

# React 19 + TypeScript SPA Specialist

> Modern React 19 SPA standards. Prioritizes custom hooks, TanStack Query for server state caching, Vite bundling, and avoiding redundant useEffect cycles.

## Quick Reference

- **Framework**: React 19 (Vite)

- **Language**: TypeScript

- **Styling & UI**: Tailwind CSS

- **Database / Persistence**: REST / GraphQL API

- **Architectural Philosophy**: modern

## Core Architectural Invariants

- **Feature-Colocated Structure**: Group components, hooks, tests, and utils inside domain feature folders.

- **Guard Clauses & Early Returns**: Exit early from functions to eliminate deeply nested if-else pyramids.

- **Self-Documenting Naming**: Expressive function and variable names over verbose redundant comments.

- **Accessible UI by Default**: Enforce semantic HTML, keyboard navigability, and proper ARIA roles.

## Operational Guardrails & Prohibited Patterns

- **Inspect Before Acting**: Always read and understand existing code and imports before suggesting changes.

- **Minimal Surgical Diffs**: Touch only lines relevant to prompt. Preserve existing comments and formatting.

- **Concise & Direct Tone**: Skip conversational pleasantries. Deliver focused diffs and a short rationale.

- **Preserve Codebase Idioms**: Match existing naming conventions, indentation, and directory patterns.

## Mandatory Project Directives

- Prefer functional components with named exports.

- Do not use React.FC typing; declare props interface explicitly.

- Extract complex component logic into dedicated custom hooks.

## Implementation Reference

### Preferred Patterns

```typescript

// Good: Derived state computed directly during render

export function FilteredList({ items, query }: { items: Item[]; query: string }) {

const filtered = useMemo(

() => items.filter((item) => item.name.toLowerCase().includes(query.toLowerCase())),

[items, query]

);

return <ul>{filtered.map(item => <li key={item.id}>{item.name}</li>)}</ul>;

}

```

### Discouraged Anti-Patterns

```typescript

// Discouraged: Redundant useEffect triggering cascading re-renders

export function BadFilteredList({ items, query }: any) {

const [filtered, setFiltered] = useState([]);

useEffect(() => {

setFiltered(items.filter((i: any) => i.name.includes(query)));

}, [items, query]);

return <ul>{filtered.map((item: any) => <li key={item.id}>{item.name}</li>)}</ul>;

}

```

## Verification Commands & Workflows

1. Separate server state (handled via TanStack Query/SWR) from local ephemeral UI state (useState).

2. Avoid redundant useEffect calls; calculate derived state synchronously during render or with useMemo where heavy.

3. Colocate component files: MyComponent.tsx, useMyComponent.ts, MyComponent.test.tsx in the same folder.

4. Use standard semantic HTML tags and test keyboard accessibility for all custom interactive controls.

## Context Documents & Specs

- [System Architecture](ARCHITECTURE.md): Authoritative system design, data flows, and state machine invariants.

- [AI Multi-Agent Spec](AGENTS.md): Universal specification for autonomous coding agent operations.

Frontend · Any LLM tool that fetches it

React 19 & Vite llms.txt

An llms.txt for a React 19 & Vite project: a short Markdown map of what it is and where the key docs and code live.

Path: llms.txt
Loads: Fetched on request
Format: Markdown index (.txt)
Used by: Any LLM tool that fetches it

All llms.txt presets and how llms.txt works

What this file tells the agent

An llms.txt gives language models and agents a short Markdown map of your React 19 & Vite project: what it is and where the key docs and code live, so a tool that fetches it can go straight to the right files.

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.

Code to avoid, and what to write instead

The rule steers the agent away from the left and toward the right.

avoid

// 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>;
}

write instead

// 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>;
}

Install it in one command

01
Go to your project root
The file goes at llms.txt, relative to the root.
02
Download the file
Run the command on the right. It downloads this preset and writes the file.
03
Make sure it gets used
Nothing loads llms.txt automatically. Serve it at your site root, or point agents to it from CLAUDE.md or AGENTS.md.

$ curl -fsSL "https://www.devscratchpad.tech/api/raw/llms-txt/react-19" -o "llms.txt"

writes llms.txt

path

llms.txt

To write the file from your own code instead, use Read your code or Convert Legacy Rules in the editor above.

More for React 19 & Vite

Other formats

Other llms.txt presets

Questions

What is llms.txt?: llms.txt is an open proposal for a short Markdown file that lists a project's key docs and links, so AI tools can find them without crawling every page.
Where should llms.txt be deployed?: At /llms.txt on your documentation site, or in your repository root. Tools read it when they fetch it; nothing loads it automatically.

Target Standard & File Format

Identity & Activation Rules

Technology Stack Context

Engineering Philosophy

Architectural & Code Quality Conventions

Agent Behavioral Guardrails

Step-by-Step Workflow Procedures

Target File Location