ReddRadar
Agent skill
react
Provides comprehensive guidance for React development including components, JSX, props, state, hooks, context, performance optimization, and best practices. Use when the user asks about React, needs to create React components, implement hooks, manage component state, or build React applications.
Install this agent skill to your Project
npx add-skill https://github.com/partme-ai/full-stack-skills/tree/main/skills/react-skills/react
SKILL.md
When to use this skill
Use this skill whenever the user wants to:
- Build user interfaces with React components and JSX
- Manage component state and lifecycle with hooks
- Create reusable, composable React components
- Use Context API or state management libraries (Redux, Zustand)
- Set up React projects with Vite or Create React App
- Implement routing with React Router
- Optimize rendering performance (React.memo, useMemo, lazy loading)
How to use this skill
Workflow
- Identify the request area (component creation, state management, routing, performance, etc.)
- Apply React best practices following the official documentation patterns
- Generate JSX/TSX code using functional components and hooks
- Verify the component tree renders correctly and state flows are clean
1. Functional Component
import { useState } from 'react';
interface UserCardProps {
name: string;
email: string;
onSelect: (name: string) => void;
}
export function UserCard({ name, email, onSelect }: UserCardProps) {
return (
<div className="user-card" onClick={() => onSelect(name)}>
<h3>{name}</h3>
<p>{email}</p>
</div>
);
}
2. State and Effects
import { useState, useEffect } from 'react';
export function UserList() {
const [users, setUsers] = useState<User[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch('/api/users')
.then(res => res.json())
.then(data => {
setUsers(data);
setLoading(false);
});
}, []);
if (loading) return <p>Loading...</p>;
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
3. Custom Hook
import { useState, useCallback } from 'react';
function useToggle(initial = false): [boolean, () => void] {
const [value, setValue] = useState(initial);
const toggle = useCallback(() => setValue(v => !v), []);
return [value, toggle];
}
4. Context Pattern
import { createContext, useContext, useState, ReactNode } from 'react';
const ThemeContext = createContext<{ dark: boolean; toggle: () => void } | null>(null);
export function ThemeProvider({ children }: { children: ReactNode }) {
const [dark, setDark] = useState(false);
const toggle = () => setDark(d => !d);
return <ThemeContext.Provider value={{ dark, toggle }}>{children}</ThemeContext.Provider>;
}
export function useTheme() {
const ctx = useContext(ThemeContext);
if (!ctx) throw new Error('useTheme must be used within ThemeProvider');
return ctx;
}
Best Practices
- Keep components small and focused on a single responsibility
- Lift state up to the nearest common ancestor; use Context for deeply shared state
- Always provide a stable
keyprop when rendering lists - Clean up side effects in
useEffectreturn functions (subscriptions, timers) - Avoid creating new objects/functions inline in JSX to prevent unnecessary re-renders
- Use
React.lazyandSuspensefor code-splitting large routes
Resources
- Official documentation: https://react.dev/
- React hooks reference: https://react.dev/reference/react
- Create React App: https://create-react-app.dev/
Keywords
react, React Hooks, JSX, TSX, components, state, props, useEffect, useState, Context API, functional components, performance, memo, lazy loading
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
partme-ai/full-stack-skills
ocrmypdf-batch
OCRmyPDF batch processing skill — process multiple PDFs, Docker automation, shell scripting, and CI/CD integration. Use when the user needs to OCR many PDFs, set up automated OCR pipelines, or integrate OCR into workflows.
partme-ai/full-stack-skills
ocrmypdf-optimize
OCRmyPDF optimization skill — compress PDFs, configure PDF/A output, JBIG2 encoding, and lossless optimization. Use when the user needs to reduce PDF file size, create archival PDF/A files, or optimize OCR output.
partme-ai/full-stack-skills
ocrmypdf-image
OCRmyPDF image processing skill — deskew, rotate, clean, despeckle, remove border from scanned documents. Use when the user needs to improve scanned PDF quality, fix skewed pages, remove noise, or clean up scanned documents before OCR.
partme-ai/full-stack-skills
ocrmypdf-api
OCRmyPDF Python API and plugin skill — use OCRmyPDF programmatically from Python, integrate with applications, and extend with plugins (EasyOCR, PaddleOCR, AppleOCR). Use when the user needs to call OCRmyPDF from Python code, build OCR pipelines, or use alternative OCR engines.
partme-ai/full-stack-skills
ocrmypdf
OCRmyPDF core skill — add searchable OCR text layer to scanned PDFs, convert images to searchable PDFs, support 100+ languages via Tesseract. Use when the user needs to OCR a PDF, make a scanned PDF searchable, or extract text from scanned documents.
partme-ai/full-stack-skills
svelte
Guides Svelte and SvelteKit development including reactive components, stores, transitions, lifecycle hooks, SSR, file-based routing, and deployment. Use when the user needs to build Svelte components, create SvelteKit applications, implement reactivity patterns, or configure Svelte with Vite.
Didn't find tool you were looking for?