skills.rest
artofrawr
artofrawrCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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

Related Skills

Explore More Design & Creative Skills→
amit397amit397

tailwind-design-system

Build design systems with Tailwind CSS v4 using CSS-first configuration.

Community
Advanced
BinyaminEdenBinyaminEden
26

frontend-patterns

Provide React and Next.js implementation patterns for components, state, performance, and accessibility.

Community
Intermediate
RhettArkRhettArk

UI/UX Specialist

Design accessible, responsive UI components with semantic HTML and ARIA labeling.

Community
Basic
Parallel-7Parallel-7
76

modern-frontend-design

Generate production-grade frontend interfaces with React, HTML, and OKLCH design systems.

Official
Advanced