HTMLHero

Align-then-build workflow for kørbare React/Vite hero landing pages

Testet · Virker ★ 8.8/10

Hvad det gør

En frontend workflow-skill, der omdanner en hero-prompt eller et brand-tema til en kørbar, forhåndsvisningsbar førstesides-hero bygget med Vite, React, Tailwind og motion. Den tvinger et læse-og-align-trin (udsender en struktureret 'parts to change'-blok og venter på bekræftelse), før den skriver kode, og håndhæver derefter ægte baggrundsmedier, responsivt layout og et build/preview-verifikationstrin. Udløses ved anmodninger om at generere eller restyle en interaktiv hero-sektion eller landingsførsteside.

Testrapport

Kørte den samme brief ('hero for Nimbus, a weather API') med og uden skillen. Den skill-guidede side leverede en responsiv viewport, media query og flydende clamp()-type, en ægte animeret gradientbaggrund, en skrivemaskine begrænset til H1, og interaktive piller med en aktiv tilstand; no-skill baseline var en ikke-responsiv statisk skal med en bogstavelig background-placeholder div og en enkelt knap. Mappen er navngivet HTMLHero.skill, så installationen kopierer den til htmlhero-skill slug'en med et omdøbning. Skillens overskrifts-multi-turn 'align and confirm before coding'-gate kan ikke udøves i et enkelt skud, men dens eksekveringsregler alene producerede en materielt mere komplet hero.

Testet: 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

Kommandoer og eksempelprompter

/htmlhero-skillAlign-then-build workflow for kørbare React/Vite hero landing pages

Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):

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 hele rapporten →