npx claudepluginhub lunartech-x/superpowers --plugin superpowersThis skill uses the workspace's default tool permissions.
Build impactful two-column sections that pair text content with interactive visual demonstrations.
Creates asymmetric bento grid layouts with hero (2x2), standard, accent, and CTA cards using Tailwind CSS responsive classes for Apple/SaaS-style interfaces.
Guides design, optimization, and auditing of CSS grid layouts for multi-column content like products, features, galleries. Covers responsive columns, gaps, best practices, and when to use vs lists/cards.
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.
Share bugs, ideas, or general feedback.
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>