Guide · Agent skill
How to use the Glass Dark UI agent skill (glass-dark-ui)
Updated · written with AI from the project's own documentation and checked against our catalogue data
The glass-dark-ui skill is an agent skill that teaches an AI coding agent a consistent set of rules for dark, frosted-glass web interfaces. Once installed, the agent can build components such as hero sections, cards, dashboards and modals using semi-transparent panels, background blur and thin gradient borders. This guide explains what the skill does, how to install it, how to trigger it with natural requests, and what to check before you ship the result.
Glass Dark UIMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Get the glass-dark-ui ZIP from the MengTo/Skills page on this directory.
- 2Unzip into a skills folder. Extract it to ~/.claude/skills/ for personal use, or to a project's .claude/skills/ folder for one project.
- 3Or upload it in the Claude apps. Go to Settings → Capabilities → Skills and upload the ZIP if you use the Claude apps.
- 4Describe the interface. Ask for a dark glass component in plain language, such as a glass card or frosted hero section.
- 5Review the output. Check contrast, focus states and the mobile layout, since the skill does not verify contrast itself.
What is an agent skill, and what does glass-dark-ui make the agent do?
An agent skill is a folder containing a SKILL.md file with instructions that an AI agent loads when a task matches the skill's description. The glass-dark-ui skill is for dark-mode glassmorphism: frosted surfaces, readable text contrast, and gradient or glow borders.
With the skill active, the agent follows a defined workflow. It confirms the environment (HTML/CSS, Tailwind or React) and the target surface (hero, dashboard, modal or card), defines dark colour tokens first, builds frosted panels, applies a masked gradient border, adds restrained shadow and glow, and then checks contrast and mobile behaviour before finishing.
- Default colour tokens such as a deep navy background, a semi-transparent glass fill, and light and muted text colours
- A glass panel pattern using backdrop-filter blur with a subtle inner highlight
- A border gradient pattern that uses a ::before pseudo-element with a mask
- A Tailwind usage example for the same panel style
- Dark mode checklist items such as minimum body text colour and visible focus rings
How do you install the glass-dark-ui skill?
Download the ZIP file for the skill from the MengTo/Skills page on our directory. Then choose one of the two install locations below.
For a personal skill available across your projects, unzip the download into ~/.claude/skills/. For a skill that only applies to one project, unzip it into that project's .claude/skills/ folder. In the Claude apps, you can instead upload the ZIP under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/glass-dark-ui/
- Project only: .claude/skills/glass-dark-ui/ inside your project folder
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
What files are in the skill folder?
The package contains three files. SKILL.md holds the instructions and CSS and Tailwind snippets the agent uses. The demo folder contains index.html, a standalone HTML example of the technique, and PROMPT.md, which holds example prompts for recreating the demo with the skill.
- SKILL.md: the skill instructions, tokens and patterns
- demo/index.html: a standalone reference example
- demo/PROMPT.md: sample prompts that use $glass-dark-ui
How do you trigger the skill with a natural request?
You do not need a special command. Describe the interface you want in plain language, and mention the glass, frosted, blur or dark-UI terms the skill's description covers. The agent matches your request to the skill and follows its rules.
The skill's own list of common requests gives good phrasing to copy. You can also name the skill directly, as the demo prompts do, by writing $glass-dark-ui in your request.
- Create a dark glass hero section with glowing border cards.
- Convert this bright UI to dark glassmorphism without losing contrast.
- Add border gradient glow to a frosted navbar, card or modal.
- Make my dark dashboard feel premium with glass panels and subtle depth.
- Use $glass-dark-ui to create a polished standalone HTML example.
What does the core CSS look like?
The skill supplies a glass panel and a border gradient as reusable CSS. The panel combines a semi-transparent dark fill, a 24px corner radius, a soft shadow, an inner highlight and a backdrop blur. The border gradient is drawn on a ::before pseudo-element and uses a mask so that only the 1px edge shows.
The agent starts from these defaults and tunes them for your brand. The source notes that the tokens are opinionated, so expect to adjust the colours.
.glass-panel {
background-color: var(--glass-fill);
border-radius: 24px;
box-shadow: 0 20px 48px rgba(2, 6, 23, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
}What should you check before you finish?
The skill asks the agent to validate contrast, focus states and mobile layout before it finalises the work. Treat this as a starting point, not a guarantee. The skill gives guidance but does not verify contrast itself, so run your own checks on text and interactive elements.
- Body text is at least #cbd5e1 on glass surfaces, per the checklist
- Focus rings are visible through an outline or a bright border state
- Glow radius and intensity are limited so text stays readable
- A stronger solid background is used where backdrop blur is not supported
- The layout works on small screens
What people use it for
- Landing page hero with a frosted dark panel and a glowing gradient border
- Dashboard with glass metric cards and a compact control panel
- Modal dialog with a blurred dark surface and a gradient outline
- Converting an existing light interface into a dark glassmorphism style
- Prototyping dark UI concepts quickly in plain HTML/CSS or Tailwind
Frequently asked questions
Is the glass-dark-ui skill free to use?
The skill is published under the MIT licence, as listed on this page. Check the licence file in the downloaded package for the full terms.
What do I need to use glass-dark-ui?
The listing states no specific requirements, and the skill does not run scripts or use the network. You need an agent environment that supports skills, and the output is HTML, CSS or Tailwind code.
Does glass-dark-ui run scripts or access the internet?
No. The skill is listed as not running scripts and not using the network. It consists of instructions, CSS snippets and a demo page.
Where do I put the skill folder?
Unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder for one project. In the Claude apps, upload the ZIP under Settings → Capabilities → Skills.
Can I use glass-dark-ui for a light theme or a strict brand?
It is not a good fit for light themes or strict brand styles. The default tokens are opinionated and must be tuned, as the skill itself says.
Will glass-dark-ui guarantee accessible contrast?
No. The skill gives guidance on readable contrast but does not verify it. Use a separate contrast checker before release, especially for accessibility-critical products.
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 glass-dark-ui if you are a front-end developer or designer who wants a premium dark frosted-glass look for a landing page, dashboard or modal without writing the CSS from scratch. Pick something else if you need a light theme, a strict existing brand style, or automated contrast verification, since the skill gives guidance only.
Download the skill