mengto/glass-dark-ui

SkillScore100Maintained

Build dark-mode glassmorphism interfaces with readable contrast, frosted surfaces, and gradient borders using a pseudo-element mask. Use when asked for glass cards, frosted dark hero sections, blur panels, or dark UI systems with gradient/glow borders.

Frontendby mengto

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/mengto-glass-dark-ui/SKILL.md

decimalai skills pull mengto-glass-dark-ui --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/mengto-glass-dark-ui/SKILL.md https://app.decimal.ai/s/mengto-glass-dark-ui/SKILL.md

Raw file: /s/mengto-glass-dark-ui/SKILL.md ↗ · machine-readable summary at /s/mengto-glass-dark-ui.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 49d ago

Yes — +14% lift · at higher cost+31% tokens0% turns100% of whole cases pass with skill (22/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-02	✗→✓	▲ Improved	24%	0%
case-03	✗→✓	▲ Improved	19%	0%
case-19	✗→✓	▲ Improved	55%	0%
case-01	✓→✓	＝ Same ✓	28%	0%
case-04	✓→✓	＝ Same ✓	43%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

mengto / skills

agent-skills/web-design/glass-dark-ui/SKILL.md

View on GitHub ↗

License MITImported 8/3/2026Version v1

Skill contents

SKILL.md

Glass Dark UI Skill

Workflow

Confirm environment (HTML/CSS, Tailwind, or React) and target surface (hero, dashboard, modal, card).
Define dark UI tokens first (background, glass fill, border glow, primary text, muted text).
Build frosted panels with backdrop-filter, transparent dark fill, and subtle inner highlight.
Apply the masked gradient border (.border-gradient::before) to key surfaces.
Add restrained depth (shadow + glow) and clear hover/focus states.
Validate contrast and mobile behavior before finalizing.

Base Tokens

Use these as defaults and tune per brand.

css
:root {
  --bg-0: #020617;
  --bg-1: #0b1220;
  --glass-fill: rgba(15, 23, 42, 0.45);
  --glass-fill-strong: rgba(15, 23, 42, 0.62);
  --text-main: #e2e8f0;
  --text-muted: #94a3b8;
  --accent: #60a5fa;
}

Glass Panel Pattern

css
.glass-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  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%);
}

Border Gradient Pattern

css
.border-gradient {
  position: relative;
}

.border-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  background: linear-gradient(
    145deg,
    rgba(148, 163, 184, 0.28) 0%,
    rgba(96, 165, 250, 0.36) 45%,
    rgba(168, 85, 247, 0.3) 70%,
    rgba(148, 163, 184, 0.18) 100%
  );
  pointer-events: none;
}

Tailwind Usage Pattern

html
<section class="relative rounded-3xl border-gradient bg-slate-950/45 backdrop-blur-xl p-8 shadow-[0_20px_48px_rgba(2,6,23,0.45),inset_0_1px_0_rgba(255,255,255,0.12)]">
  <h2 class="text-slate-100 text-2xl font-semibold">Frosted Panel</h2>
  <p class="text-slate-400 mt-2">Dark glass card with masked gradient border.</p>
</section>

Dark Mode Checklist

Keep body text at least #cbd5e1 on dark glass surfaces.
Avoid pure black overlays over blur; use deep navy/charcoal alpha instead.
Limit glow radius/intensity to preserve readability.
Ensure focus rings are visible (outline or bright border state).
Add fallback for non-blur environments: stronger solid background (--glass-fill-strong).

Common Requests This Skill Should Handle

"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/modal."
"Make my dark dashboard feel premium with glass panels and subtle depth."

Illustrative Want to see what mengto/glass-dark-ui would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/10/2026, 08:59 UTC · 22 cases

Lift

+14%

100% vs 86%

Agent turns

1.0 vs 1.0

Tokens

+31%

3,191.86 vs 2,433.68

