Sumonta056/claude-storehouse

Actualizar el sitio web, la demo y el README

El sitio web está en site/. .github/workflows/pages.yml lo despliega a https://sumonta056.github.io/claude-storehouse/ tras pasar CI en main.

La demo en vivo es el código real de public/. site/build.js copia public/ en _site/demo/, agrega site/demo/demo-api.js antes de app.js, y escribe demo-data.json. Para crear ese archivo, el build crea la carpeta de inicio falsa desde scripts/demo-home.js, inicia el servidor real sobre ella y registra cada respuesta GET. Las rutas de inicio se convierten en /Users/demo.

Por lo tanto, un cambio de UI se muestra en la demo sin trabajo adicional. Esta habilidad cubre lo que no se actualiza solo: datos de muestra, rutas de escritura simuladas, capturas de pantalla y texto.

Planifica las ediciones y obtén aprobación antes de modificar archivos. Pregunta antes de hacer commit.

1. Encontrar qué cambió

• git log --oneline <último commit del sitio o README>..HEAD y CHANGELOG.md → lista de [Unreleased] cambios visibles.
• git diff <ese commit>..HEAD -- .claude/rules/business-logic.md .claude/rules/ui.md public/ muestra el nuevo comportamiento.
• Ignora pruebas, refactorizaciones y CI. El sitio y el README describen lo que ve un usuario.

2. Mapear cada cambio en los lugares donde se muestra

Área cambiada	Sitio web (site/index.html)	Captura	Sección del README.md
Dashboard, banda de uso	feature "Dashboard y uso"	dashboard.png	Características › Dashboard y uso
Skills, agentes, fork	feature "Skills y agentes"	skills.png	Características › Skills y agentes
Favoritos, categorías	feature "Favoritos"	favorites.png	Características › Favoritos
Plugins, mods, desinstalar	feature "Plugins y mods"	plugins.png	Características › Plugins y mods
Hooks, servidores MCP	feature "Hooks y servidores MCP"	mcp.png	Características › Hooks y servidores MCP
Cajón, editor, actividad, respaldos	feature "Editar en el lugar, deshacer cualquier cosa"	editor.png	Características › Editar en el lugar
Un mecanismo de interruptor	sección "Cómo funciona encendido/apagado" filas	—	Tabla de encendido/apagado
Nueva página	nuevo bloque .feature (alternativa flip), pestaña demo en .demo-tabs, nombre en PAGE_NAMES en site/site.js	nueva <página>.png	nueva subsección de Características
Flag de CLI	panel "Opciones de CLI"	—	Opciones de CLI
Atajo de teclado	tabla "Atajos de teclado"	—	Atajos de teclado
Regla de seguridad	panel "Seguridad y privacidad"	—	Seguridad y privacidad
Estructura de archivos	—	—	Árbol de cómo funciona
Versión	JSON-LD softwareVersion en <head>	—	Changelog (gestionado por /release-tag)

Los chips "Cosas para probar" en #demo deben nombrar elementos que existan en los datos de la demo.

3. Darle a la demo lo que necesita

• Datos de muestra. Una funcionalidad que necesita datos (un nuevo tipo de elemento, un mod, un hook estacionado) los obtiene en scripts/demo-home.js. Las capturas de pantalla usan los mismos datos. Nunca pongas cadenas que parezcan claves o tokens: un hook de seguridad bloquea la escritura.
• Nueva ruta GET. Si public/app.js llama a un nuevo GET /api/..., regístralo en record() en site/build.js y sírvelo en route() en site/demo/demo-api.js.
• Nueva ruta de escritura. Agrega un caso a route() que cambie db en memoria de la misma manera que el servidor cambia los archivos, y devuelve la misma forma JSON que el manejador en src/api*.js. Agrega una función undo a la entrada de actividad si la real puede deshacer. Una escritura que no puede funcionar en un navegador (abrir en editor, desinstalar, eliminar) cae en el caso default, que devuelve 501 con un mensaje "no disponible en la demo en vivo". La UI entonces muestra ese mensaje como un toast.
• Forma de respuesta cambiada. Actualiza la función correspondiente en demo-api.js. test/site.test.js verifica el build, no cada ruta, así que prueba la ruta en Chrome (paso 4).

4. Construir y revisar

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

Usa Chrome DevTools MCP. Abre tu propia pestaña y ciérrala al final.

1. Abre http://127.0.0.1:8811/demo/#<página> para cada página cambiada. La consola no tiene errores.
2. Usa la nueva funcionalidad haciendo clics. Cada escritura muestra un toast, la página se actualiza y Actividad lo lista con Deshacer donde la app real tiene Deshacer.
3. Abre http://127.0.0.1:8811/. Las pestañas de demo cambian de página, Restablecer demo recarga, y cada enlace "Pruébalo en la demo" abre la página correcta.

5. Recapturar las capturas de pantalla que cambiaron

Nunca captures la pantalla del ~/.claude real. Toma cada toma desde la demo a 1440 × 900, escala 2. El resultado es 2880 × 1800, el tamaño que declaran las etiquetas <img>.

Para una página sin clics, usa Chrome sin cabeza. Usa una nueva carpeta de perfil para cada toma:

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/<nombre>.png" "http://127.0.0.1:8811/demo/#<página>"

Para un estado que necesita clics (un cajón, una pestaña de edición, un interruptor), usa la pestaña MCP: emulate con viewport 1440x900x2, maneja el estado con evaluate_script, luego take_screenshot con filePath = docs/images/<nombre>.png. No uses resize_page: da 1612 px de altura.

Lee cada nueva imagen. Muestra la funcionalidad, no tiene marcas de hover ni anillos de foco por casualidad, y no tiene partes medio cargadas. docs/images/icon.png es el renderizado de 256 px de public/icon.svg. Vuelve a crearlo solo cuando el icono cambie.

6. Escribir el texto

• El sitio y el README usan las mismas palabras para lo mismo. Oraciones en minúscula, verbos simples, oraciones cortas.
• Cada bloque de funcionalidad en el sitio: 1 <h3>, 1 o 2 oraciones, como máximo 4 elementos de lista, 1 enlace "Pruébalo en la demo →" con data-demo="<página>".
• README: agrega la funcionalidad a su subsección de Características, como máximo 5 viñetas. Una subsección con una captura de pantalla la coloca después de las viñetas. No edites la sección Changelog. /release-tag la gestiona.
• Cada imagen del README y enlace del repositorio es una URL absoluta (https://raw.githubusercontent.com/Sumonta056/claude-storehouse/main/... o https://github.com/Sumonta056/claude-storehouse/blob/main/...). npm no resuelve rutas relativas.
• Las nuevas capturas de pantalla obtienen un texto alt real que dice lo que muestra la imagen.
• Si la funcionalidad cambia lo que es el producto, actualiza <meta name="description">, og:description, twitter:description y la description JSON-LD en site/index.html.
• Verifica cada afirmación contra el código y .claude/rules/business-logic.md. Nunca listes una funcionalidad eliminada.

7. Verificar

1. npm run format, luego npm run check. Muestra la salida.
2. npm run site tiene éxito. test/site.test.js es parte de npm test.
3. Abre el sitio a 1440 px y a 390 px: sin desplazamiento lateral, cada imagen carga, la consola no tiene errores.
4. Publica la página de demo cambiada o el sitio como un enlace de Artifact para el usuario, y di qué capturas de pantalla cambiaron y qué no pudiste verificar.

Pregunta antes de hacer commit. Usa docs(site): ... para texto y capturas de pantalla, feat(site): ... para nuevo comportamiento del sitio o demo, y docs(readme): ... para cambios solo del README.