daaaayuuuu/vibe-frontend-handbook

O que vibe-frontend-handbook faz?

Skill do Codex: transforme PRDs de Agentes de IA em um ciclo fechado real de front-end com aceitação no navegador.

Visão Geral

Este skill capacita o Codex a pegar um PRD (Documento de Requisitos do Produto) gerado por um agente de IA e implementá-lo como um front-end funcional, executando testes de aceitação no navegador para garantir a fidelidade visual.

Funcionalidades

• Leitura de PRD: Extrai requisitos de um arquivo de PRD (ex.: prd.md).
• Geração de Código: Cria arquivos HTML, CSS e JavaScript incrementalmente.
• Live Server: Inicia um servidor local com hot-reload para visualização em tempo real.
• Testes no Navegador: Executa verificações visuais (ex.: capturas de tela ou testes unitários) para validar a implementação.
• Relatório de Aceitação: Gera um resumo comparando o PRD com a saída real.

Pré-requisitos

• Node.js e npm instalados.
• Codex configurado com acesso ao terminal.
• Um arquivo PRD no formato Markdown.

Como Usar

1. Coloque o PRD no diretório de trabalho (ex.: ./prd.md).
2. Execute o skill com o comando: codex --skill daaaayuuuu/vibe-frontend-handbook.
3. O Codex lerá o PRD, gerará os arquivos de front-end e iniciará o servidor.
4. Acesse o navegador em http://localhost:3000 para ver o resultado.
5. O skill executará os testes automaticamente e exibirá o relatório.

Estrutura do Projeto

.
├── prd.md              # Documento de requisitos do produto
├── src/
│   ├── index.html      # Página principal
│   ├── style.css       # Estilos
│   └── app.js          # Lógica da aplicação
├── tests/
│   └── acceptance.js   # Testes de aceitação
└── package.json        # Dependências (live-server, jest)

Exemplo de Saída

✅ PRD lido: prd.md
✅ Código gerado em src/
✅ Servidor iniciado em http://localhost:3000
✅ Testes passaram: 5/5
✅ Aceitação visual concluída

Notas

• O skill assume que o PRD segue um formato padrão com seções como "Requisitos", "Componentes de UI" e "Critérios de Aceitação".
• Para melhores resultados, inclua mocks de dados ou APIs dummy no PRD.
• Esse skill é compatível com Codex (OpenAI) e outros agentes que suportem a execução de comandos shell interativos.