Glass Dark Mode Clock
Styles web pages as a dark, frosted-glass instrument panel with a clock-like dial centerpiece
- Repository
- MengTo/Skills
- Stars
- 7,187
- Licence
- MIT
- Files
- 4 files
What it does
When installed, the agent follows a specific visual style guide when building a web interface: a near-black background with faint grid and crosshair lines, frosted dark glass navigation bars and buttons, and a large circular dial with rings, tick marks and rotating labels as the main focal point. It is meant to look like a precise, scientific instrument rather than generic glassmorphism. The skill is written as design guidance; it does not add tools or automation of its own.
Great for
- Designers or front-end developers who want a dark, premium, technical-looking landing page or dashboard
- Teams exploring a monochrome 'instrument panel' visual direction for a product site
- Anyone who wants an agent to produce consistent styling from a written design brief
Skip it if
- Projects needing bright, colourful, or brand-heavy visuals, since the style explicitly limits accents to monochrome (the aesthetic would clash)
- Accessibility-critical interfaces, because translucent glass and low-contrast grid lines can reduce readability and the skill only asks for 'strong readability' without specific contrast checks
Try asking
- “Build a landing page for a hardware product in the dark glass clock style with a dial as the hero element”
- “Redesign my dashboard navigation using frosted dark glass pills and a thin bottom border”
- “Create a split-layout hero with sparse copy beside a rotating calibration dial”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 4 original files, the MIT licence and an attribution note.
glass-dark-mode-clock.zip - 2
Add it to your agent
Claude Code (all projects)
mkdir -p ~/.claude/skills && unzip glass-dark-mode-clock.zip -d ~/.claude/skills/Claude Code / Agent SDK (this project only)
mkdir -p .claude/skills && unzip glass-dark-mode-clock.zip -d .claude/skills/Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.
- 3
Ask for the task
No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.
Get better results
- Name the page or product you are building so the agent can apply the layout guidance to real content
- Ask for a restrained dial (fewer rings and labels) if the result looks noisy, since the skill itself warns against overloading the dial
- Review the demo folder (index.html and PROMPT.md) to see an example output before relying on the style
What's inside
- demo/index.html
- demo/PROMPT.md
- demo/source.json
- SKILL.md
Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.