fail → pass · 3pass → pass · 19

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-01 I'm building a web app modal in plain CSS and want to give it a sleek dark glass design. Could you provide the CSS styling for a frosted dark dialog panel featuring translucent dark fills, a masked gradient outline, subtle depth highlights, and readable high-contrast text?	pass→pass	18,646	18,067	-3%	1	1	0%	4,529	5,810	+28%	0	0	—
case-02 Can you write the Tailwind CSS code for a hero section using dark glassmorphism? I need a frosted primary container card with gradient borders, muted descriptive text, and glowing interactive elements tailored for dark surfaces.	fail→pass	17,400	16,701	-4%	1	1	0%	3,899	4,829	+24%	0	0	—
case-03 Our analytics dashboard cards currently look flat. Please generate the CSS color tokens and panel styling rules to convert them into premium frosted dark glass surfaces, including proper shadow depth and fallback styling for browsers where blur filter effects aren't supported.	fail→pass	14,804	12,706	-14%	1	1	0%	3,308	3,928	+19%	0	0	—
case-04 We are setting up the main dark mode background color for a web dashboard. A team member recommends using pure #000000 pitch black to maximize contrast and OLED battery savings. Should we use pure #000000 for the primary backdrop?	pass→pass	10,921	10,352	-5%	1	1	0%	2,072	2,961	+43%	0	0	—
case-05 When selecting text colors for dark translucent glass panels, a designer suggests using #ffffff pure white for headings and #64748b (slate-500) for secondary body copy. How should this palette be adjusted for readable dark UI?	pass→pass	12,707	8,787	-31%	1	1	0%	2,501	2,739	+10%	0	0	—
case-06 A developer suggests using deep navy blue #1e3a8a as the accent highlight color on a dark slate glass background (#020617). Is this accent choice effective for dark surfaces?	pass→pass	9,266	10,489	+13%	1	1	0%	1,737	3,066	+77%	0	0	—
case-07 Standard glassmorphism rules often specify `backdrop-filter: blur(10px)`. What exact combined backdrop filter properties and values should be applied to dark glass panels to enhance underlying color richness without muddying the text?	pass→pass	12,149	10,222	-16%	1	1	0%	2,320	2,990	+29%	0	0	—
case-08 Many dark card designs rely solely on standard outer drop-shadows like `0 10px 30px rgba(0,0,0,0.5)`. How should the `box-shadow` property on `.glass-panel` be configured to combine outer depth with an upper edge inner highlight?	pass→pass	10,023	8,805	-12%	1	1	0%	2,176	2,784	+28%	0	0	—
case-09 A front-end developer styling a dark glass panel suggests using sharp 0px square corners so the border gradient renders without clipping. Is this standard practice for glass UI panels?	pass→pass	11,658	8,915	-24%	1	1	0%	2,337	2,834	+21%	0	0	—
case-10 When developers create subtle gradient borders, they often add a wrapper `div` with `padding: 1px` or use a standard solid `border-image`. How should a thin, crisp gradient border outline be generated on `.border-gradient` using pseudo-elements without altering layout dimensions?	pass→pass	13,690	9,533	-30%	1	1	0%	2,599	2,947	+13%	0	0	—
case-11 A designer wants to give a dark frosted card a border gradient using 100% opaque, fully saturated red-to-yellow rainbow colors (#ff0000 to #ffff00). Is this appropriate for dark glass design, and how should border gradient colors be structured?	pass→pass	14,550	10,031	-31%	1	1	0%	2,583	2,770	+7%	0	0	—
case-12 When building a primary dark glass container card in Tailwind CSS, a developer applies `p-2` tight padding and `rounded-sm` minimal rounding. Does this fit dark glass panel design standards?	pass→pass	9,494	7,134	-25%	1	1	0%	1,768	2,327	+32%	0	0	—
case-13 When adding titles and secondary text inside a dark glass card with Tailwind CSS, a developer uses pure white `text-white` and low-contrast `text-slate-500`. Which Tailwind text color guidelines balance legibility on translucent dark surfaces?	pass→pass	9,712	8,200	-16%	1	1	0%	2,060	2,576	+25%	0	0	—
case-14 A developer wants to use `#64748b` for secondary body copy on dark translucent glass panels to reduce visual clutter. Is this color bright enough, or what minimum slate color threshold must be maintained for readable body text on dark glass?	pass→pass	11,780	9,249	-21%	1	1	0%	2,372	2,840	+20%	0	0	—
case-15 When placing dark blurred overlays behind modal dialogs or over background imagery, junior designers often apply `rgba(0, 0, 0, 0.7)` pure black washes. What background overlay color strategy should be used instead over blur effects?	pass→pass	10,924	9,885	-10%	1	1	0%	2,032	3,048	+50%	0	0	—
case-16 Some legacy browsers or battery-saver mobile modes do not render CSS `backdrop-filter: blur()`. What fallback approach should be provided for these non-blur environments to maintain readable contrast?	pass→pass	12,137	9,656	-20%	1	1	0%	2,389	2,998	+25%	0	0	—
case-17 We are starting a full redesign of our dark web application surface. Should we build the interactive component layouts first and tune visual colors later, or define design tokens first?	pass→pass	12,696	12,117	-5%	1	1	0%	2,028	3,163	+56%	0	0	—
case-18 When building interactive frosted glass buttons and card controls, hover effects are often styled while focus states get omitted. What accessibility requirement must be satisfied for keyboard navigation on dark glass?	pass→pass	9,061	7,861	-13%	1	1	0%	1,634	2,528	+55%	0	0	—
case-19 What initial step must be taken at the very beginning of the dark glass design workflow before defining tokens or coding components?	fail→pass	6,259	1,841	-71%	1	1	0%	886	1,371	+55%	0	0	—
case-20 We are styling an iOS-style bright white translucent sidebar for a light theme application using `backdrop-filter`. What exact light mode background tokens and white glass fill values should be assigned?	pass→pass	11,182	10,431	-7%	1	1	0%	2,203	3,136	+42%	0	0	—
case-21 How do I implement a dark Neumorphic soft-UI push button with dual inset light and dark extruding box shadows (`-5px -5px 10px ...`) in CSS?	pass→pass	14,238	13,048	-8%	1	1	0%	3,044	3,956	+30%	0	0	—
case-22 Please generate a standard flat material design dark theme palette using 500-level primary colors and flat surface elevation levels (0dp, 1dp, 4dp) without any blur or translucent glass effects.	pass→pass	14,382	15,497	+8%	1	1	0%	3,064	4,620	+51%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +14 percentage points is the difference between those two pass rates over the 22 comparable cases.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 86.4%
Pass rate with the skill: 100%
Cases attempted: 22
Cases counted toward lift: 22
Cases that regressed: 0
Skill version measured: v1
Run completed: 8/10/2026, 08:59 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-02

Prompt

Can you write the Tailwind CSS code for a hero section using dark glassmorphism? I need a frosted primary container card with gradient borders, muted descriptive text, and glowing interactive elements tailored for dark surfaces.

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run100

Live evalNeeds ≥10 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+32% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 48 days ago

Other measured skills in the registry, with their headline benchmark lift.

Test case

Without → With

Effect

Δ tokens

Δ turns

case-02

✗→✓

▲ Improved

24%

case-03

✗→✓

▲ Improved

19%

case-19

✗→✓

▲ Improved

55%

case-01

✓→✓

＝ Same ✓

28%

case-04

✓→✓

＝ Same ✓

43%

Workflow

Confirm environment (HTML/CSS, Tailwind, or React) and target surface (hero, dashboard, modal, card).

Define dark UI tokens first (background, glass fill, border glow, primary text, muted text).

Build frosted panels with backdrop-filter, transparent dark fill, and subtle inner highlight.

Apply the masked gradient border (.border-gradient::before) to key surfaces.

Add restrained depth (shadow + glow) and clear hover/focus states.

Validate contrast and mobile behavior before finalizing.

css

:root { --bg-0: #020617; --bg-1: #0b1220; --glass-fill: rgba(15, 23, 42, 0.45); --glass-fill-strong: rgba(15, 23, 42, 0.62); --text-main: #e2e8f0; --text-muted: #94a3b8; --accent: #60a5fa; }

Glass Panel Pattern

css

.glass-panel { background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)); 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%); }

