skills.rest
lciacci
lciacciCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-web

Design accessible React and Tailwind web interfaces with WCAG 2.1 AA compliance.

Updated Jun 19, 2026
Search Tags:#accessibility#react#responsive design#tailwind#glassmorphism#dark mode#web ui
One-click install
npx skills add https://github.com/lciacci/tessera --skill ui-web-lciacci
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-web
Source: https://github.com/lciacci/tessera/tree/main/skills/ui-web
Command: npx skills add https://github.com/lciacci/tessera --skill ui-web-lciacci

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers create visually polished web interfaces without sacrificing accessibility, responsive behavior, dark-mode support, or interaction clarity.

Core Features & Use Cases

  • Accessible UI Design: Apply WCAG 2.1 AA contrast, focus, touch-target, and screen-reader requirements to web components.
  • Visual System Guidance: Build cohesive interfaces with Tailwind spacing, typography, color, glassmorphism, cards, buttons, inputs, grids, and responsive layout patterns.
  • Interaction and Theme Patterns: Add consistent transitions, loading states, hover effects, dark-mode pairings, and visible feedback for interactive elements.
  • Use Case: When creating a dashboard in React and Tailwind, use this Skill to establish accessible buttons and forms, responsive layouts, readable light and dark themes, and a final pre-ship verification checklist.

Quick Start

Use the ui-web skill to design or review this React and Tailwind interface for visual quality, responsive behavior, dark-mode consistency, and WCAG 2.1 AA accessibility.

Frequently Asked Questions about ui-web

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

FAQPage Schema
How do I make a React and Tailwind dashboard accessible?▼

To make a React and Tailwind dashboard accessible, apply WCAG 2.1 AA contrast, implement visible focus states, ensure usable touch targets, and use semantic HTML for screen-reader support. You should also establish consistent spacing and typography across all components.

What is the best way to design responsive web interfaces with glassmorphism?▼

Designing responsive web interfaces with glassmorphism requires applying Tailwind CSS layout patterns to maintain visual hierarchy and interaction clarity. You must ensure that glassmorphism effects adapt correctly to various screen sizes while preserving readable light and dark themes.

Does this approach support dark mode and light mode pairings in JSX?▼

Yes, this approach supports dark mode and light mode pairings in JSX by enforcing consistent transitions and readable color contrasts. It ensures that interactive elements provide visible feedback and maintain WCAG 2.1 AA contrast requirements across both themes.

Can I use Tailwind to verify WCAG 2.1 AA contrast for web UI components?▼

You can use Tailwind to build web UI components and then perform a pre-ship accessibility verification to confirm WCAG 2.1 AA contrast. This process checks color choices, visible focus states, and touch target sizes to ensure usable forms, cards, and buttons.

Why does my web UI lose visual hierarchy on mobile screens?▼

Your web UI loses visual hierarchy on mobile screens when responsive layouts lack consistent spacing, typography, and semantic structure. Applying responsive Tailwind grid patterns and maintaining interaction clarity ensures the interface remains polished and accessible across devices.

Related Skills

Explore More Design & Creative Skills→
tutur3ututur3u
53

web-design-guidelines

Audit HTML, CSS, and JavaScript against Web Interface Guidelines.

Official
Basic
haabehaabe

a11y-check

Audits web interfaces for WCAG 2.1 AA accessibility compliance.

Community
Intermediate
MajesteitBartMajesteitBart
2

shadcn-ui-expert

Build accessible React UI components with shadcn-ui, Tailwind CSS, and Radix UI.

Community
Intermediate
liamtran96liamtran96

tailwindcss

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

Community
Intermediate