skills.rest
KlyrhonMiko
KlyrhonMikoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-ux-pro-max

Generates UI/UX design systems and implementation guidance via local BM25 search over curated CSV datasets.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Designing consistent, accessible interfaces requires choosing styles, palettes, fonts, charts, and stack-specific patterns, which is slow and error-prone without a structured reference. This Skill provides a searchable local knowledge base and CLI that returns verified design systems, UX guidelines, and per-stack best practices for web, mobile, and desktop UI work. ## Core Features & Use Cases - Design System Generation: The --design-system mode aggregates product, style, color, landing, and typography matches into a complete design system with anti-patterns, tunable via variance, motion, and density dials, and persistable as a MASTER.md plus per-page override files. - Domain and Stack Search: Query 12 domains (style, color, typography, chart, ux, landing, icons, gsap, react, web, product, google-fonts) and 22 stacks (React, Next.js, SwiftUI, Flutter, JavaFX, and more) through a calibrated BM25 engine with abstention and retry guidance. - Use Case: When asked to build a fintech dashboard in Next.js, run a design-system query for the visual direction, a chart-domain search for data visualization choices, and a Next.js stack search for streaming and Suspense guidance, then implement against the persisted MASTER.md. ## Quick Start Ask the AI to use the ui-ux-pro-max skill to generate a design system for your product type and then search UX and stack guidance for your framework.

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 bundled search.py script with the --design-system flag and a query describing your product type, industry, and style keywords. It returns a complete system with pattern, style, colors, typography, effects, and anti-patterns, optionally persisted to a MASTER.md file.

What frameworks and stacks does this UI guidance support?▼

It supports 22 stacks including React, Next.js, Vue, Svelte, Astro, Angular, SwiftUI, React Native, Flutter, Jetpack Compose, HTML-Tailwind, shadcn, JavaFX, WPF, WinUI, Avalonia, and Laravel. Use the --stack flag with a keyword query to get implementation-specific best practices.

Does the search CLI require third-party Python packages?▼

No, the scripts use only the Python 3 standard library with no third-party packages and no network access. On Windows, invoke scripts with python instead of python3.

How do I get accessibility guidance for a specific WCAG issue?▼

Search one observable outcome at a time in the ux domain, for example "error summary validation" or "focus not obscured". For icon-specific concerns, query the icons domain, then check the implementation stack only after the semantic outcome is resolved.

What happens when a search returns no verified match?▼

The engine abstains on low-confidence results based on calibrated score and coverage thresholds. Retry once with a narrower query or explicit domain/stack; if it still fails, the skill instructs using clearly labeled general guidance instead of persisting unverified output.

Can I tune the generated design system for dashboards versus marketing pages?▼

Yes, three optional 1-10 dials adjust output: --variance for layout boldness, --motion for animation intensity with matched GSAP snippets, and --density for spacing scale. Unset dials leave the default output unchanged.

Related Skills

Explore More Design & Creative Skills→
barkleesandersbarkleesanders
5

product-marketing-context

Create a centralized product marketing context document with 12 standardized sections.

Community
Intermediate
GP-SoftwareDivisionGP-SoftwareDivision

polish

Fix alignment, spacing, typography, color, and interaction issues in digital products.

Official
Advanced
okatech-orgokatech-org

ui-visual-validator

Automate visual validation of UI changes against design systems and accessibility criteria.

Community
Advanced
prasanna591prasanna591

ui-ux-pro-max

Generates design systems and UI/UX guidance via local BM25 search over curated design datasets.

Community
Advanced