skills.rest
PhongCT1105
PhongCT1105COMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Searches a local UI/UX design database to generate design systems and guidelines.

Updated Jul 30, 2026
Search Tags:#typography#accessibility#design system#color palette#ui design#ux guidelines#bm25 search
One-click install
npx skills add https://github.com/PhongCT1105/okta_stripe_hack --skill ui-ux-pro-max-phongct1105
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/PhongCT1105/okta_stripe_hack/tree/main/frontend/.agents/skills/ui-ux-pro-max
Command: npx skills add https://github.com/PhongCT1105/okta_stripe_hack --skill ui-ux-pro-max-phongct1105

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Choosing styles, color palettes, typography, and interaction patterns for a new UI often relies on guesswork, and design decisions get lost between sessions. This Skill provides a searchable local database of UI/UX rules and a design system generator that produces consistent, reasoned recommendations for web and mobile interfaces. ## Core Features & Use Cases - Design System Generation: Run a single query to get a complete recommendation covering layout pattern, style, color palette, typography, effects, and anti-patterns, with optional persistence to a MASTER.md file plus per-page overrides. - Domain-Specific Search: Query 12 domains (style, color, typography, charts, UX guidelines, icons, GSAP motion, landing pages, and more) using a BM25-ranked search over local CSV data. - Stack-Specific Guidelines: Retrieve implementation do/don't rules for 22 stacks including React, Next.js, Vue, SwiftUI, Flutter, Tailwind, and shadcn/ui. - Use Case: When building a SaaS dashboard in Next.js, generate a persisted design system, then pull accessibility and animation guidelines before delivery using the pre-delivery checklists in the references. ## Quick Start Ask the AI to use the ui-ux-pro-max skill to generate a design system for your product type and stack, for example: "Generate a design system for a fitness tracking dashboard in Next.js."

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 script with the --design-system flag and a query describing your product type, industry, and tone. It searches product, style, color, landing, and typography domains in parallel and returns a complete recommendation with reasoning.

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

The 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. All data lives in local CSV files searched with a BM25 ranking algorithm.

Does the design system generator support React and Next.js?▼

Yes, it supports 22 stacks including React, Next.js, Vue, Svelte, Angular, SwiftUI, Flutter, Tailwind, and shadcn/ui. Use the --stack flag with a detected stack to get implementation-specific guidelines with code examples.

Can I save a design system and reuse it across sessions?▼

Yes, add --persist with --output-dir pointed at your project root to write a MASTER.md file as the global source of truth. Page-specific overrides can be created with the --page flag, and existing files are skipped unless --force is passed.

What happens when a design search returns no results?▼

The tool returns suggested alternative terms from its indexed vocabulary so you can retry with broader keywords. If still empty, the workflow falls back to built-in priority-table defaults, which must be disclosed rather than presented as database matches.

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

The script requires Python 3.x with no external package dependencies, using only the standard library. It works with python, python3, or py -3 depending on your platform.

Related Skills

Explore More Design & Creative Skills→
mikaelcharbonneaumikaelcharbonneau

target-audience

Define brand target audiences with personas, psychographics, and ICP frameworks.

Community
Intermediate
t-stringst-strings

Frontend Accessibility

Review frontend UI code for HTML semantics, ARIA, keyboard navigation, and contrast.

Official
Basic
dembrandtdembrandt
33

wcag-accessibility

Review web interfaces for WCAG 2.2 Level AA accessibility compliance.

Official
Advanced
themadorgthemadorg
6

bedrud-fe-ui-foundation

Standardize React frontend UI with a reusable design system and shadcn/ui primitives.

Official
Intermediate