Is the HTMLHero skill free?

Yes. The skill itself is free from YiShu5/claude-skills. SkillProof publishes the install command and an independent test verdict at no cost.

What is the HTMLHero SkillProof Score?

8.8/10 — installs cleanly 5/5, triggers reliably 5/5, output vs. baseline 7/10, docs & honesty 5/5.

How do I install HTMLHero?

Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.

Can I use HTMLHero with Cursor, Copilot, Gemini CLI, Codex or other AI tools?

The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.

HTMLHero

Align-then-build workflow for runnable React/Vite hero landing pages

by YiShu5 · YiShu5/claude-skills

Tested · Works

Install — copy the command Download source ↗

Test report

Verdict: Tested · Works
Score: 8.8/10
Tested: Jul 24, 2026
Environment: Claude Code 2.x (agent harness)

⚠ This skill is no longer available upstream. Our re-check on Aug 10, 2026 couldn't find it any more (repo unreachable/deleted). The test below is what we measured on Jul 24, 2026 and we're leaving it up as a record — but there is nothing left to install, so we've removed the command.

Ran the same brief ('hero for Nimbus, a weather API') with and without the skill. The skill-guided page shipped a responsive viewport, media query and fluid clamp() type, a real animated gradient background, a typewriter restricted to the H1, and interactive pills with an active state; the no-skill baseline was a non-responsive static shell with a literal background-placeholder div and a single button. Directory is named HTMLHero.skill so the install copies it to the htmlhero-skill slug with a rename. The skill's headline multi-turn 'align and confirm before coding' gate can't be exercised in a one-shot, but its execution rules alone produced a materially more complete hero.

Scored on four weighted criteria — install, triggering, output vs. baseline, docs. How scoring works

Installs cleanly 5/5
Triggers reliably 5/5
Output vs. baseline 7/10
Docs & honesty 5/5

What HTMLHero does

A frontend workflow skill that turns a hero prompt or brand theme into a runnable, previewable first-page hero built with Vite, React, Tailwind and motion. It forces a read-and-align step (emitting a structured 'parts to change' block and waiting for confirmation) before writing code, then enforces real background media, responsive layout, and a build/preview verification pass. Triggers on requests to generate or restyle an interactive hero section or landing first page.

How to install HTMLHero

Nothing to install: the source repository no longer has this skill. If the author brings it back, our daily re-check will pick it up and the command will reappear here.

Commands — how to trigger HTMLHero

/htmlhero-skill Align-then-build workflow for runnable React/Vite hero landing pages

It also activates on plain-language prompts like these:

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

Frequently asked questions

Is the HTMLHero skill free?: Yes. The skill itself is free from YiShu5/claude-skills. SkillProof publishes the install command and an independent test verdict at no cost.
Does HTMLHero work with Claude Code?: We tested it with Claude Code 2.x (agent harness) on Jul 24, 2026. Verdict: Tested · Works. Ran the same brief ('hero for Nimbus, a weather API') with and without the skill. The skill-guided page shipped a responsive viewport, media query and fluid clamp() type, a real animated gradient background, a typewriter restricted to the H1, and interactive pills with an active state; the no-skill baseline was a non-responsive static shell with a literal background-placeholder div and a single button. Directory is named HTMLHero.skill so the install copies it to the htmlhero-skill slug with a rename. The skill's headline multi-turn 'align and confirm before coding' gate can't be exercised in a one-shot, but its execution rules alone produced a materially more complete hero.
What is the HTMLHero SkillProof Score?: 8.8/10 — installs cleanly 5/5, triggers reliably 5/5, output vs. baseline 7/10, docs & honesty 5/5.
How do I install HTMLHero?: Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.
Can I use HTMLHero with Cursor, Copilot, Gemini CLI, Codex or other AI tools?: The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.