skills.rest
ksrae
ksraeCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generate design systems and audit interfaces for WCAG contrast and responsiveness.

Updated Aug 27, 2026
Search Tags:#accessibility#glassmorphism#ui-ux#design-system#responsive-design#design-patterns#bento-grid
One-click install
npx skills add https://github.com/ksrae/tag-diary-app --skill ui-ux-pro-max-ksrae
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/ksrae/tag-diary-app/tree/main/.agents/skills/ui-ux-pro-max
Command: npx skills add https://github.com/ksrae/tag-diary-app --skill ui-ux-pro-max-ksrae

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers often struggle to craft cohesive, accessible, and scalable UI systems across web and mobile, leading to inconsistent experiences and wasted development time.

Core Features & Use Cases

  • Design System Generation: Create colors, typography, spacing, and components tailored to brand and platform.
  • Design Patterns & Guidance: Apply Glassmorphism, Bento Grid, Neumorphism, and Dark Mode with accessibility in mind; provide pattern recommendations for dashboards, marketing pages, and forms.
  • Review & Refactor: Audit for WCAG contrast, suggest premium alternatives, and verify responsive behavior across devices.

Quick Start

Create a starter design system for a modern app, including color, typography, spacing, and component guidelines.

Frequently Asked Questions about ui-ux-pro-max

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

FAQPage Schema
How do I create a complete design system for a web and mobile app?▼

To create a design system, generate tailored guidelines for colors, typography, spacing, and components that align with your brand and platform requirements. This ensures cohesive and scalable interfaces across web and mobile applications.

What is the best way to apply glassmorphism and bento grid patterns while maintaining accessibility?▼

Applying glassmorphism and bento grid patterns requires balancing visual style with strict accessibility checks. You should use pattern recommendations that verify WCAG contrast and responsive behavior to ensure usable interfaces.

How do I audit my UI design for WCAG contrast and responsive layout issues?▼

Auditing UI design for WCAG contrast involves a review and refactor workflow that checks color accessibility, suggests premium alternatives, and verifies responsive behavior across different web and mobile devices.

Does this UI/UX guidance work for both dashboards and marketing pages?▼

Yes, UI/UX guidance provides specific design pattern recommendations for dashboards, marketing pages, and forms. It ensures responsive layout planning and accessibility checks are applied appropriately for each page type.

Can I refactor an existing interface into a dark mode design system?▼

Refactoring an interface into dark mode involves applying design pattern guidance with accessibility in mind. The process audits existing components, suggests premium alternatives, and verifies contrast and responsive behavior.

Related Skills

Explore More Design & Creative Skills→
truchottruchot
2

direction-artistique

Define visual identity, brand language, and governance for projects.

Community
Advanced
vladolaruvladolaru
6

using-figma

Translate Figma nodes and tokens into a tokenized design specification and implementation plan.

Community
Advanced
bacocobacoco
67

bmad-ux

Translate PRD requirements into user flows, wireframes, and design systems.

Community
Intermediate
zinohomezinohome
1

accessibility-auditor

Audit web pages for WCAG 2.1 compliance and implement accessibility fixes.

Community
Advanced