Skip to content
Get packs

Dark Glass Clean Layout

Builds dark frosted-glass web layouts with clean multi-column structure and restrained depth

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

What it does

Once installed, the agent builds web pages in a specific dark, frosted-glass visual style: near-black backgrounds, translucent blurred panels, a pill-shaped top navigation, a three-column workspace (navigation, central stage, sidebar), and a few floating data cards around a calm centre. The skill also sets rules for muted monochrome colour, subtle motion, and small technical labels so the result feels like a premium dark dashboard rather than a generic glassmorphism template.

Great for

  • Designers or developers who want a premium dark dashboard or 'intelligence console' style landing page or app shell
  • Front-end builders who want a consistent glass layout language across navigation, sidebars and cards
  • Anyone prototyping a dark workspace-style interface quickly

Skip it if

  • Projects needing a bright, colourful or pastel brand look, since the skill explicitly steers away from that
  • Teams that need accessibility-certified designs without review, since the low-contrast glass and muted labels can hurt readability and the skill does not address this

Try asking

  • “Build a dark glass landing page with a pill-shaped top nav and a centred hero stage”
  • “Create a three-column dark workspace layout with floating log cards around the main visualisation”
  • “Apply the dark frosted-glass layout style to my existing React dashboard”
Step-by-step guide: how to use Dark Glass Clean LayoutInstall, 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.

    dark-glass-clean-layout.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip dark-glass-clean-layout.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 the page type and sections you need so the agent can map them onto the left nav, central stage and right sidebar
  • Review the demo/index.html file to preview the intended look before asking for a full build
  • Add your own accent colour and contrast requirements explicitly, since the skill keeps the palette monochrome and does not set accessibility targets

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.