ui-ux-pro-max

Generates design system recommendations by searching UI/UX style, color, and typography databases.

Updated Oct 14, 2024
One-click install
npx skills add https://github.com/tktcorporation/food-shop-search --skill ui-ux-pro-max-tktcorporation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/tktcorporation/food-shop-search/tree/main/.claude/skills/ui-ux-pro-max
Command: npx skills add https://github.com/tktcorporation/food-shop-search --skill ui-ux-pro-max-tktcorporation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Choosing consistent styles, color palettes, fonts, and layouts for a new UI project requires extensive design knowledge and research, and inconsistent choices lead to unprofessional-looking interfaces. ## Core Features & Use Cases - Design System Generation: Aggregates searches across product, style, color, landing page, and typography domains to produce a complete design system with reasoning-based recommendations and anti-patterns to avoid. - BM25 Search Engine: Searches 67 styles, 96 color palettes, 57 font pairings, 25 chart types, and UX guidelines via a Python CLI with domain and stack filters. - Stack-Specific Guidelines: Provides implementation best practices for 13 stacks including React, Next.js, Vue, Svelte, SwiftUI, 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 a recommended pattern, style, hex color palette, Google Fonts pairing, and effects, then persist it as a MASTER.md file with page-specific overrides. ## Quick Start Ask the AI to generate a design system for your project, for example: design a landing page for a fintech 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 new web project?▼

Run the search.py CLI 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 in parallel and returns a complete recommendation with pattern, colors, fonts, and anti-patterns.

What UI styles and color palettes are available for landing pages?▼

The database contains 67 styles including glassmorphism, minimalism, brutalism, and neumorphism, plus 96 color palettes organized by product type. Use --domain style or --domain color with keywords to retrieve specific options with hex values.

Does the skill support React and Next.js design guidelines?▼

Yes, it supports 13 stacks including React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, shadcn/ui, and Jetpack Compose. Use the --stack flag with a search query to get implementation-specific best practices; html-tailwind is the default.

How do I save a design system for use across multiple pages?▼

Add the --persist flag to create a design-system folder with a MASTER.md file containing global rules. Use --page with a page name to create page-specific override files in the pages subfolder that take precedence over the master file.

What are the requirements to run the UI/UX search tool?▼

Python 3 is the only requirement; the scripts use only standard library modules like csv, re, and math. Install Python via brew on macOS, apt on Ubuntu, or winget on Windows if it is not already available.