{
    "id": "bhaskar/hero-section",
    "kind": "skill",
    "title": "Hero Section",
    "summary": "A Claude skill that builds or fixes a landing-page hero: specific headline, one line, one action, all above the fold.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/hero-section/",
    "stack": [
        "CSS",
        "HTML",
        "Tailwind"
    ],
    "tools": [
        "claude-code"
    ],
    "difficulty": "beginner",
    "license": "cc-by-4.0",
    "version": "1.0",
    "overview": "Install it once and Claude uses it whenever you ask for a hero, a landing page top or an above-the-fold fix.\n\nIt 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.",
    "steps": [
        {
            "title": "Install the skill",
            "body": "Run the install command on this page, or save SKILL.md to ~/.claude/skills/hero-section/ yourself. Restart Claude Code.",
            "prompt": "",
            "done": "Typing /hero-section in Claude Code shows the skill.",
            "files": [
                "SKILL.md"
            ]
        },
        {
            "title": "Use it",
            "body": "Open your project and ask for a hero. Give it the product name, what it does and the one action.",
            "prompt": "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": "The headline, one sentence and the button are visible on both screenshots.",
            "files": []
        }
    ],
    "files": [
        {
            "type": "markdown",
            "name": "SKILL.md",
            "note": "Save to ~/.claude/skills/hero-section/SKILL.md",
            "file": "skill",
            "url": "https://ownlyplans.com/bhaskar/hero-section/skill/"
        },
        {
            "type": "link",
            "name": "How Claude skills work",
            "note": "Official docs.",
            "url": "https://docs.claude.com/en/docs/claude-code/skills"
        }
    ],
    "install": "mkdir -p ~/.claude/skills/hero-section && curl -fsSL \"https://ownlyplans.com/bhaskar/hero-section/skill/?download=1\" -o ~/.claude/skills/hero-section/SKILL.md",
    "how_to_use": "Run the install command, or read files with get_asset first."
}