Crear frontend desde cero

¿Qué hace Crear frontend desde cero?

Transforma una necesidad de producto en una interfaz funcional, accesible y verificable. Esta skill lidera cuando el objetivo principal es construir un frontend nuevo, en proyecto vacío o en un área nueva explícitamente solicitada. Implementa, ejecuta el proyecto cuando sea viable y reporta lo que realmente verificó.

Fronteras y colaboración

• Nuevo frontend: esta skill lidera, incluso cuando una referencia ayuda a orientar una creación original. Extrae principios, sin copiar marca, contenido o activos de terceros.
• Auditar interfaz existente: usa audit-frontend-designer-konvert, que es solo lectura. Para "auditar y corregir", comienza por ella y sigue el contrato de aprobación.
• Aplicar referencia, refinar directamente una interfaz existente o implementar informe aprobado: usa design-por-referencia-konvert y respeta sus reglas de alcance, aprobación y dependencia externa.
• En proyectos mixtos, implementa solo el área nueva autorizada; identifica y preserva integraciones e interfaces existentes. Consulta la guía de colaboración para aprovechar el conocimiento y las herramientas de las otras skills sin duplicarlos.

Flujo

1. Entender la solicitud y el contexto. Lee instrucciones del proyecto, archivos relevantes, stack y convenciones existentes. Identifica producto, audiencia, tarea principal, páginas, datos, identidad, restricciones y dónde se entregará el trabajo. Distingue hechos proporcionados de hipótesis; no inventes personas ni resultados de investigación. Si una elección indispensable no puede inferirse y tiene impacto irreversible, pide aclaración; en las demás decisiones, declara la suposición y avanza. Registra el resultado en el brief de descubrimiento y brief.
2. Definir una propuesta concreta. Elige el journey y los estados relevantes: inicial, carga, vacío, éxito, error y recuperación cuando corresponda. Lista componentes y estados por pantalla con estados y componentes, usando las unidades de la auditoría como criterio de finalización. Para proyectos con múltiples páginas o categorías, define caminos con estructura de contenido y navegación. Define contenido, jerarquía, navegación y dirección visual coherentes con la audiencia y el objetivo, con tokens decididos según la fundación visual. Usa la exploración de dirección visual cuando dos opciones cambien materialmente el resultado. Usa los materiales locales existentes y, si están disponibles y son pertinentes, los catálogos y unidades de conocimiento de la auditoría. Cita solo referencias realmente consultadas. Una referencia visual es inspiración, no evidencia de usabilidad.
3. Planificar la construcción. Reutiliza framework, routing, componentes y tokens existentes. En un proyecto vacío, elige la solución más simple adecuada a la solicitud y al entorno con la elección de stack; justifica dependencias nuevas, verifica versiones y scripts antes de ejecutarlos. No supongas autorización para servicios de pago, publicación, cuentas externas o datos reales. Mantén el alcance de backend, autenticación e integraciones según la solicitud; cuando falten, usa datos sintéticos e indica claramente la limitación.
4. Implementar. Construye contenido, estructura semántica, estilos, componentes e interacciones reales dentro del alcance autorizado. Evita botones sin comportamiento o enlaces ficticios presentados como funcionales: implementa la acción solicitada o indica claramente su indisponibilidad. Usa tokens coherentes, estados visibles y layouts responsivos. Aplica las reglas de contenido, SEO, rendimiento y medición: contenido ficticio identificado, SEO básico en páginas públicas y ningún analytics sin solicitud. Consulta seguridad y localización para proteger el frontend y, cuando el producto tenga múltiples idiomas o regiones, adaptar la interfaz a los locales definidos. No elimines ni reemplaces código, datos, integraciones o archivos del usuario sin necesidad y autorización aplicable.
5. Verificar. Ejecuta las verificaciones pertinentes al proyecto, ejecuta la interfaz localmente cuando sea posible y abre el resultado renderizado. Verifica tareas principales, contenido, navegación, teclado, foco, formularios, estados pertinentes, pantalla estrecha y escritorio; evalúa contraste y movimiento reducido cuando corresponda. Usa los scripts de la skill de referencia cuando estén disponibles, con salida autorizada y datos sintéticos. Para una creación sin versión anterior, no inventes un antes/después: registra la primera captura como referencia inicial y compara solo estados o versiones realmente existentes. Consulta verificación.
6. Entregar y reportar. Revisa la definición de finalización y usa el modelo de informe de la misma. Informa archivos modificados, decisiones y suposiciones relevantes, cómo ejecutar, verificaciones realizadas y sus resultados, funcionalidades simuladas y lo que no se pudo validar. Registra tareas, áreas inspeccionadas, decisiones y criterios verificados en execution-record.json en el directorio de salida autorizado, siguiendo registro de ejecución y su validador. No almacenes prompt ni URLs privadas. No alegues pruebas con usuarios, conformidad integral, rendimiento o resultados comerciales sin evidencia. Si el navegador no está disponible, reporta explícitamente que la interfaz no fue inspeccionada visualmente.

