TOPDEV Template Web con Workflow Agéntico
El workflow agéntico, documentado de punta a punta
Cómo las skills numeradas, los paquetes de trabajo explícitos y los gates de calidad llevan un proyecto web del brief a la publicación.
- Opcional
- Auxiliares
Qué resuelve este workflow
Nuestro template anterior cubría apps privadas tipo admin: el sistema de diseño ya estaba definido y el proyecto arrancaba con un documento de alcance exhaustivo antes de cotizar. Este workflow empieza una fase antes: ordena referencias de diseño desorganizadas y convierte esa exploración en un plan ejecutable, sin exigir un análisis tan pesado por adelantado.
Cada skill posee una responsabilidad con entradas, salidas y límites definidos, lo que permite que los agentes trabajen en paralelo sobre paquetes de trabajo explícitos sin cambiar en silencio decisiones de arquitectura ni solapar la propiedad de archivos.
Por dónde empieza un agente
- 1
0-project-context-setup
Capturar objetivos, restricciones y referencias disponibles.
- 2
1-figma-pdf-audit + 2-brand-foundation
Auditar las referencias de diseño y fijar la base visual.
- 3
3-component-architecture-planner
Planificar la arquitectura y sus paquetes de trabajo.
- 4
3.1-workflow-readiness-validator
Superar el gate antes de cualquier trabajo de implementación.
SEO desde la base
Metadatos, canonicals, JSON-LD y sitemap en cada página. El sitio se construye para posicionar, no solo para funcionar.
Rendimiento por defecto
SSG estático con cero JavaScript salvo islas puntuales, imágenes optimizadas y Core Web Vitals auditados antes de publicar.
Markup semántico
HTML indexable sin ejecutar JavaScript: landmarks correctos y jerarquía de headings. React solo donde el estado lo justifica.
Opinado y fiable
El proceso es deliberadamente rígido: contratos, propiedad de archivos y gates de calidad para resultados repetibles.
El mapa del workflow
Seis fases, de la A a la F, llevan un proyecto del contexto a una decisión de publicación. Las skills se numeran por orden de ejecución; el paso opcional de backlog y las skills auxiliares corren junto a ellas.
Contexto y diseño
Capturar el brief, auditar las referencias y fijar la base visual.
0-project-context-setup
Registra objetivos, restricciones, decisiones y referencias.
1-figma-pdf-audit
Documenta lo que los diseños suministrados realmente muestran.
2-brand-foundation
Define tokens, tipografía, roles de color y reglas responsive.
Arquitectura y planificación
Dividir el diseño aprobado en paquetes de trabajo ejecutables.
3-component-architecture-planner
Emite la arquitectura, el grafo de dependencias y el índice de paquetes.
En este punto la skill opcional task-backlog-generator puede copiar los paquetes a un backlog.
Gate de preparaciónGate
La implementación no empieza hasta verificar que todo está listo.
3.1-workflow-readiness-validator
Comprueba que el contexto y los artefactos de planificación estén completos.
Veredictos posibles
- READY
- READY WITH CONDITIONS
- NOT READY
Con NOT READY o condiciones sin cumplir, hay que resolver las brechas y volver a ejecutar el validador antes de implementar.
Implementación
Los paquetes de trabajo aprobados se ejecutan, potencialmente en paralelo.
3.2-work-package-orchestrator
Convierte el plan de paquetes en un runbook de ejecución con olas y prompts por lote.
4-shared-shell-builder
Construye layouts, navegación y el shell transversal.
5-astro-react-component-builder
Construye componentes reutilizables según los contratos.
6-page-implementation
Compone páginas a partir del shell y los componentes.
Los paquetes corren en paralelo solo cuando las dependencias están cumplidas y la propiedad de archivos no se solapa.
Auditorías de calidad
Auditorías independientes que producen hallazgos, no arreglos silenciosos.
7-asset-content-audit
Comprueba assets y contenido contra el alcance aprobado.
8-accessibility-performance-audit
Comprueba accesibilidad, responsive y Core Web Vitals.
9-seo-audit
Comprueba metadatos, indexabilidad y datos estructurados.
Validación de publicación
La evidencia se consolida en un veredicto para una decisión humana.
10-website-release-validator
Reporta la preparación. No despliega.
Fuera del mapa de fases
Opcionaltask-backlog-generator
Paso 3.3. Copia los paquetes de trabajo a un backlog. Nunca un prerrequisito de la implementación.
Auxiliarproject-readme-generator
Documenta el repositorio real. Puede ejecutarse de forma independiente en cualquier momento.
Auxiliardesign-taste-frontend
Guía de diseño consultiva. No sobreescribe los requisitos del proyecto.
El catálogo, agrupado por fase
Dieciséis skills, un trabajo cada una. Las skills numeradas forman el ciclo de vida; las opcionales y auxiliares lo apoyan sin convertirse en prerrequisitos ocultos.
Contexto y diseño
3 skills
- 0-project-context-setup
- 1-figma-pdf-audit
- 2-brand-foundation
Planificación y gate
3 skills, 1 opcional
- 3-component-architecture-planner
- 3.1-workflow-readiness-validator
- 3.2-work-package-orchestrator
- task-backlog-generator
Implementación
3 skills
- 4-shared-shell-builder
- 5-astro-react-component-builder
- 6-page-implementation
Auditoría y calidad
3 skills
- 7-asset-content-audit
- 8-accessibility-performance-audit
- 9-seo-audit
Publicación
1 skill
- 10-website-release-validator
Auxiliares
2 skills
- project-readme-generator
- design-taste-frontend
Seguir leyendo
- Ciclo de vidaLa secuencia prevista de skills, el gate de preparación y cómo cada etapa pasa el relevo a la siguiente.
- CatálogoCada skill instalada con su propósito, sus entradas típicas y el contrato de salida que debe producir.
- Paquetes de trabajoCómo se planifican, asignan, implementan, validan y sincronizan los paquetes de trabajo.
- Calidad y publicaciónLa cadena de auditorías, sus artefactos y qué puede y no puede decidir el validador de publicación.