> 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)
curl "https://skillshub.wtf/HoangNguyen0403/agent-skills-standard/react-tooling?format=md"React Tooling
Priority: P2 (OPTIONAL)
Tools for analysis, debugging, and build optimization.
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-explorerorrollup-plugin-visualizerbefore shipping.
Setup
See implementation examples for StrictMode, why-did-you-render, and custom hook debug label setup.
Implementation Guidelines
- Analysis: Use
source-map-explorerorwebpack-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-pwafor service workers.
Anti-Patterns
- No production profiling: Remove
why-did-you-renderand 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.
> related_skills --same-repo
> common-store-changelog
Generate user-facing release notes for the Apple App Store and Google Play Store by collecting git history, triaging user-impacting changes, and drafting store-compliant changelogs. Enforces character limits (App Store ≤4000, Google Play ≤500), tone, and bullet format. Use when generating release notes, app store changelog, play store release, what's new, or version release notes for any mobile app. (triggers: generate changelog, app store notes, play store release, what's new, release notes, ve
> golang-tooling
Go developer toolchain — gopls LSP diagnostics, linting, formatting, and vet. Use when setting up Go tooling, running linters, or integrating gopls with Claude Code. (triggers: gopls, golangci-lint, golangci.yml, go vet, goimports, staticcheck, go tooling, go lint)
> common-ui-design
Design distinctive, production-grade frontend UI with bold aesthetic choices. Use when building web components, pages, interfaces, dashboards, or applications in any framework (React, Next.js, Angular, Vue, HTML/CSS). (triggers: build a page, create a component, design a dashboard, landing page, UI for, build a layout, make it look good, improve the design, build UI, create interface, design screen)
> common-owasp
OWASP Top 10 audit checklist for Web Applications (2021) and APIs (2023). Load during any security review, PR review, or codebase audit touching web, mobile backend, or API code. (triggers: security review, OWASP, broken access control, IDOR, BOLA, injection, broken auth, API review, authorization, access control)