> 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)
curl "https://skillshub.wtf/HoangNguyen0403/agent-skills-standard/react-tooling?format=md"React Tooling
Priority: P2 (OPTIONAL)
Tools for analysis and debugging.
Implementation Guidelines
- DevTools: Use "Highlight Updates" to spot re-renders.
- Debugger:
useDebugValuefor custom hooks. - Performance:
why-did-you-renderto catch wasted renders. - Bundle:
source-map-explorerorbundle-visualizer. - Linting:
eslint-plugin-react-hooks(Errors) +react-refresh. - Strict Mode: Enable for double-invoke checks (effects/reducers).
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
- Do NOT use standard patterns if specific project rules exist.
- Do NOT ignore error handling or edge cases.
> related_skills --same-repo
> typescript-tooling
Development tools, linting, and build config for TypeScript. Use when configuring ESLint, Prettier, Jest, Vitest, tsconfig, or any TS build tooling. (triggers: tsconfig.json, .eslintrc.*, jest.config.*, package.json, eslint, prettier, jest, vitest, build, compile, lint)
> typescript-security
Secure coding practices for TypeScript. Use when validating input, handling auth tokens, sanitizing data, or managing secrets and sensitive configuration. (triggers: **/*.ts, **/*.tsx, validate, sanitize, xss, injection, auth, password, secret, token)
> typescript-language
Modern TypeScript standards for type safety and maintainability. Use when working with types, interfaces, generics, enums, unions, or tsconfig settings. (triggers: **/*.ts, **/*.tsx, tsconfig.json, type, interface, generic, enum, union, intersection, readonly, const, namespace)
> typescript-best-practices
Idiomatic TypeScript patterns for clean, maintainable code. Use when writing or refactoring TypeScript classes, functions, modules, or async logic. (triggers: **/*.ts, **/*.tsx, class, function, module, import, export, async, promise)