playbooks

home / skills / first-fluke / fullstack-starter / ui-ux-pro-max

ui-ux-pro-max skill

/.agents/skills/ui-ux-pro-max

This skill delivers professional UI/UX design guidance, generating design systems, patterns, and accessibility-focused refinements for modern web and mobile

npx playbooks add skill first-fluke/fullstack-starter --skill ui-ux-pro-max

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
1.7 KB
---
name: ui-ux-pro-max
description: Advanced design intelligence for professional UI/UX. Use for implementing modern design patterns (Glassmorphism, Bento Grid), ensuring accessibility, and generating tailored design systems for web and mobile.
---

# UI/UX Pro Max

This skill provides professional-grade UI/UX design guidance, focusing on modern aesthetics, accessibility, and consistency.

## Capabilities

### 1. Design System Generation
Can generate a complete design system including:
- **Colors**: Primary, secondary, semantic, and neutral palettes (OKLCH/HSL).
- **Typography**: Font pairings, scales, and line heights.
- **Spacing**: Consistent spacing grids (4px/8px rule).
- **Components**: Variations for buttons, inputs, cards, etc.

### 2. Design Patterns
- **Glassmorphism**: Backdrop filters, transluscent layers.
- **Bento Grid**: Grid-based layouts for dashboards and landing pages.
- **Neumorphism**: Soft UI shadows (use sparingly).
- **Dark Mode**: High contrast, desaturated colors for eye comfort.

### 3. Review & Refactor
- Check for accessibility (WCAG contrast ratios).
- Identify "generic" designs and suggest premium alternatives.
- Validate responsive behavior across devices.

## Rules of Thumb

- **Whitespace**: More is usually better. Give content room to breathe.
- **Consistency**: Use variables for everything (colors, spacing, radius).
- **Feedback**: Every interaction (hover, click, focus) needs visual feedback.
- **Motion**: Use subtle micro-animations (200-300ms) to make the UI feel alive.

## When to Use

- "Make this page look more premium."
- "Design a dashboard for this data."
- "Improve the UX of this form."
- "Create a dark mode theme."

Overview

This skill provides professional-grade UI/UX design intelligence for web and mobile products. It generates complete design systems, applies modern design patterns like Glassmorphism and Bento Grid, and audits accessibility and responsiveness. Use it to move from concept to production-ready visual systems with consistent tokens and component guidance.

How this skill works

I inspect your layout, color choices, typography, and component behaviors to produce a cohesive design system and practical implementation notes. I validate contrast against WCAG, recommend spacing and responsive breakpoints, and supply component variants with states and motion guidelines. Outputs include color palettes (OKLCH/HSL), type scales, spacing systems, and implementation hints for React, Flutter, or plain CSS.

When to use it

  • You need a ready-to-implement design system for a new product or feature.
  • You want to upgrade a UI to contemporary patterns (Glassmorphism, Bento Grid, Neumorphism).
  • You must fix accessibility issues and meet WCAG contrast requirements.
  • You need consistent, production-ready spacing, typography, and component tokens.
  • You want a dark mode strategy that preserves legibility and brand tone.

Best practices

  • Use variable-based tokens for colors, spacing, radii, and type to ensure consistency.
  • Prefer subtle motion (200–300ms) for interactions; avoid heavy animations that distract.
  • Follow a 4px or 8px spacing rhythm for predictable layouts and responsive scaling.
  • Validate color contrast and provide semantic palettes for success, warning, and error states.
  • Limit neumorphism to accent elements and maintain accessible contrast in all modes.

Example use cases

  • Generate a full design system (colors, type scale, spacing, components) for a new Next.js app.
  • Refactor an admin dashboard into a Bento Grid layout with responsive breakpoints and component variants.
  • Create accessible dark mode tokens and test contrast across primary components.
  • Audit an existing form flow, suggest UX improvements, error states, and micro-interaction timing.
  • Produce implementation notes for Flutter and web including CSS variables and token mappings.

FAQ

Can you export tokens for multiple platforms?

Yes. I produce tokens and implementation hints formatted for web (CSS/JS), Flutter, and general JSON for integration.

How do you check accessibility?

I calculate contrast ratios, flag failing color pairs, and recommend alternative palettes and semantic roles to meet WCAG standards.