skills.rest
unnamedmistress
unnamedmistressCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ux-ui-designer

Design mobile-first interfaces with WCAG AA contrast and 8pt spacing.

Updated Feb 23, 2026
Search Tags:#typography#ui#accessibility#mobile-first#ux#design-system#interaction-design
One-click install
npx skills add https://github.com/unnamedmistress/menuspy-marketing --skill ux-ui-designer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-ui-designer
Source: https://github.com/unnamedmistress/menuspy-marketing/tree/main/ux-ui-designer
Command: npx skills add https://github.com/unnamedmistress/menuspy-marketing --skill ux-ui-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It removes uncertainty and inconsistency from interface design by providing a clear, mobile-first framework for visual hierarchy, accessibility, and interaction design so products feel polished and usable on phones first and scale up to larger screens.

Core Features & Use Cases

  • Mobile-First Guidance: Prioritizes designs for small screens with progressive enhancement for tablet and desktop.
  • Accessibility & Compliance: Enforces WCAG AA contrast, touch target sizes, and screen reader considerations.
  • Design System & Tokens: Recommends spacing, typography scales, color roles, elevation, and reusable components.
  • Interaction & Performance: Documents interaction states, animations at 60fps, and performance-minded asset handling.
  • Use Case: Audit an onboarding flow and produce a prioritized list of visual hierarchy improvements, accessibility fixes, and component specs for handoff.

Quick Start

Conduct a mobile-first UI audit of the provided screens and return a visual hierarchy score, accessibility issues with WCAG references, and component specifications.

Frequently Asked Questions about ux-ui-designer

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

FAQPage Schema
How do I design mobile-first user interfaces that meet accessibility standards?▼

Mobile-first user interfaces require enforcing WCAG AA contrast ratios, an 8pt spacing system, and minimum 44px touch targets to ensure accessibility and visual coherence. This framework scales small screen designs progressively up to larger responsive breakpoints.

How do I conduct a UI audit of an onboarding flow for accessibility and visual hierarchy?▼

A UI audit of an onboarding flow evaluates visual hierarchy, identifies accessibility issues with WCAG references, and produces component specifications for handoff. It returns a prioritized list of improvements and documented interaction states.

What is a design system and how does it handle interaction design and performance?▼

A design system manages interaction design by defining spacing, typography scales, color roles, and reusable components. It ensures performance by documenting 60fps animations and performance-minded asset handling for responsive websites and mobile apps.

Can I use an 8pt spacing system and 44px touch targets for responsive website dashboards?▼

Yes, applying an 8pt spacing system and 44px touch targets is recommended for responsive website dashboards. These constraints ensure mobile-first usability and accessible interaction design across defined responsive breakpoints.

What is the best way to document interaction states for a component library?▼

Documenting interaction states for a component library involves defining visual hierarchy, enforcing accessibility compliance, and specifying 60fps animations. This approach ensures reusable components are performant and visually coherent.

Related Skills

Explore More Design & Creative Skills→
h4vzzh4vzz
33

Wireframing

Generate structured text-based wireframes with component inventories and interaction annotations.

Community
Intermediate
basmawebinfo-hubbasmawebinfo-hub

UI Designer

Create scalable UI design systems with WCAG AA accessibility and developer handoff specifications.

Community
Advanced
lsst-sqrelsst-sqre
2

wcag-contrast-checker

Compute WCAG contrast ratios and AA/AAA compliance for CSS colors.

Official
Intermediate
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

ui-visual-validator

Validate UI modifications for visual regression, compliance, and accessibility.

Community
Advanced