skills.rest
AdigunQ
AdigunQCOMMUNITY
Explore all skills by this author →
𝕏@adigunq_adigunGitHub

ui-web

Create accessible web UIs with glassmorphism, Tailwind CSS, and dark mode.

Updated Feb 8, 2026
Search Tags:#ui#accessibility#web design#tailwind#glassmorphism#dark mode
One-click install
npx skills add https://github.com/AdigunQ/ralph-smart --skill ui-web-adigunq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-web
Source: https://github.com/AdigunQ/ralph-smart/tree/main/knowledges/bootstrap_skills/ui-web
Command: npx skills add https://github.com/AdigunQ/ralph-smart --skill ui-web-adigunq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive guide and reusable patterns for building modern, accessible, and visually appealing web user interfaces with a focus on glassmorphism, Tailwind CSS, and dark mode.

Core Features & Use Cases

  • Accessibility Standards: Enforces WCAG 2.1 AA compliance for color contrast, visibility, focus states, and more.
  • Design System: Defines a consistent spacing system (8px grid), typography scale, and semantic color palette.
  • Component Patterns: Offers ready-to-use examples for buttons, cards, and input fields with built-in accessibility and responsiveness.
  • Glassmorphism & Dark Mode: Guides on implementing modern glassmorphism effects and ensuring seamless dark mode transitions.
  • Use Case: A frontend developer needs to build a new dashboard. This Skill provides the foundational design principles, component examples, and accessibility guidelines to ensure a high-quality, user-friendly interface.

Quick Start

Apply the provided Tailwind CSS classes and component patterns to build a new web UI element that adheres to WCAG 2.1 AA standards.

Frequently Asked Questions about ui-web

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

FAQPage Schema
How do I build accessible web UIs with Tailwind CSS that meet WCAG 2.1 AA standards?▼

Build accessible web UIs with Tailwind CSS by applying semantic color palettes, visible focus states, and sufficient color contrast to meet WCAG 2.1 AA standards. This ensures interactive elements remain usable for all visitors.

What is glassmorphism and how do I implement it in dark mode without losing accessibility?▼

Glassmorphism is a modern UI design style using translucent surfaces. Implement it in dark mode by adjusting semantic color palettes and ensuring sufficient color contrast, maintaining accessible visual hierarchy and readability across theme transitions.

Can I use this approach to create responsive buttons and cards on an 8px grid?▼

Yes, you can use this approach to create responsive buttons and cards. It provides ready-to-use component patterns built on a consistent 8px grid spacing system, ensuring visual alignment and built-in accessibility for your web interface.

What's the best way to establish a typography scale and color system for a new dashboard?▼

The best way to establish a typography scale and color system is applying a predefined design system. This provides foundational design principles, a consistent 8px grid, semantic colors, and typography scales to ensure a high-quality, user-friendly interface.

Why does my dark mode implementation fail WCAG 2.1 AA color contrast checks?▼

Dark mode implementations fail WCAG 2.1 AA color contrast checks when semantic color palettes lack sufficient contrast. Fix this by enforcing strict color contrast ratios and ensuring interactive elements maintain visible focus states in both themes.

Related Skills

Explore More Design & Creative Skills→
softmgsoftmg

tailwind-design-system

Creates Tailwind v4 design systems with tokens, CVA components, and dark mode support.

Official
Advanced
anzx01anzx01
4

frontend-design

Translate frontend requirements into production-ready UI components and interfaces.

Community
Advanced
dembrandtdembrandt
33

button-states

Define complete visual interaction states for buttons and clickable elements.

Official
Intermediate
code-vibe-academycode-vibe-academy
2

designer-ui

Generate Atoms, Molecules, and high-fidelity mockups from wireframes using Atomic Design.

Official
Advanced