Apply these opinionated React conventions when writing React 18+ or 19 components: hooks patterns, Server Components, Suspense boundaries, state management, performance memoization, React 19 features (use, form actions).
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# React
House conventions for React 18/19. Apply them to components you are writing or changing — don't refactor untouched files to match unless asked.
## Conventions
- **Server Component by default; `'use client'` only where you need it** — state, effects, event handlers, browser APIs. Push the boundary as far down the tree as it will go: every component above a `'use client'` marker also ships to the browser. Everything crossing that boundary must be serializable — a function, a class instance, or a `Date` inside a prop object fails at runtime, not at build.
- **Read state through the functional updater inside anything that outlives the render** — intervals, subscriptions, debounced callbacks. `setCount(count + 1)` inside a `useEffect(…, [])` captures `count` from the first render forever and silently sets `1` every tick; `setCount(c => c + 1)` always sees current state.
- **Effects are for synchronising with something outside React** — a subscription, a timer, a non-React widget. Data transformation belongs in render, derived values in a plain variable, and event responses in the handler. Most `useEffect` bugs are an effect that should never have existed.
…
The line at the top of this page pins the label git:20261013.ecfffa1, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
GET https://markdownregistry.com/api/v1/artifacts/art_z3sbpb3qpqsoikga
GET https://markdownregistry.com/api/v1/resolve?ref=alexander-danilenko/cortex-ai-skills/react
GET https://markdownregistry.com/api/v1/blob/523807bd46cbac25f6f8ec1edff97411d7dbd6c4095a1fd01014664dbca9ee2d
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
alexander-danilenko/cortex-ai-skills · plugins/common/cortex-communication/skills/answer-buzzkill/SKILL.md · Write a short, fact-checked reply that answers a colleague's question in one meaning only, ready to copy and paste. The…
alexander-danilenko/cortex-ai-skills · plugins/common/cortex-communication/skills/humanize-text/SKILL.md · Remove signs of AI-generated writing from text. Use after drafting to make copy sound more natural and human-written…
alexander-danilenko/cortex-ai-skills · plugins/common/cortex-communication/skills/simple-english/SKILL.md · Write or audit technical text against ASD-STE100 Simplified Technical English so a tired, non-native reader understands…
alexander-danilenko/cortex-ai-skills · plugins/engineering/cortex-coderabbit/skills/resolve-feedback/SKILL.md · Resolve CodeRabbit review feedback on a GitHub pull request. Collects every open CodeRabbit finding (inline threads…
alexander-danilenko/cortex-ai-skills · plugins/engineering/cortex-jira/skills/qa-scope/SKILL.md · Draft the QA scope and plain-language test scenarios for a Jira ticket — brief one-liners with automated test…
alexander-danilenko/cortex-ai-skills · plugins/engineering/cortex-jira/skills/report-comment/SKILL.md · Turn the git commits for a Jira ticket into a short, business-friendly implementation report and save it as local…
alexander-danilenko/cortex-ai-skills · plugins/engineering/cortex-knowledge/skills/documentation/SKILL.md · ALWAYS invoke for any task involving docstrings, JSDoc/TSDoc, or REST API documentation — even when the request seems…
alexander-danilenko/cortex-ai-skills · plugins/engineering/cortex-knowledge/skills/learn-with-docs-refresh/SKILL.md · Audit and maintain the learnings in `docs/solutions/` against the current codebase — fix drifted paths and links, merge…
alexander-danilenko/cortex-ai-skills · plugins/engineering/cortex-knowledge/skills/learn-with-docs/SKILL.md · Capture a solved, verified problem as a durable learning in `docs/solutions/` so the next agent or engineer does not…
ericrisco/rsc-harness · skills/react/SKILL.md · Use when building or reviewing a client-side React SPA bundled by Vite (React 19.2): components, where state lives…
magnus919/agent-skills · react/SKILL.md · Operate React applications as a named tool: inspect and diagnose React/Vite projects, design component boundaries and…
alexander-danilenko/cortex-claude-code-plugins · plugins/engineering/cortex-web/skills/react/SKILL.md · Apply these opinionated React conventions when writing React 18+ or 19 components: hooks patterns, Server Components…
jnpiyush/agentx · .github/skills/languages/react/SKILL.md · Build React applications with modern hooks, TypeScript, and performance best practices. Use when creating React…
