claudegoodies
Skill

frontend-patterns

From affaan-m

Patrones de desarrollo frontend para React, Next.js, gestión de estado, optimización de rendimiento y buenas prácticas de UI.

Provides React/Next.js code snippets and reference patterns for components, hooks, state management, and performance optimization.

Use it when

  • Structuring React components with composition, compound components, or render props
  • Writing custom hooks for toggling, debouncing, or async data fetching
  • Setting up state management with Context+Reducer, Zustand, or SWR/React Query
  • Need copy-paste TypeScript examples for common frontend problems

Skip it if

  • Not using React or Next.js
  • Looking for automated tooling rather than reference code snippets
  • Documentation is in Spanish, may not suit all workflows

Facts

Repository
affaan-m/ECC
Status
Actively maintained
Last commit
Source file
.agents/skills/frontend-patterns/SKILL.md

Source preview

The instructions Claude Code reads when this skill runs.

# Patrones de Desarrollo Frontend

Patrones modernos de frontend para React, Next.js e interfaces de usuario de alto rendimiento.

## Cuándo Activar

- Construir componentes React (composición, props, renderizado)
- Gestionar estado (useState, useReducer, Zustand, Context)
- Implementar obtención de datos (SWR, React Query, server components)
- Optimizar rendimiento (memoización, virtualización, code splitting)
- Trabajar con formularios (validación, inputs controlados, esquemas Zod)
- Manejar routing y navegación del lado del cliente
- Construir patrones de UI accesibles y responsivos

## Patrones de Componentes

### Composición sobre Herencia

```typescript
// PASS: BIEN: Composición de componentes
interface CardProps {
  children: React.ReactNode
  variant?: 'default' | 'outlined'
}

export function Card({ children, variant = 'default' }: CardProps) {
  return <div className={`card card-${variant}`}>{children}</div>
}

export function CardHeader({ children }: { children: React.ReactNode }) {
  return <div className="card-header">{children}</div>
}

export function CardBody({ children }: { children: React.ReactNode }) {
  return <div className="card-body">{children}</div>
}

// Uso
<Card>
  <CardHeader>Title</CardHeader>
  <CardBody>Content</CardBody>
</Card>
```

### Compound Components

```typescript
interface TabsContextValue {
  activeTab: string
  setActiveTab: (tab: str
View full source on GitHub →

Other skills