What is the glass-dark-ui skill?
glass-dark-ui is a skill in boraoztunc/skills for dark glassmorphism interfaces. It sets dark base tokens, a frosted panel pattern using backdrop-filter blur and saturate with layered gradients, and a masked gradient border for glowing edges. It also fixes a minimum body text color on glass and requires visible focus rings and non-blur fallbacks.
glass-dark-ui is one skill in boraoztunc/skills. It covers dark-mode glassmorphism: frosted glass panels, blur shells and gradient borders, and is chosen when a project needs the concrete CSS rather than general layout direction.
The skill sets dark base tokens first, such as a near-black background and a translucent glass fill, then builds the frosted panel and border patterns on top of those tokens.
What changes in the agent's output
- Panels get backdrop-filter blur combined with saturate and layered gradients instead of a flat semi-transparent background.
- A glowing edge comes from a masked gradient pseudo-element with blue, purple and slate stops rather than a solid border color.
- Body text on glass stays at or above a fixed light gray rather than a color that drifts below readable contrast.
- Focus rings stay visible on top of the blur, and a non-blur fallback is defined for browsers without backdrop-filter support.
The build order it follows
The skill moves in a fixed sequence: confirm the target surface, define dark tokens, build the frosted panel, apply the masked gradient border, add shadow-based depth, then check contrast and mobile behavior last.
Who the glass-dark-ui skill is for
Best for
- Dark-themed dashboards, modals and nav panels that want a frosted glass look.
- Hero sections or cards that need a glowing gradient edge over a blurred background.
- Projects already committed to a dark palette rather than a light or dual-theme system.
Not for
- If your job is mostly adapting an existing palette to dark surfaces generally, the dark-mode-design skill is the better fit for that.
- When the task is deriving color scales and checking contrast ratios from math, the design-tokens skill is the better fit for that.
- If your job is mostly picking exact CSS values for dark mode spacing and type, the absolute-ui skill is the better fit for that.
Use it with UiChemy
Glassmorphism is a surface treatment inside an existing page, not a page builder. Once the dark panels and borders are styled, UiChemy AI to WordPress carries that front-end build into an editable WordPress page.
How to install Glass Dark UI Skill for AI Coding Agents
mkdir -p ~/.claude/skills/glass-dark-ui && curl -o ~/.claude/skills/glass-dark-ui/SKILL.md https://raw.githubusercontent.com/boraoztunc/skills/main/glass-dark-ui/SKILL.mdCreate the skill path
Run
mkdir -p ~/.claude/skills/glass-dark-uito make a place for SKILL.md.Download the SKILL.md
Run the curl command above to copy glass-dark-ui's SKILL.md from boraoztunc/skills into that path.
Or clone the whole set
Run
git clone https://github.com/boraoztunc/skills.gitand symlink glass-dark-ui into ~/.claude/skills for the full collection.
Check that it loaded
Ask the agent for a dark glass panel and check the output uses backdrop-filter blur with saturate, a masked gradient border and body text at or above the minimum contrast color.
Key features
- Dark base token setTokens such as a near-black background and a translucent slate glass fill give every panel on the page the same starting palette.
- Frosted panel patternbackdrop-filter: blur(18px) saturate(140%) paired with layered gradients and an inset highlight produces a readable frosted surface over any background.
- Masked gradient borderA pseudo-element mask renders a glowing blue, purple and slate border around a panel without adding extra markup or consuming layout space.
- Minimum text contrast ruleBody text on glass surfaces is fixed at or above a specific light gray value, so copy stays readable instead of fading into the blur.
- No pure black overlaysThe skill avoids stacking a solid black layer over a blurred surface, since that flattens the glass effect into a plain dark panel.
- Visible focus ringsInteractive elements keep a focus ring that stays visible against the blurred background rather than relying on the glass alone to show state.
- Non-blur fallbackA solid background color ships as a fallback for browsers or environments where backdrop-filter is not supported.
- Fixed build sequenceConfirming the surface, setting tokens, building the panel, adding the border, layering depth, then checking contrast keeps the output in a repeatable order.
Frequently asked questions
What is the glass-dark-ui skill?
It is a skill in boraoztunc/skills for dark-mode glassmorphism. It covers frosted glass panels built with backdrop-filter, a masked gradient border for a glowing edge, and contrast rules that keep body text readable on top of the blur.
How do I install the glass-dark-ui skill?
Download its SKILL.md into a local skills path with curl, or clone the full boraoztunc/skills repository and symlink glass-dark-ui into your agent's skills setup. Both routes work without a package manager or build step.
How does the frosted panel pattern work in glass-dark-ui?
It combines backdrop-filter blur and saturate with layered gradients and an inset highlight over a translucent dark fill. The blur needs visible content behind the panel; it will not create a frosted look over a flat, empty background.
What is the masked gradient border in glass-dark-ui?
A pseudo-element with a padding-based mask renders a glowing border using blue, purple and slate gradient stops around a panel. Masking keeps the gradient ring from covering the panel's own content.
What contrast rule does glass-dark-ui set for body text?
Body text on a dark glass surface must stay at or above a fixed light gray value rather than any color that looks fine in isolation. The rule exists because text can read fine on a flat dark background but fail once blur and transparency are added.
Does glass-dark-ui work without backdrop-filter support?
Yes. The skill defines a solid background color as a fallback for browsers or embedded environments that do not support backdrop-filter, so the panel stays usable even without the blur effect rendering.
In what order does glass-dark-ui build a dark glass interface?
It confirms the target surface, sets dark tokens, builds the frosted panel, applies the masked gradient border, adds shadow-based depth, then checks contrast and mobile behavior last, rather than jumping straight to visual polish.