SkillProof tested Claude skills

HTMLHero

Align-then-build workflow voor uitvoerbare React/Vite hero landing pages

Door YiShu5 · YiShu5/claude-skills

Getest · Werkt ★ 8.8/10

HTMLHero — Align-then-build workflow voor uitvoerbare React/Vite hero landing pages

Wat het doet

Een frontend workflow skill die een hero prompt of brand theme omzet in een uitvoerbare, previewbare eerste-pagina hero gebouwd met Vite, React, Tailwind en motion. Het dwingt een read-and-align stap af (het uitzenden van een gestructureerd 'parts to change' block en wachten op bevestiging) voordat code wordt geschreven, en dwingt vervolgens echte achtergrondmedia, responsive layout en een build/preview verificatie pass af. Activeert op verzoeken om een interactieve hero sectie of landing first page te genereren of te restylen.

Testrapport

Voerde dezelfde opdracht uit ('hero for Nimbus, a weather API') met en zonder de skill. De door de skill geleide pagina leverde een responsive viewport, media query en fluid clamp() type, een echte geanimeerde gradiëntachtergrond, een typemachine beperkt tot de H1, en interactieve pills met een actieve status; de no-skill baseline was een niet-responsive statische shell met een letterlijke background-placeholder div en een enkele knop. Directory is genaamd HTMLHero.skill dus de installatie kopieert het naar de htmlhero-skill slug met een hernoeming. De headline multi-turn 'align and confirm before coding' gate van de skill kan niet in één keer worden uitgeoefend, maar de uitvoeringsregels alleen produceerden een materieel completere hero.

Getest op: 2026-07-24 · Claude Code 2.x (agent harness)

Installatie

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

Commando's en voorbeeldprompts

  • /htmlhero-skillAlign-then-build workflow voor uitvoerbare React/Vite hero landing pages

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

  • 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

Volledig rapport (Engels) →