Menú
SkillsMP ha recopilado 23 skills de Impertio-Studio/React-Claude-Skill-Package. Abre una skill para revisar su origen y sus detalles.
Mostrando 23 de 23 skills recopiladas.
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…
Idioma del texto original: inglés
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…
Idioma del texto original: inglés
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,…
Idioma del texto original: inglés
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…
Idioma del texto original: inglés
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,…
Idioma del texto original: inglés
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…
Idioma del texto original: inglés
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,…
Idioma del texto original: inglés
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…
Idioma del texto original: inglés
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…
Idioma del texto original: inglés
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…
Idioma del texto original: inglés
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,…
Idioma del texto original: inglés
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+…
Idioma del texto original: inglés
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'…
Idioma del texto original: inglés
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…
Idioma del texto original: inglés
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,…
Idioma del texto original: inglés
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…
Idioma del texto original: inglés
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…
Idioma del texto original: inglés
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.…
Idioma del texto original: inglés
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…
Idioma del texto original: inglés
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,…
Idioma del texto original: inglés
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,…
Idioma del texto original: inglés
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,…
Idioma del texto original: inglés
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,…
Idioma del texto original: inglés