Modern React 19+ development with Server Components, Actions, hooks, TypeScript integration, and performance optimization. Use when building React web applications, implementing Server Components, using Actions for form handling, working with new hooks (use, useActionState, useOptimistic, useFormStatus), setting up React projects with Vite or Next.js, or optimizing React performance.
/plugin marketplace add iButters/ClaudeCodePlugins/plugin install ui-kit-generator@claude-code-pluginsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/hooks-reference.mdreferences/styling-patterns.mdBuild modern, performant React applications using React 19+ features.
interface ButtonProps {
variant?: 'primary' | 'secondary';
children: React.ReactNode;
onClick?: () => void;
}
export function Button({ variant = 'primary', children, onClick }: ButtonProps) {
return (
<button className={`btn btn-${variant}`} onClick={onClick}>
{children}
</button>
);
}
Server Components render on the server, reducing client JavaScript:
// app/posts/page.tsx - Server Component (default)
async function PostList() {
const posts = await db.posts.findMany();
return (
<ul>
{posts.map(post => <li key={post.id}>{post.title}</li>)}
</ul>
);
}
Mark interactive components with 'use client':
'use client';
import { useState } from 'react';
export function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}
Replace manual form handling with Actions:
'use client';
import { useActionState } from 'react';
async function submitForm(prev: State, formData: FormData) {
'use server';
const name = formData.get('name');
await db.users.create({ name });
return { success: true };
}
function Form() {
const [state, action, pending] = useActionState(submitForm, { success: false });
return (
<form action={action}>
<input name="name" />
<button disabled={pending}>{pending ? 'Saving...' : 'Save'}</button>
</form>
);
}
import { use } from 'react';
function UserProfile({ userPromise }) {
const user = use(userPromise); // Suspends until resolved
return <div>{user.name}</div>;
}
function ThemeButton() {
const theme = use(ThemeContext); // Read context conditionally
return <button style={{ color: theme.primary }}>Click</button>;
}
'use client';
import { useOptimistic } from 'react';
function TodoList({ todos, addTodo }) {
const [optimisticTodos, addOptimisticTodo] = useOptimistic(
todos,
(state, newTodo) => [...state, { ...newTodo, pending: true }]
);
async function handleAdd(formData: FormData) {
const text = formData.get('text');
addOptimisticTodo({ text, id: Date.now() });
await addTodo(text);
}
return (
<form action={handleAdd}>
<input name="text" />
<ul>
{optimisticTodos.map(todo => (
<li key={todo.id} style={{ opacity: todo.pending ? 0.5 : 1 }}>
{todo.text}
</li>
))}
</ul>
</form>
);
}
'use client';
import { useFormStatus } from 'react-dom';
function SubmitButton() {
const { pending } = useFormStatus();
return <button disabled={pending}>{pending ? 'Submitting...' : 'Submit'}</button>;
}
src/
├── app/ # App Router (Next.js) or routes
├── components/
│ ├── ui/ # Reusable UI primitives
│ ├── features/ # Feature-specific components
│ └── layouts/ # Layout components
├── hooks/ # Custom hooks
├── lib/ # Utilities, API clients
├── types/ # TypeScript types
└── styles/ # Global styles, tokens
function useAsync<T>(asyncFn: () => Promise<T>, deps: unknown[]) {
const [state, setState] = useState<{
data: T | null;
loading: boolean;
error: Error | null;
}>({ data: null, loading: true, error: null });
useEffect(() => {
setState(s => ({ ...s, loading: true }));
asyncFn()
.then(data => setState({ data, loading: false, error: null }))
.catch(error => setState({ data: null, loading: false, error }));
}, deps);
return state;
}
React.lazy() and Suspense for code splittingreferences/atomic-integration.mdreferences/styling-patterns.mdreferences/storybook-setup.mdCreating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.