skills.rest
alinaqi
alinaqiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-web

Creates accessible web interfaces with Tailwind glassmorphism design system and WCAG AA compliance.

705|56|Updated Dec 26, 2025
Search Tags:#ui#accessibility#design system#tailwind css#web design#glassmorphism
One-click install
npx skills add https://github.com/alinaqi/claude-bootstrap --skill ui-web-alinaqi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-web
Source: https://github.com/alinaqi/claude-bootstrap/tree/main/skills/ui-web
Command: npx skills add https://github.com/alinaqi/claude-bootstrap --skill ui-web-alinaqi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive guide and reusable patterns for creating 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 a consistent spacing system (8px grid), typography scale, and color palette.
  • Component Patterns: Offers pre-built examples for buttons, cards, and input fields with dark mode support.
  • Glassmorphism: Provides guidelines and examples for implementing the glassmorphism effect effectively.
  • Use Case: A developer needs to build a new dashboard with a modern look and feel, ensuring it's accessible to all users and adheres to brand guidelines. This Skill provides the foundational styles and components to achieve that.

Quick Start

Apply the 'focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2' class to all interactive elements to ensure visible focus states.

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?▼

To build accessible web UIs with Tailwind CSS that meet WCAG 2.1 AA, apply focus-visible ring classes to interactive elements and enforce color contrast, visibility, and focus state rules across your components.

What's the best way to implement glassmorphism design in a web dashboard without breaking accessibility?▼

Implementing glassmorphism design accessibly involves using Tailwind CSS to create the visual effect while strictly enforcing WCAG 2.1 AA color contrast guidelines, ensuring the modern aesthetic remains visible to all users.

How do I set up a consistent design system using an 8px grid for web components?▼

Set up a consistent design system by defining an 8px grid spacing structure, a structured typography scale, and a standardized color palette to maintain visual harmony across buttons, cards, and inputs.

Does this approach support dark mode and micro-interactions for Tailwind CSS components?▼

Yes, this approach supports dark mode and micro-interactions by providing pre-built component patterns for buttons, cards, and inputs that include built-in dark mode styling and best practices for interactive feedback.

Can I use these UI patterns for input fields and cards in an existing Tailwind CSS project?▼

You can use these UI patterns in an existing Tailwind CSS project by applying the provided reusable component examples for input fields, buttons, and cards directly into your current layout and design system.

Why do my custom interactive elements fail accessibility checks, and how do I fix focus states?▼

Interactive elements fail accessibility checks when focus states are missing. Fix this by applying the 'focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2' Tailwind CSS classes to ensure visible focus.

Related Skills

Explore More Design & Creative Skills→
patrick-falveypatrick-falvey

design-system

Generate design systems, wireframes, and landing pages from product requirements.

Community
Advanced
haabehaabe

a11y-check

Audits web interfaces for WCAG 2.1 AA accessibility compliance.

Community
Intermediate
hii-saikrishnahii-saikrishna

animated-component-libraries

Provide pre-built animated React components for UI development.

Community
Advanced
marjan-ahmedmarjan-ahmed

frontend-designer

Provides guidance for building responsive Angular apps with lazy loading and RxJS-powered data access.

Community
Basic