Menu
SkillsMP has collected 23 skills from Impertio-Studio/React-Claude-Skill-Package. Open a skill to review its source and details.
Showing 23 of 23 collected skills.
Use when scaffolding a new React project, adding React to an existing project, or generating a feature-complete application structure. Prevents the common mistake of inconsistent project setup with missing TypeScript, linting, or test configuration. Covers…
Use when reasoning about React's rendering model, understanding the component tree, or debugging unexpected update behavior. Prevents the common mistake of confusing React elements with components or misunderstanding render vs commit phases. Covers virtual…
Use when implementing loading states, optimizing perceived performance, handling slow renders, or adding Suspense boundaries. Prevents the common mistake of blocking the UI with synchronous heavy updates. Covers Suspense, startTransition, useTransition,…
Use when designing state architecture, choosing between state management approaches, or solving state-related problems. Prevents the common mistake of mutating state directly or choosing the wrong state tool for the complexity level. Covers useState vs…
Use when building React components that need error recovery and graceful failure handling. Prevents the common mistake of letting uncaught errors crash the entire application tree. Covers Error Boundary class components, getDerivedStateFromError,…
Use when debugging React applications, interpreting console warnings, profiling performance, or understanding Strict Mode double-rendering. Prevents the common mistake of ignoring React warnings or misdiagnosing Strict Mode behavior as bugs. Covers React…
Use when encountering hook-related errors, infinite re-render loops, stale state issues, or eslint-plugin-react-hooks warnings. Prevents the common mistake of calling hooks conditionally or missing cleanup in useEffect. Covers Rules of Hooks violations,…
Use when encountering hydration warnings, debugging SSR/SSG mismatches, or implementing server-rendered React applications. Prevents the common mistake of rendering environment-dependent content (Date, Math.random, browser APIs) that differs between server…
Use when fetching data from APIs, managing server state, implementing loading and error states, or choosing a data fetching strategy. Prevents the common mistake of fetching in useEffect without proper caching or race condition handling. Covers TanStack…
Use when optimizing render performance, profiling components, reducing bundle size, or implementing code splitting. Prevents the common mistake of premature optimization or missing obvious re-render bottlenecks. Covers React.memo, useMemo, useCallback, React…
Use when creating a new React project, configuring Vite, setting up TypeScript, or establishing project conventions. Prevents the common mistake of inconsistent tooling setup or missing essential configuration like path aliases and linting. Covers Vite setup,…
Use when implementing client-side routing, setting up route configuration, handling navigation, or building protected routes. Prevents the common mistake of using legacy BrowserRouter instead of the data router API. Covers React Router v6+…
Use when building with Server Components, deciding server vs client boundaries, implementing Server Actions, or migrating to the RSC model. Prevents the common mistake of using hooks or browser APIs in Server Components. Covers 'use server' and 'use client'…
Use when styling React components, choosing a CSS approach, implementing responsive design, or managing CSS architecture. Prevents the common mistake of global style leakage or choosing an incompatible CSS-in-JS library for Server Components. Covers CSS…
Use when writing component tests, testing hooks, setting up test infrastructure, or debugging test failures. Prevents the common mistake of testing implementation details instead of user-visible behavior. Covers React Testing Library, Vitest,…
Use when creating components, typing props with TypeScript, forwarding refs, or implementing component composition patterns. Prevents the common mistake of using incorrect prop typing or missing forwardRef when exposing DOM elements. Covers function component…
Use when sharing state across components without prop drilling, implementing theme/auth/locale providers, or optimizing context performance. Prevents the common mistake of putting frequently-changing values in context causing unnecessary re-renders. Covers…
Use when handling user interactions, typing event handlers with TypeScript, working with form inputs, or implementing keyboard/mouse interactions. Prevents the common mistake of using incorrect event types or accessing pooled event properties asynchronously.…
Use when building forms, handling form submission, implementing form validation, or using React 19 form actions. Prevents the common mistake of mixing controlled and uncontrolled patterns or missing form accessibility. Covers controlled vs uncontrolled…
Use when working with advanced hooks, integrating external stores, or using React 19 form and promise hooks. Prevents the common mistake of using useEffect for subscriptions instead of useSyncExternalStore. Covers useId, useTransition, useDeferredValue,…
Use when using any core React hook, writing side effects, managing component state, or optimizing re-renders. Prevents the common mistake of missing dependency array entries or forgetting useEffect cleanup. Covers useState, useEffect, useContext, useRef,…
Use when writing JSX/TSX, rendering lists, implementing conditional rendering, or typing components with TypeScript generics. Prevents the common mistake of using unstable keys (like array index) or missing key props on list items. Covers JSX expressions,…
Use when accessing DOM elements, forwarding refs to child components, implementing imperative APIs, or managing mutable values across renders. Prevents the common mistake of using refs for values that should trigger re-renders. Covers useRef, forwardRef,…