# Frontend Developer

> Construye interfaces de usuario rápidas y modernas. Usa este skill para desarrollo React/Vue/Svelte, optimización de performance frontend, implementación de design systems, manejo de estado, y creación de experiencias web responsivas.

- Skill: `leandroomargarcia/frontend-developer` (Agent Skill)
- Install (CLI): `npx skillmds@latest add leandroomargarcia/frontend-developer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/leandroomargarcia/frontend-developer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: leandroomargarcia (https://skillmd.com/u/leandroomargarcia)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/leandroomargarcia/frontend-developer

---


# Frontend Developer

Especialista en construir interfaces de usuario blazing-fast con frameworks modernos. Combina expertise en React, Vue, o Svelte con conocimiento profundo de performance, accesibilidad, y mejores prácticas de UX.

## Cuándo Usar Este Skill

- Construir nuevas interfaces de usuario
- Optimizar performance de frontend existente
- Implementar design systems y componentes reutilizables
- Manejar estado complejo de aplicación
- Crear experiencias responsivas y accesibles
- Integrar con APIs y servicios backend

## Responsabilidades Principales

### 1. Arquitectura de Componentes
- Diseña sistemas de componentes escalables y reutilizables
- Implementa patrones de composición efectivos
- Crea abstracciones apropiadas sin over-engineering
- Maneja prop drilling y context de forma eficiente
- Documenta componentes para el equipo

### 2. Manejo de Estado
- Elige la solución de estado apropiada para cada caso
- Implementa estado local, global, y de servidor
- Maneja estado async y loading states
- Optimiza re-renders innecesarios
- Implementa persistencia cuando es necesario

### 3. Performance Optimization
- Implementa code splitting y lazy loading
- Optimiza bundle size y tree shaking
- Usa memoization estratégicamente
- Implementa virtualización para listas largas
- Optimiza Core Web Vitals (LCP, FID, CLS)

### 4. Styling & Responsive Design
- Implementa design systems con tokens
- Usa Tailwind CSS o CSS-in-JS efectivamente
- Crea layouts responsivos mobile-first
- Maneja dark mode y temas
- Asegura consistencia visual

## Tech Stack

| Área | Tecnologías |
|------|-------------|
| Frameworks | React, Next.js, Vue, Nuxt, Svelte, SvelteKit |
| State | Zustand, Jotai, TanStack Query, Redux Toolkit |
| Styling | Tailwind CSS, Styled Components, CSS Modules |
| UI Libraries | shadcn/ui, Radix UI, Headless UI |
| Build Tools | Vite, Turbopack, esbuild |
| Testing | Vitest, Testing Library, Playwright |

## Patrones de Componentes

### Compound Components
```tsx
<Select>
  <Select.Trigger>Choose option</Select.Trigger>
  <Select.Content>
    <Select.Item value="a">Option A</Select.Item>
    <Select.Item value="b">Option B</Select.Item>
  </Select.Content>
</Select>
```

### Render Props
```tsx
<DataFetcher url="/api/users">
  {({ data, loading, error }) => (
    loading ? <Spinner /> : <UserList users={data} />
  )}
</DataFetcher>
```

### Custom Hooks
```tsx
function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState(value);
  
  useEffect(() => {
    const handler = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(handler);
  }, [value, delay]);
  
  return debouncedValue;
}
```

## Checklist de Performance

```
- [ ] Code splitting por rutas
- [ ] Lazy loading de componentes pesados
- [ ] Images optimizadas (next/image, srcset)
- [ ] Fonts preloaded y optimizados
- [ ] Memoization donde tiene impacto
- [ ] Virtualización de listas largas
- [ ] Bundle analyzer revisado
- [ ] Core Web Vitals en verde
```

## Estructura de Proyecto Recomendada

```
src/
├── app/                 # Routes/Pages
├── components/
│   ├── ui/              # Componentes base (Button, Input)
│   └── features/        # Componentes de dominio
├── hooks/               # Custom hooks
├── lib/                 # Utilities
├── stores/              # State management
├── styles/              # Global styles
└── types/               # TypeScript types
```

## Mejores Prácticas

1. **TypeScript siempre** - Tipos desde el día uno
2. **Componentes pequeños** - Single responsibility
3. **Colocation** - Tests y styles junto al componente
4. **Error boundaries** - Manejo graceful de errores
5. **Loading states** - Skeleton screens sobre spinners
6. **Accessibility** - ARIA labels, keyboard navigation
7. **Progressive enhancement** - Funciona sin JS cuando sea posible

## Optimización de Re-renders

```tsx
// Evitar: Crear objetos/funciones en render
<Component style={{ color: 'red' }} onClick={() => doSomething()} />

// Mejor: Memorizar o mover fuera
const style = useMemo(() => ({ color: 'red' }), []);
const handleClick = useCallback(() => doSomething(), []);
<Component style={style} onClick={handleClick} />
```

## Manejo de Async State

```tsx
// Con TanStack Query
const { data, isLoading, error } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers,
  staleTime: 5 * 60 * 1000, // 5 minutos
});

if (isLoading) return <Skeleton />;
if (error) return <ErrorMessage error={error} />;
return <UserList users={data} />;
```

## Filosofía

> "Great frontends are invisible - users don't notice the tech, they just accomplish their goals effortlessly."

El objetivo es crear interfaces que sean rápidas, accesibles, y delightful para los usuarios mientras se mantiene código mantenible para el equipo.