aubarcito48/portfolio

Converta código frontend (Vite, React, Angular, Vue, etc.) em um Design Stitch através do encadeamento de extração de HTML estático, extração de sistema de design e upload de arquivos. Use esta skill SEMPRE que a intenção do usuário for mover aplicações web existentes ou componentes React/Angular/Vue para o Stitch (ex.: solicitações para 'salvar', 'migrar' ou 'fazer upload').

O que é portfolio?

Esta skill automatiza a transformação de código frontend existente (como React + Vite, Next.js, Angular, Vue) em um Design Stitch, permitindo que você itere e melhore sua aplicação dentro do ecossistema Stitch. Ela orquestra três outras skills em sequência: `extract-static-html` para gerar um arquivo HTML autocontido a partir do build ou servidor de desenvolvimento, `extract-design-md` para analisar o código-fonte e extrair um sistema de design (DESIGN.md), e `upload-to-stitch` para fazer upload do HTML e do sistema de design para o projeto Stitch. O fluxo inclui etapas opcionais de verificação pelo usuário, garantindo que o HTML extraído possa ser revisado antes da continuação. Além disso, durante o upload, a skill usa argumentos como `--generated-by` e `--title` (definido como o caminho da rota, como '/dashboard') para identificar claramente a tela no Stitch. Essa abordagem garante que o sistema de design seja extraído e os ativos sejam vinculados corretamente, sendo essencial para operações de 'salvar', 'migrar' ou 'upload'.

Funciona com✓Claude Code~Codex CLI~Cursor

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

Documentação

Código para Design

Transforme seu código frontend existente (React + Vite, Next.js, Angular, Vue, etc.) em um Design Stitch para que você possa iterar e melhorá-lo usando o Stitch.

Esta skill orquestra três outras skills em sequência:

extract-static-html: Extrai um único arquivo HTML autocontido a partir do seu output de build ou servidor de desenvolvimento em execução (ex.: servidor de desenvolvimento Vite ou Angular CLI ng serve).
extract-design-md: Analisa o código-fonte (incluindo angular.json, modelos .html externos, arquivos de tema e componentes) para criar um sistema de design (DESIGN.md).
upload-to-stitch: Faz upload desse arquivo HTML e do sistema de design para seu projeto Stitch.

Fluxo de Trabalho

Siga estas etapas para converter seu código existente.

Pré-requisitos

Um servidor de desenvolvimento local em execução (ex.: npm run dev, ng serve) OU um diretório de aplicação web construída contendo index.html e ativos.
O projectId de destino do Stitch (use list_projects se desconhecido).

Etapas

1. Extrair HTML Autocontido

Delegue à skill extract-static-html para gerar um arquivo HTML independente. Leia skills/extract-static-html/SKILL.md para instruções detalhadas e uso do script.

Saída esperada: Um único arquivo como /path/to/extracted/standalone.html.

2. Verificar HTML (Opcional — Orientado pelo Usuário)

Após a extração, informe ao usuário o caminho do arquivo de saída para que ele possa verificar manualmente em um navegador, se desejar. Não bloqueie na verificação — prossiga diretamente para a Etapa 3.

Se o usuário relatar problemas após a revisão, corrija-os antes de continuar.

3. Extrair Sistema de Design (Arquivo)

Delegue à skill extract-design-md para analisar os arquivos de origem do projeto (componentes, folhas de estilo, configurações de tema) e produzir um sistema de design. Leia skills/extract-design-md/SKILL.md para o fluxo de trabalho completo de análise.

Escreva .stitch/DESIGN.md seguindo a estrutura de saída da skill extract-design-md.

4. Fazer Upload do DESIGN.md e Criar Sistema de Design no Stitch

Delegue à skill manage-design-system para fazer upload do DESIGN.md e criar o sistema de design no Stitch. Leia skills/manage-design-system/SKILL.md para o fluxo de trabalho completo (uso do script de upload, chamada create_design_system_from_design_md e esquemas necessários). Passe --generated-by 'stitch::code-to-design' ao fazer o upload.

5. Fazer Upload do HTML para o Stitch

Use o mesmo script da skill upload-to-stitch para fazer upload do arquivo HTML extraído. Leia skills/upload-to-stitch/SKILL.md para instruções detalhadas e uso do script.

Você precisará de:

O caminho para o arquivo HTML independente gerado na Etapa 1.
Sua chave de API Stitch (a mesma chave usada na Etapa 4).
O projectId de destino.
O argumento --generated-by definido como 'stitch::extract-static-html'.
O argumento --title definido como o caminho da rota da página (ex.: '/dashboard', '/settings/profile', '/inbox') para que o nome/título da tela no Stitch identifique claramente sua rota na aplicação.