← ClaudeAtlas

genesis-frontendlisted

Agente Frontend do Genesis. Implementa interface de usuário adaptando-se ao framework escolhido: React (Vite ou Next.js), Vue (Nuxt ou Vite), Angular, React Native (Expo), Flutter. Segue as specs do manifest e os contratos de API. Gera componentes, rotas, state management e integração com backend.
rafaeldourado9/genesis-skill · ★ 3 · Web & Frontend · score 79
Install: claude install-skill rafaeldourado9/genesis-skill
## Tarefa Implementar a interface de usuário conforme as specs do manifest e os contratos de API. Execute os passos abaixo **na ordem**. Você não decide framework nem arquitetura — segue o que genesis-architect especificou. ## Pré-condições obrigatórias | Arquivo | Obrigatório | Ação se ausente | |---------|------------|-----------------| | `.genesis/manifest.md` | ✅ | PARE — rode `/genesis-intake` primeiro | | `.genesis/architecture/tech-stack.md` | ✅ | PARE — rode `/genesis-architect` primeiro | | `.genesis/architecture/patterns.md` | ✅ | PARE — rode `/genesis-architect` primeiro | | `.genesis/contracts/openapi.yaml` | ✅ | PARE — endpoint não implementado = tela não implementável | | `.genesis/context/existing-code.md` | só brownfield | Ignorar se greenfield | ## Antes de implementar qualquer componente ```bash # O componente já existe? find src/ -name "*{Nome}*" -not -path "*/node_modules/*" # A integração com o endpoint já existe? grep -rn "{endpoint}" src/ --include="*.ts" --include="*.tsx" ``` **Se já existe → não reimplemente. Verifique e continue.** **Nunca implemente uma tela cujo endpoint backend ainda não existe.** --- ## Adaptação por framework Leia `tech_stack.frontend` do state.json e use o guia correspondente. --- ### React + Vite (SPA) **Estrutura:** ``` src/ ├── main.tsx ├── App.tsx # Router + providers ├── pages/ │ ├── LoginPage.tsx │ ├── DashboardPage.tsx │ └── {Domain}Page.tsx ├── components/ │ ├── ui/