skills.rest
aberrantCode
aberrantCodeCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/aberrantCode/llm_skills --skill ui-web-aberrantcode
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
justinlevinedotmejustinlevinedotme
7

vite-shadcn-tailwind4

Initialize shadcn/ui with Tailwind v4 in Vite projects.

Community
Advanced
h4vzzh4vzz
33

Frontend Design

Generate accessible React, Vue, Svelte, or HTML components with design tokens.

Community
Advanced
Dzakiamriz22Dzakiamriz22
1

charts

Generate accessible responsive charts with shadcn/ui and recharts components.

Community
Intermediate
BenAIOSBenAIOS

minimalist-ui

Generate ultra-minimalist web interfaces with warm monochrome palettes and bento-grid layouts.

Official
Advanced