# Hero Section

> A Claude skill that builds or fixes a landing-page hero: specific headline, one line, one action, all above the fold.

- Kind: Skill
- Page: https://ownlyplans.com/bhaskar/hero-section/
- Licence: CC BY 4.0 (reuse with credit)

## Install

```bash
mkdir -p ~/.claude/skills/hero-section && curl -fsSL "https://ownlyplans.com/bhaskar/hero-section/skill/?download=1" -o ~/.claude/skills/hero-section/SKILL.md
```

## Steps

### 1. Install the skill

Run the install command on this page, or save SKILL.md to ~/.claude/skills/hero-section/ yourself. Restart Claude Code.

Uses: SKILL.md

Done when: Typing /hero-section in Claude Code shows the skill.

### 2. Use it

Open your project and ask for a hero. Give it the product name, what it does and the one action.

Prompt:

```text
Use the hero-section skill. Product: {name}. It helps {who} {do what}. Main action: {action}. Build the hero in the existing styles and show me screenshots at 1280x800 and 390x844.
```

Done when: The headline, one sentence and the button are visible on both screenshots.

## Files

- SKILL.md: https://ownlyplans.com/bhaskar/hero-section/skill/ (Save to ~/.claude/skills/hero-section/SKILL.md)
- How Claude skills work: https://docs.claude.com/en/docs/claude-code/skills (Official docs.)

## About

Install it once and Claude uses it whenever you ask for a hero, a landing page top or an above-the-fold fix.

It writes the copy before the code, refuses fake browser windows and invented numbers, and checks the result at desktop and phone sizes before it says it is done.

---
Also available as JSON: https://ownlyplans.com/bhaskar/hero-section/?format=json
MCP server: https://ownlyplans.com/mcp