skills.rest
superpollo02
superpollo02COMMUNITY
Explore all skills by this author →
GitHub

glassmorphism

Standardize frosted glass UI components with token-driven styling and WCAG 2.2 AA accessibility.

Updated May 13, 2026
Search Tags:#accessibility#design system#wcag 2.2#glassmorphism#ui tokens#frosted glass#component rules
One-click install
npx skills add https://github.com/superpollo02/awesome-design-skill --skill glassmorphism-superpollo02
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: glassmorphism
Source: https://github.com/superpollo02/awesome-design-skill/tree/main/skills/glassmorphism
Command: npx skills add https://github.com/superpollo02/awesome-design-skill --skill glassmorphism-superpollo02

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Glassmorphism guidelines turn inconsistent frosted-glass UI implementations into a coherent, accessible design system that engineers can apply reliably.

Core Features & Use Cases

  • Translucent glass foundations: defines a crisp visual direction with luminous borders, blur/layer depth, and high-contrast enterprise styling.
  • Token-driven styling: standardizes colors, typography (Plus Jakarta Sans + JetBrains Mono), rounding, and spacing so components stay consistent.
  • Accessibility and quality gates: enforces WCAG 2.2 AA, keyboard-first interaction, and testable acceptance criteria to prevent low-contrast or ambiguous UI patterns.

Quick Start

Use the glassmorphism skill to generate implementation-ready component rules and tokenized styling guidance for frosted-glass interfaces.

Frequently Asked Questions about glassmorphism

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build accessible frosted-glass UI components that meet WCAG 2.2 AA standards?▼

To build accessible frosted-glass UI components, you need token-first styling rules and explicit keyboard-first interaction constraints. This approach enforces WCAG 2.2 AA compliance across translucent layers to prevent low-contrast or ambiguous UI patterns.

What are the design token requirements for standardizing glassmorphism across an enterprise design system?▼

Standardizing glassmorphism requires token-driven rules for colors, typography, rounding, and spacing. Using typography tokens like Plus Jakarta Sans and JetBrains Mono ensures your frosted glass interface components remain visually consistent across responsive layouts.

How do I test and validate frosted glass UI accessibility for keyboard-first interaction?▼

You validate frosted glass UI accessibility using a QA-ready checklist with testable acceptance criteria. This ensures your components meet WCAG 2.2 AA keyboard-first constraints and prevents ambiguous focus states on luminous borders and blurred layers.

What are the limitations of using glassmorphism in high-contrast enterprise styling?▼

A key limitation of glassmorphism in high-contrast enterprise styling is the risk of low-contrast text on translucent backgrounds. Applying explicit token-first color rules and WCAG 2.2 AA constraints mitigates this, ensuring your frosted glass layers remain accessible.

Related Skills

Explore More Design & Creative Skills→
junchenghuojunchenghuo
3

ui-design-token-system

Generate UI design tokens for colors, spacing, typography, and border-radius.

Community
Basic
Higashi-KotaHigashi-Kota

a11y

Audits UI components for WCAG 2.2 AA and ARIA compliance.

Community
Intermediate
bergsidebergside
2.3k

friendly

Generate implementable design-system guidance for rounded, pastel-forward product UIs.

Official
Intermediate
AshesOfTheUndeadAshesOfTheUndead

glassmorphism

Standardize glassmorphism UI components with semantic tokens and WCAG 2.2 AA guidelines.

Community
Intermediate