Skip to main content

prototype

Construa um protótipo descartável para responder a uma dúvida de design. Use quando o usuário quiser verificar se um modelo de estado ou lógica faz sentido, ou explorar como uma interface deve parecer.

Source facts

Repository
matheusdmlopes/skills-ptbr
Last source activity
August 15, 2026 at 20:56
Detected SKILL.md language
Portuguese
Stars
0
Forks
0

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

File Explorer
4 files

Showing SKILL.md

SKILL.md
Source instructions · Read-only preview
name
prototype
description
Construa um protótipo descartável para responder a uma dúvida de design. Use quando o usuário quiser verificar se um modelo de estado ou lógica faz sentido, ou explorar como uma interface deve parecer.
# Protótipo Um protótipo é **código descartável que responde a uma dúvida**. A dúvida decide o formato. ## Escolha um caminho Identifique qual dúvida está sendo respondida — a partir do prompt do usuário, do código ao redor ou perguntando se o usuário estiver por perto: - **"Essa lógica / modelo de estado faz sentido?"** → [LOGIC.md](LOGIC.md). Construa um único arquivo HTML compartilhável — botões de uso livre mais tutoriais guiados em abas — que conduza a máquina de estados por casos difíceis de avaliar no papel e que uma pessoa não desenvolvedora possa operar. - **"Como isso deve parecer?"** → [UI.md](UI.md). Gere várias variações visuais radicalmente diferentes em uma única rota, alternáveis via parâmetro de busca na URL (search param) e uma barra inferior flutuante. Os dois caminhos produzem artefatos muito diferentes — errar nisso desperdiça o protótipo inteiro. Se a dúvida for genuinamente ambígua e o usuário não estiver acessível, adote por padrão o caminho que melhor corresponder ao código ao redor (um módulo de backend → lógica; uma página ou componente → interface) e declare essa premissa no topo do protótipo. ## Regras que se aplicam a ambos 1. **Descartável desde o primeiro dia, e claramente demarcado como tal.** Posicione o código do protótipo próximo de onde ele realmente será usado (ao lado do módulo ou da página para a qual está sendo prototipado) para que o contexto fique óbvio — mas nomeie-o de modo que um leitor casual veja que é um protótipo, não código de produção. Para rotas de interface descartáveis, siga a convenção de rotas que o projeto já utiliza; não invente uma nova estrutura no nível raiz. 2. **Trivial de executar.** Um protótipo de interface inicia a partir de um único comando no executor de tarefas do projeto — `pnpm <nome>`, `python <caminho>`, `bun <caminho>`, etc. Uma demonstração de lógica é um único arquivo HTML no qual o usuário clica duas vezes. De qualquer forma, não deve exigir esforço mental para iniciar. 3. **Sem persistência por padrão.** O estado vive na memória. A persistência é aquilo que o protótipo está _testando_, não algo de que ele deva depender. Se a dúvida envolver explicitamente um banco de dados, utilize um banco temporário ou um arquivo local com um nome claro como "PROTOTYPE — wipe me". 4. **Ignore o polimento.** Sem testes, sem tratamento de erros além do estritamente necessário para tornar o protótipo _executável_, sem abstrações. O objetivo é aprender algo rápido. 5. **Exponha o estado.** Após cada ação (lógica) ou a cada troca de variante (interface), imprima ou renderize todo o estado relevante para que o usuário possa ver o que mudou. 6. **Capture ao terminar.** Incorpore qualquer decisão validada ao código real, depois capture o próprio protótipo como uma **fonte primária**: faça commit dele em uma branch descartável, fora da main, e deixe um ponteiro de contexto para essa branch na issue de implementação. Capture também a resposta — o veredito e a dúvida que ele resolveu — na issue ou em um commit. A branch main mantém apenas a decisão validada.
View on GitHub