القائمة
جمع SkillsMP عدد ٢٣ من skills من Impertio-Studio/React-Claude-Skill-Package. افتح أي skill لمراجعة مصدره وتفاصيله.
عرض ٢٣ من أصل ٢٣ 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,…
لغة النص الأصلي: الإنجليزية