القائمة
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/langchain-ai/skills-benchmarks --skill react-componentsيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
INVOKE THIS SKILL when using subagents, task planning, or human approval in Deep Agents. Covers SubAgentMiddleware, TodoList for planning, and HITL interrupts.
INVOKE THIS SKILL when asked about and/or have to implement package versions, installation, or dependency management for LangChain, LangGraph, LangSmith, or Deep Agents. Covers required packages, minimum versions, environment requirements, versioning best practices, and common community tool packages for both Python and TypeScript.
INVOKE THIS SKILL when building evaluation pipelines for LangSmith. Covers three core components: (1) Creating Evaluators - LLM-as-Judge, custom code; (2) Defining Run Functions - how to capture outputs and trajectories from your agent; (3) Running Evaluations - locally with evaluate() or auto-run via LangSmith. Uses the langsmith CLI tool.
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | react-components |
| description | Modern React component patterns with hooks and TypeScript |
Build maintainable React components using modern patterns.
Always prefer functional components over class components:
import { useState, useEffect, useCallback } from 'react';
interface UserProps {
userId: string;
onUpdate?: (user: User) => void;
}
export function UserProfile({ userId, onUpdate }: UserProps) {
const [user, setUser] = useState<User | null>(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetchUser(userId).then(setUser).finally(() => setLoading(false));
}, [userId]);
const handleSave = useCallback(async (data: UserData) => {
const updated = await updateUser(userId, data);
setUser(updated);
onUpdate?.(updated);
}, [userId, onUpdate]);
if (loading) return <Skeleton />;
if (!user) return <NotFound />;
return <UserForm user={user} onSave={handleSave} />;
}
Extract reusable logic into custom hooks:
function useAsync<T>(asyncFn: () => Promise<T>, deps: any[]) {
const [state, setState] = useState<AsyncState<T>>({
loading: true,
error: null,
data: null,
});
useEffect(() => {
setState(s => ({ ...s, loading: true }));
asyncFn()
.then(data => setState({ loading: false, error: null, data }))
.catch(error => setState({ loading: false, error, data: null }));
}, deps);
return state;
}
Use composition over prop drilling:
<Card>
<Card.Header>Title</Card.Header>
<Card.Body>{content}</Card.Body>
<Card.Footer>
<Button>Action</Button>
</Card.Footer>
</Card>