skill

web-interactiva-skill

Skill para Claude Code que sirve para diseñar páginas web interactivas (scrollytelling, parallax, flipbook, multi-idioma). Elaborado en Bolivia 🇧🇴 por Henrry Ivan Surco.

hsurcoa/web-interactiva-skillcommunitylistedunreviewed

Use skill

Set up

Skills are installed by placing their folder where your agent loads skills.

Download ZIP from GitHub Open the repository

The download comes from github.com/hsurcoa/web-interactiva-skill itself, not from our server, so what you get is exactly what its author published.

Install instructions come from the README

Skills do not use an MCP config. Follow the steps in the README below.

README

synced Oct 22, 2026

Web Interactiva: skill para Claude Code

Elaborado en Bolivia 🇧🇴 por Henrry Ivan Surco.

Un skill para Claude Code que sirve para diseñar y construir páginas web interactivas tipo relato: el visitante no solo lee la página, la recorre. Cada capítulo tiene su propia interacción.

Nació de Castañal, una landing sobre el castañal amazónico de Pando, Bolivia, hecha como ejercicio del diplomado. Sus efectos se convirtieron en patrones reutilizables.

Qué sabe hacer

Patrón	Qué hace
Portada con slider	Fotos a pantalla completa con zoom lento (Ken Burns), puntos y botón de pausa
Parallax	Bandas de foto con profundidad entre capítulos
Scrollytelling	Una imagen fija que hace zoom y abre "lupas" mientras se leen los pasos
Escena sticky	Video que avanza con el scroll, cámara que se acerca a una foto, noche con linterna que sigue al mouse
Objeto interactivo	Algo que se agrieta y se rompe al tocarlo, con piezas que caen con física
Flipbook	Cuaderno con páginas que se pasan, índice y pantalla completa
Multi-idioma	Selector ES / PT / EN sin librerías, con fundido suave
Sonido ambiente	Audio de fondo que respeta las reglas de autoplay del navegador
Calendario y formulario	Selector de meses con datos y formulario con validación

Reglas que sigue siempre: HTML, CSS y JavaScript puros (sin frameworks ni build), accesible, adaptable al celular y con una versión quieta para quien prefiere menos movimiento (prefers-reduced-motion).

Instalación

Opción A: como plugin (recomendada, recibe actualizaciones)

Dentro de Claude Code:

/plugin marketplace add hsurcoa/web-interactiva-skill
/plugin install web-interactiva@web-interactiva-skill

Reinicia Claude Code.

Opción B: copia manual

git clone https://github.com/hsurcoa/web-interactiva-skill.git

Copia la carpeta skills/web-interactiva a tu carpeta de skills personales:

Windows: C:\Users\TU-USUARIO\.claude\skills\
macOS / Linux: ~/.claude/skills/

# Windows (PowerShell)
Copy-Item -Recurse web-interactiva-skill\skills\web-interactiva $HOME\.claude\skills\

# macOS / Linux
cp -r web-interactiva-skill/skills/web-interactiva ~/.claude/skills/

Uso

Abre Claude Code en una carpeta vacía y pide algo como:

Hazme una web interactiva sobre el lago Titicaca, con 4 capítulos y un formulario de reservas.

Claude activa el skill solo. También puedes llamarlo directamente:

Instalado como plugin: /web-interactiva:web-interactiva
Instalado a mano: /web-interactiva

Claude te preguntará el tema, el tono y los capítulos. Después copiará la plantilla, elegirá un efecto para cada capítulo y revisará el resultado en escritorio, en el celular y con movimiento reducido.

Contenido

skills/web-interactiva/
├── SKILL.md       reglas y proceso de trabajo
├── patrones/      un archivo por efecto, con código y errores a evitar
├── plantilla/     esqueleto listo: header, portada, capítulos, parallax, pie
└── extras/        i18n.js y ambiente.js listos para copiar

Autor

Henrry Ivan Surco, Bolivia. GitHub: @hsurcoa

Si lo usas en un proyecto, me encantaría verlo: abre un issue con el enlace.

Licencia

MIT: puedes usarlo, modificarlo y compartirlo, manteniendo el aviso de autoría.