Privacidad y seguridad

Usa solo objetivos y entornos autorizados. Nunca leas ni expongas .env, credenciales, sesiones o datos personales innecesarios; usa contenido sintético y revisa capturas antes de compartir. Respeta las protecciones y limitaciones de la herramienta de captura: la inspección ejecuta JavaScript y no es sandbox para sitios no confiables. Graba artefactos solo en directorio autorizado e ignorado por Git, o fuera del checkout; no alteres la configuración de privacidad del proyecto sin necesidad. No envíes datos a terceros, no crees cuentas ni publiques sin autorización.

Criterios de calidad

La interfaz debe sostener la tarea principal con claridad, jerarquía visual, contenido coherente y feedback útil. Cuida la semántica, el foco, los nombres accesibles, las etiquetas y el reflow según el contexto; no afirmes certificación de accesibilidad solo con verificaciones automáticas. No inventes métricas de conversión, testimonios, sellos, precios, integraciones o funcionalidades. Prefiere una implementación completa y testeable en el alcance a una apariencia convincente con acciones rotas.

Definición de finalización

La entrega solo está lista cuando la tarea principal funciona de punta a punta en el alcance acordado y cada elemento de la definición de finalización está cumplido, no aplicable con motivo o no verificado con motivo. Puntos que más fallan en creaciones desde cero:

• estados además del normal (cargando, error, vacío, éxito y recuperación) sin forma de ser observados;
• foco eliminado o cubierto, etiqueta solo en el placeholder y error indicado solo por color;
• contraste y objetivos táctiles no medidos en el render;
• botones y enlaces que parecen funcionar pero no hacen nada;
• datos comerciales, testimonios o integraciones inventados;
• analytics o fuentes externas añadidos sin decisión registrada.

Referencias y ejemplos

Material	Cuándo usarlo
Descubrimiento y brief	Antes de construir: preguntas con patrones y registro de suposiciones.
Elección de stack	Proyecto vacío, sin plataforma definida.
Fundación visual	Tokens y restricciones verificables de contraste, objetivo y foco.
Exploración de dirección visual	Dirección original, opciones materiales y verificación en el render.
Estructura de contenido y navegación	Caminos, etiquetas y organización de páginas en proyectos nuevos.
Estados y componentes	Inventario por pantalla y unidades de la auditoría como criterio de finalización.
Contenido, SEO, rendimiento y medición	Páginas públicas, formatos brasileños, Core Web Vitals y privacidad.
Seguridad y localización	Contenido variable, recursos externos y, cuando corresponda, varios idiomas o regiones.
Verificación	Cómo ejecutar y registrar las verificaciones.
Colaboración	Cuándo usar la auditoría y la ejecutora.
Definición de finalización y entrega	Antes de reportar la entrega.
Brief de landing, brief de e-commerce y informe de entrega	Ejemplos sintéticos del nivel de detalle esperado.