HTMLHero
Juster-deretter-bygg arbeidsflyt for kjørbare React/Vite hero landingssider
Bestått
Hva den gjør
En frontend-arbeidsflytferdighet som gjør en hero-prompt eller et merketema om til en kjørbar, forhåndsvisbar førsteside-hero bygget med Vite, React, Tailwind og motion. Den tvinger frem et lese-og-justere-trinn (som utsteder en strukturert 'deler som skal endres'-blokk og venter på bekreftelse) før den skriver kode, og håndhever deretter ekte bakgrunnsmedier, responsiv layout, og et bygg-/forhåndsvisningsverifiseringspass. Utløses ved forespørsler om å generere eller restyle en interaktiv hero-seksjon eller landingsførsteside.
Testrapport
Kjørte samme brief ('hero for Nimbus, a weather API') med og uten ferdigheten. Den ferdighetsveiledede siden leverte en responsiv viewport, mediespørring og flytende clamp()-type, en ekte animert gradientbakgrunn, en skrivemaskin begrenset til H1, og interaktive piller med en aktiv tilstand; baseline uten ferdighet var et ikke-responsivt statisk skall med en bokstavelig bakgrunns-placeholder div og en enkelt knapp. Katalogen er navngitt HTMLHero.skill, så installasjonen kopierer den til htmlhero-skill-sluggen med et nytt navn. Ferdighetens overskrifts-multi-turn 'juster og bekreft før koding'-port kan ikke utøves i et enkelt skudd, men dens utførelsesregler alene produserte en vesentlig mer komplett hero.
Testet på: 2026-07-24 · Claude Code 2.x (agent harness)
Installer
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-skillJuster-deretter-bygg arbeidsflyt for kjørbare React/Vite hero landingssider
Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen aktiverer prompter som disse skillen (på engelsk):
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