SkillProof tested Claude skills

HTMLHero

Flujo de trabajo de alinear-luego-construir para páginas de aterrizaje heroicas ejecutables con React/Vite

Por YiShu5 · YiShu5/claude-skills

Probado · Funciona ★ 8.8/10

HTMLHero — Flujo de trabajo de alinear-luego-construir para páginas de aterrizaje heroicas ejecutables con React/Vite

Qué hace

Una habilidad de flujo de trabajo frontend que convierte un prompt heroico o tema de marca en una primera página heroica ejecutable y previsualizable construida con Vite, React, Tailwind y motion. Fuerza un paso de lectura y alineación (emitiendo un bloque estructurado de 'partes a cambiar' y esperando confirmación) antes de escribir código, luego impone medios de fondo reales, diseño responsivo y un pase de verificación de construcción/vista previa. Se activa en solicitudes para generar o rediseñar una sección heroica interactiva o la primera página de aterrizaje.

Informe de la prueba

Se ejecutó el mismo briefing ('hero for Nimbus, a weather API') con y sin la habilidad. La página guiada por la habilidad entregó un viewport responsivo, media query y tipo clamp() fluido, un fondo de gradiente animado real, una máquina de escribir restringida al H1, y píldoras interactivas con un estado activo; la línea base sin habilidad era un shell estático no responsivo con un div literal de marcador de posición de fondo y un solo botón. El directorio se llama HTMLHero.skill, por lo que la instalación lo copia al slug htmlhero-skill con un cambio de nombre. La puerta principal de la habilidad de múltiples turnos 'align and confirm before coding' no se puede ejercitar en una sola toma, pero sus reglas de ejecución por sí solas produjeron un hero materialmente más completo.

Probado el: 2026-07-24 · Claude Code 2.x (agent harness)

Instalación

git clone https://github.com/YiShu5/claude-skills
mkdir -p ~/.claude/skills
cd claude-skills && cp -r "skills/HTMLHero.skill" ~/.claude/skills/htmlhero-skill

Comandos y prompts de ejemplo

  • /htmlhero-skillFlujo de trabajo de alinear-luego-construir para páginas de aterrizaje heroicas ejecutables con React/Vite

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

  • Build a hero landing page in React and Tailwind from this brand
  • Restyle my hero section with Vite, React, and motion animations
  • Generate a previewable first-page hero for our SaaS site

Informe completo →