skills.rest
jason23452
jason23452COMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generates design systems and searches UI/UX guidelines via BM25 over CSV databases.

Updated Jun 28, 2026
Search Tags:#typography#accessibility#responsive design#design system#color palette#ui ux#bm25 search
One-click install
npx skills add https://github.com/jason23452/my-skill --skill ui-ux-pro-max-jason23452
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/jason23452/my-skill/tree/main/flow/ui-ux-pro-max
Command: npx skills add https://github.com/jason23452/my-skill --skill ui-ux-pro-max-jason23452

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Making consistent, evidence-based UI/UX decisions is hard when designing pages, components, or reviewing interfaces across many frameworks. This Skill provides a searchable database of styles, colors, typography, charts, landing patterns, UX rules, and stack-specific guidelines, plus a design system generator, so visual and interaction decisions are grounded rather than subjective. ## Core Features & Use Cases - Design System Generation: Produce a full recommendation (pattern, style, palette, typography, effects, spacing) with optional variance/motion/density dials, and persist it as a MASTER.md plus per-page override files. - Domain & Stack Search: BM25 search across domains like color, typography, chart, landing, ux, and google-fonts, plus stack guidelines for React, Next.js, Vue, Nuxt, Svelte, SwiftUI, Flutter, Tailwind, shadcn, and more. - UI Review Checklists: Prioritized accessibility, touch target, responsive, motion, form, navigation, and chart rules for auditing existing interfaces. - Use Case: When asked to design a SaaS dashboard in Next.js, run the design-system generator to get palette strategy candidates and typography, then query the nextjs stack guidelines before implementing. ## Quick Start Ask the agent to design a landing page for your product and have it run the search script with the --design-system flag to produce a design system before writing any UI code.

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

Run search.py with your product query and the --design-system flag, optionally adding a project name with -p. The generator aggregates product, style, color, typography, and landing searches into a full recommendation with palette, fonts, effects, and spacing.

How do I search UI guidelines for a specific framework like React or Nuxt?▼

Use the --stack flag with search.py, for example --stack react or --stack nuxt-ui. Supported stacks include react, nextjs, vue, svelte, astro, swiftui, flutter, react-native, shadcn, html-tailwind, angular, laravel, threejs, and others.

Can the design system be saved and reused across sessions?▼

Yes, add --persist to write a design-system/MASTER.md as the global source of truth, and use --page to create per-page override files under design-system/pages/. Page-level files take priority over the master file when present.

What do the variance, motion, and density dials control?▼

They are optional 1-10 sliders used only with --design-system. Variance biases style selection from minimal to bold, motion attaches a matching GSAP snippet from the motion data, and density overrides the spacing scale from spacious to dense dashboard layouts.

When should this Skill not be used?▼

Do not use it for pure backend, database, API, DevOps, CLI, or non-visual automation tasks, or for business logic fixes that do not change what users see or how they interact. It is scoped to decisions affecting visible UI and user experience.

Related Skills

Explore More Design & Creative Skills→
ahsanghalibahsanghalib

ui-design-system

Creates and audits project-grounded UI design systems with semantic tokens and component guidance.

Community
Intermediate
h4vzzh4vzz
33

Frontend Design

Generate accessible React, Vue, Svelte, or HTML components with design tokens.

Community
Advanced
semicolon-devteamsemicolon-devteam

e2e-test

Automate Playwright end-to-end tests to validate runtime browser behavior.

Official
Advanced
carrilloappscarrilloapps

tailwind-design-system

Creates Tailwind CSS v4 design systems with semantic @theme tokens and CVA components.

Community
Advanced