القائمة
React ecosystem expert including hooks, state management, component patterns, React 19 features, Shadcn UI, and Radix primitives
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/oimiragieo/agent-studio --skill react-expertيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
Agent frontmatter enhancements — disallowedTools, mcpServers scoping, fork_eligible field
Context management — pre-compact persistence, threshold alignment, microcompact/circuit breaker detection
Hook enhancements — updatedInput for bash safety prefixes, suppressOutput for verbose blocks, denial-based routing feedback
عرض SKILL.md
استنادا إلى تصنيف SOC المهني
| name | react-expert |
| description | React ecosystem expert including hooks, state management, component patterns, React 19 features, Shadcn UI, and Radix primitives |
| version | 1.1.0 |
| model | sonnet |
| invoked_by | both |
| user_invocable | true |
| tools | ["Read","Write","Edit","Bash","Grep","Glob"] |
| globs | ["**/*.tsx","**/*.jsx","components/**/*"] |
| best_practices | ["Use functional components with hooks","Follow the Rules of Hooks","Implement proper memoization","Use TypeScript for type safety"] |
| error_handling | graceful |
| streaming | supported |
| verified | true |
| lastVerifiedAt | "2026-02-22T00:00:00.000Z" |
| source | builtin |
| trust_score | 100 |
| provenance_sha | 2685f54de34e9a58 |
useMemo/useCallback where the compiler can infer themReact.memo, useMemo, useCallback when the compiler cannot help (complex object identity, external deps, stable callback refs for third-party libraries)React.lazy and SuspenseReact.memo, useMemo, useCallback wrappers — the compiler handles them// @no-react-compiler pragma to a component/file when manual control is neededuseMemo/useCallback for: stable refs passed to third-party libs, expensive computations with external deps the compiler cannot seeaction props for automatic pending/error state managementonSubmit + manual loading/error state boilerplate pattern// Form Action pattern (React 19)
async function saveUser(formData: FormData) {
'use server'; // only in RSC frameworks; omit for client Actions
await db.users.update({ name: formData.get('name') });
}
<form action={saveUser}>
<input name="name" />
<button type="submit">Save</button>
</form>;
useActionState to track the result and pending state of a form Actionconst [state, formAction, isPending] = useActionState(fn, initialState)isPending replaces the manual useState(false) loading flag patternstate holds the return value of the last action invocation (success data or error)import { useActionState } from 'react';
async function submitAction(prevState: State, formData: FormData) {
const result = await saveData(formData);
return result.error ? { error: result.error } : { success: true };
}
function MyForm() {
const [state, formAction, isPending] = useActionState(submitAction, null);
return (
<form action={formAction}>
{state?.error && <p>{state.error}</p>}
<button disabled={isPending}>{isPending ? 'Saving...' : 'Save'}</button>
</form>
);
}
useOptimistic for instant UI feedback before a server response arrivesconst [optimisticState, setOptimistic] = useOptimistic(value, reducer?)import { useOptimistic } from 'react';
function ItemList({ items, addItem }: Props) {
const [optimisticItems, addOptimistic] = useOptimistic(items, (state, newItem) => [
...state,
{ ...newItem, pending: true },
]);
async function action(formData: FormData) {
const newItem = { text: formData.get('text') as string, id: crypto.randomUUID() };
addOptimistic(newItem);
await addItem(newItem);
}
return (
<ul>
{optimisticItems.map(item => (
<li key={item.id} className={item.pending ? 'opacity-50' : ''}>
{item.text}
</li>
))}
<form action={action}>
<input name="text" />
<button>Add</button>
</form>
</ul>
);
}
use(promise) — read a Promise's resolved value during render (integrates with Suspense/ErrorBoundary)use(Context) — replaces useContext; can be called conditionally (unlike other hooks)useEffect, use(promise) does not create a new Promise on each render; pass a stable promiseuse(Context) when you need context conditionally or inside loopsimport { use } from 'react';
// Reading context conditionally (not possible with useContext)
function Component({ show }: { show: boolean }) {
if (!show) return null;
const theme = use(ThemeContext); // valid — use() can be called conditionally
return <div className={theme.bg}>...</div>;
}
// Reading a promise (wrap in Suspense + ErrorBoundary)
function UserProfile({ userPromise }: { userPromise: Promise<User> }) {
const user = use(userPromise); // suspends until resolved
return <p>{user.name}</p>;
}
ref is now a plain prop — no forwardRef wrapper needed (function Input({ ref }) { ... })useFormStatus — read the pending/error state of the nearest parent <form> Action<title>, <meta>, <link> anywhere in the component tree; React hoists them to <head>startTransition supports async functions (Transitions) in React 19useDeferredValue now accepts an initialValue parameter for SSR hydrationuseId stable for server components; use for accessibility IDs (label htmlFor / aria-labelledby)RSC is an architectural boundary, not an optimization toggle. Understand the split before placing components.
useState, no useEffect, no event handlers, no browser APIs — renders on server only, zero client JS shipped'use client' directive): interactive, uses hooks, event handlers, browser APIs — hydrates in browser'use client' at the top of the file; all imports below that boundary are also client-sideasync/await — no useEffect, no loading state boilerplateSuspense boundaries to stream Server Component output progressively// Server Component — fetch directly, no useEffect
async function UserCard({ userId }: { userId: string }) {
const user = await db.users.findById(userId); // direct DB / API call
return <div>{user.name}</div>;
}
// Client Component — interactive leaf
('use client');
function LikeButton({ postId }: { postId: string }) {
const [liked, setLiked] = useState(false);
return <button onClick={() => setLiked(l => !l)}>{liked ? 'Unlike' : 'Like'}</button>;
}
children props instead// WRONG: importing a Server Component inside a Client Component
'use client'
import { ServerComp } from './ServerComp' // breaks — ServerComp would be bundled client-side
// CORRECT: pass as children prop
'use client'
function ClientShell({ children }: { children: React.ReactNode }) {
return <div onClick={...}>{children}</div>
}
// In a Server Component parent:
<ClientShell><ServerComp /></ClientShell>
revalidatePath / revalidateTag in Server Actions to bust cache after mutationscache() from React to deduplicate fetches within a single render pass{ cache: 'no-store' } for user-specific or real-time dataaction prop on <form>) over manual onSubmit + useState loading boilerplateuseActionState to track pending, error, and result state from form ActionsuseFormStatus inside child components to read the enclosing form's pending stateuseOptimistic for instant feedback during async submissionsvalue + onChange) when fine-grained validation or character-level feedback is requiredhtmlFor, use aria-describedby for error messages, manage focus on erroruseEffect for post-render effects or Server Components for async data fetching.'use client' components, the more JavaScript shipped to the browser.| Anti-Pattern | Why It Fails | Correct Approach |
|---|---|---|
| Using class components in new code | Incompatible with React Compiler, Server Components, and concurrent features | Always use functional components with hooks |
| Calling hooks conditionally or in loops | Violates Rules of Hooks; React depends on call order stability across renders | Always call hooks at the top level; use conditions inside the hook body |
Manual useMemo/useCallback everywhere | Premature optimization; adds noise and complexity without measurable benefit | Profile first; use React Compiler; only memoize when DevTools shows real re-render cost |
Fetching data in useEffect | Causes request waterfalls, loading flicker, and race conditions | Use Server Components for async fetch; React Query for client-side caching |
Marking large components as 'use client' | Bundles entire component tree including server data into client JS | Push 'use client' to small interactive leaf components; keep data components as Server |
Before starting:
cat .claude/context/memory/learnings.md
After completing: Record any new patterns or exceptions discovered.
ASSUME INTERRUPTION: Your context may reset. If it's not in memory, it didn't happen.