Border Gradient Pattern

css

.border-gradient { position: relative; } .border-gradient::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; background: linear-gradient( 145deg, rgba(148, 163, 184, 0.28) 0%, rgba(96, 165, 250, 0.36) 45%, rgba(168, 85, 247, 0.3) 70%, rgba(148, 163, 184, 0.18) 100% ); pointer-events: none; }

Tailwind Usage Pattern

html

<section class="relative rounded-3xl border-gradient bg-slate-950/45 backdrop-blur-xl p-8 shadow-[0_20px_48px_rgba(2,6,23,0.45),inset_0_1px_0_rgba(255,255,255,0.12)]"> <h2 class="text-slate-100 text-2xl font-semibold">Frosted Panel</h2> <p class="text-slate-400 mt-2">Dark glass card with masked gradient border.</p> </section>

Dark Mode Checklist

Keep body text at least #cbd5e1 on dark glass surfaces.

Avoid pure black overlays over blur; use deep navy/charcoal alpha instead.

Limit glow radius/intensity to preserve readability.

Ensure focus rings are visible (outline or bright border state).

Add fallback for non-blur environments: stronger solid background (--glass-fill-strong).

Case	Status	Duration (ms)	Turns	Tokens	Tool calls
case-01 I'm building a web app modal in plain CSS and want to give it a sleek dark glass design. Could you provide the CSS styling for a frosted dark dialog panel featuring translucent dark fills, a masked gradient outline, subtle depth highlights, and readable high-contrast text?	pass→pass	18,646	18,067	-3%	1	1	0%	4,529	5,810	+28%	—
case-02 Can you write the Tailwind CSS code for a hero section using dark glassmorphism? I need a frosted primary container card with gradient borders, muted descriptive text, and glowing interactive elements tailored for dark surfaces.	fail→pass	17,400	16,701	-4%	1	1	0%	3,899	4,829	+24%	—
case-03 Our analytics dashboard cards currently look flat. Please generate the CSS color tokens and panel styling rules to convert them into premium frosted dark glass surfaces, including proper shadow depth and fallback styling for browsers where blur filter effects aren't supported.	fail→pass	14,804	12,706	-14%	1	1	0%	3,308	3,928	+19%	—
case-04 We are setting up the main dark mode background color for a web dashboard. A team member recommends using pure #000000 pitch black to maximize contrast and OLED battery savings. Should we use pure #000000 for the primary backdrop?	pass→pass	10,921	10,352	-5%	1	1	0%	2,072	2,961	+43%	—
case-05 When selecting text colors for dark translucent glass panels, a designer suggests using #ffffff pure white for headings and #64748b (slate-500) for secondary body copy. How should this palette be adjusted for readable dark UI?	pass→pass	12,707	8,787	-31%	1	1	0%	2,501	2,739	+10%	—
case-06 A developer suggests using deep navy blue #1e3a8a as the accent highlight color on a dark slate glass background (#020617). Is this accent choice effective for dark surfaces?	pass→pass	9,266	10,489	+13%	1	1	0%	1,737	3,066	+77%	—
case-07 Standard glassmorphism rules often specify `backdrop-filter: blur(10px)`. What exact combined backdrop filter properties and values should be applied to dark glass panels to enhance underlying color richness without muddying the text?	pass→pass	12,149	10,222	-16%	1	1	0%	2,320	2,990	+29%	—
case-08 Many dark card designs rely solely on standard outer drop-shadows like `0 10px 30px rgba(0,0,0,0.5)`. How should the `box-shadow` property on `.glass-panel` be configured to combine outer depth with an upper edge inner highlight?	pass→pass	10,023	8,805	-12%	1	1	0%	2,176	2,784	+28%	—
case-09 A front-end developer styling a dark glass panel suggests using sharp 0px square corners so the border gradient renders without clipping. Is this standard practice for glass UI panels?	pass→pass	11,658	8,915	-24%	1	1	0%	2,337	2,834	+21%	—
case-10 When developers create subtle gradient borders, they often add a wrapper `div` with `padding: 1px` or use a standard solid `border-image`. How should a thin, crisp gradient border outline be generated on `.border-gradient` using pseudo-elements without altering layout dimensions?	pass→pass	13,690	9,533	-30%	1	1	0%	2,599	2,947	+13%	—
case-11 A designer wants to give a dark frosted card a border gradient using 100% opaque, fully saturated red-to-yellow rainbow colors (#ff0000 to #ffff00). Is this appropriate for dark glass design, and how should border gradient colors be structured?	pass→pass	14,550	10,031	-31%	1	1	0%	2,583	2,770	+7%	—
case-12 When building a primary dark glass container card in Tailwind CSS, a developer applies `p-2` tight padding and `rounded-sm` minimal rounding. Does this fit dark glass panel design standards?	pass→pass	9,494	7,134	-25%	1	1	0%	1,768	2,327	+32%	—
case-13 When adding titles and secondary text inside a dark glass card with Tailwind CSS, a developer uses pure white `text-white` and low-contrast `text-slate-500`. Which Tailwind text color guidelines balance legibility on translucent dark surfaces?	pass→pass	9,712	8,200	-16%	1	1	0%	2,060	2,576	+25%	—
case-14 A developer wants to use `#64748b` for secondary body copy on dark translucent glass panels to reduce visual clutter. Is this color bright enough, or what minimum slate color threshold must be maintained for readable body text on dark glass?	pass→pass	11,780	9,249	-21%	1	1	0%	2,372	2,840	+20%	—
case-15 When placing dark blurred overlays behind modal dialogs or over background imagery, junior designers often apply `rgba(0, 0, 0, 0.7)` pure black washes. What background overlay color strategy should be used instead over blur effects?	pass→pass	10,924	9,885	-10%	1	1	0%	2,032	3,048	+50%	—
case-16 Some legacy browsers or battery-saver mobile modes do not render CSS `backdrop-filter: blur()`. What fallback approach should be provided for these non-blur environments to maintain readable contrast?	pass→pass	12,137	9,656	-20%	1	1	0%	2,389	2,998	+25%	—
case-17 We are starting a full redesign of our dark web application surface. Should we build the interactive component layouts first and tune visual colors later, or define design tokens first?	pass→pass	12,696	12,117	-5%	1	1	0%	2,028	3,163	+56%	—
case-18 When building interactive frosted glass buttons and card controls, hover effects are often styled while focus states get omitted. What accessibility requirement must be satisfied for keyboard navigation on dark glass?	pass→pass	9,061	7,861	-13%	1	1	0%	1,634	2,528	+55%	—
case-19 What initial step must be taken at the very beginning of the dark glass design workflow before defining tokens or coding components?	fail→pass	6,259	1,841	-71%	1	1	0%	886	1,371	+55%	—
case-20 We are styling an iOS-style bright white translucent sidebar for a light theme application using `backdrop-filter`. What exact light mode background tokens and white glass fill values should be assigned?	pass→pass	11,182	10,431	-7%	1	1	0%	2,203	3,136	+42%	—
case-21 How do I implement a dark Neumorphic soft-UI push button with dual inset light and dark extruding box shadows (`-5px -5px 10px ...`) in CSS?	pass→pass	14,238	13,048	-8%	1	1	0%	3,044	3,956	+30%	—
case-22 Please generate a standard flat material design dark theme palette using 500-level primary colors and flat surface elevation levels (0dp, 1dp, 4dp) without any blur or translucent glass effects.	pass→pass	14,382	15,497	+8%	1	1	0%	3,064	4,620	+51%	—

Case

Status

Duration (ms)

Turns

Tokens

Tool calls

Without

With

Without

With

Without

With

Without

With

case-01

I'm building a web app modal in plain CSS and want to give it a sleek dark glass design. Could you provide the CSS styling for a frosted dark dialog panel featuring translucent dark fills, a masked gradient outline, subtle depth highlights, and readable high-contrast text?

pass→pass

18,646

18,067

-3%

4,529

5,810

+28%

—

case-02

Can you write the Tailwind CSS code for a hero section using dark glassmorphism? I need a frosted primary container card with gradient borders, muted descriptive text, and glowing interactive elements tailored for dark surfaces.

fail→pass

17,400

16,701

-4%

3,899

4,829

+24%

—

case-03

Our analytics dashboard cards currently look flat. Please generate the CSS color tokens and panel styling rules to convert them into premium frosted dark glass surfaces, including proper shadow depth and fallback styling for browsers where blur filter effects aren't supported.

fail→pass

14,804

12,706

-14%

3,308

3,928

+19%

—

case-04

We are setting up the main dark mode background color for a web dashboard. A team member recommends using pure #000000 pitch black to maximize contrast and OLED battery savings. Should we use pure #000000 for the primary backdrop?

pass→pass

10,921

10,352

-5%

2,072

2,961

+43%

—

case-05

When selecting text colors for dark translucent glass panels, a designer suggests using #ffffff pure white for headings and #64748b (slate-500) for secondary body copy. How should this palette be adjusted for readable dark UI?

pass→pass

12,707

8,787

-31%

2,501

2,739

+10%

—

case-06

A developer suggests using deep navy blue #1e3a8a as the accent highlight color on a dark slate glass background (#020617). Is this accent choice effective for dark surfaces?

pass→pass

9,266

10,489

+13%

1,737

3,066

+77%

—

case-07

Standard glassmorphism rules often specify `backdrop-filter: blur(10px)`. What exact combined backdrop filter properties and values should be applied to dark glass panels to enhance underlying color richness without muddying the text?

pass→pass

12,149

10,222

-16%

2,320

2,990

+29%

—

case-08

Many dark card designs rely solely on standard outer drop-shadows like `0 10px 30px rgba(0,0,0,0.5)`. How should the `box-shadow` property on `.glass-panel` be configured to combine outer depth with an upper edge inner highlight?

pass→pass

10,023

8,805

-12%

2,176

2,784

+28%

—

case-09

A front-end developer styling a dark glass panel suggests using sharp 0px square corners so the border gradient renders without clipping. Is this standard practice for glass UI panels?

pass→pass

11,658

8,915

-24%

2,337

2,834

+21%

—

case-10

When developers create subtle gradient borders, they often add a wrapper `div` with `padding: 1px` or use a standard solid `border-image`. How should a thin, crisp gradient border outline be generated on `.border-gradient` using pseudo-elements without altering layout dimensions?

pass→pass

13,690

9,533

-30%

2,599

2,947

+13%

—

case-11

A designer wants to give a dark frosted card a border gradient using 100% opaque, fully saturated red-to-yellow rainbow colors (#ff0000 to #ffff00). Is this appropriate for dark glass design, and how should border gradient colors be structured?

pass→pass

14,550

10,031

-31%

2,583

2,770

+7%

—

case-12

When building a primary dark glass container card in Tailwind CSS, a developer applies `p-2` tight padding and `rounded-sm` minimal rounding. Does this fit dark glass panel design standards?

pass→pass

9,494

7,134

-25%

1,768

2,327

+32%

—

case-13

When adding titles and secondary text inside a dark glass card with Tailwind CSS, a developer uses pure white `text-white` and low-contrast `text-slate-500`. Which Tailwind text color guidelines balance legibility on translucent dark surfaces?

pass→pass

9,712

8,200

-16%

2,060

2,576

+25%

—

case-14

A developer wants to use `#64748b` for secondary body copy on dark translucent glass panels to reduce visual clutter. Is this color bright enough, or what minimum slate color threshold must be maintained for readable body text on dark glass?

pass→pass

11,780

9,249

-21%

2,372

2,840

+20%

—

case-15

When placing dark blurred overlays behind modal dialogs or over background imagery, junior designers often apply `rgba(0, 0, 0, 0.7)` pure black washes. What background overlay color strategy should be used instead over blur effects?

pass→pass

10,924

9,885

-10%

2,032

3,048

+50%

—

case-16

Some legacy browsers or battery-saver mobile modes do not render CSS `backdrop-filter: blur()`. What fallback approach should be provided for these non-blur environments to maintain readable contrast?

pass→pass

12,137

9,656

-20%

2,389

2,998

+25%

—

case-17

We are starting a full redesign of our dark web application surface. Should we build the interactive component layouts first and tune visual colors later, or define design tokens first?

pass→pass

12,696

12,117

-5%

2,028

3,163

+56%

—

case-18

When building interactive frosted glass buttons and card controls, hover effects are often styled while focus states get omitted. What accessibility requirement must be satisfied for keyboard navigation on dark glass?

pass→pass

9,061

7,861

-13%

1,634

2,528

+55%

—

case-19

What initial step must be taken at the very beginning of the dark glass design workflow before defining tokens or coding components?

fail→pass

6,259

1,841

-71%

886

1,371

+55%

—

case-20

We are styling an iOS-style bright white translucent sidebar for a light theme application using `backdrop-filter`. What exact light mode background tokens and white glass fill values should be assigned?

pass→pass

11,182

10,431

-7%

2,203

3,136

+42%

—

case-21

How do I implement a dark Neumorphic soft-UI push button with dual inset light and dark extruding box shadows (`-5px -5px 10px ...`) in CSS?

pass→pass

14,238

13,048

-8%

3,044

3,956

+30%

—

case-22

Please generate a standard flat material design dark theme palette using 500-level primary colors and flat surface elevation levels (0dp, 1dp, 4dp) without any blur or translucent glass effects.

pass→pass

14,382

15,497

+8%

3,064

4,620

+51%

—

How this skill was measured

Model measured

gemini-3.6-flash

Graded by

gemini-3.6-flash

Grading method

judged

Verification

verified

Pass rate without the skill

86.4%

Pass rate with the skill

100%

Cases attempted

Cases counted toward lift

Cases that regressed

Skill version measured

Run completed

8/10/2026, 08:59 UTC

mengto/glass-dark-ui

SkillSafety

Source

Glass Dark UI Skill

Workflow

Base Tokens

Glass Panel Pattern

Border Gradient Pattern

Tailwind Usage Pattern

Dark Mode Checklist

Common Requests This Skill Should Handle

How this skill was measured

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-02

Related skills

Ready to supercharge your AI agents?

mengto/glass-dark-ui

SkillSafety

Source

Glass Dark UI Skill

Workflow

Base Tokens

Glass Panel Pattern

Border Gradient Pattern

Tailwind Usage Pattern

Dark Mode Checklist

Common Requests This Skill Should Handle

How this skill was measured

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-02

Related skills