lunartech-x/Dark Mode Design
skills/design-and-media/ui-ux/design-skills/dark-mode-design/SKILL.md
Design premium dark interfaces with proper contrast, color palettes, and visual hierarchy
$ install --global
skillsauthnpx skillsauth add lunartech-x/superpowers Dark Mode DesignInstall 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 PM27.5s1 file scanned
SKILL.md
- name:
- Dark Mode Design
- description:
- Design premium dark interfaces with proper contrast, color palettes, and visual hierarchy
Dark Mode Design
Create sophisticated dark-themed interfaces with proper contrast and premium visual hierarchy.
Background 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 */
Text Hierarchy
| 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 |
Border Colors
<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>
Card Patterns
<!-- 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">
Status Colors
<!-- 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">
Icon Backgrounds
<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>
Decorative Elements
<!-- 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]">
Best Practices
- ✅ Use
zinc-950for base, layer lighter surfaces on top - ✅ Use 70% opacity for body text
- ✅ Add subtle borders (
border-white/10) - ✅ Use colored glows instead of black shadows
- ❌ Don't use pure black (
#000000) - ❌ Don't use pure white for all text
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