ui-web

Provide a Tailwind-based design framework with glassmorphism, dark mode, and accessibility checks.

1|Updated Jan 10, 2026

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

Ready to run

npx skills add https://github.com/artofrawr/claude-control --skill ui-web

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web teams often struggle to build visually cohesive, accessible web interfaces at scale. This skill provides a structured design system with glassmorphism-inspired visuals, Tailwind-based styling, and robust accessibility guidelines to ensure consistent UX.

Core Features & Use Cases

Glassmorphism-inspired UI patterns powered by Tailwind utilities for consistent aesthetics.
Dark mode support with accessible contrast, color tokens, and responsive behavior.
Comprehensive component guidance (buttons, cards, inputs, typography, spacing) and micro-interactions for delightful UX.
Use Case: Teams delivering polished dashboards, marketing sites, and admin tools with predictable UX.

Quick Start

Start by adopting the ui-web skill to scaffold accessible glassy web UI patterns with Tailwind-based tokens and ready-made component templates.

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 glassmorphism UI components with Tailwind?▼

Build accessible glassmorphism UI by applying Tailwind-based styling tokens and component patterns that enforce robust color contrast, focus states, and responsive behavior.

What is the best way to implement accessible dark mode for web interfaces?▼

Implement accessible dark mode using predefined color tokens that maintain accessible contrast ratios across components, ensuring consistent UX and robust accessibility checks.

Does this design system support responsive typography and spacing guidelines?▼

Yes, the design system specifies dedicated sections for responsive typography and spacing to ensure robust and accessible implementations across all web components.

Can I use this UI framework for polishing admin tools and dashboards?▼

Yes, you can use this UI framework for polishing admin tools and dashboards, delivering predictable UX through comprehensive component guidance and micro-interactions.

How do I ensure consistent color contrast and focus states across web components?▼

Ensure consistent color contrast and focus states by adopting a structured design framework that specifies accessibility checks across components for robust implementations.