skills.rest
AngelP17
AngelP17COMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-ux-pro-max

Generate UI/UX style guides and layout guidance for multi-stack web and mobile projects.

1|Updated Jan 29, 2026
Search Tags:#typography#workflow#ui#ux#design-intelligence#multistack
One-click install
npx skills add https://github.com/AngelP17/factoryops-console --skill ui-ux-pro-max-angelp17
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/AngelP17/factoryops-console/tree/main/factoryops-console/.agent/skills/ui-ux-pro-max
Command: npx skills add https://github.com/AngelP17/factoryops-console --skill ui-ux-pro-max-angelp17

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides AI-assisted UI/UX planning and implementation guidance across multiple stacks, reducing design iteration time and ensuring consistent UX patterns.

Core Features & Use Cases

  • Multi-stack UI/UX guidance: React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, and shadcn/ui.
  • Style & accessibility recommendations: color palettes, typography, spacing, and contrast best practices.
  • Use Case: When designing a dashboard for a SaaS product, generate style guides, component tokens, and a usable page structure that adheres to accessibility standards.

Quick Start

Launch UI/UX Pro Max guidance by requesting design direction. For example: "Create a responsive dashboard layout with a dark mode palette for a SaaS admin panel."

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 consistent UI/UX design across React, Vue, and mobile apps?▼

Multi-stack UI/UX guidance automates design planning across React, Next.js, Vue, Svelte, SwiftUI, React Native, and Flutter. It generates style guides, component tokens, and layout structures that enforce consistent patterns and accessibility standards across all platforms.

Can I use AI to generate typography and color palettes for my dashboard?▼

Yes. AI-driven design intelligence produces deterministic typography, color palettes, spacing, and contrast recommendations tailored to your project type—dashboards, landing pages, admin panels, or product websites—with accessibility built in.

What's the fastest way to plan a responsive SaaS dashboard layout?▼

Request design direction specifying your use case and stack. The Skill generates responsive layout structures, dark mode palettes, component tokens for Tailwind or shadcn/ui, and accessibility considerations, reducing design iteration time.

Does this work with Tailwind CSS and shadcn/ui component libraries?▼

Yes. The Skill provides UI/UX guidance and implementation direction for Tailwind and shadcn/ui, including style tokens, layout decisions, and accessibility patterns optimized for these frameworks.

How does AI-assisted UI/UX planning reduce design inconsistency?▼

The Python-based workflow applies deterministic prompts to generate consistent style guides, typography systems, color tokens, and layout rules across all platforms and frameworks, eliminating ad-hoc design decisions.

Can I get accessibility recommendations when designing mobile and web interfaces?▼

Accessibility considerations are integrated into all outputs: contrast best practices, spacing standards, and layout guidance for web (React, Next.js, Vue, Svelte, Tailwind, shadcn/ui) and mobile (SwiftUI, React Native, Flutter) projects.

Related Skills

Explore More Design & Creative Skills→
hiimtrunghiimtrung
4

ckm:brand

Define brand voice, visuals, and messaging with frontmatter-based metadata.

Community
Advanced
chicongstchicongst
2

ui-design

Automates UI design execution by applying tokens, palettes, typography and spacing across frameworks.

Community
Intermediate
sahaja9707sahaja9707

tailwind-design-system

Develop design systems with Tailwind CSS v4 using CSS-first configuration and design tokens.

Community
Intermediate
FutureAtomsFutureAtoms
1

react-native-2026-figma-to-code

Convert Figma designs into React Native code using Locofy.ai and Builder.io.

Community
Intermediate