Stats
Actions
Tags
From superpowers
Provides HTML and Tailwind CSS examples for building status badges, category pills, and tag components with color variants, compact tags, and size options.
How this skill is triggered — by the user, by Claude, or both
Slash command
/superpowers:badge-pill-componentsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Design consistent badge and pill components for status indicators, categories, and tags.
Design consistent badge and pill components for status indicators, categories, and tags.
<span class="inline-flex items-center gap-1.5 rounded-full
border border-brand-500/30 bg-brand-500/15
px-2.5 py-0.5 text-[11px] font-medium text-brand-300">
<span class="w-1.5 h-1.5 rounded-full bg-brand-400 animate-pulse"></span>
ACTIVE
</span>
<div class="inline-flex items-center gap-2 px-3 py-1.5
bg-brand-500/10 border border-brand-500/20 rounded-full">
<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">
AI-Powered
</span>
</div>
<span class="border border-emerald-500/30 bg-emerald-500/15 text-emerald-400">
Success
</span>
<span class="border border-amber-500/30 bg-amber-500/15 text-amber-400">
Warning
</span>
<span class="border border-rose-500/30 bg-rose-500/15 text-rose-400">
Error
</span>
<span class="border border-blue-500/30 bg-blue-500/15 text-blue-400">
Info
</span>
<div class="flex items-center gap-2">
<span class="px-2 py-1 rounded-full bg-emerald-50/10 border border-emerald-500/20
text-[8px] font-bold text-emerald-400">HIPAA</span>
<span class="px-2 py-1 rounded-full bg-blue-50/10 border border-blue-500/20
text-[8px] font-bold text-blue-400">GDPR</span>
<span class="px-2 py-1 rounded-full bg-brand-50/10 border border-brand-500/20
text-[8px] font-bold text-brand-400">SOC2</span>
</div>
<div class="inline-flex items-center gap-2 px-3 py-1.5 bg-brand-50 rounded-full">
<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">
New Feature
</span>
</div>
<span class="px-2 py-0.5 rounded-full bg-emerald-500/20 text-emerald-400 text-xs font-mono">
10,000+
</span>
<span class="px-2 py-1 rounded-md bg-zinc-800 border border-zinc-700
text-xs font-mono text-zinc-400">
v2.4.1
</span>
| Size | Padding | Text | Use Case |
|---|---|---|---|
| XS | px-2 py-0.5 | text-[8px] | Compact tags |
| SM | px-2.5 py-0.5 | text-[11px] | Standard inline |
| MD | px-3 py-1 | text-xs | Prominent badges |
| LG | px-4 py-1.5 | text-sm | Header badges |
npx claudepluginhub lunartech-x/superpowers --plugin superpowersBuilds scalable Tailwind CSS design systems using design tokens, component variants, responsive patterns, and accessibility. Use for component libraries, theming, UI standardization, and dark mode setup.
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.
Provides HTML and CSS patterns for creating visually consistent section headers with eyebrow text, titles, badges, and optional CTAs for both dark and light themes.