lunartech-x/Badge & Pill Components
skills/design-and-media/ui-ux/design-skills/badge-pill-components/SKILL.md
Create status badges, category pills, and tag components
$ install --global
skillsauthnpx skillsauth add lunartech-x/superpowers Badge & Pill ComponentsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 6, 2026, 10:06 PM38.5s1 file scanned
SKILL.md
- name:
- Badge & Pill Components
- description:
- Create status badges, category pills, and tag components
Badge & Pill Components
Design consistent badge and pill components for status indicators, categories, and tags.
Status Badge with Pulse
<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>
Category Eyebrow 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">
<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>
Color Variants
Success (Emerald)
<span class="border border-emerald-500/30 bg-emerald-500/15 text-emerald-400">
Success
</span>
Warning (Amber)
<span class="border border-amber-500/30 bg-amber-500/15 text-amber-400">
Warning
</span>
Error (Rose)
<span class="border border-rose-500/30 bg-rose-500/15 text-rose-400">
Error
</span>
Info (Blue)
<span class="border border-blue-500/30 bg-blue-500/15 text-blue-400">
Info
</span>
Compact Tags
<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>
Light Theme Badges
<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>
Numeric Badge
<span class="px-2 py-0.5 rounded-full bg-emerald-500/20 text-emerald-400 text-xs font-mono">
10,000+
</span>
Version Badge
<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>
Badge Sizes
| 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 |
Related Skills
lunartech-x/anndata
tools
VerifiedTrustedCommunity
Data structure for annotated matrices in single-cell analysis. Use when working with .h5ad files or integrating with the scverse ecosystem. This is the data format skill—for analysis workflows use scanpy; for probabilistic models use scvi-tools; for population-scale queries use cellxgene-census.
14SKILL.mdUpdated May 16, 2026
lunartech-x/alphafold-db
testing
VerifiedTrustedCommunity
Access AlphaFold 200M+ AI-predicted protein structures. Retrieve structures by UniProt ID, download PDB/mmCIF files, analyze confidence metrics (pLDDT, PAE), for drug discovery and structural biology.
14SKILL.mdUpdated May 16, 2026
lunartech-x/alpha-vantage
development
VerifiedTrustedCommunity
Access real-time and historical stock market data, forex rates, cryptocurrency prices, commodities, economic indicators, and 50+ technical indicators via the Alpha Vantage API. Use when fetching stock prices (OHLCV), company fundamentals (income statement, balance sheet, cash flow), earnings, options data, market news/sentiment, insider transactions, GDP, CPI, treasury yields, gold/silver/oil prices, Bitcoin/crypto prices, forex exchange rates, or calculating technical indicators (SMA, EMA, MACD, RSI, Bollinger Bands). Requires a free API key from alphavantage.co.
14SKILL.mdUpdated May 16, 2026
lunartech-x/aeon
development
VerifiedTrustedCommunity
This skill should be used for time series machine learning tasks including classification, regression, clustering, forecasting, anomaly detection, segmentation, and similarity search. Use when working with temporal data, sequential patterns, or time-indexed observations requiring specialized algorithms beyond standard ML approaches. Particularly suited for univariate and multivariate time series analysis with scikit-learn compatible APIs.
14SKILL.mdUpdated May 16, 2026