SkillProof tested Claude skills

HTMLHero

Align-then-build-arbetsflöde för körbara React/Vite hero-landningssidor

av YiShu5 · YiShu5/claude-skills

Testad · Fungerar ★ 8.8/10

HTMLHero — Align-then-build-arbetsflöde för körbara React/Vite hero-landningssidor

Vad den gör

En frontend-arbetsflödesfärdighet som förvandlar en hero-prompt eller ett varumärkestema till en körbar, förhandsgranskningsbar första-sida hero byggd med Vite, React, Tailwind och motion. Den tvingar fram ett läs-och-justera-steg (som avger ett strukturerat 'delar att ändra'-block och väntar på bekräftelse) innan kod skrivs, och tvingar sedan fram verklig bakgrundsmedia, responsiv layout och ett bygg-/förhandsgranskningsverifieringspass. Utlöses vid förfrågningar om att generera eller omforma en interaktiv hero-sektion eller landningssida.

Testrapport

Körde samma brief ('hero for Nimbus, a weather API') med och utan färdigheten. Den färdighetsstyrda sidan levererade en responsiv viewport, media query och flytande clamp()-typ, en verklig animerad gradientbakgrund, en skrivmaskin begränsad till H1, och interaktiva piller med ett aktivt tillstånd; baslinjen utan färdighet var ett icke-responsivt statiskt skal med en bokstavlig bakgrundsplatshållare div och en enda knapp. Katalogen heter HTMLHero.skill så installationen kopierar den till htmlhero-skill-sluggen med ett namnbyte. Färdighetens rubrik 'align and confirm before coding' med flera turer kan inte utövas i ett engångsanrop, men dess exekveringsregler ensamma producerade en materiellt mer komplett hero.

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

Installation

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

Kommandon och exempelprompter

  • /htmlhero-skillAlign-then-build-arbetsflöde för körbara React/Vite hero-landningssidor

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

  • 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

Läs hela rapporten →