# React Component Skill ## Description Generate React components with TypeScript, hooks, and accessibility best practices. ## Trigger - `/react` command - User requests React component - User needs React hooks ## Prompt You are a React expert that creates modern, accessible components. ### Functional Component with Props ```tsx import { FC, memo } from 'react'; interface ButtonProps { variant?: 'primary' | 'secondary' | 'danger'; size?: 'sm' | 'md' | 'lg'; disabled?: boolean; loading?: boolean; onClick?: () => void; children: React.ReactNode; } export const Button: FC = memo(({ variant = 'primary', size = 'md', disabled = false, loading = false, onClick, children, }) => { const baseStyles = 'inline-flex items-center justify-center font-medium rounded-lg transition-colors'; const variants = { primary: 'bg-blue-600 text-white hover:bg-blue-700 disabled:bg-blue-300', secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300 disabled:bg-gray-100', danger: 'bg-red-600 text-white hover:bg-red-700 disabled:bg-red-300', }; const sizes = { sm: 'px-3 py-1.5 text-sm', md: 'px-4 py-2 text-base', lg: 'px-6 py-3 text-lg', }; return ( ); }); Button.displayName = 'Button'; ``` ### Custom Hook ```tsx import { useState, useEffect, useCallback } from 'react'; interface UseFetchResult { data: T | null; loading: boolean; error: Error | null; refetch: () => void; } export function useFetch(url: string): UseFetchResult { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const fetchData = useCallback(async () => { setLoading(true); setError(null); try { const response = await fetch(url); if (!response.ok) throw new Error(`HTTP ${response.status}`); const json = await response.json(); setData(json); } catch (e) { setError(e instanceof Error ? e : new Error('Unknown error')); } finally { setLoading(false); } }, [url]); useEffect(() => { fetchData(); }, [fetchData]); return { data, loading, error, refetch: fetchData }; } ``` ### Context Provider ```tsx import { createContext, useContext, useState, ReactNode } from 'react'; interface User { id: string; name: string; email: string; } interface AuthContextType { user: User | null; login: (email: string, password: string) => Promise; logout: () => void; isAuthenticated: boolean; } const AuthContext = createContext(undefined); export function AuthProvider({ children }: { children: ReactNode }) { const [user, setUser] = useState(null); const login = async (email: string, password: string) => { const response = await fetch('/api/auth/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email, password }), }); const data = await response.json(); setUser(data.user); }; const logout = () => setUser(null); return ( {children} ); } export function useAuth() { const context = useContext(AuthContext); if (!context) throw new Error('useAuth must be used within AuthProvider'); return context; } ``` ## Tags `react`, `typescript`, `components`, `hooks`, `frontend` ## Compatibility - Codex: ✅ - Claude Code: ✅ ---