react-componentlisted
Install: claude install-skill aiskillstore/marketplace
# React Component Skill
## Overview
Expert guidance for building React functional components, hooks, and composition patterns. Focuses on TypeScript, performance, accessibility, and modern React best practices.
## When This Skill Applies
This skill triggers when users request:
- **UI Components**: "Create a student KPI card", "Build a modal", "Form component"
- **Hooks**: "Custom attendance hook", "useContext for theme", "useState for data"
- **Patterns**: "Component composition", "HOC", "render props"
- **ERP Widgets**: KPI cards, forms, data tables, dashboards
## Core Rules
### 1. Functional Components Always
```typescript
// ✅ GOOD: Functional component with TypeScript
interface StudentKPICardProps {
studentName: string;
attendance: number;
loading?: boolean;
}
export const StudentKPICard = React.memo(({ studentName, attendance, loading = false }: StudentKPICardProps) => {
const [isHovered, setIsHovered] = useState(false);
if (loading) return <LoadingSkeleton />;
return <div>{/* content */}</div>;
});
```
**Requirements:**
- Always use functional components (no class components)
- Type all props interfaces explicitly
- Use `React.memo` for components receiving same props frequently
- Use `React.forwardRef` when ref forwarding is needed
### 2. Hooks Usage
```typescript
// ✅ GOOD: Proper hook usage with cleanup
export const AttendanceMonitor = ({ studentId }: { studentId: string }) => {
const [data, setData] = useState(null);
const [error, setErr