Constructor de Páginas Atómicas

¿Qué hace Constructor de Páginas Atómicas?

Compón páginas a partir de componentes existentes. Este skill ensambla; atomic-design crea.

Reglas

Hacer	No hacer
Importar componentes del sistema de diseño	Crear nuevos átomos, moléculas u organismos
Tomar valores de diseño de la fuente de diseño (Figma, especificación, maqueta)	Adivinar rejilla, espacios o rellenos
Usar estilos con ámbito que lean de tokens	Valores hardcodeados (#333, 24px)
Coincidir exactamente con el diseño, incluyendo comportamiento responsivo	Redondear valores o añadir "mejoras"
Usar solo la librería de componentes del proyecto	Incorporar una librería UI externa que el proyecto no utilice

Transferencia a atomic-design

Cambia a atomic-design cuando:

• Falte un átomo, molécula u organismo necesario;
• Se requiera un nuevo token;
• Un valor de token haya cambiado en el diseño y deba actualizarse primero.

Flujo de trabajo

1. Obtén la especificación de diseño. Si existe una fuente de diseño (Figma a través de MCP, una especificación, una captura de pantalla), extrae rejilla, espacios, rellenos, márgenes y puntos de quiebre. Si no existe, solicita una o indica las suposiciones explícitamente. Anota las configuraciones específicas de la página.
2. Inventario. Lista los componentes que ya tiene el proyecto (átomos, moléculas, organismos, plantillas) junto con sus props.
3. Análisis de brechas. Asigna cada región de la página a un componente existente. Lista todo lo que no coincida.
4. Construye o detente.
   • Todo existe: compón la página, coincidiendo 1:1 con la especificación.
   • Algo falta: detente, reporta las brechas y cambia a atomic-design.
5. Verifica. Compara con el diseño en anchos de móvil, tablet y escritorio.

Patrón de página

/** Página Dashboard. Diseño de: <enlace de diseño o id de nodo> */
import { DashboardLayout } from '@/design-system/templates/DashboardLayout';
import { Card } from '@/design-system/molecules/Card';
import { DataTable } from '@/design-system/organisms/DataTable';
import styles from './Dashboard.module.css';

export const Dashboard = () => (
  <DashboardLayout>
    <div className={styles.statsGrid}>
      <Card title="Ingresos">$12,450</Card>
    </div>
    <DataTable columns={columns} data={data} />
  </DashboardLayout>
);

.statsGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
}
@media (min-width: 768px) {
  .statsGrid { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-6); }
}

Adapta las rutas de importación y el enfoque de estilos al proyecto.

Verificación

Renderiza la página en un navegador real (playwright-cli) a 375, 768 y 1440px en modo claro y oscuro, lee la consola y compara con la fuente de diseño. También verifica el orden de encabezados, puntos de referencia, flujo de teclado y estados de carga, vacío y error.

Funciona con

Necesidad	Skill o herramienta
Componente o token faltante	atomic-design (compañero requerido)
Crítica o pulido a nivel de página	impeccable
Auditoría de accesibilidad	fixing-accessibility, design:accessibility-review
Metadatos de página, títulos, Open Graph	fixing-metadata
Transferencia a ingeniería	design:design-handoff

Reglas adicionales

• Compón en los slots de la plantilla; no accedas al interior de un componente ni sobrescribas sus estilos.
• Los estilos específicos de página se limitan al diseño (rejilla, espacios, colocación); cualquier cosa visual pertenece a un componente o token.
• Nunca copies y pegues un componente para modificarlo; solicita una variante a través de atomic-design.
• Pasa contenido real y representativo (nombres largos, listas vacías, errores) al verificar la página.
• Establece el título del documento y un solo h1 por página.
• Un archivo de página contiene solo composición y cableado de datos; sin lógica UI reutilizable.

Referencias

Archivo	Leer cuando
references/design-source-extraction.md	Extraer valores de diseño y escribir la especificación de página
references/inventory-and-gaps.md	Inventariar componentes y encontrar brechas
references/composition-patterns.md	Diseños, slots, estados de datos, orden de importaciones

Lista de verificación de salida

• Los valores de diseño provienen de la fuente de diseño, no de suposiciones
• El comportamiento responsivo coincide con el diseño
• Todas las importaciones provienen del sistema de diseño del proyecto
• Cero valores hardcodeados
• Cero componentes nuevos
• Enlace de diseño documentado en el archivo de página