skills.rest
Yvesdefaria
YvesdefariaCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Searches a local CSV database of UI/UX design rules to generate design system recommendations.

Updated Aug 3, 2026
Search Tags:#typography#accessibility#design system#color palette#ui design#ux guidelines#bm25 search
One-click install
npx skills add https://github.com/Yvesdefaria/GymLab --skill ui-ux-pro-max-yvesdefaria
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/Yvesdefaria/GymLab/tree/main/.opencode/skills/ui-ux-pro-max
Command: npx skills add https://github.com/Yvesdefaria/GymLab --skill ui-ux-pro-max-yvesdefaria

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Choosing styles, color palettes, typography, and UX patterns for a new page or app often relies on guesswork. This Skill provides a searchable local database of 84 styles, 192 color palettes, 74 font pairings, 98 UX guidelines, and stack-specific rules across 22 frameworks, so design decisions are grounded in documented rules rather than ad-hoc choices. ## Core Features & Use Cases - Design System Generation: Run a single --design-system query to get a complete recommendation covering pattern, style, colors, typography, effects, and anti-patterns, with optional persistence to a MASTER.md file plus per-page overrides. - Domain-Specific Search: Query individual domains (style, color, typography, chart, icons, gsap, ux, landing, react, web, google-fonts) via a BM25-ranked search script with auto-domain detection. - Stack Guidelines: Retrieve implementation do/don't rules with code examples for 22 stacks including React, Next.js, Vue, SwiftUI, Flutter, Tailwind, and shadcn/ui. - Use Case: When asked to build a SaaS dashboard in Next.js, run the design-system generator with the product keywords, then supplement with --domain ux and --stack nextjs searches, and apply the returned palette, fonts, and accessibility rules directly in the components. ## Quick Start Ask the AI to generate a design system for your product by describing it, for example: use the ui-ux-pro-max skill to create a design system for a fitness tracking app built with React and Tailwind.

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

Run the search script with the --design-system flag and a query describing your product, industry, and tone, for example "beauty spa wellness service". The tool searches product, style, color, landing, and typography domains in parallel and returns a pattern, palette, fonts, effects, and anti-patterns.

What design data does the UI/UX search database include?▼

The local CSV database contains 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presets, and 25 chart types. It also includes per-stack guideline files for 22 frameworks such as React, Next.js, Vue, SwiftUI, Flutter, and Tailwind.

Does the search tool work with React Native or Flutter projects?▼

Yes, the --stack flag supports react-native and flutter along with 20 other stacks including swiftui, jetpack-compose, nextjs, vue, and shadcn. Stack detection is done by inspecting project files like package.json, pubspec.yaml, or Package.swift rather than assuming a default.

What should I do when a design search returns zero results?▼

Retry once with broader or differently worded keywords, such as splitting product and style terms into separate queries. If it still returns nothing, fall back to the built-in priority table and explicitly tell the user the recommendation came from defaults, never present an empty result as a database match.

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

The script requires Python 3 and has no external package dependencies, using only the standard library for CSV parsing and BM25 ranking. If the python command is unavailable, try python3 or py -3, and always invoke the script by its full path inside the skill directory.

Related Skills

Explore More Design & Creative Skills→
ViperJuiceViperJuice
8

library-detection

Detect languages, frameworks, and build tools from package manifests.

Community
Intermediate
NOIR-SolutionNOIR-Solution
6

ui-ux-pro-max

Generate UI design systems with styles, palettes, fonts, and component patterns.

Official
Advanced
FutureAtomsFutureAtoms
1

react-native-2026-accessibility

Implement and test React Native accessibility with WCAG 2.2 compliance.

Community
Advanced
Harmeet10000Harmeet10000
7

design-system-patterns

Standardizes tokens, theming, and component APIs for scalable UI foundations across web and mobile.

Community
Advanced