skills.rest
SolaneHub
SolaneHubCOMMUNITY
Explore all skills by this author →
GitHub

ui-web

Build accessible Tailwind CSS web UIs with glassmorphism and WCAG 2.1 AA compliance.

1|Updated Aug 17, 2025
Search Tags:#ui#accessibility#tailwind css#web design#frontend development#glassmorphism
One-click install
npx skills add https://github.com/SolaneHub/PokeMMO-Compendium --skill ui-web-solanehub
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-web
Source: https://github.com/SolaneHub/PokeMMO-Compendium/tree/main/.agents/skills/ui-web
Command: npx skills add https://github.com/SolaneHub/PokeMMO-Compendium --skill ui-web-solanehub

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive set of guidelines and patterns for building modern, accessible, and visually appealing web user interfaces using Tailwind CSS and a glassmorphism aesthetic.

Core Features & Use Cases

  • Accessibility Standards: Enforces WCAG 2.1 AA compliance for color contrast, visibility, and focus states.
  • Design System: Defines typography, spacing, color palettes, and component patterns (buttons, cards, inputs).
  • Glassmorphism: Offers guidance and examples for implementing the glassmorphism design trend.
  • Dark Mode: Provides strategies and color pairings for effective dark mode implementation.
  • Use Case: A frontend developer needs to ensure their new web application is not only visually stunning but also adheres to accessibility best practices and maintains a consistent design language across all components.

Quick Start

Apply the primary button styling to a new button element.

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 glassmorphism UI with Tailwind CSS that stays accessible?▼

To build accessible glassmorphism interfaces with Tailwind CSS, apply established design system patterns that enforce WCAG 2.1 AA color contrast, visibility, and focus states alongside your translucent component styling.

What is WCAG 2.1 AA compliance for web design color contrast and focus states?▼

WCAG 2.1 AA compliance for web design ensures sufficient color contrast ratios and visible focus states so interactive elements remain perceivable and operable for all users across modern web interfaces.

How do I implement a consistent dark mode design system using Tailwind CSS?▼

Implement a consistent dark mode design system using Tailwind CSS by applying predefined color pairings and component strategies that maintain visual clarity and accessibility standards in low-light environments.

What are the best practices for web typography and spacing in a modern UI?▼

Best practices for modern web UI typography and spacing involve applying a structured design system that defines clear scale ratios, ensuring consistent visual hierarchy and readable component layouts throughout the application.

Does this glassmorphism aesthetic work without external component dependencies?▼

Yes, you can implement the glassmorphism aesthetic and its accompanying design system directly using Tailwind CSS utility classes without requiring any external component dependencies.

Related Skills

Explore More Design & Creative Skills→
liamtran96liamtran96

tailwindcss

Apply utility classes to style web interfaces across React, Vue, Svelte, and HTML.

Community
Intermediate
h4vzzh4vzz
33

Frontend Design

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

Community
Advanced
jonnabiojonnabio
6

accessibility-audit

Audits frontend interfaces for WCAP 2.1 AA compliance and accessibility best practices.

Community
Intermediate
riftzen-bitriftzen-bit

gemini-design-brain

Apply Material Design 3 tokens and CSS/Tailwind-ready styles to web and mobile interfaces.

Community
Intermediate