skills.rest
kaitoartz
kaitoartzCOMMUNITY
Explore all skills by this author →
Website𝕏@kaitoartzzGitHub

ui-ux-pro-max

Generates design systems and UI/UX recommendations from a searchable design rule database.

Updated Jun 30, 2026
Search Tags:#typography#accessibility#responsive design#design system#color palette#ui design#ux guidelines
One-click install
npx skills add https://github.com/kaitoartz/dotfiles --skill ui-ux-pro-max-kaitoartz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/kaitoartz/dotfiles/tree/main/dot_agents/skills/ui-ux-pro-max
Command: npx skills add https://github.com/kaitoartz/dotfiles --skill ui-ux-pro-max-kaitoartz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Choosing consistent styles, color palettes, typography, and UX patterns for web and mobile interfaces is time-consuming and error-prone, especially when reviewing UI code for accessibility, responsiveness, and visual quality. ## Core Features & Use Cases - Design System Generation: Produces a complete design system (pattern, style, colors, typography, effects) with reasoning rules and anti-patterns for a given product type, with optional persistence to MASTER.md and per-page override files. - Searchable Design Database: Queries 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks including React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, and shadcn/ui. - UI Review Checklists: Provides priority-ranked rule categories covering accessibility, touch targets, performance, animation, forms, navigation, and charts for auditing existing interfaces. - Use Case: When building a fintech dashboard, run the design-system search to get a recommended style, palette, and font pairing, then persist it so every page follows the same rules across sessions. ## Quick Start Ask the AI to generate a design system for your product type, for example: design a landing page for a beauty spa using the ui-ux-pro-max skill.

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

Run the search.py script with your product type and keywords plus the --design-system flag. It searches product, style, color, landing, and typography domains in parallel and returns a complete design system with reasoning and anti-patterns.

How to choose a color palette or font pairing for a specific product type?▼

Use domain searches such as --domain color or --domain typography with descriptive keywords like industry and mood. The database contains 161 color palettes and 57 font pairings matched to product categories.

Does this skill support React Native, Flutter, and SwiftUI?▼

Yes, the design database covers 10 technology stacks including React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and plain HTML/CSS. Stack-specific best practices are available through stack searches.

Can I persist design decisions across multiple pages and sessions?▼

Yes, adding --persist to the design-system command creates a design-system/MASTER.md file as the global source of truth. The --page flag creates per-page override files that take priority over the master rules.

What UX issues does the review checklist catch?▼

The checklist covers 99 guidelines ranked by priority, including contrast ratios, 44px touch targets, layout shift prevention, animation timing, form validation placement, and navigation patterns. It flags anti-patterns like placeholder-only labels and emoji icons.

When should I not use this UI/UX design skill?▼

Skip it for pure backend logic, API or database design, non-visual performance optimization, infrastructure work, and automation scripts. It applies only when a task changes how a feature looks, feels, moves, or is interacted with.

Related Skills

Explore More Design & Creative Skills→
WeWake1WeWake1

frontend-design

Generate distinctive production-grade frontend interfaces with typography, color, motion, and interaction guidelines.

Community
Advanced
avibebuilderavibebuilder
113

frontend-design

Build distinctive frontend interfaces with framework-specific code and accessibility guidance.

Official
Advanced
dxiirendxiiren

antislop-human

Validates UI accessibility for contrast, keyboard navigation, focus states, and mobile zoom against WCAG criteria.

Community
Intermediate
reason-machinesreason-machines
4

better-design-shadcn-themes

Install themed shadcn/ui components from 31 design systems via the shadcn CLI.

Official
Intermediate