Agent skill

React Tooling

Debugging, build analysis, and ecosystem tools.

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/tooling-hoangnguyen0403-agent-skills-standar-4

Metadata

Additional technical details for this skill

labels
react tooling debug performance
triggers 
{
    "files": [
        "package.json"
    ],
    "keywords": [
        "devtool",
        "bundle",
        "strict mode",
        "profile"
    ]
}

SKILL.md

React Tooling

Priority: P2 (OPTIONAL)

Tools for analysis and debugging.

Implementation Guidelines

  • DevTools: Use "Highlight Updates" to spot re-renders.
  • Debugger: useDebugValue for custom hooks.
  • Performance: why-did-you-render to catch wasted renders.
  • Bundle: source-map-explorer or bundle-visualizer.
  • Linting: eslint-plugin-react-hooks (Errors) + react-refresh.
  • Strict Mode: Enable for double-invoke checks (effects/reducers).

Code

tsx
// 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,
  });
}

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results