What problem does it solve?
Designing a cohesive dark, instrument-style interface is hard to get right: generic glassmorphism often looks pastel and unfocused, and radial widgets frequently feel disconnected from the page. This Skill provides a complete design-system direction for building premium dark interfaces anchored by a clock, dial, or calibration-device centerpiece.
Core Features & Use Cases
- Full design-system direction: Covers background grids, frosted glass navigation, pills, controls, hero layout, circular focal components, and motion behavior as one coherent system.
- Layered dial construction: Guides building circular centerpieces with outer rings, tick marks, degree labels, rotating text paths, and a minimal central emblem.
- Tuning knobs and guardrails: Defines adjustable parameters (glass strength, dial complexity, motion tempo, contrast, glow restraint) plus explicit anti-patterns to avoid.
- Use Case: You need a landing page that feels like a sci-fi calibration instrument. Apply this Skill to generate a responsive HTML page with a black base, subtle beam grid, frosted nav, and a dominant rotating clock dial beside sparse hero copy.
Quick Start
Use the glass-dark-mode-clock skill to create a responsive standalone HTML page with a dark frosted-glass interface centered on a circular calibration dial.
