Nuevo Componente

Paso 2 — Archivos a generar

Server Component (sin 'use client')

src/components/[ui|features]/NombreComponente.tsx

Client Component (con 'use client')

src/components/[ui|features]/NombreComponente.tsx

Si el componente tiene estilos complejos que Tailwind no cubre:

src/components/[ui|features]/NombreComponente.module.scss

Paso 3 — Estructura del componente

Server Component

import { type FC } from 'react';

interface NombreComponenteProps {
  // props tipadas aquí
}

const NombreComponente: FC<NombreComponenteProps> = ({ ...props }) => {
  return (
    // JSX semántico, Tailwind para layout/utilidades
  );
};

export default NombreComponente;

Client Component

'use client';

import { type FC } from 'react';

interface NombreComponenteProps {
  // props tipadas aquí
}

const NombreComponente: FC<NombreComponenteProps> = ({ ...props }) => {
  // hooks aquí
  return (
    // JSX semántico, Tailwind para layout/utilidades
  );
};

export default NombreComponente;

Reglas de calidad

• Props siempre con interface, nunca tipado inline en los parámetros
• Sin valores literales de color ni espaciado fuera de Tailwind o variables SCSS
• Accesibilidad: aria-label en interactivos sin texto visible, roles semánticos correctos
• Si el componente muestra datos monetarios: siempre formatear con Intl.NumberFormat en COP
• Sin any, sin as unknown as T
• Exportar como default desde el archivo del componente