Sumonta056/claude-storehouse

Atualizar o site, a demonstração (demo) e o README

O site está em site/. .github/workflows/pages.yml o publica em https://sumonta056.github.io/claude-storehouse/ após o CI passar em main.

A demonstração ao vivo (live demo) é o código real de public/. site/build.js copia public/ para _site/demo/, adiciona site/demo/demo-api.js antes de app.js e escreve demo-data.json. Para criar esse arquivo, o build gera uma home falsa a partir de scripts/demo-home.js, inicia o servidor real com ela e grava cada resposta GET. Os caminhos de home se tornam /Users/demo.

Assim, uma mudança na IU (interface do usuário) aparece na demonstração sem trabalho extra. Este skill cobre o que não se atualiza por conta própria: dados de exemplo, rotas de escrita falsas, capturas de tela e texto.

Planeje as edições e obtenha aprovação antes de alterar arquivos. Pergunte antes de commitar.

1. Encontre o que mudou

• git log --oneline <último commit do site ou README>..HEAD e CHANGELOG.md → lista [Unreleased] as mudanças visíveis ao usuário.
• git diff <aquele commit>..HEAD -- .claude/rules/business-logic.md .claude/rules/ui.md public/ mostra o novo comportamento.
• Ignore testes, refatorações e CI. O site e o README descrevem o que o usuário vê.

2. Mapeie cada mudança para os lugares onde aparece

Área alterada	Website (site/index.html)	Captura de tela	Seção do README.md
Dashboard, faixa de uso	funcionalidade "Dashboard and usage"	dashboard.png	Features › Dashboard and usage
Skills, agents, fork	funcionalidade "Skills and agents"	skills.png	Features › Skills and agents
Favoritos, categorias	funcionalidade "Favorites"	favorites.png	Features › Favorites
Plugins, mods, desinstalação	funcionalidade "Plugins and mods"	plugins.png	Features › Plugins and mods
Hooks, servidores MCP	funcionalidade "Hooks and MCP servers"	mcp.png	Features › Hooks and MCP servers
Gaveta, editor, atividade, backups	funcionalidade "Edit in place, undo anything"	editor.png	Features › Edit in place
Um mecanismo de chave	seção "How on / off works" linhas	—	Tabela How on/off works
Nova página	novo bloco .feature (alternado com flip), aba de demonstração em .demo-tabs, nome em PAGE_NAMES em site/site.js	nova <pagina>.png	nova subseção de Features
Flag de CLI	painel "CLI options"	—	CLI options
Atalho de teclado	tabela "Keyboard shortcuts"	—	Keyboard shortcuts
Regra de segurança	painel "Safety and privacy"	—	Safety and privacy
Estrutura de arquivos	—	—	Árvore How it works
Versão	JSON-LD softwareVersion em <head>	—	Changelog (propriedade de /release-tag)

Os chips "Things to try" em #demo devem nomear itens que existem nos dados da demonstração.

3. Dê à demonstração o que ela precisa

• Dados de exemplo. Uma funcionalidade que precisa de dados (um novo tipo de item, um mod, um hook estacionado) recebe-os em scripts/demo-home.js. As capturas de tela usam os mesmos dados. Nunca coloque strings que pareçam chaves ou tokens: um hook de segurança bloqueia a escrita.
• Nova rota GET. Se public/app.js chama uma nova GET /api/..., registre-a em record() em site/build.js e sirva-a em route() em site/demo/demo-api.js.
• Nova rota de escrita. Adicione um caso a route() que altere db em memória da mesma forma que o servidor altera os arquivos, e retorne a mesma estrutura JSON que o handler em src/api*.js. Adicione uma função undo à entrada de atividade se a real puder desfazer. Uma escrita que não pode funcionar em um navegador (abrir no editor, desinstalar, excluir) recai no caso default, que retorna 501 com uma mensagem "not available in the live demo". A interface então mostra essa mensagem como um toast.
• Formato de resposta alterado. Atualize a função correspondente em demo-api.js. test/site.test.js verifica o build, não cada rota, portanto teste a rota no Chrome (passo 4).

