From superpowers
Creates two-column feature sections pairing text content with interactive visual demos. Includes badge, title, description, feature grid, and demo card patterns.
How this skill is triggered — by the user, by Claude, or both
Slash command
/superpowers:feature-grid-sectionsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Build impactful two-column sections that pair text content with interactive visual demonstrations.
Build impactful two-column sections that pair text content with interactive visual demonstrations.
Feature grid sections combine:
<section class="py-24 md:py-32 px-6 bg-zinc-950">
<div class="max-w-7xl mx-auto">
<div class="grid lg:grid-cols-2 gap-16 items-center">
<!-- Content Column -->
<div>
<!-- Badge -->
<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">
Category
</span>
</div>
<!-- Title -->
<h2 class="text-4xl md:text-5xl lg:text-6xl font-medium tracking-tight text-white mb-6 leading-[1.1]">
Feature Title<br>
<span class="bg-gradient-to-r from-brand-400 to-purple-400 bg-clip-text text-transparent">
Highlighted
</span>
</h2>
<!-- Description -->
<p class="text-lg text-white/60 mb-10 max-w-lg leading-relaxed">
Description text explaining the feature and its benefits.
</p>
<!-- Feature Grid -->
<div class="grid grid-cols-2 gap-4">
<div class="group p-4 rounded-2xl bg-white/5 border border-white/10
hover:bg-white/10 hover:border-brand-500/30 transition-all duration-300">
<div class="w-10 h-10 rounded-xl bg-emerald-500/20 flex items-center justify-center mb-3
group-hover:scale-110 transition-transform duration-300">
<svg class="text-emerald-400"><!-- Icon --></svg>
</div>
<h4 class="text-white font-medium mb-1">Feature One</h4>
<p class="text-white/50 text-sm">Brief description</p>
</div>
<!-- More feature cards -->
</div>
</div>
<!-- Visual Column -->
<div class="relative">
<!-- Glow effect -->
<div class="absolute -inset-4 bg-gradient-to-r from-brand-500/20 via-purple-500/20 to-brand-500/20
rounded-[2rem] blur-2xl opacity-50"></div>
<!-- Demo card -->
<div class="relative rounded-[1.5rem] overflow-hidden border border-white/10
bg-gradient-to-br from-zinc-900 via-zinc-900 to-zinc-950 p-6">
<!-- Interactive demo content -->
</div>
</div>
</div>
</div>
</div>
<div class="group p-4 rounded-2xl bg-white/5 border border-white/10
hover:bg-white/10 hover:border-brand-500/30 transition-all duration-300">
<div class="w-10 h-10 rounded-xl bg-emerald-500/20 flex items-center justify-center mb-3
group-hover:scale-110 transition-transform duration-300">
<svg class="w-5 h-5 text-emerald-400"><!-- Icon --></svg>
</div>
<h4 class="text-white font-medium mb-1">Feature Name</h4>
<p class="text-white/50 text-sm">Brief description text</p>
</div>
<div class="space-y-5">
<div class="flex items-start gap-4">
<div class="w-2 h-2 rounded-full bg-violet-400 mt-2 flex-shrink-0"></div>
<p class="text-neutral-400 text-sm leading-relaxed">Feature description</p>
</div>
</div>
<div class="rounded-xl bg-zinc-900 border border-white/10">
<!-- Header -->
<div class="flex items-center gap-2 px-4 py-3 border-b border-white/10">
<div class="flex gap-1.5">
<div class="w-3 h-3 rounded-full bg-red-500/50"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500/50"></div>
<div class="w-3 h-3 rounded-full bg-green-500/50"></div>
</div>
<span class="text-white/40 text-xs font-mono">pipeline.py</span>
</div>
<!-- Content -->
<div class="p-4"><!-- Code/demo --></div>
</div>
<div class="space-y-4">
<!-- Input row -->
<div class="flex items-center gap-4">
<span class="w-20 text-right text-white/30 text-xs font-mono">INPUT</span>
<div class="flex-1 flex gap-2">
<div class="flex-1 h-10 rounded-lg bg-blue-500/20 border border-blue-500/30
flex items-center justify-center">
<span class="text-blue-400 text-xs font-medium">Data Type</span>
</div>
</div>
</div>
<!-- Arrow -->
<div class="flex justify-center">
<svg class="text-brand-400 animate-bounce"><!-- Down arrow --></svg>
</div>
<!-- Output row -->
<div class="flex items-center gap-4">
<span class="w-20 text-right text-white/30 text-xs font-mono">OUTPUT</span>
<div class="flex-1 h-14 rounded-xl bg-emerald-500/10 border border-emerald-500/30">
<span class="text-emerald-300">Result</span>
</div>
</div>
</div>
<div class="mt-6 pt-6 border-t border-white/10 grid grid-cols-3 gap-4">
<div class="text-center">
<p class="text-2xl font-bold text-white">99.2%</p>
<p class="text-white/40 text-xs">Accuracy</p>
</div>
<div class="text-center">
<p class="text-2xl font-bold text-white">0.01%</p>
<p class="text-white/40 text-xs">Error Rate</p>
</div>
<div class="text-center">
<p class="text-2xl font-bold text-white"><2min</p>
<p class="text-white/40 text-xs">Process Time</p>
</div>
</div>
<div class="grid lg:grid-cols-2 gap-16 items-center">
<!-- On mobile: stacks vertically -->
<!-- On lg+: side-by-side -->
</div>
<div class="reveal">
<!-- Add JS to trigger visibility -->
</div>
<style>
.reveal {
opacity: 0;
transform: translateY(20px);
transition: all 0.6s ease-out;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
</style>
npx claudepluginhub lunartech-x/superpowers --plugin superpowersCreates asymmetric card-based grid layouts using CSS Grid and Tailwind CSS, inspired by Apple and modern SaaS design. Includes hero, standard, and accent card variants.
Generates production-quality React and Next.js UI components and full pages using Tailwind CSS and Framer Motion for hero sections, SaaS dashboards, pricing pages, bento grids, forms, cards, and animated elements.
Generates award-level frontend pages with GSAP animations, strict AIDA structure, wide hero typography, and gapless bento grids. Use for cinematic landing pages or marketing sites.