Guide · Agent skill
How to use the Glass Dark Mode Clock agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Glass Dark Mode Clock skill is a written design guide that tells an AI agent how to style a web interface as a dark, precise, instrument-like panel: near-black background, faint grid lines, frosted glass navigation, and a large circular dial as the focal point. This guide explains what the skill changes, how to install it, how to ask for it in natural language, and where it fits or doesn't. By the end you will be able to add it to an agent and request a page built in that visual direction.
Glass Dark Mode ClockMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Get the glass-dark-mode-clock ZIP from the item page under the MIT licence.
- 2Unzip the folder. Extract it so you have a glass-dark-mode-clock folder containing SKILL.md and the demo folder.
- 3Place it where your agent looks. Copy the folder to ~/.claude/skills/ for personal use, or to .claude/skills/ in a project.
- 4Or upload in the Claude apps. In the Claude apps, open Settings, go to Capabilities, then Skills, and upload the skill.
- 5Write a request. Describe the page concept and content, and mention the glass-dark-mode-clock skill by name.
- 6Review the output. Open the generated HTML, check layout, motion and contrast, and adjust with follow-up prompts.
What does the Glass Dark Mode Clock skill make the agent do?
When the skill is active, the agent follows a specific visual style guide while building a web interface. The source describes a near-black base with very subtle grid lines, vertical and horizontal beam guides and faint crosshairs, with dark frosted-glass surfaces for navigation bars, pills and buttons.
The main focal point is a dominant circular element that resembles a clock or calibration dial, with rings, tick marks, degree labels and rotating text. The intent is a precise scientific instrument look rather than generic glassmorphism. The palette stays mostly monochrome (black, white, zinc and smoky gray), and the skill says accent brightness should come from glass highlights and soft white glow rather than saturated colour.
- Near-black background with faint grid and crosshair lines
- Frosted dark-glass nav bars, pills and buttons with thin edge highlights
- A layered circular dial as the hero centrepiece, with a split text-and-dial layout
- Monochrome palette; slow, meditative motion if any animation is used
Install the Glass Dark Mode Clock skill
The skill is a folder that contains a SKILL.md file. Download the ZIP from the item page and unzip it. The folder is glass-dark-mode-clock and it includes SKILL.md plus a demo folder with index.html, PROMPT.md and source.json.
For a personal install, place the unzipped folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder. If you use the Claude apps instead, open Settings, go to Capabilities, and upload the skill under Skills.
The skill has no dependencies listed, so there is nothing else to install.
- Personal: ~/.claude/skills/glass-dark-mode-clock/
- Project only: .claude/skills/glass-dark-mode-clock/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload
How do you trigger the skill with a natural request?
Ask the agent for a page in this style and describe the content. The demo prompts in the package use the skill by name with the $ prefix, for example $glass-dark-mode-clock, so you can include that name to make the request explicit. You can also describe the look in your own words, such as a dark instrument panel with a circular dial, and the agent should pick the skill up from its description.
A useful request includes the page concept, the main message and any content anchors, because the skill governs the visual system and not the copy. The demo brief, for instance, names a page concept, a purpose and a set of content anchors.
Use $glass-dark-mode-clock to create a responsive standalone HTML design for a product landing page with a circular calibration dial beside the hero copy.Examples of prompts to try
The package's PROMPT.md gives two patterns. The minimal prompt asks for a responsive standalone HTML design with the same visual confidence and hierarchy as the included reference. The fuller version asks the agent to recreate a named page concept as a complete responsive HTML document, treating demo/index.html as the visual and interaction reference rather than a loose mood board.
Good variations change the subject and keep the constraints: a monitoring dashboard with a dial showing one key metric, or a product page for a technical tool with a split hero.
- Minimal: a responsive standalone HTML landing page in this style
- Reference-based: recreate the demo/index.html design for a new product brief
- Dashboard: a status page with a circular dial as the focal element and sparse labels
What does the skill need, and is it safe to run?
According to the item listing, the skill requires nothing beyond the agent itself. It does not run scripts and does not use the network. The skill is written as design guidance and does not add tools or automation of its own. The package contains only SKILL.md and demo files, so there is no code to execute.
Because it is only text guidance, the main review point is the output: check the generated HTML like any other front-end code before you publish it.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
- Adds tools or automation: no
Tips for getting better results
The skill exposes tuning levers in its text: glass strength (blur, opacity, highlight intensity), dial complexity (rings, ticks, labels), motion tempo, contrast, and glow restraint. Name the level you want in your request, for example a sparser dial or slower motion, so the agent does not over-decorate.
Keep the dial connected to the layout. The guide warns against treating the clock as a decorative afterthought and against overloading it with labels or motion until it becomes noisy.
- Say how dense the dial should be (few or many rings and labels)
- Ask for slow or no motion if the page will be read for long periods
- Give a content brief so the agent is not inventing copy
- Review the contrast yourself, since the skill does not run contrast checks
What people use it for
- A dark, premium landing page for a technical product with a dial beside the hero copy
- A monitoring or status dashboard where one circular gauge is the focal element
- A monochrome instrument-panel visual direction for a team's product site
- Consistent styling of several pages from one written design brief
Frequently asked questions
How do I install the Glass Dark Mode Clock skill?
Download the ZIP from the item page and unzip it. Place the glass-dark-mode-clock folder in ~/.claude/skills/ for personal use or in a project's .claude/skills/ folder. In the Claude apps, you can instead upload it under Settings, then Capabilities, then Skills.
Does the Glass Dark Mode Clock skill need anything else installed?
The listing states that it requires nothing. It runs no scripts and uses no network. It is a design-guidance file, so you only need an agent that supports skills.
Is the Glass Dark Mode Clock skill free?
The skill is released under the MIT licence, as stated on the item page. Check the licence file in the package for the full terms.
Is this the same as glassmorphism?
No. The skill says it is not generic glassmorphism and not just a standalone radial widget. It asks for a full dark instrument-panel system with a dominant circular dial, rather than bright translucent cards on colourful blobs.
When should I not use this skill?
Avoid it for bright, colourful or brand-heavy visuals, since the style limits accents to monochrome. Also avoid it for accessibility-critical interfaces, because translucent glass and low-contrast grid lines can reduce readability and the skill does not run specific contrast checks.
Why does my generated page look too busy?
The guide warns against overloading the dial with labels or motion. Ask the agent for fewer rings, ticks and labels, and slower or no motion, and it will use the tuning levers the skill describes.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you want a dark, premium, technical-looking landing page or dashboard built consistently from a written brief, and you are comfortable reviewing the output yourself. Pick something else if you need bright or brand-heavy visuals, or an interface where readability and contrast must be verified, since this skill does not check those.
Download the skill