skills.rest
ratnesh-maurya
ratnesh-mauryaCOMMUNITY
Explore all skills by this author →
Website𝕏@_ratneshmauryaGitHub

ui-ux-pro-max

Generates design system recommendations and searches UI/UX guidelines via a BM25-based CLI.

1|Updated Aug 17, 2025
Search Tags:#typography#design system#color palette#ui design#tailwind#ux guidelines#bm25 search
One-click install
npx skills add https://github.com/ratnesh-maurya/mdconverter --skill ui-ux-pro-max-ratnesh-maurya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/ratnesh-maurya/mdconverter/tree/main/.claude/skills/ui-ux-pro-max
Command: npx skills add https://github.com/ratnesh-maurya/mdconverter --skill ui-ux-pro-max-ratnesh-maurya

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 is time-consuming and error-prone, and common UX mistakes like poor contrast or missing focus states often slip into delivered code. ## Core Features & Use Cases - Design System Generation: Run a single command to get a complete recommendation covering page pattern, style, color palette, typography, effects, and anti-patterns for a given product type. - Domain Search: Query searchable CSV databases across domains like style, color, typography, charts, landing pages, UX guidelines, and icons using BM25 ranking. - Stack-Specific Guidelines: Retrieve implementation best practices 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, generate a full design system with recommended colors, fonts, and section order, then verify the result against the pre-delivery accessibility and contrast checklist. ## Quick Start Ask the AI to design a landing page for your product, and it will run the search script with the --design-system flag to produce a complete style, color, and typography recommendation.

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 landing page?▼

Run the search script with the --design-system flag and a query describing your product, such as "beauty spa wellness service". It searches product, style, color, landing, and typography domains, applies reasoning rules, and returns a complete recommendation with pattern, colors, fonts, and anti-patterns.

What UI styles and color palettes does the database include?▼

The CSV databases cover over 50 styles including glassmorphism, minimalism, and brutalism, plus color palettes organized by product type such as SaaS, e-commerce, healthcare, and fintech. Each palette includes primary, secondary, CTA, background, and text hex values.

Does it support frameworks other than React and Next.js?▼

Yes, stack-specific guideline searches are available for html-tailwind, React, Next.js, Vue, Nuxt, Svelte, SwiftUI, React Native, Flutter, and shadcn/ui. Use the --stack flag with your target framework to get implementation-specific best practices.

What are the requirements to run the search script?▼

The script requires Python 3 and uses only standard library modules like csv, re, and math, so no pip installs are needed. The CSV data files must exist in the skill's data directory for searches to return results.

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

The BM25 engine filters out words of two characters or fewer and only returns results with a positive score. Try more specific keywords like "healthcare SaaS dashboard" instead of generic terms, or specify a domain explicitly with the --domain flag.

Related Skills

Explore More Design & Creative Skills→
wpankwpank
11

ui-ux-pro-max

Generate UI/UX design systems from natural language queries.

Community
Advanced
brandonjjonbrandonjjon

frontend-design

Generate production-grade frontend interfaces from user requirements.

Community
Advanced
bramanda48bramanda48

antislop-human

Validate UI accessibility for contrast, keyboard navigation, focus states, and mobile zoom.

Community
Intermediate
CJ-1981CJ-1981

moai-design-tools

Fetch Figma design context and export Pencil designs to React and Tailwind CSS code.

Community
Advanced