skills.rest
Psqasim
PsqasimCOMMUNITY
Explore all skills by this author →
Website𝕏@psqasim0GitHub

ui-design-skill

Guide accessible console and web interface design with Rich and Tailwind CSS.

1|1|Updated Feb 10, 2026
Search Tags:#design#ui#accessibility#tailwind#rich#design-systems
One-click install
npx skills add https://github.com/Psqasim/personal-ai-employee --skill ui-design-skill-psqasim
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-skill
Source: https://github.com/Psqasim/personal-ai-employee/tree/main/.claude/skills/ui-design-skill
Command: npx skills add https://github.com/Psqasim/personal-ai-employee --skill ui-design-skill-psqasim

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Guides designers to create accessible and effective console and web interfaces.

Core Features & Use Cases

  • Expert guidance for console UIs using the Rich library for terminal apps
  • Web UI guidance with Tailwind CSS, responsive layouts, and mobile-first design
  • Accessibility best practices following WCAG guidelines
  • Design systems and component consistency across products
  • User-centered design decisions for improved usability across platforms

Quick Start

Audit a UI screen and implement accessible color contrast, typography, and responsive layout adjustments.

Frequently Asked Questions about ui-design-skill

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

FAQPage Schema
How do I design accessible web interfaces with Tailwind CSS?▼

Accessible web interfaces with Tailwind CSS are designed by applying WCAG best practices for color contrast, responsive layouts, and mobile-first interaction patterns. This ensures component consistency and usability across different screen sizes.

What is the best way to create accessible terminal UIs using the Rich library?▼

Accessible terminal UIs using the Rich library are created by following expert guidance on console color, typography, and interaction patterns. This approach ensures effective and accessible command-line interface designs.

Can I audit my existing UI screen for accessibility conformance?▼

You can audit a UI screen for accessibility conformance by checking color contrast, typography, and responsive layout adjustments. This process identifies areas needing improvement to satisfy accessibility guidelines.

Does this UI design guidance help with design-system consistency?▼

This UI design guidance helps with design-system consistency by providing recommendations for component standardization and user-centered design decisions. This improves usability and maintains visual coherence across products.

What are the limitations of relying on WCAG guidelines for UI accessibility?▼

Relying on WCAG guidelines for UI accessibility focuses on conformance checks for color and interaction patterns but requires manual implementation of responsive layout adjustments. It serves as a baseline for accessibility rather than a complete usability solution.

Related Skills

Explore More Design & Creative Skills→
tunneleventunneleven

c4flow:design

Generate design systems and UI mockups for specified features.

Community
Basic
vecearvecear

responsive-design-system

Define responsive design systems with Tailwind CSS breakpoints, fluid typography, and container queries.

Community
Advanced
mastepanoskimastepanoski
44

wcag-accessibility-audit

Identify and remediate WCAG 2.1/2.2 accessibility barriers across websites and apps.

Community
Advanced
bomberoxenviosdosruedasbomberoxenviosdosruedas

agency-ui-designer

Create design systems with component libraries and WCAG AA accessibility compliance.

Community
Advanced