cosmic-glass-dashboard
Installation
SKILL.md
Cosmic Glass Dashboard
A reusable, brand-agnostic design language for dark dashboards. The look: a deep navy page lit by soft colored auroras, frosted glass panels with gradient hairline borders, and a per-section "tone" tint that colors each card's glow, label dot, status pill, and icon. Big, tightly-tracked headlines; pill buttons with a light-sweep on hover; a fixed glass sidebar.
This skill ships two files you hand off and adapt:
theme.css— the entire design system. The ONLY file a recipient needs. Plain CSS, framework-free (works with React, Vue, Svelte, plain HTML, or alongside Tailwind).starter.html— a working reference dashboard (shell + sidebar + hero + KPI row + content grid). Open it to see the language; copy its markup patterns.
When to use
Any time the goal is a premium dark dashboard / admin / control-panel UI and the person likes this specific aesthetic. It is deliberately general: the same kit becomes an analytics console, a CRM, a content pipeline, an ops board, or a fintech dashboard purely by changing copy, nav items, and which tone each section uses.
When NOT to use
- Light-mode or print-first UIs (this is committedly dark).
- Minimalist/editorial flat looks (use
minimalist-uiinstead — this skill is the opposite: gradients, glow, depth). - Marketing landing pages (it's an app shell, not a long-scroll site).