skills.rest
htafolla
htafollaCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-design

Design mobile-first user interfaces with WCAG 2.1 AA accessibility compliance.

5|1|Updated Jan 7, 2026
Search Tags:#design#ui#accessibility#mobile-first#wcag#contrast#ux
One-click install
npx skills add https://github.com/htafolla/StringRay --skill ui-ux-design-htafolla
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-design
Source: https://github.com/htafolla/StringRay/tree/main/ci-test-env/.opencode/skills/ui-ux-design
Command: npx skills add https://github.com/htafolla/StringRay --skill ui-ux-design-htafolla

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating user interfaces and experiences that are not only visually appealing but also highly functional, accessible, and optimized for all devices, especially mobile.

Core Features & Use Cases

  • Mobile-First Design: Ensures designs are optimized for small screens first, then scaled up.
  • Accessibility Compliance: Adheres to WCAG 2.1 AA standards, focusing on contrast and usability for all.
  • Cognitive Load Reduction: Applies principles like Hick's Law and Jakob's Law to make interfaces intuitive.
  • Use Case: Design a new mobile app onboarding flow that is easy to understand, visually engaging, and accessible to users with visual impairments, ensuring a high completion rate.

Quick Start

Use the ui-ux-design skill to design a hero section for a landing page with a dark blue background and white text, ensuring it meets WCAG AA contrast standards.

Frequently Asked Questions about ui-ux-design

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

FAQPage Schema
How do I design a mobile-first user interface that meets WCAG 2.1 AA accessibility standards?▼

Mobile-first design ensures interfaces are optimized for small screens first, then scaled up to larger devices. This approach prioritizes cognitive simplicity and applies principles like Hick's Law and Jakob's Law to make interactions intuitive and reduce cognitive load for users.

How can I validate color contrast for accessibility compliance in a UI design?▼

Validate color contrast for accessibility compliance by using component accessibility auditing tools that enforce WCAG 2.1 AA standards. This process checks visual hierarchy principles and ensures that text and background combinations meet required contrast ratios for visually impaired users.

What principles help reduce cognitive load in user experience design?▼

Reducing cognitive load in user experience design involves applying principles like Hick's Law and Jakob's Law. These principles prioritize cognitive simplicity, streamline visual hierarchy, and make interfaces intuitive by leveraging familiar patterns and minimizing decision-making time.

Does mobile-first design work for complex web application dashboards?▼

Mobile-first design works for complex web application dashboards by establishing a simplified, accessible foundation on small screens first. This approach enforces visual hierarchy principles and cognitive simplicity before scaling the layout up to larger desktop interfaces.

What's the best way to audit component accessibility for a mobile app onboarding flow?▼

The best way to audit component accessibility for a mobile app onboarding flow is to use mobile design validation tools that enforce WCAG 2.1 AA compliance. This ensures high completion rates by validating contrast, usability, and visual hierarchy.

Related Skills

Explore More Design & Creative Skills→
HuijiroHuijiro

impeccable-teach-impeccable

Gather design context and persist it to a config file.

Community
Basic
kmshihab7878kmshihab7878
6

UX Designer

Produce wireframes, user flows, and WCAG 2.1 AA-compliant interface specifications.

Community
Advanced
flext-shflext-sh

frontend-standards

Enforce frontend standards for HTML, CSS/SCSS, and JavaScript/TypeScript components.

Official
Intermediate
motionharvestmotionharvest
2

ux-methodology-design

Apply UX laws to optimize visual hierarchy and interaction design.

Community
Intermediate