skills.rest
ferrarifankid04
ferrarifankid04COMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generates UI/UX design systems and searches style, color, typography, and stack guidelines via BM25.

Updated Aug 6, 2026
Search Tags:#typography#accessibility#design system#color palette#ui design#tailwind#ux guidelines
One-click install
npx skills add https://github.com/ferrarifankid04/ai-skills-public --skill ui-ux-pro-max-ferrarifankid04
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/ferrarifankid04/ai-skills-public/tree/main/claude-code/skills/ui-ux-pro-max
Command: npx skills add https://github.com/ferrarifankid04/ai-skills-public --skill ui-ux-pro-max-ferrarifankid04

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Choosing the right style, color palette, typography, and layout pattern for a new UI project requires extensive design knowledge, and reviewing UI code for accessibility and UX issues is time-consuming and error-prone. ## Core Features & Use Cases - Design System Generation: Produces a complete design system (pattern, style, colors, typography, effects, anti-patterns) from a natural-language query, with optional persistence as a MASTER.md plus per-page override files. - Searchable Design Database: BM25-powered search across 67 styles, 96 color palettes, 57 font pairings, 25 chart types, and UX guidelines, plus stack-specific rules for React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, and shadcn/ui. - Use Case: When asked to build a landing page for a beauty spa, run the design-system command to get recommended colors, fonts, and section structure, then pull Tailwind implementation guidelines before writing the code. ## Quick Start Ask the AI to generate a design system for your project, for example: create a landing page design system for a fintech SaaS dashboard 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 landing page?▼

Run the search.py script with the --design-system flag and a query describing your product, such as "beauty spa wellness service". It returns a recommended pattern, style, color palette, typography, effects, and anti-patterns in ASCII or Markdown format.

What frameworks and stacks does this UI design search support?▼

It supports html-tailwind (default), React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, shadcn/ui, and Jetpack Compose. Use the --stack flag with a keyword query to get implementation-specific guidelines for that stack.

Can I save the design system for use across multiple pages?▼

Yes, add the --persist flag to write a design-system/MASTER.md file as the global source of truth. Use --page to create page-specific override files under design-system/pages/ that take precedence over the master file.

Does the search tool require external Python packages?▼

No, the scripts use only the Python standard library (csv, re, math, argparse, pathlib). You only need Python 3 installed; no pip installs are required to run the BM25 search or design system generator.

Why does my search return no results for a keyword?▼

The BM25 tokenizer filters words of two characters or fewer and only returns results with a positive score. Try more specific keywords like "glassmorphism dark" or "healthcare dashboard", or specify a domain explicitly with --domain.

Related Skills

Explore More Design & Creative Skills→
TranVanTienDatTranVanTienDat

frontend-design

Generate production-quality frontend interfaces with distinctive typography, color, layout, and motion design.

Community
Advanced
VYRE-StudiosVYRE-Studios

frontend-design

Design responsive, accessible UI components with semantic HTML and WCAG AA compliance.

Official
Intermediate
aroidoaroido

accessibility-audit

Audit web components for WCAG 2.1 AA accessibility issues.

Official
Intermediate
vultisigvultisig
19

Figma Design Implementation

Translate Figma UI designs into React components using MCP tools.

Official
Intermediate