ITDanZF/skill

Reconstrucción de Prototipo Frontend

Activación

Usa esta skill solo cuando se cumplan ambas condiciones:

• El usuario proporciona o hace referencia clara a una imagen de página, captura de pantalla, maqueta o prototipo.
• El usuario solicita explícitamente generar, recrear, convertir, implementar o restaurar la página frontend correspondiente.

Si el usuario solo pide revisar o describir la imagen, no implementes código a menos que te lo pida.

Flujo de trabajo

1. Inspecciona primero la imagen del prototipo.

   • Identifica el tipo de página, viewport, regiones principales de diseño, cuadrícula de alineación, ritmo de espaciado, escala tipográfica, densidad y jerarquía visual.
   • Extrae los elementos visibles: navegación, formularios, botones, tablas, tarjetas, listas, pestañas, filtros, medios, estados vacíos, indicadores de estado e iconos.
   • Infiere las interacciones probables solo a partir de las affordances visibles, como acciones hover, pestañas seleccionadas, menús desplegables, interruptores, filtros, modales, paginación o estados de entrada.
   • Trata el contenido ambiguo como visualización estática a menos que el usuario solicite comportamiento funcional.

2. Inspecciona el proyecto frontend local antes de codificar.

   • Identifica el framework, enrutamiento, convenciones de componentes, método de estilo, tokens de tema, variables CSS, configuración de Tailwind, sistema de diseño, biblioteca de iconos y patrones de página existentes.
   • Prefiere componentes existentes, escalas de espaciado, utilidades tipográficas, tokens de color y primitivas de diseño.
   • Combina con el patrón de página o componente existente más cercano cuando no entre en conflicto con el prototipo.

3. Planifica la superficie de implementación.

   • Elige la estructura de archivos/componentes más pequeña que se ajuste a las convenciones del proyecto.
   • Mantén los datos estáticos del prototipo locales y obvios a menos que el proyecto tenga un patrón establecido de fixtures o datos mock.
   • No introduzcas nueva gestión de estado, bibliotecas de componentes, frameworks CSS o cambios globales de tema para una recreación de página estática.

4. Implementa la página.

   • Recrea el diseño y la estructura visual con HTML semántico y componentes nativos del proyecto.
   • Usa CSS para el diseño, dimensionamiento, espaciado, comportamiento responsivo, estados hover/focus, transiciones, capas y estados visuales simples.
   • Usa JavaScript solo para comportamientos que realmente requieran estado o manejo de eventos.
   • Mantén el código eficiente, legible y con estilo de producción: límites de componentes claros, duplicación mínima, sin abstracciones únicas que dificulten el escaneo de la página.

5. Verifica el resultado visualmente.

   • Ejecuta el servidor de desarrollo local pertinente o la vista previa estática cuando sea necesario.
   • Compara la página renderizada con el prototipo en el viewport objetivo y al menos en un punto de interrupción responsivo cuando sea aplicable.
   • Corrige las diferencias obvias en espaciado, jerarquía, color, dimensionamiento y desbordamiento antes de finalizar.

Reglas de Tema y Color

Usa el tema del proyecto local como fuente de verdad:

• Prefiere los tokens del proyecto, variables CSS, valores del tema de Tailwind, props del sistema de diseño y variantes de componentes existentes.
• Si el proyecto tiene un token semántico coincidente, úsalo aunque el color de la captura de pantalla sea ligeramente diferente.
• Si el proyecto no tiene un token adecuado, usa el color de la captura de pantalla directamente y mantenlo local en la página/componente recreado.
• No modifiques archivos de tema global solo para coincidir con una captura de pantalla a menos que el usuario lo solicite explícitamente.
• Prioriza la coherencia de la marca sobre la copia exacta de color cuando la intención del tema local sea clara.

Extracción de Diseño y Elementos

Captura estos detalles antes de escribir código:

• Esqueleto de página: encabezado, barra lateral, pie de página, ancho de contenido, regiones de desplazamiento, áreas fijas.
• Cuadrícula: columnas, filas, medianiles, ritmo de tarjetas/tablas/listas, comportamiento en puntos de interrupción.
• Tipografía: escala de encabezados/cuerpo/leyenda, peso, interlineado, truncamiento.
• Controles: tamaños de botón, alturas de entrada, estados seleccionado/deshabilitado/cargando, iconos, insignias.
• Fidelidad del contenido: etiquetas, copia visible, números, fechas, avatares, marcadores de posición de imágenes y estados vacíos.
• Capas: sombras, bordes, divisores, superposiciones, popovers y relaciones de z-index.

No abuses del posicionamiento absoluto. Prefiere flex, grid, dimensionamiento intrínseco, aspect-ratio, restricciones min/max y reglas responsivas basadas en contenedor. Usa posicionamiento absoluto solo para superposiciones, insignias, anclas decorativas o capas específicas de la captura de pantalla que no puedan expresarse limpiamente de otra manera.

Guía de Interacción

Para recreación de página estática, implementa interacciones solo hasta el nivel implícito en la solicitud:

• Incluye siempre estados visuales accesibles de hover, focus, active, selected, disabled y loading cuando el prototipo los implique.
• Implementa apertura/cierre simple, cambio de pestañas, selección o filtrado solo cuando el usuario solicite comportamiento interactivo o el prototipo dependa claramente de ello.
• Prefiere selectores CSS y comportamiento HTML nativo para interacciones simples cuando sea práctico.
• Evita JavaScript utilizado solo para parchear diseño, espaciado, truncamiento, colores o comportamiento responsivo. Resuelve esos con CSS.

Reglas de Calidad de Código

Sigue las prácticas frontend de bases de código grandes:

• Mantén los componentes cohesivos y nombrados por dominio o rol visible, no por fragmentos visuales vagos.
• Evita dividir la página en muchos componentes diminutos a menos que haya responsabilidades independientes reales.
• Mantén los datos de muestra estáticos tipados cuando el proyecto use TypeScript.
• Usa bibliotecas de iconos existentes en lugar de SVGs codificados a mano cuando estén disponibles.
• Añade texto alternativo, etiquetas, estilos de foco de teclado y estructura semántica donde sea apropiado.
• Evita números mágicos codificados cuando el proyecto tenga tokens de espaciado, dimensionamiento o color.
• No añadas dependencias para efectos que CSS o utilidades existentes puedan manejar.

Lista de Verificación de Finalización

Antes de la respuesta final, confirma:

• Se inspeccionó la imagen para diseño, elementos, tema e interacciones implícitas.
• Se verificaron el tema del proyecto existente y las convenciones de frontend.
• Los colores prefieren tokens locales, usando colores de la captura de pantalla solo para tokens faltantes.
• CSS maneja el diseño visual y los estados siempre que sea posible.
• Se previsualizó la página renderizada o se indicó la razón por la que no se pudo previsualizar.