4. Construa e inspecione

npm run site
python3 -I -m http.server 8811 --bind 127.0.0.1 -d _site

Use o Chrome DevTools MCP. Abra sua própria aba e feche-a no final.

1. Abra http://127.0.0.1:8811/demo/#<pagina> para cada página alterada. O console não tem erros.
2. Use a nova funcionalidade com cliques. Cada escrita mostra um toast, a página é atualizada e a Activity lista com Undo onde o aplicativo real tem Undo.
3. Abra http://127.0.0.1:8811/. As abas de demonstração mudam de página, Reset demo recarrega e cada link "Try it in the demo" abre a página correta.

5. Recapture as capturas de tela que mudaram

Nunca capture a tela do ~/.claude real. Tire cada foto da demonstração a 1440 × 900, escala 2. O resultado é 2880 × 1800, o tamanho que as tags <img> declaram.

Para uma página sem cliques, use Chrome headless. Use um novo perfil para cada foto:

P=$(mktemp -d <scratchpad>/chrome.XXXXXX)
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless=new --disable-gpu --user-data-dir="$P" \
  --hide-scrollbars --force-device-scale-factor=2 --window-size=1440,900 --virtual-time-budget=4000 \
  --screenshot="$PWD/docs/images/<nome>.png" "http://127.0.0.1:8811/demo/#<pagina>"

Para um estado que precisa de cliques (uma gaveta, uma aba Edit, um toggle), use a aba MCP: emulate com viewport 1440x900x2, conduza o estado com evaluate_script, depois take_screenshot com filePath = docs/images/<nome>.png. Não use resize_page: ele dá altura de 1612 px.

Leia cada nova imagem. Ela mostra a funcionalidade, não tem marcas de hover ou anéis de foco por acaso, e não tem partes meio carregadas. docs/images/icon.png é a renderização de 256 px de public/icon.svg. Recrie-o apenas quando o ícone mudar.

6. Escreva o texto

• O site e o README usam as mesmas palavras para a mesma coisa. Caso de frase (Sentence case), verbos simples, frases curtas.
• Cada bloco de funcionalidade no site: 1 <h3>, 1 ou 2 frases, no máximo 4 itens de lista, 1 link "Try it in the demo →" com data-demo="<pagina>".
• README: adicione a funcionalidade à sua subseção de Features, no máximo 5 bullets. Uma subseção com captura de tela a coloca após os bullets. Não edite a seção Changelog. /release-tag é o proprietário dela.
• Toda imagem do README e link do repositório é URL absoluta (https://raw.githubusercontent.com/Sumonta056/claude-storehouse/main/... ou https://github.com/Sumonta056/claude-storehouse/blob/main/...). npm não resolve caminhos relativos.
• Novas capturas de tela recebem um texto alt real que diz o que a imagem mostra.
• Se a funcionalidade muda o que o produto é, atualize <meta name="description">, og:description, twitter:description e a description do JSON-LD em site/index.html.
• Verifique cada afirmação contra o código e .claude/rules/business-logic.md. Nunca liste uma funcionalidade removida.

7. Verifique

1. npm run format, depois npm run check. Mostre a saída.
2. npm run site é bem-sucedido. test/site.test.js faz parte de npm test.
3. Abra o site a 1440 px e a 390 px: sem rolagem lateral, todas as imagens carregam, o console não tem erros.
4. Publique a página de demonstração alterada ou o site como um link de Artefato para o usuário, e diga quais capturas de tela mudaram e o que você não pôde verificar.

Pergunte antes de commitar. Use docs(site): ... para texto e capturas de tela, feat(site): ... para novo comportamento do site ou demonstração, e docs(readme): ... para alterações apenas no README.