skills.rest
LudwigAJ
LudwigAJCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generate UI/UX guidance and stack-aware implementation recommendations for product interfaces.

Updated Apr 8, 2026
Search Tags:#accessibility#frontend#react#design system#ui design#tailwind#ux flow
One-click install
npx skills add https://github.com/LudwigAJ/swell --skill ui-ux-pro-max-ludwigaj
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/LudwigAJ/swell/tree/main/.factory/skills/ui-ux-pro-max
Command: npx skills add https://github.com/LudwigAJ/swell --skill ui-ux-pro-max-ludwigaj

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill removes the guesswork from UI/UX work by turning a project goal into concrete design direction, implementation guidance, and accessibility-aware recommendations.

Core Features & Use Cases

  • UI Concept and Layout Direction: Produces clear visual direction, section structure, spacing, typography, and interaction patterns for new interfaces.
  • UX Flows and Edge Cases: Maps user journeys, critical paths, loading states, empty states, and error handling so product experiences feel complete.
  • Design System Guidance: Recommends tokens, component rules, color palettes, typography pairings, shadows, and accessibility considerations.
  • Implementation Support: Translates design advice into stack-aware frontend guidance for HTML, Tailwind, React, Next.js, Vue, Svelte, and mobile frameworks.
  • Use Case: A team building a SaaS dashboard can use this Skill to define the layout, choose an appropriate style language, set accessible colors and fonts, and specify component behavior before coding.

Quick Start

Ask the ui-ux-pro-max skill to design a polished, accessible interface for your product and include the platform, stack, and desired visual style.

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 design a UI for a React dashboard with accessible colors and typography?▼

To design an accessible React dashboard, specify your platform and desired visual style to generate layout direction, color palettes, typography pairings, and component behavior. This process ensures your dashboard has polished structure and accessibility-aware frontend guidance before coding.

What is the best way to map UX flows and edge cases for a mobile app?▼

The best way to map UX flows is to define critical user paths, loading states, empty states, and error handling. This ensures mobile app experiences feel complete by validating component behavior and interaction patterns across the entire user journey.

Can I use Tailwind to build a design system with accessibility considerations?▼

Yes, you can use Tailwind to build a design system by generating recommended design tokens, component rules, color palettes, and shadows. The guidance includes specific accessibility considerations to validate your frontend stack implementation.

Does this UI design guidance work with Next.js and Svelte frontend stacks?▼

This UI design guidance works with Next.js, Svelte, React, Vue, and HTML by translating visual direction into stack-aware implementation advice. You receive specific frontend guidance tailored to your selected framework's component behavior.

How do I structure a landing page layout with proper spacing and interaction patterns?▼

To structure a landing page layout, generate clear visual direction, section structure, spacing rules, and interaction patterns. This requires selecting a style language and typography matching to produce polished, accessible interface specifications.

What limitations exist when generating design system tokens for web and app stacks?▼

When generating design system tokens, limitations depend on your selected stack and style constraints. You must provide explicit color, typography, and component specifications to receive accurate, accessibility-aware recommendations for web and mobile frameworks.

Related Skills

Explore More Design & Creative Skills→
Fei2-LabsFei2-Labs
12

init-rules

Generate personalized AI agent rule files through an interactive interview.

Official
Intermediate
johnnyelwailerjohnnyelwailer

figma-to-code

Convert Figma designs into React components with token-based styling.

Community
Intermediate
sami-abdulsami-abdul
3

frontend-design

Outline and implement bold frontend design systems with typography, color, motion, and CSS.

Community
Advanced
hb9397hb9397

design-prototype-docs

Generate structured UI mockup design documents from RFP/SFR requirements.

Community
Advanced