aubarcito48/portfolio

Convierte código frontend (Vite, React, Angular, Vue, etc.) en un Diseño de Stitch encadenando extracción de HTML estático, extracción del sistema de diseño y carga de archivos. **SIEMPRE** usa esta skill cuando la intención del usuario sea mover aplicaciones web existentes o componentes de React/Angular/Vue a Stitch (por ejemplo, solicitudes para "guardar", "migrar" o "subir"). Debes usar esta skill incluso para operaciones simples de "guardar", ya que es la única forma de asegurar que el sistema de diseño se extraiga y los activos se vinculen correctamente.

¿Qué es portfolio?

Esta skill transforma el código frontend existente (React + Vite, Next.js, Angular, Vue, etc.) en un Diseño de Stitch, permitiendo iterar y mejorar el diseño dentro de la plataforma Stitch. Es útil cuando un desarrollador necesita migrar una aplicación web completa o componentes específicos a Stitch para continuar su desarrollo allí. La skill orquesta tres habilidades subyacentes: `extract-static-html` para obtener un archivo HTML autónomo desde el servidor de desarrollo o la compilación, `extract-design-md` para analizar el código fuente y generar un sistema de diseño en un archivo DESIGN.md, y `upload-to-stitch` junto con `manage-design-system` para subir tanto el HTML como el sistema de diseño al proyecto de Stitch. Funciona en plataformas como Vite, Angular CLI y otras herramientas de compilación frontend, y requiere un servidor de desarrollo local en funcionamiento o un directorio de aplicación compilada. La skill sigue un flujo de trabajo secuencial de 5 pasos, incluyendo verificación opcional por parte del usuario, y utiliza argumentos como `--generated-by` y `--title` para rastrear el origen y la ruta de la página.

Compatible con✓Claude Code~Codex CLI~Cursor

npx skills add https://github.com/aubarcito48/portfolio/tree/HEAD/.agents/skills/stitch-code-to-design

Documentación

Código a Diseño

Transforma tu código frontend existente (React + Vite, Next.js, Angular, Vue, etc.) en un Diseño de Stitch para que puedas iterar y mejorarlo usando Stitch.

Esta skill orquesta otras tres habilidades en secuencia:

extract-static-html: Extrae un único archivo HTML autónomo desde tu salida de compilación o servidor de desarrollo en ejecución (por ejemplo, servidor de desarrollo de Vite o ng serve de Angular CLI).
extract-design-md: Analiza el código fuente (incluyendo angular.json de Angular, plantillas .html externas, archivos de tema y componentes) para crear un sistema de diseño (DESIGN.md).
upload-to-stitch: Sube ese archivo HTML y el sistema de diseño a tu proyecto de Stitch.

Flujo de trabajo

Sigue estos pasos para convertir tu código existente.

Prerrequisitos

Un servidor de desarrollo local en ejecución (por ejemplo, npm run dev, ng serve) O un directorio de aplicación web compilada que contenga index.html y activos.
El projectId de destino de Stitch (usa list_projects si es desconocido).

Pasos

1. Extraer HTML Autónomo

Delega en la skill extract-static-html para generar un archivo HTML independiente. Lee skills/extract-static-html/SKILL.md para obtener instrucciones detalladas y el uso del script.

Salida esperada: Un archivo único como /ruta/a/extracted/standalone.html.

2. Verificar HTML (Opcional — Dirigido por el Usuario)

Después de la extracción, informa al usuario de la ruta del archivo de salida para que pueda verificar manualmente en un navegador si lo desea. No te detengas en la verificación — procede directamente al Paso 3.

Si el usuario informa problemas después de revisar, arréglalos antes de continuar.

3. Extraer Sistema de Diseño (Archivo)

Delega en la skill extract-design-md para analizar los archivos fuente del proyecto (componentes, hojas de estilo, configuraciones de tema) y producir un sistema de diseño. Lee skills/extract-design-md/SKILL.md para el flujo de trabajo completo de análisis.

Escribe .stitch/DESIGN.md siguiendo la estructura de salida de la skill extract-design-md.

4. Subir DESIGN.md y Crear Sistema de Diseño en Stitch

Delega en la skill manage-design-system para subir el DESIGN.md y crear el sistema de diseño en Stitch. Lee skills/manage-design-system/SKILL.md para el flujo de trabajo completo (uso del script de carga, llamada a create_design_system_from_design_md y esquemas requeridos). Pasa --generated-by 'stitch::code-to-design' al cargar.

5. Subir HTML a Stitch

Usa el mismo script de la skill upload-to-stitch para subir el archivo HTML extraído. Lee skills/upload-to-stitch/SKILL.md para obtener instrucciones detalladas y el uso del script.

Necesitarás:

La ruta al archivo HTML autónomo generado en el Paso 1.
Tu Clave API de Stitch (la misma clave usada en el Paso 4).
El projectId de destino.
El argumento --generated-by configurado como 'stitch::extract-static-html'.
El argumento --title configurado como la ruta de la página (por ejemplo, '/dashboard', '/settings/profile', '/inbox') para que el nombre/título de la pantalla en Stitch identifique claramente su ruta en la aplicación.