shixun926-dotcom/Frontend-Workflow

Frontend Workflow: Flujo de control total para proyectos frontend

1. Prioridad máxima: Leer primero el proyecto

Antes de modificar cualquier archivo, debes:

1. Leer los archivos AGENTS.md, CLAUDE.md, README y otras especificaciones de desarrollo aplicables en la raíz del proyecto.
2. Revisar package.json, archivos de bloqueo, configuración de compilación, configuración de enrutamiento y componentes existentes.
3. Identificar el stack tecnológico actual del proyecto, versiones de frameworks, bibliotecas de UI, esquemas CSS y comandos de ejecución.
4. Si el proyecto es de frontend y backend separados, definir claramente los límites entre frontend y backend, sin modificar los contratos de las interfaces del backend sin autorización.
5. Si el proyecto ya tiene un sistema de diseño, especificaciones de componentes o estilo de página, prioriza heredarlo y mejorarlo, no rehacerlo desde cero.

No debes juzgar el stack tecnológico únicamente por la descripción del usuario o el nombre del directorio; debes verificar los archivos reales.

2. Identificar el stack tecnológico y decidir el modo de uso del Skill

Caso A: Proyecto React

Ejecuta en orden:

1. frontend-design: Determinar la dirección visual, especificaciones de diseño y maquetación.
2. frontend-production-shadcn: Solo si el proyecto es compatible, implementa componentes, maquetación e interacciones.
3. premium-ui: Revisar las páginas reales y aplicar correcciones.

Solo debes usar la implementación específica de componentes de este Skill cuando el proyecto ya haya adoptado o permita explícitamente React, Tailwind CSS y shadcn/ui.

Caso B: Proyecto Vue 3

Ejecuta en orden:

1. frontend-design: Determinar la dirección visual, especificaciones de diseño y maquetación.
2. Usar frontend-production-shadcn solo como referencia para las especificaciones de diseño y calidad de ingeniería, sin ejecutar las instrucciones de implementación específicas para React, JSX, React Hooks o shadcn/ui.
3. Utilizar el stack existente del proyecto (Vue 3, TypeScript, enrutamiento, biblioteca de UI, esquema CSS) para completar la implementación.
4. premium-ui: Revisar las páginas reales y aplicar correcciones.

No debes migrar el proyecto Vue 3 a React solo para adaptarlo al segundo Skill.

Caso C: Otros stacks

Primero revisa las tecnologías y restricciones existentes del proyecto. Usa frontend-design para la planificación visual, toma como referencia los principios de diseño transferibles de frontend-production-shadcn y completa la implementación con la tecnología adecuada del proyecto actual. Finalmente, usa el método de revisión de premium-ui para la aceptación.

3. Ejecutar estrictamente las tres fases

Fase 1: Diseño visual

Invoca frontend-design.

Requisitos:

• Definir el objetivo de la página, los usuarios principales y las operaciones clave.
• Determinar la dirección visual, tipografía, colores, espaciado, maquetación y jerarquía de la información.
• Proponer direcciones de diseño con diferencias sustanciales y explicar la razón de la elección final.
• Formar especificaciones de diseño ejecutables antes de comenzar la implementación.

Fase 2: Implementación técnica

Según el stack tecnológico, invoca frontend-production-shadcn o solo toma como referencia sus principios de diseño.

Requisitos:

• Reutilizar primero los componentes y dependencias existentes.
• Implementar páginas completas, navegación, formularios, diseño responsive y estados de interacción.
• Gestionar estados de carga, datos vacíos, error, deshabilitado y retroalimentación de éxito.
• Mantener la lógica de negocio real; no usar interacciones falsas para simular funcionalidades.
• Sin autorización, no realizar refactorizaciones masivas ni cambiar de framework.

Fase 3: Revisión visual

Invoca premium-ui para revisar la implementación real, no solo leer el código.

Requisitos:

• Prioriza iniciar el proyecto y usar herramientas de navegador o captura de pantalla disponibles para revisar las páginas.
• Revisar tipografía, alineación, espaciado, colores, jerarquía, consistencia de componentes y rendimiento responsive.
• Revisar que botones, formularios, navegación e interacciones principales funcionen.
• Registrar las diferencias entre los objetivos de diseño y el resultado real.
• Corregir los problemas encontrados y volver a revisar.

Si el entorno no tiene navegador o capacidad de captura de pantalla, debes indicar explícitamente que no se puede realizar una revisión visual real; no debes afirmar que ya se revisó el efecto de la página.

4. Reglas de ejecución

1. Al completar cada fase, informa brevemente las conclusiones antes de pasar a la siguiente fase.
2. Si algún Skill no existe, no está cargado o no puede ejecutarse, indícalo explícitamente y utiliza alternativas viables.
3. No asumas que otros Skills se ejecutarán automáticamente; cuando sea necesario, solicita explícitamente la invocación o lectura del Skill correspondiente.
4. Sigue las solicitudes explícitas del usuario, las especificaciones del proyecto y el stack tecnológico existente.
5. No sacrifiques accesibilidad, mantenibilidad, rendimiento o corrección del negocio por buscar efectos visuales.
6. Al finalizar, ejecuta los comandos de compilación, prueba y verificación compatibles con el proyecto e informa los resultados.

5. Entrega final

Al finalizar, informa:

• Stack tecnológico identificado y versiones.
• Dirección de diseño adoptada y decisiones clave de diseño.
• Archivos principales modificados y sus funcionalidades.
• Estado de ejecución de cada una de las tres fases.
• Resultados de compilación, pruebas y revisión visual real.
• Problemas pendientes y elementos que requieren confirmación manual.