Skip to content
Get packs

Glass Dark UI

Guides the agent to build dark frosted-glass interfaces with gradient borders and readable contrast

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
3 files

What it does

When installed, the agent follows a set of design rules for dark, frosted-glass style web interfaces: semi-transparent panels with background blur, thin gradient outlines, soft glows and shadows, and text colors chosen for readability. It supplies default color tokens and ready-made CSS and Tailwind snippets so the agent can produce HTML/CSS components such as hero sections, cards, dashboards and modals instead of inventing the style from scratch. It also reminds the agent to check contrast, focus states and mobile layout before finishing.

Great for

  • Front-end developers who want a premium dark glassmorphism look for a landing page or dashboard
  • Designers prototyping dark UI concepts in HTML/CSS or Tailwind
  • Anyone who wants consistent frosted-card styling without writing the CSS by hand

Skip it if

  • Projects that need a light theme or a strict brand style, since the default tokens are opinionated and must be tuned (the skill itself says so)
  • Accessibility-critical products that rely on automated contrast tools; the skill gives guidance but does not verify contrast itself

Try asking

  • “Create a dark glass hero section with glowing border cards.”
  • “Convert this bright UI to dark glassmorphism without losing contrast.”
  • “Add a gradient border glow to a frosted navbar.”
  • “Make my dark dashboard feel premium with glass panels and subtle depth.”
Step-by-step guide: how to use Glass Dark UIInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the MIT licence and an attribution note.

    glass-dark-ui.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip glass-dark-ui.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip glass-dark-ui.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 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 your framework (plain HTML/CSS, Tailwind or React) and the surface (hero, card, modal) in your request so the agent picks the right snippet.
  • Provide your brand colors up front so the agent tunes the default tokens rather than keeping the sample blues and purples.
  • Ask the agent to run a contrast check on the final text colors, since the skill asks for it but results depend on your palette.

What's inside

  • demo/index.html
  • demo/PROMPT.md
  • 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.