skills.rest
zester4
zester4COMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

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

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

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 and usability issues. ## Core Features & Use Cases - Design System Generation: Produce a complete design system (pattern, style, colors, typography, effects) with reasoning-based recommendations for any product type, and persist it as a Master file with per-page overrides. - Searchable Design Database: Query 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, SwiftUI, Flutter, and Tailwind. - UI Review Checklists: Apply priority-ranked rule categories covering accessibility, touch targets, performance, animation, forms, navigation, and charts to audit existing interfaces. - Use Case: When asked to build a fintech dashboard, run the design-system search to get a matched style, palette, and font pairing, then verify the implementation against the accessibility and responsive-layout checklists. ## Quick Start Ask the assistant 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 script with the --design-system flag and a query describing your product type and industry. It returns a complete recommendation covering pattern, style, color palette, typography, and effects, plus anti-patterns to avoid.

How do I choose a color palette or font pairing for my product?▼

Use the search CLI with --domain color or --domain typography followed by keywords like your industry and mood. The database contains 161 color palettes and 57 font pairings matched to product types.

Does this skill support React Native and SwiftUI projects?▼

Yes, the database covers 10 stacks including React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and plain HTML/CSS. Stack-specific searches return relevant best practices.

Can I save the design system and reuse it across pages?▼

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

What accessibility rules does the UI review checklist cover?▼

The checklist covers contrast ratios of 4.5:1, visible focus states, alt text, aria-labels, keyboard navigation, heading hierarchy, reduced-motion support, and screen reader compatibility, following WCAG, Apple HIG, and Material Design.

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

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

Related Skills

Explore More Design & Creative Skills→
athina-aiathina-ai
1.1k

newsletter-sponsorship-finder

Discover and rank newsletters for sponsorship opportunities by audience and industry keywords.

Official
Intermediate
samjhechtsamjhecht
4

frontend-design

Generates responsive, accessible HTML/CSS/JS frontend interfaces with bold aesthetic direction.

Community
Advanced
adrielpadrielp
20

validate_plan

Validate implementation plan execution against success criteria and generate a report.

Community
Intermediate
LeroyAdonisLeroyAdonis

shadcn

Manage shadcn/ui components via CLI and components.json workflows.

Community
Intermediate