HTMLHero
Ausrichten-dann-Bauen-Workflow für ausführbare React/Vite Hero-Landingpages
Getestet · Funktioniert
Was es kann
Eine frontend workflow skill that turns a hero prompt or brand theme into a runnable, previewable first-page hero built with Vite, React, Tailwind und motion. It forces a read-and-align step (emitting a structured 'parts to change' block und waiting for confirmation) before writing code, then enforces real background media, responsive layout, und a build/preview verification pass. Wird ausgelöst bei requests to generate or restyle an interactive hero section or landing first page.
Testbericht
Dieselbe brief ('hero for Nimbus, a weather API') wurde mit und ohne die skill ausgeführt. The skill-guided page shipped a responsive viewport, media query und fluid clamp() type, a real animated gradient background, a typewriter restricted to the H1, und interactive pills with an active state; the no-skill baseline was a non-responsive static shell with a literal background-placeholder div und a single button. Directory is named HTMLHero.skill so the install copies it to the htmlhero-skill slug with a rename. The skill's headline multi-turn 'align and confirm before coding' gate can't be exercised in a one-shot, but its execution rules alone produced a materially more complete hero.
Getestet am: 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
Befehle & Beispiel-Prompts
/htmlhero-skillAusrichten-dann-Bauen-Workflow für ausführbare React/Vite Hero-Landingpages
Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):
Build a hero landing page in React and Tailwind from this brandRestyle my hero section with Vite, React, and motion animationsGenerate a previewable first-page hero for our SaaS site