skills.rest
Ramadan-Elgamal
Ramadan-ElgamalCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-ux-pro-max

Generates design system recommendations and searches UI/UX guideline databases via Python CLI.

Updated Aug 7, 2026
Search Tags:#typography#accessibility#design system#color palette#ui ux#python cli#bm25 search
One-click install
npx skills add https://github.com/Ramadan-Elgamal/Autobees --skill ui-ux-pro-max-ramadan-elgamal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/Ramadan-Elgamal/Autobees/tree/main/.agents/skills/ui-ux-pro-max
Command: npx skills add https://github.com/Ramadan-Elgamal/Autobees --skill ui-ux-pro-max-ramadan-elgamal

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Choosing coherent styles, color palettes, typography, and UX patterns for a new app or page is slow and inconsistent. This Skill provides a searchable database of 67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 22 technology stacks, with priority-based recommendations. ## Core Features & Use Cases - Design System Generation: Run a single query to get a complete design system (pattern, style, colors, typography, effects, anti-patterns) with optional variance, motion, and density dials. - Domain & Stack Search: BM25-powered search across domains like style, color, typography, chart, ux, icons, and GSAP motion, plus stack-specific guidelines for React, Next.js, SwiftUI, Flutter, and 18 more. - Persistence: Save design systems as a MASTER.md file with per-page override files for hierarchical retrieval across sessions. - Use Case: When asked to build a fintech dashboard, generate a full design system with dark-mode-aware palette selection, then pull React performance and accessibility guidelines before writing code. ## Quick Start Ask the AI to generate a design system for your project, for example: create a design system for a beauty spa landing page using the ui-ux-pro-max search script.

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 app?▼

Run the search.py script with the --design-system flag and a query describing your product, industry, and keywords. It searches product, style, color, landing, and typography domains in parallel and returns a complete recommendation with anti-patterns to avoid.

What design styles and color palettes are available?▼

The database contains 67 styles (minimalism, glassmorphism, brutalism, dark mode), 161 color palettes, 57 font pairings, and 25 chart types. Search by keyword in the style, color, or typography domains to browse options.

Does it support my framework like React, Flutter, or SwiftUI?▼

Yes, it provides stack-specific guidelines for 22 stacks including React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, shadcn, Jetpack Compose, and Angular. Use the --stack flag with a keyword query to retrieve best practices.

What dependencies does the search script require?▼

The scripts require only Python 3 with its standard library; no third-party packages or network access are needed. On Windows, invoke scripts with python instead of python3.

Why did my search return no results?▼

Zero results mean the query did not match the database vocabulary. Retry with broader or different keywords; the output includes closest known terms as suggestions to guide your next query.

How do I save a design system for later sessions?▼

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

Related Skills

Explore More Design & Creative Skills→
0xarcano0xarcano

product-marketing-context

Generate and update product marketing context documents in Markdown.

Community
Intermediate
refly-airefly-ai

distinctive-frontend-design

Create cohesive frontend design blueprints with typography, color tokens, motion patterns, and reusable CSS.

Official
Basic
hadimiftahulfhadimiftahulf

ux-polish

Review user interfaces for design consistency, responsiveness, and accessibility.

Community
Intermediate
vultisigvultisig
19

Figma Design Implementation

Translate Figma UI designs into React components using MCP tools.

Official
Intermediate