SkillProof tested Claude skills

HTMLHero

Workflow aligner-puis-construire pour des pages d'atterrissage hero React/Vite exécutables.

par YiShu5 · YiShu5/claude-skills

Testé · Fonctionne ★ 8.8/10

HTMLHero — Workflow aligner-puis-construire pour des pages d'atterrissage hero React/Vite exécutables.

Ce que fait

Une compétence de workflow frontend qui transforme une invite de héros ou un thème de marque en un héros de première page exécutable et prévisualisable, construit avec Vite, React, Tailwind et motion. Elle force une étape de lecture et d'alignement (émettant un bloc structuré 'parts to change' et attendant confirmation) avant d'écrire du code, puis impose des médias d'arrière-plan réels, une mise en page réactive et une passe de vérification de build/preview. Se déclenche sur les demandes de génération ou de restylisation d'une section de héros interactive ou d'une première page d'atterrissage.

Rapport de test

Exécuté le même brief ('hero for Nimbus, a weather API') avec et sans la compétence. La page guidée par la compétence a livré un viewport réactif, une media query et un type clamp() fluide, un vrai fond dégradé animé, une machine à écrire restreinte au H1, et des pilules interactives avec un état actif ; la référence sans compétence était une coquille statique non réactive avec un div background-placeholder littéral et un seul bouton. Le répertoire est nommé HTMLHero.skill donc l'installation le copie vers le slug htmlhero-skill avec un renommage. La porte 'align and confirm before coding' multi-tour de la compétence ne peut pas être exercée en une seule fois, mais ses règles d'exécution seules ont produit un héros matériellement plus complet.

Testé le: 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

Commandes et exemples de prompts

  • /htmlhero-skillWorkflow aligner-puis-construire pour des pages d'atterrissage hero React/Vite exécutables.

Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :

  • 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

Rapport complet →