skills.rest
bmar1
bmar1COMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-ux-pro-max

Generate and audit UI designs with WCAG 2.1 AA accessibility checks.

1|Updated Oct 16, 2025
Search Tags:#accessibility#react#animation#tailwind#ui-design#ux-design#design-system
One-click install
npx skills add https://github.com/bmar1/Plated --skill ui-ux-pro-max-bmar1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/bmar1/Plated/tree/main/src/Agents
Command: npx skills add https://github.com/bmar1/Plated --skill ui-ux-pro-max-bmar1

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Creating professional, consistent, and accessible user interfaces requires deep design knowledge and systematic decision-making across typography, color, spacing, animation, and component architecture. This skill provides the complete design intelligence to build polished products without guesswork.

Core Features & Use Cases

  • Design System Generation: Automatically generates comprehensive design systems with color palettes, font pairings, spacing scales, and style recommendations for any product type.
  • Multi-Stack Implementation: Delivers actionable guidelines for 9 technology stacks including React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, and shadcn/ui.
  • Accessibility & Animation Auditing: Includes built-in checks for WCAG compliance, animation performance, micro-interactions, and visual hierarchy to ensure production-ready quality.

Quick Start

Use the ui-ux-pro-max skill to create a design system for a fintech dashboard with dark mode support and accessible data tables.

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 generate a design system for a web dashboard?▼

Yes, React and Next.js are supported for UI implementation. The skill delivers actionable component architecture and styling guidelines for nine stacks including React, Next.js, Vue, Svelte, SwiftUI, and React Native.

Can I use Tailwind to build accessible UI components?▼

UI design auditing checks WCAG 2.1 AA accessibility compliance, animation performance, micro-interactions, and visual hierarchy. This ensures your product interface meets production-ready quality standards across web and mobile platforms.

What is the best way to validate WCAG 2.1 AA compliance for my UI?▼

Yes, you can generate dark mode support within your design system. By specifying dark mode requirements, the skill automatically outputs adjusted color palettes and accessible contrast ratios for your product interfaces.

Does this approach support mobile app design with SwiftUI and Flutter?▼

Animation guidelines define micro-interactions and animation performance standards for your interface. These guidelines integrate directly into your design system to ensure polished, production-ready user experiences across platforms.

Related Skills

Explore More Design & Creative Skills→
LeonMelamudLeonMelamud

product-marketing-context

Generate product marketing context documents from codebase analysis or conversational input.

Community
Intermediate
OpenDCAIOpenDCAI
114

react

Standardize React component development with design tokens and TypeScript.

Official
Advanced
viktorbezdekviktorbezdek
10

frontend-design

Create accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.

Community
Advanced
DevQwietDevQwiet

gpt-taste

Generate randomized UX/UI layouts with Python and GSAP animations.

Community
Advanced