# Frontend React Development

> Crea componentes React escalables con TypeScript, hooks y patrones de composición, cubriendo estados de carga, vacío, error y éxito, y decidiendo entre Server y Client Components.

- Skill: `leandrobenjaminl/frontend-react-development` (Agent Skill)
- Install (CLI): `npx skillmds@latest add leandrobenjaminl/frontend-react-development`
- Raw SKILL.md: https://api.skillmd.com/api/skills/leandrobenjaminl/frontend-react-development/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend, Frontend Frameworks
- Tags: Client Components, Components, Composition, Hooks, React, Server Components, Typescript
- License: MIT
- Author: LeandroBenjaminL (https://skillmd.com/u/leandrobenjaminl)
- Updated: 2026-08-22
- Page: https://skillmd.com/skills/leandrobenjaminl/frontend-react-development

---


# Skill: frontend-react-development

Componentes React que escalan. No es magia, es patrones.

## Trigger

- Necesitás crear un componente nuevo
- Un componente se está volviendo muy grande y hay que partirlo
- No sabés si usar prop drilling, contexto, o estado local
- Querés decidir entre Server Component o Client Component

## Workflow LEND

1. ANALIZAR
   ├── ¿Es servidor o cliente? ¿necesita interactividad, useState, useEffect?
   ├── ¿Composición o herencia? React prefiere composición siempre
   ├── Estado: ¿local, lifting, contexto, o externo?
   └── Props: ¿cuántas? ¿tipadas? ¿con valores default?

2. OFRECER (Menú del Senior)
   ├── A) Componente simple — function + props, sin estado, puro render
   ├── B) Componente con estado — hooks internos (useState, useReducer)
   └── C) Compound component — varios sub-componentes que comparten estado vía contexto

3. ELEGIR → confirmación

4. HACER
   ├── TypeScript estricto, props tipadas con interface
   ├── Componente pequeño (< 100 líneas). Si crece, partilo.
   ├── Custom hooks para lógica reutilizable (useDatos, useAuth)
   ├── useMemo/useCallback solo si hay rerenders demostrables (no premature optimization)
   ├── Server Component por defecto, Client Component solo cuando necesitás interactividad
   └── Estados: loading, empty, error, success — siempre cubiertos

5. VERIFICAR
   ├── El componente funciona en aislamiento
   ├── Los tipos son correctos (tsc sin errores)
   └── No hay warnings de React en consola

## Patrones

- **Composición > Props**: pasá componentes como children en vez de 15 props booleanas
- **Custom hooks**: extraé lógica repetida a hooks (useFetch, useLocalStorage)
- **Server Component first**: menos JS en el cliente, mejor performance
- **Estados visibles**: loading, empty, error, success — no dejés ningún estado sin cubrir
- **Props con defaults**: destructuring con valor default, no && encadenados

## Anti-patrones

- ❌ Componentes de 300 líneas — partí en componentes chicos
- ❌ useEffect sin dependencias — "solo al montar" casi nunca es correcto
- ❌ Prop drilling de 5 niveles — usá contexto o composición
- ❌ useMemo/useCallback en todos lados — midamos primero
- ❌ Cero estados intermedios — la pantalla no puede quedarse en blanco mientras carga