skills.rest
first-fluke
first-flukeOFFICIAL
Explore all skills by this author →
WebsiteGitHub

ui-ux-pro-max

Generates design systems and reviews UI/UX patterns for accessible web and mobile interfaces.

218|33|Updated Jan 7, 2026
Search Tags:#design#accessibility#UI/UX#responsive#glassmorphism#design-system#bento-grid
One-click install
npx skills add https://github.com/first-fluke/fullstack-starter --skill ui-ux-pro-max-first-fluke
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/first-fluke/fullstack-starter/tree/main/.agents/skills/ui-ux-pro-max
Command: npx skills add https://github.com/first-fluke/fullstack-starter --skill ui-ux-pro-max-first-fluke

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides professional-grade UI/UX design guidance to help teams implement modern patterns, ensure accessibility, and generate consistent design systems across web and mobile.

Core Features & Use Cases

  • Design System Generation: create colors, typography, spacing, and component variants for web and mobile.
  • Design Patterns: apply Glassmorphism, Bento Grid, Neumorphism, and dark mode with accessibility in mind.
  • Review & Refactor: audit for WCAG compliance, consistency, and responsive behavior.

Quick Start

Prompt the AI to generate a complete design system for a web and mobile app, including color tokens, typography, spacing, and component variants.

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 complete design system for web and mobile apps?▼

Generate a complete design system by defining color tokens, typography scales, spacing rules, and component variants. This ensures UI consistency and accelerates implementation across responsive web and mobile interfaces.

What is the best way to apply Glassmorphism and Bento Grid patterns accessibly?▼

Apply Glassmorphism and Bento Grid patterns by combining visual styling with WCAG compliance checks. This ensures modern UI trends remain accessible and readable across all responsive layouts.

How do I audit my UI components for WCAG compliance and responsive behavior?▼

Audit UI components for WCAG compliance by reviewing color contrast, semantic structure, and responsive behavior. This identifies accessibility gaps and ensures consistent rendering across mobile and web platforms.

Do I need external design tools to create and manage design tokens?▼

You do not need external design tools to create and manage design tokens. The skill generates style guides, spacing rules, and component variants directly without requiring external dependencies or plugins.

Related Skills

Explore More Design & Creative Skills→
shinnytechshinnytech

ux-designer

Design user experiences with wireframes, user flows, and WCAG 2.1 AA compliance.

Official
Advanced
frankxaifrankxai
6

arcanea-design-system

Define Arcanea design tokens, CSS variables, and UI component standards.

Community
Advanced
calcosmiccalcosmic
9

html-css

Enforce semantic HTML, ARIA, color contrast, and flat CSS architecture.

Community
Intermediate
wojonswojons
4

accessibility-audit

Audit digital products for WCAG compliance and legal accessibility standards.

Community
Advanced