npx claudepluginhub lunartech-x/superpowers --plugin superpowersThis skill uses the workspace's default tool permissions.
Create sophisticated dark-themed interfaces with proper contrast and premium visual hierarchy.
Designs dark mode UIs using surface elevation, desaturated colors, contrast ratios (4.5:1 min), accessibility checks, and semantic tokens for smooth light/dark switching.
Enforces WCAG 2.1 AA compliant web UIs using Tailwind, glassmorphism, dark mode. Ensures color contrast, visible buttons/borders, focus states, touch targets.
Generates accessible color palettes from brand hex: 11-shade scales (50-950), semantic tokens, dark mode variants, Tailwind v4 CSS, WCAG contrast checks. For design systems and themes.
Share bugs, ideas, or general feedback.
Create sophisticated dark-themed interfaces with proper contrast and premium visual hierarchy.
/* Tailwind Dark Backgrounds */
bg-zinc-950 /* #09090b - Base/page */
bg-neutral-900 /* #171717 - Cards */
bg-zinc-800 /* #27272a - Elevated */
bg-neutral-900/50 /* Transparent cards */
| Purpose | Class | Use Case |
|---|---|---|
| Primary | text-white | Titles, headings |
| Secondary | text-white/70 | Body text |
| Tertiary | text-white/50 | Labels, captions |
| Muted | text-white/40 | Metadata |
<div class="border border-white/10">Subtle</div>
<div class="border border-white/20">Visible</div>
<div class="hover:border-white/20">Hover enhanced</div>
<!-- Standard dark card -->
<div class="rounded-2xl border border-white/10 bg-neutral-900/50 p-6">
<!-- Elevated glass card -->
<div class="rounded-2xl border border-white/10 bg-neutral-900/50 backdrop-blur-md
hover:bg-neutral-800/50 hover:shadow-2xl hover:shadow-brand-500/10">
<!-- Success -->
<span class="bg-emerald-500/15 border border-emerald-500/30 text-emerald-400">
<!-- Warning -->
<span class="bg-amber-500/15 border border-amber-500/30 text-amber-400">
<!-- Error -->
<span class="bg-rose-500/15 border border-rose-500/30 text-rose-400">
<div class="w-11 h-11 rounded-xl bg-violet-500/15 flex items-center justify-center
group-hover:bg-violet-500/25">
<svg class="text-violet-400"><!-- Icon --></svg>
</div>
<!-- Gradient blobs -->
<div class="absolute w-96 h-96 bg-brand-500/10 rounded-full blur-[120px] animate-pulse">
<!-- Dot pattern -->
<div style="background-image: radial-gradient(circle at 1px 1px, white 1px, transparent 0);
background-size: 40px 40px;" class="opacity-[0.03]">
zinc-950 for base, layer lighter surfaces on topborder-white/10)#000000)