HTMLHero
Pracovní postup zarovnání-a-sestavení pro spustitelné React/Vite hero landing stránky
Otestováno · Funguje
Co umí
Dovednost pro frontendový pracovní postup, která přemění hero prompt nebo téma značky na spustitelnou, náhledovou hero sekci první stránky postavenou s Vite, React, Tailwind a motion. Vynucuje krok čtení a zarovnání (vydání strukturovaného bloku 'parts to change' a čekání na potvrzení) před psaním kódu, poté vynucuje skutečná pozadí, responzivní rozvržení a průchod ověření sestavení/náhledu. Spouští se na požadavky na generování nebo restylování interaktivní hero sekce nebo první stránky landing page.
Testovací report
Spuštěn stejný brief ('hero for Nimbus, a weather API') s dovedností i bez ní. Stránka vedená dovedností dodala responzivní viewport, media query a fluidní typ clamp(), skutečné animované gradientní pozadí, psací stroj omezený na H1 a interaktivní pilulky s aktivním stavem; základní linie bez dovednosti byla nereagující statická skořápka s doslovným div s placeholderem pozadí a jedním tlačítkem. Adresář je pojmenován HTMLHero.skill, takže instalace jej zkopíruje na slug htmlhero-skill s přejmenováním. Hlavní vícekroková brána dovednosti 'align and confirm before coding' nemůže být cvičena jednorázově, ale její pravidla provedení sama o sobě vytvořila podstatně kompletnější hero.
Testováno: 2026-07-24 · Claude Code 2.x (agent harness)
Instalace
git clone https://github.com/YiShu5/claude-skills mkdir -p ~/.claude/skills cd claude-skills && cp -r "skills/HTMLHero.skill" ~/.claude/skills/htmlhero-skill
Příkazy a ukázkové prompty
/htmlhero-skillPracovní postup zarovnání-a-sestavení pro spustitelné React/Vite hero landing stránky
Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):
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