skills.rest
muhammad-shameel-ks
muhammad-shameel-ksCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-ux-design

Design responsive Tailwind CSS interfaces with WCAG accessibility standards.

Updated Jan 25, 2026
Search Tags:#ui#accessibility#tailwind#ux#design-system#responsive-design#component-patterns
One-click install
npx skills add https://github.com/muhammad-shameel-ks/stock-salt --skill ui-ux-design-muhammad-shameel-ks
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-design
Source: https://github.com/muhammad-shameel-ks/stock-salt/tree/main/.opencode/skills/ui-ux
Command: npx skills add https://github.com/muhammad-shameel-ks/stock-salt --skill ui-ux-design-muhammad-shameel-ks

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing user interfaces and experiences for the Salt Premium Stock Management module can be inconsistent and inaccessible without a cohesive design system. This Skill provides a structured approach to apply UI/UX principles, accessibility standards, and component patterns to ensure uniform, usable interfaces.

Core Features & Use Cases

  • Comprehensive design system guidelines aligned with Salt Premium aesthetics.
  • Accessibility-first design with WCAG considerations and keyboard-friendly interactions.
  • Responsive, mobile-first patterns using Tailwind CSS and reusable components.
  • Review-and-good practice for UI code, design tokens, and tactile interactions in the Stock Management module.

Quick Start

Describe a new Stock Management UI screen, including layout, components, and accessibility considerations.

Frequently Asked Questions about ui-ux-design

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

FAQPage Schema
How do I ensure my Tailwind CSS components meet WCAG accessibility standards?▼

To ensure Tailwind CSS components meet WCAG accessibility standards, apply centralized design tokens and keyboard-friendly interaction patterns that enforce tactile design principles and compliance checks across your UI code.

What is the best way to build a responsive design system for a web application?▼

The best way to build a responsive design system is to establish a centralized pattern library with reusable components, mobile-first layouts, and standardized design tokens to maintain visual and functional consistency.

How do I review existing UI code for accessibility and design consistency?▼

Review existing UI code for accessibility and design consistency by checking against centralized pattern libraries, WCAG compliance requirements, and standardized design tokens to identify and fix interaction gaps.

Can I use component patterns to design interfaces without a predefined design system?▼

You can use component patterns to design interfaces, but applying a centralized design system ensures your UI adheres to accessibility standards, responsive behavior, and cohesive aesthetics rather than inconsistent ad-hoc styling.

When do I need design tokens for my UI layout?▼

You need design tokens for your UI layout when standardizing visual properties across multiple screens, ensuring that responsive components and tactile interactions maintain consistent accessibility and aesthetic guidelines.

Related Skills

Explore More Design & Creative Skills→
koralliskorallis
90

tailwind-design-system

Generate Tailwind CSS design systems with custom themes and design tokens.

Community
Intermediate
Ankurjain1121Ankurjain1121

design

Enforce a nine-pass UX design pipeline producing standardized frontend-ready artifacts.

Community
Advanced
davidrrowleydavidrrowley

frontend-design-review

Review frontend interfaces for design quality and WCAG accessibility compliance.

Community
Intermediate
ddoman90ddoman90

modern-accessible-html-jsx

Guide HTML and JSX development toward semantic elements and accessible landmarks.

Community
Intermediate