SkillProof tested Claude skills

HTMLHero

Przepływ pracy 'wyrównaj, a następnie zbuduj' dla uruchamialnych stron docelowych React/Vite hero

Autor: YiShu5 · YiShu5/claude-skills

Testowano · Działa ★ 8.8/10

HTMLHero — Przepływ pracy 'wyrównaj, a następnie zbuduj' dla uruchamialnych stron docelowych React/Vite hero

Co robi ten skill

Umiejętność workflow frontendowego, która przekształca prompt hero lub motyw marki w uruchamialny, możliwy do podglądu hero na pierwszej stronie, zbudowany za pomocą Vite, React, Tailwind i motion. Wymusza krok odczytu i wyrównania (emitując ustrukturyzowany blok 'części do zmiany' i czekając na potwierdzenie) przed napisaniem kodu, a następnie wymusza rzeczywiste media tła, responsywny układ i przejście weryfikacji kompilacji/podglądu. Uruchamia się na żądania wygenerowania lub zmiany stylu interaktywnej sekcji hero lub pierwszej strony docelowej.

Raport z testu

Uruchomiono ten sam brief ('hero dla Nimbus, API pogodowego') z umiejętnością i bez niej. Strona prowadzona przez umiejętność zawierała responsywny viewport, zapytanie mediów i płynny typ clamp(), prawdziwe animowane tło gradientowe, maszynę do pisania ograniczoną do H1 oraz interaktywne pigułki ze stanem aktywnym; bazowa wersja bez umiejętności była niereponsywną statyczną powłoką z dosłownym div-em zastępczym tła i pojedynczym przyciskiem. Katalog nosi nazwę HTMLHero.skill, więc instalacja kopiuje go do slug htmlhero-skill ze zmianą nazwy. Główna wieloetapowa bramka umiejętności 'wyrównaj i potwierdź przed kodowaniem' nie może być ćwiczona w jednym ujęciu, ale same jej reguły wykonania stworzyły materialnie bardziej kompletny hero.

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

Instalacja

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

Komendy i przykładowe prompty

  • /htmlhero-skillPrzepływ pracy 'wyrównaj, a następnie zbuduj' dla uruchamialnych stron docelowych React/Vite hero

Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):

  • 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

Pełny raport →