Agent-skills-standard react-tooling

Configure debugging, bundle analysis, and ecosystem tools for React applications. Use when setting up Vite/webpack build tooling, analyzing bundle size, debugging re-renders with React DevTools, or configuring ESLint and StrictMode for React projects. (triggers: package.json, devtool, bundle, strict mode, profile)

install

source · Clone the upstream repo

git clone https://github.com/HoangNguyen0403/agent-skills-standard

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/HoangNguyen0403/agent-skills-standard "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/react/react-tooling" ~/.claude/skills/hoangnguyen0403-agent-skills-standard-react-tooling && rm -rf "$T"

manifest: skills/react/react-tooling/SKILL.md

source content

React Tooling

Priority: P2 (OPTIONAL)

Debugging Workflow

Enable StrictMode to catch side-effect bugs during development.
Profile with React DevTools Flamegraph to identify expensive components.
Trace re-renders using "Highlight Updates" or
```
why-did-you-render
```
.

Analyze bundle with

source-map-explorer

rollup-plugin-visualizer

before shipping.

Setup

See implementation examples for StrictMode, why-did-you-render, and custom hook debug label setup.

Implementation Guidelines

Analysis: Use

source-map-explorer

webpack-bundle-analyzer

rollup-plugin-visualizer

(Vite).

Linting: Mandate
```
eslint-plugin-react-hooks
```
(exhaustive-deps) and Prettier.
Environment: Use Vite over CRA. Manage environment variables with
```
.env
```
.
Build: Configure Terser for production minification. Use
```
vite-plugin-pwa
```
for service workers.

Anti-Patterns

No production profiling: Remove
```
why-did-you-render
```
and debug tools before production builds.
No skipping StrictMode: Keep
```
<React.StrictMode>
```
in dev to surface side effects early.
No CRA for new projects: Use Vite for faster builds and better DX.