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-ui instead — this skill is the opposite: gradients, glow, depth).
  • Marketing landing pages (it's an app shell, not a long-scroll site).
Installs
26
GitHub Stars
4
First Seen
Jun 3, 2026