Menu
Modern React component patterns with hooks and TypeScript
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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.
INVOKE THIS SKILL when working with LangSmith tracing OR querying traces. Covers adding tracing to applications and querying/exporting trace data. Uses the langsmith CLI tool.
INVOKE THIS SKILL when you need human-in-the-loop approval, custom middleware, or structured output. Covers HumanInTheLoopMiddleware for human approval of dangerous tool calls, creating custom middleware with hooks, Command resume patterns, and structured output with Pydantic/Zod.
INVOKE THIS SKILL at the START of any LangChain/LangGraph/Deep Agents project, before writing any agent code. Determines which framework layer is right for the task: LangChain, LangGraph, Deep Agents, or a combination. Must be consulted before other agent skills.
ALWAYS START HERE for any LangChain, Deep Agents, or LangGraph agent building project. Required starting point before choosing other skills or writing any code. Covers framework selection (LangChain vs LangGraph vs Deep Agents), agent archetypes, dependency setup, and which skills to load next based on your decisions.
INVOKE THIS SKILL when building ANY Deep Agents application. Covers create_deep_agent(), harness architecture, SKILL.md format, and configuration options.
| 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>