npx claudepluginhub lunartech-x/superpowers --plugin superpowersThis skill uses the workspace's default tool permissions.
Create consistent, visually striking section headers with eyebrow text, main titles, descriptions, and optional badges or CTAs.
Designs, optimizes, and audits hero sections for web pages, covering headlines, CTAs, visuals, split/centered layouts, alignment, and responsive mobile stacking.
Builds premium dark-themed hero sections and landing pages with cinematic video backgrounds, liquid glass morphism, editorial typography, and pixel-perfect specifications. Use for premium dark UI, hero sections, or landing pages.
Generates standalone HTML components and composes them into branded full pages from design systems, with embedded CSS, responsive design, and brand integration. Invoke via /html-page or /html-page-quick.
Share bugs, ideas, or general feedback.
Create consistent, visually striking section headers with eyebrow text, main titles, descriptions, and optional badges or CTAs.
A well-designed section header establishes:
┌─────────────────────────────────────────────────────────┐
│ [BADGE] Eyebrow Text │
│ │
│ Main Title Text │
│ │
│ Supporting description text that provides │
│ additional context about the section. │
│ │
│ [Optional CTA] │
└─────────────────────────────────────────────────────────┘
<div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-12">
<div>
<p class="text-sm font-medium text-white/50 tracking-wider uppercase mb-2">
Section Category
</p>
<h2 class="text-3xl sm:text-4xl md:text-5xl font-medium tracking-tight text-white">
Section Title Here
</h2>
<p class="mt-3 text-base text-white/70 max-w-2xl">
A brief description providing context about what this section contains
and why it matters to the reader.
</p>
</div>
</div>
<div class="text-center mb-16">
<span class="inline-flex items-center gap-2 rounded-full
border border-emerald-500/30 bg-emerald-500/10
px-4 py-1.5 text-xs font-medium text-emerald-400 mb-6">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
Live Status Badge
</span>
<h2 class="text-3xl md:text-4xl lg:text-5xl font-medium text-white tracking-tight mb-4">
Main Section Title<br class="hidden sm:block">
Multi-line Supported
</h2>
<p class="text-neutral-400 text-base md:text-lg max-w-2xl mx-auto leading-relaxed">
Description text that explains the section purpose with appropriate
line length for readability.
</p>
</div>
<h2 class="text-4xl md:text-5xl lg:text-6xl font-medium tracking-tight text-white mb-6">
Synthetic Data<br>
Generation <span class="bg-gradient-to-r from-brand-400 to-purple-400 bg-clip-text text-transparent">Engine</span>
</h2>
<div class="flex sm:mb-8 mb-6 items-end justify-between">
<div>
<p class="text-[11px] sm:text-xs tracking-widest text-neutral-500 uppercase">
Platform Overview
</p>
<h3 class="mt-2 text-2xl sm:text-3xl tracking-tight font-medium">
What is <span class="text-brand-600">BrandName</span>?
</h3>
</div>
</div>
<div class="mb-12">
<p class="text-xs font-medium text-zinc-500 tracking-wider uppercase mb-2">
Features
</p>
<h2 class="text-3xl sm:text-4xl font-semibold text-zinc-900 tracking-tight mb-4">
Everything you need
</h2>
<p class="text-zinc-600 text-lg max-w-2xl">
Comprehensive description of the section's contents and value proposition.
</p>
</div>
<p class="text-[11px] sm:text-xs tracking-widest text-neutral-500 uppercase">
Category Name
</p>
<div class="flex items-center gap-2 mb-2">
<span class="w-2 h-2 rounded-full bg-brand-500"></span>
<span class="text-xs font-medium text-brand-600 uppercase tracking-wider">
Category
</span>
</div>
<span class="inline-flex items-center gap-2 px-3 py-1.5 bg-brand-50 rounded-full mb-4">
<div class="w-2 h-2 rounded-full bg-brand-500 animate-pulse"></div>
<span class="text-[10px] font-semibold text-brand-700 uppercase tracking-wider">
AI-Powered Platform
</span>
</span>
<span class="inline-flex items-center gap-2 rounded-full
border border-brand-500/30 bg-brand-500/10
px-4 py-1.5 text-xs font-medium text-brand-400">
<span class="w-1.5 h-1.5 rounded-full bg-brand-400"></span>
What We Built
</span>
| Breakpoint | Classes | Use Case |
|---|---|---|
| Mobile | text-2xl or text-3xl | Compact |
| Tablet | sm:text-3xl or sm:text-4xl | Medium |
| Desktop | md:text-4xl or md:text-5xl | Standard |
| Large | lg:text-5xl or lg:text-6xl | Hero |
<h2 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl
font-medium tracking-tight">
Responsive Title
</h2>
<div class="mb-12">
<p class="eyebrow">Category</p>
<h2 class="title">Section Title</h2>
<p class="description max-w-2xl">Description text...</p>
</div>
<div class="text-center mb-16">
<p class="eyebrow">Category</p>
<h2 class="title">Section Title</h2>
<p class="description max-w-2xl mx-auto">Description text...</p>
</div>
<div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-12">
<div>
<p class="eyebrow">Category</p>
<h2 class="title">Section Title</h2>
</div>
<a href="#" class="inline-flex items-center gap-2 text-brand-500 hover:text-brand-600">
View all
<svg><!-- Arrow icon --></svg>
</a>
</div>
| Element | Weight | Tailwind |
|---|---|---|
| Eyebrow | Medium/Semibold | font-medium |
| Title | Medium/Semibold | font-medium or font-semibold |
| Description | Regular | font-normal (default) |
| Element | Spacing | Tailwind |
|---|---|---|
| Eyebrow | Wide | tracking-wider or tracking-widest |
| Title | Tight | tracking-tight |
| Description | Normal | Default |
<!-- Tight for titles -->
<h2 class="leading-tight">Multi-line Title</h2>
<!-- or -->
<h2 class="leading-[1.1]">Precise Control</h2>
<!-- Relaxed for descriptions -->
<p class="leading-relaxed">Description paragraph...</p>
<p class="text-white/50">Eyebrow (muted)</p>
<h2 class="text-white">Title (primary)</h2>
<p class="text-white/70">Description (secondary)</p>
<p class="text-neutral-500">Eyebrow (muted)</p>
<h2 class="text-zinc-900">Title (primary)</h2>
<p class="text-zinc-600">Description (secondary)</p>
<span class="text-brand-600">Highlighted</span>
<!-- or gradient -->
<span class="bg-gradient-to-r from-brand-400 to-purple-400 bg-clip-text text-transparent">
Gradient Text
</span>
<div class="text-center max-w-4xl mx-auto mb-20">
<div class="inline-flex items-center gap-2 px-3 py-1.5
bg-brand-500/10 border border-brand-500/20
rounded-full mb-6">
<div class="w-2 h-2 rounded-full bg-brand-400 animate-pulse"></div>
<span class="text-xs font-semibold text-brand-300 uppercase tracking-wider">
Now Available
</span>
</div>
<h1 class="text-4xl md:text-5xl lg:text-6xl font-medium tracking-tight text-white mb-6 leading-[1.1]">
Revolutionary AI<br>
<span class="bg-gradient-to-r from-brand-400 to-purple-400 bg-clip-text text-transparent">
For Healthcare
</span>
</h1>
<p class="text-lg text-white/60 max-w-2xl mx-auto leading-relaxed">
Comprehensive AI platform enabling early detection and precise diagnosis
through advanced multimodal analysis.
</p>
</div>
<div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-12">
<div>
<p class="text-sm font-medium text-white/50 tracking-wider uppercase mb-2">
Core Technologies
</p>
<h2 class="text-3xl sm:text-4xl md:text-5xl font-medium tracking-tight text-white">
Our Technology Stack
</h2>
<p class="mt-3 text-base text-white/70 max-w-2xl">
Advanced capabilities powering the next generation of early cancer detection.
</p>
</div>
</div>
| Spacing | Value | Use |
|---|---|---|
| Eyebrow → Title | mb-2 | Minimal |
| Title → Description | mt-3 or mb-3 | Standard |
| Header → Content | mb-12 to mb-16 | Section gap |