SkillProof tested Claude skills

HTMLHero

Workflow allinea-poi-costruisci per pagine di atterraggio hero eseguibili con React/Vite

di YiShu5 · YiShu5/claude-skills

Promosso ★ 8.8/10

HTMLHero — Workflow allinea-poi-costruisci per pagine di atterraggio hero eseguibili con React/Vite

Cosa fa

Una skill di workflow frontend che trasforma un prompt hero o un tema di brand in un hero di prima pagina eseguibile e visualizzabile in anteprima, costruito con Vite, React, Tailwind e motion. Forza un passaggio di lettura e allineamento (emettendo un blocco strutturato 'parts to change' e attendendo conferma) prima di scrivere codice, quindi impone media di sfondo reali, layout responsivo e un passaggio di verifica build/preview. Si attiva su richieste di generare o ridisegnare una sezione hero interattiva o la prima pagina di atterraggio.

Rapporto di test

Eseguito lo stesso brief ('hero for Nimbus, a weather API') con e senza la skill. La pagina guidata dalla skill ha fornito un viewport responsivo, media query e tipo clamp() fluido, uno sfondo gradiente animato reale, una macchina da scrivere limitata all'H1 e pillole interattive con uno stato attivo; la baseline senza skill era una shell statica non responsiva con un div background-placeholder letterale e un singolo pulsante. La directory è denominata HTMLHero.skill quindi l'installazione la copia nello slug htmlhero-skill con un rinomina. Il gate 'align and confirm before coding' multi-turno della skill non può essere esercitato in un'unica esecuzione, ma le sue regole di esecuzione da sole hanno prodotto un hero materialmente più completo.

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

Installazione

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

Comandi e prompt di esempio

  • /htmlhero-skillWorkflow allinea-poi-costruisci per pagine di atterraggio hero eseguibili con React/Vite

Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):

  • 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

Rapporto completo →