skills.rest
nicoarbelaez
nicoarbelaezCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-ux-pro-max

Generate structured UI/UX design systems with master rules and page-specific overrides.

Updated May 12, 2025
Search Tags:#typography#design#ui#accessibility#ux#design-system#color-palette
One-click install
npx skills add https://github.com/nicoarbelaez/portfolio --skill ui-ux-pro-max-nicoarbelaez
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/nicoarbelaez/portfolio/tree/main/.agents/skills/ui-ux-pro-max
Command: npx skills add https://github.com/nicoarbelaez/portfolio --skill ui-ux-pro-max-nicoarbelaez

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Centralized, searchable UI/UX guidance that accelerates design decisions by providing ready-to-use rules, palettes, typography, spacing, and interaction guidelines across multiple stacks and platforms.

Core Features & Use Cases

  • Comprehensive design guidance across 10 technology stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, HTML/CSS) with 161 color palettes, 57 font pairings, 161 product types, and 99 UX guidelines.
  • Priority-based recommendations for color, typography, spacing, motion, and layout to ensure consistency and speed up design reviews.
  • Design-system generation and persistence with a global MASTER.md and page-specific overrides, enabling hierarchical retrieval across sessions.
  • Use cases include building landing pages, dashboards, admin panels, SaaS apps, portfolio sites, blogs, and mobile apps, with guidance for components and interactions.

Quick Start

Generate a complete design system for a dashboard app and export the master design document.

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 UI design system for a web and mobile app?▼

Generate a UI design system by applying structured guidance that outputs a master document with typography, color, spacing, and motion rules, alongside page-specific overrides for web and mobile stacks.

What is the best way to maintain typography and color consistency across React and Next.js components?▼

Maintain typography and color consistency by applying a centralized design system that provides priority-based recommendations and persistent master rules across React, Next.js, and shadcn/ui components.

Does this UI/UX design guidance support Tailwind and SwiftUI?▼

Yes, the UI/UX design guidance supports Tailwind and SwiftUI, offering comprehensive rules, color palettes, and font pairings across 10 technology stacks including React Native and Flutter.

Can I use a generated design system for both dashboards and landing pages?▼

Yes, you can use the generated design system for both dashboards and landing pages, as it provides hierarchical retrieval with a global master file and page-specific overrides suitable for diverse product types.

How do I apply accessibility guidelines when building a SaaS app design system?▼

Apply accessibility guidelines by leveraging the 99 built-in UX guidelines within the design system generation, ensuring your SaaS app components and interactions meet accessibility standards across web and mobile platforms.

Why use a centralized design system instead of ad-hoc component styling?▼

Use a centralized design system to accelerate design decisions and speed up reviews by providing ready-to-use rules, 161 color palettes, and 57 font pairings, eliminating the inconsistency of ad-hoc component styling.

Related Skills

Explore More Design & Creative Skills→
moshi-azzmoshi-azz
2

ui-ux-pro-max

Generate UI/UX design systems with guidelines, palettes, and typography for specified tech stacks.

Community
Advanced
AneekSAneekS

ui-ux-pro-max

Aggregate UI/UX guidance to generate design systems in ASCII or Markdown.

Community
Advanced
stamp-kkookkstamp-kkookk
1

design-system

Standardize frontend UI development with Tailwind v4.0 components and accessibility patterns.

Official
Advanced
aaltaayaaltaay

ui-ux-pro-max

Generate design system blueprints from UI/UX guidelines for web and mobile projects.

Community
Advanced