jamesonedge/interactive-mockup

Mockup interativo

Explore alternativas reais, deixe o usuário escolher e faça a escolha funcionar no navegador — sem redesenhá-la silenciosamente.

Quando usar

• "Mock up", "protótipo", "mostre algumas direções", "torne isto clicável".
• Uma revisão de design produziu uma especificação e o usuário quer sentir como fica.
• Telas iniciais onde a arquitetura da informação ainda está em aberto.

Quando não usar

• Apenas crítica, sem construção — use um fluxo de revisão de design.
• Implementação de produção no framework real da aplicação.
• Uma única mudança de padding, cor ou texto.
• Qualquer coisa que precise de dados reais de usuário ou de produção. Protótipos usam apenas dados sintéticos.

Entradas

• A tarefa e restrições (plataforma, viewport, tokens se disponíveis).
• Dados sintéticos representativos. Rotule-os como sintéticos na interface. Nunca cole dados de produção ou pessoais.
• Opcional: uma revisão de design ou especificação a ser respeitada.
• Opcional: uma direção que o usuário já escolheu. Se for o caso, pule a divergência e vá direto para a etapa 3.

Fluxo de trabalho

1. Divergir: dois ou três resumos de direção

Escreva um resumo por direção usando templates/direction-brief.md. Todas as direções compartilham as mesmas restrições, dados e tarefa. Elas devem diferir em arquitetura da informação ou modelo de interação — por exemplo, lista-primeiro vs modo-foco vs quadro — não apenas no esquema de cores.

• Se seu runtime suporta workers genuinamente independentes (subagentes ou sessões separadas), gere as direções independentemente e informe isso.
• Caso contrário, gere-as serialmente e rotule-as: "Direções produzidas serialmente por um único agente."

Construa cada uma como um arquivo HTML estático e auto-contido a partir de templates/direction.html. Estático significa layout e estados representativos; interações ainda não são necessárias.

2. Comparar e deixar o usuário escolher

Crie uma página de comparação a partir de templates/comparison.html que vincule cada direção e apresente as compensações significativas (o que cada uma otimiza, o que sacrifica, para quem é adequada). Pare e peça ao usuário para escolher. Não construa a versão interativa antes da escolha, a menos que o usuário delegue explicitamente a decisão.

3. Enxerto estrito: construir o protótipo interativo

Siga references/graft-rules.md. Em resumo:

1. Leia o código HTML da direção escolhida.
2. Preserve sua estrutura de marcação, CSS e decisões visuais.
3. Namespace quaisquer novas classes ou IDs que possam colidir.
4. Adicione interações funcionais com JavaScript vanilla.
5. Registre cada mudança em um registro usando templates/change-ledger.md. Qualquer coisa que não seja uma adição pura precisa de uma justificativa.

Sem redesenho silencioso. Se a direção escolhida tiver uma falha, registre-a no registro e pergunte antes de alterá-la.

4. Verificação de qualidade

Verifique o protótipo segundo references/prototype-quality.md: offline, viewport meta, responsivo, teclado, foco visível, movimento reduzido, estados vazio/carregamento/erro, sem ações primárias mortas, dados sintéticos rotulados.

Padrões

• Um arquivo .html auto-contido por artefato: CSS e JS inline, sem CDN, sem fontes da web, sem imagens externas (use SVG inline ou CSS).
• Pilha de fontes do sistema.
• Funciona a partir de file:// sem servidor.
• Nunca publique, implante ou faça upload automaticamente.

Saídas

<output-dir>/
├── directions/
│   ├── a-<nome>.html
│   ├── b-<nome>.html
│   └── c-<nome>.html   (opcional)
├── comparison.html
├── prototype.html
└── change-ledger.md

Honestidade

Um protótipo demonstra interação e layout. Ele não é evidência de viabilidade nativa, desempenho, conformidade de acessibilidade ou prontidão para produção. Informe isso na entrega.

Aviso de licença

O aviso a seguir acompanha esta skill independente e seus arquivos de suporte.

MIT License

Copyright (c) 2026 jamesonedge

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.