Skillshub react-tooling

Debugging, build analysis, and ecosystem tools. Use when debugging React apps, analyzing bundles, or configuring Vite/webpack for React. (triggers: package.json, devtool, bundle, strict mode, profile)

install

source · Clone the upstream repo

git clone https://github.com/ComeOnOliver/skillshub

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

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

manifest: skills/HoangNguyen0403/agent-skills-standard/react-tooling/SKILL.md

source content

React Tooling

Priority: P2 (OPTIONAL)

Tools for analysis and debugging.

Implementation Guidelines

Analysis: Use source-map-explorer
or webpack-bundle-analyzer
/
rollup-plugin-visualizer
(Vite) to inspect bundle size. Use react-refresh
for hot reloading.

Linting: Mandate eslint-plugin-react-hooks
(exhaustive-deps) and Prettier for code consistency.
StrictMode: Enable React.StrictMode
to detect double-invoke lifecycle errors in development.
Profiling: Use the React DevTools Profiler (Flamegraph) to identify expensive components. Enable "Highlight Updates" to spot re-renders.
Environment: Use Vite as a modern build tool (over CRA). Manage environment variables with
```
.env
```
.
Debugging: Use useDebugValue
in custom hooks for better DevTools visibility. Use logger
middleware in Redux or useWhyDidYouUpdate
for props.
Build: Configure Uglify/Terser for production build minification. Use vite-plugin-pwa
for service worker generation.

Code

// Debugging Hooks
useDebugValue(isOnline ? 'Online' : 'Offline');

// why-did-you-render
if (process.env.NODE_ENV === 'development') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React, {
    trackAllPureComponents: true,
  });
}

Anti-Patterns

No Production Profiling: Remove
```
why-did-you-render
```
and debug tools before production builds.
No Skip StrictMode: Keep
```
<React.StrictMode>
```
in dev to surface side effects early.