skills.rest
OTSOU-CODE
OTSOU-CODECOMMUNITY
Explore all skills by this author →
GitHub

designing-ui-ux

Audit UI/UX for accessibility gaps and visual inconsistencies across devices.

Updated Dec 13, 2025
Search Tags:#design#accessibility#UI#UX#audit#design-tokens#css-architecture
One-click install
npx skills add https://github.com/OTSOU-CODE/OTSOU --skill designing-ui-ux
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: designing-ui-ux
Source: https://github.com/OTSOU-CODE/OTSOU/tree/main/.agent/skills/designing-ui-ux
Command: npx skills add https://github.com/OTSOU-CODE/OTSOU --skill designing-ui-ux

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This framework provides a consistent, structured approach to designing, auditing, and improving UI/UX across web applications.

Core Features & Use Cases

  • Visual Design & Aesthetics: guidance on color harmony, typography, and component consistency.
  • Responsiveness & Layout: responsive strategies, breakpoints, and adaptive layouts.
  • Interaction & Motion: micro-interactions, navigation patterns, and feedback states.
  • Technical Implementation: CSS architecture, asset optimization, and accessibility alignment.
  • Quality Assurance & Audit: heuristic evaluation and ongoing design debt management.

Quick Start

Design a UI audit for the current page to identify visual inconsistencies and accessibility gaps.

Frequently Asked Questions about designing-ui-ux

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

FAQPage Schema
How do I audit an existing UI for accessibility gaps and visual inconsistencies?▼

To audit a UI for accessibility gaps and visual inconsistencies, perform a heuristic evaluation covering color harmony, typography, component consistency, and accessibility conformance to identify and manage design debt across devices.

What is the best way to structure CSS architecture and design tokens for web applications?▼

The best way to structure CSS architecture and design tokens is to enforce requirements for technical implementation, ensuring visual consistency, responsive layouts, and asset optimization across your web application components.

How do I design responsive layouts and adaptive breakpoints for multiple devices?▼

Design responsive layouts and adaptive breakpoints by applying structured UI/UX guidance for responsivity, ensuring your interface adapts correctly and maintains visual performance across different device viewports.

Does this UI/UX framework help improve Core Web Vitals and interaction patterns?▼

Yes, this UI/UX framework improves Core Web Vitals and interaction patterns by providing guidance on micro-interactions, navigation feedback states, and technical asset optimization to enhance overall visual performance.

Can I use this to establish design consistency for new feature development?▼

Yes, you can use this framework to establish design consistency for new features by applying structured guidance for visual aesthetics, CSS architecture, and design tokens during the initial development phase.

Related Skills

Explore More Design & Creative Skills→
ZiadNagarZiadNagar

animation-systems

Define motion tokens, choreography patterns, and reduced-motion support for design systems.

Community
Advanced
pingwupingwu
12

frontend-ui-ux

Design accessible, mobile-first frontend UI/UX for modern web apps.

Community
Advanced
apexradiusapexradius

a11y-check

Audit web content accessibility against WCAG 2.2 AA standards.

Official
Advanced
M-Abdullah07M-Abdullah07
1

ui-visual-validator

Assess UI visual changes for consistency, accessibility, and design system conformance.

Community
Advanced