Auto-activate for .tsx, .jsx files, react imports. Expert knowledge for modern React development with TypeScript, including client components, framework-scoped server components, and upgrade-aware best practices. Use when building React components, managing state, or integrating with backend APIs. Not for Vue (see vue), Svelte (see svelte), or Angular (see angular).
From flownpx claudepluginhub cofin/flow --plugin flowThis skill uses the workspace's default tool permissions.
references/litestar_vite.mdSearches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Enables AI agents to execute x402 payments with per-task budgets, spending controls, and non-custodial wallets via MCP tools. Use when agents pay for APIs, services, or other agents.
import { useState, useEffect, useCallback } from 'react';
interface Props {
title: string;
items: Item[];
onSelect?: (item: Item) => void;
}
export function ItemList({ title, items, onSelect }: Props) {
const [selected, setSelected] = useState<Item | null>(null);
const handleSelect = useCallback((item: Item) => {
setSelected(item);
onSelect?.(item);
}, [onSelect]);
return (
<div>
<h2>{title}</h2>
<ul>
{items.map(item => (
<li key={item.id} onClick={() => handleSelect(item)}>
{item.name}
</li>
))}
</ul>
</div>
);
}
</example>
function useFetch<T>(url: string) {
const [data, setData] = useState<T | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<Error | null>(null);
useEffect(() => {
const controller = new AbortController();
fetch(url, { signal: controller.signal })
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then(setData)
.catch(err => {
if (err.name !== 'AbortError') setError(err);
})
.finally(() => setLoading(false));
return () => controller.abort();
}, [url]);
return { data, loading, error };
}
</example>
// Server Components are framework-scoped (for example Next.js App Router)
// and are not a universal default in plain React + Vite projects.
async function UserProfile({ userId }: { userId: string }) {
const user = await fetchUser(userId);
return <div>{user.name}</div>;
}
// Client Component
'use client';
export function InteractiveButton({ onClick }: { onClick: () => void }) {
return <button onClick={onClick}>Click me</button>;
}
</example>
import { useActionState } from 'react';
function ContactForm() {
const [state, formAction, isPending] = useActionState(
async (prevState: FormState, formData: FormData) => {
const result = await submitForm(formData);
return result;
},
{ message: '' }
);
return (
<form action={formAction}>
<input name="email" type="email" required />
<button type="submit" disabled={isPending}>
{isPending ? 'Sending...' : 'Send'}
</button>
{state.message && <p>{state.message}</p>}
</form>
);
}
</example>
import { createContext, useContext, useState, ReactNode } from 'react';
interface ThemeContextType {
theme: 'light' | 'dark';
toggle: () => void;
}
const ThemeContext = createContext<ThemeContextType | null>(null);
export function ThemeProvider({ children }: { children: ReactNode }) {
const [theme, setTheme] = useState<'light' | 'dark'>('light');
const toggle = () => setTheme(t => t === 'light' ? 'dark' : 'light');
return (
<ThemeContext.Provider value={{ theme, toggle }}>
{children}
</ThemeContext.Provider>
);
}
export function useTheme() {
const context = useContext(ThemeContext);
if (!context) throw new Error('useTheme must be used within ThemeProvider');
return context;
}
</example>
</workflow>
<guardrails>
useCallback/useMemo only when profiling shows measurable benefitkey props correctly (stable, unique identifiers)useEffect return functionFor comprehensive coverage of these commonly-used React libraries:
| Library | Skill | Coverage |
|---|---|---|
| TanStack Router/Query/Table/Form | tanstack | Full ecosystem |
| Shadcn/ui components | shadcn | All components |
| Tailwind CSS | tailwind | Styling patterns |
Bundle traditional SPA apps into static sets:
vite build
Align Server Actions and components to runtimes offering full Server-Side script continuity safely supporting 'use server' handlers.
Example GitHub Actions workflow for static build:
name: React CI
on: [push, pull_request]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: '22'
cache: 'npm'
- run: npm ci
- run: npm run build
</example>