# React

> Build, review, debug, migrate, or plan React applications and components using current React documentation. Use for React, React DOM, hooks, JSX, Server Components, Server Functions, Actions/forms, React Compiler, hydration, rendering roots, React 19 upgrades, or questions about modern React patterns and best practices.

- **Type:** Skill
- **Install:** `agentstack add skill-dobroslavradosavljevic-skills-react`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [DobroslavRadosavljevic](https://agentstack.voostack.com/s/dobroslavradosavljevic)
- **Installs:** 0
- **Category:** [Developer Tools](https://agentstack.voostack.com/c/developer-tools)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [DobroslavRadosavljevic](https://github.com/DobroslavRadosavljevic)
- **Source:** https://github.com/DobroslavRadosavljevic/skills/tree/main/skills/react
- **Website:** https://dobroslav.dev

## Install

```sh
agentstack add skill-dobroslavradosavljevic-skills-react
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# React

Use this skill to make React choices from current docs plus the local app's actual version, framework, and conventions.

## Workflow

1. Identify the React surface before changing code:
   - Read the nearest project guidance files and package manifests.
   - Check installed or declared versions of `react`, `react-dom`, the framework, build tool, test stack, TypeScript, and ESLint.
   - Determine whether the target is a client-only app, SSR, framework-managed app, React Server Components app, React Native app, component library, or migration.
2. Refresh docs when the user asks for latest/current behavior, when versions are unclear, or when using React 19+ APIs:
   - Prefer current docs tooling or official docs pages.
   - Use [source-map.md](references/source-map.md) for the captured latest-version snapshot and official source links.
3. Load the focused reference file for the task:
   - [core-react.md](references/core-react.md): component design, JSX, state, effects, hooks, purity, performance, and testing judgment.
   - [react-19.md](references/react-19.md): React 19/19.2 APIs, upgrades, Actions, forms, Server Components, Server Functions, Compiler, and release-channel caveats.
   - [react-dom.md](references/react-dom.md): `createRoot`, `hydrateRoot`, DOM forms, hydration, server/static rendering, resources, and escape hatches.
4. Implement in the existing project style:
   - Prefer framework primitives over direct React DOM APIs when the framework owns routing, data fetching, SSR, RSC, or hydration.
   - Preserve local component boundaries, accessibility conventions, tests, and styling patterns.
   - Avoid introducing React 19.2-only or canary-only APIs unless the app's dependencies support them.
5. Verify the smallest meaningful surface:
   - Run the project's relevant typecheck, lint, test, build, story, or browser verification command.
   - For visible UI changes, inspect the real screen state when feasible.
   - Report any verification you could not run.

## React Judgment

- Keep render pure and idempotent. Do not read time, randomness, browser-only globals, or mutate non-local values during render unless the value is safely isolated and repeatable.
- Derive values during render when they can be calculated from props or state. Do not add state plus an Effect just to mirror another value.
- Use Effects only to synchronize with external systems such as the DOM, subscriptions, timers, imperative widgets, analytics, or non-framework data fetching.
- Keep Effect dependencies honest. Prove a value is non-reactive by moving it out of the component or into an Effect/Event boundary instead of suppressing the linter.
- Put user-caused side effects in event handlers or Actions. Put render-caused external synchronization in Effects.
- Prefer local state. Lift state only when multiple components need to coordinate. Use reducers for complex transitions and `useSyncExternalStore` for external stores.
- Treat Server Components, Server Functions, and React DOM server/static APIs as framework integration territory unless the task is explicitly building framework infrastructure.
- Treat canary and experimental docs as unavailable in stable apps unless the project explicitly uses those channels.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [DobroslavRadosavljevic](https://github.com/DobroslavRadosavljevic)
- **Source:** [DobroslavRadosavljevic/skills](https://github.com/DobroslavRadosavljevic/skills)
- **License:** MIT
- **Homepage:** https://dobroslav.dev

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-dobroslavradosavljevic-skills-react
- Seller: https://agentstack.voostack.com/s/dobroslavradosavljevic
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.