ui-web

Standardize glassmorphic web UI design with WCAG-compliant Tailwind patterns.

1|Updated Feb 26, 2026

Search Tags:#accessibility #tailwind #glassmorphism #ui-design #design-system #dark-mode

Ready to run

npx skills add https://github.com/aberrantCode/llm_skills --skill ui-web-aberrantcode

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-web
Source: https://github.com/aberrantCode/llm_skills/tree/main/claude/skills/ui-web
Command: npx skills add https://github.com/aberrantCode/llm_skills --skill ui-web-aberrantcode

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web UI design guidance is standardized into a reusable design system that ensures glassmorphism aesthetics, accessibility, and consistency across components.

Core Features & Use Cases

Glassmorphism design system guidance with Tailwind-based patterns
Accessibility compliance (WCAG contrast, focus states, screen-reader friendly markup)
Design tokens for colors, typography, and spacing, plus practical UI components (buttons, cards, inputs)
Dark mode support and responsive design tips
Real-world use: building dashboards, marketing sites, and web apps with consistent visuals

Quick Start

Review the UI design guidelines and implement a glassmorphic, accessible UI component library following the patterns in the guide.

Frequently Asked Questions about ui-web

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

FAQPage Schema

How do I build a glassmorphic UI that meets WCAG accessibility standards?▼

To build accessible glassmorphic UI, standardize web design guidance into a reusable system enforcing WCAG-compliant contrast, focus states, and screen-reader friendly markup alongside the visual aesthetic.

Can I use Tailwind to implement a dark mode design system for web apps?▼

Tailwind can implement a dark mode design system by applying standardized design tokens for colors and typography, ensuring consistent UI component patterns across responsive web apps and dashboards.

What design tokens do I need for a consistent glassmorphism design system?▼

A glassmorphism design system requires standardized design tokens for colors, typography, and spacing to ensure visual consistency across practical UI components like buttons, cards, and inputs.

How do I ensure screen-reader friendly markup when building glassmorphic web components?▼

Screen-reader friendly markup in glassmorphic web components is achieved by enforcing accessibility requirements within the design system, providing ready-to-adapt patterns and code examples for product teams.

Does glassmorphism work well for building accessible dashboards and marketing sites?▼

Glassmorphism works for accessible dashboards and marketing sites by standardizing UI design guidance into a reusable system that balances the aesthetic with WCAG-compliant contrast and dark mode support.

What is the best way to standardize UI component patterns for a web design system?▼

Standardizing UI component patterns is best achieved by defining design tokens and practical UI components with ready-to-adapt patterns and code examples, ensuring consistency across marketing sites and web apps.