skills.rest
ankaboot-source
ankaboot-sourceOFFICIAL
Explore all skills by this author →
WebsiteGitHub

ui-ux-pro-max

Generates design system recommendations by searching a CSV database of UI styles, palettes, and guidelines.

2|Updated Jul 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/ankaboot-source/boucle --skill ui-ux-pro-max-ankaboot-source
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/ankaboot-source/boucle/tree/main/.jcode/skills/ui-ux-pro-max
Command: npx skills add https://github.com/ankaboot-source/boucle --skill ui-ux-pro-max-ankaboot-source

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Choosing coherent styles, color palettes, typography, and UX patterns for a new page or component is slow and inconsistent. This Skill replaces guesswork with a searchable design database and a CLI that returns complete, reasoned design system recommendations. ## Core Features & Use Cases - Design System Generation: Run a single query to get a full recommendation covering layout pattern, style, color palette, typography, effects, and anti-patterns, with optional persistence to a MASTER.md file plus page-level overrides. - Domain Search: Query 12 domains (style, color, typography, chart, landing, product, ux, icons, gsap, react, web, google-fonts) backed by a BM25 search engine over CSV data. - Stack Guidelines: Retrieve implementation best practices for 22 stacks including React, Next.js, Vue, Svelte, Astro, SwiftUI, Flutter, and Tailwind. - Use Case: When asked to build a fintech dashboard, run the design-system command to get a dark-mode palette, font pairing, and spacing scale, then pull React performance rules before writing components. ## Quick Start Ask the AI to generate a design system for your project by running the bundled search script with the --design-system flag and your product keywords.

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 your product keywords and the --design-system flag. It searches product, style, color, landing, and typography domains in parallel, applies reasoning rules, and returns a complete recommendation with pattern, palette, fonts, effects, and anti-patterns.

What UI styles and color palettes are available in the database?▼

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. You query them by keyword through domain-specific searches.

Does the design system generator support dark mode palettes?▼

Yes. The generator resolves light or dark mode from your query and the selected style, then picks a palette whose background luminance matches that mode. It also filters out anti-patterns that contradict a resolved dark mode.

Which frameworks and stacks have specific guidelines?▼

Stack-specific guideline files exist for 22 stacks including React, Next.js, Vue, Svelte, Astro, SwiftUI, React Native, Flutter, Angular, Laravel, Three.js, and several .NET UI frameworks. Query them with the --stack flag.

What dependencies are required to run the search scripts?▼

Only Python 3 with its standard library is required. The scripts use csv, re, math, and argparse, with no third-party packages and no network access needed.

Can I save the generated design system for later sessions?▼

Yes. Add --persist with --output-dir to write a design-system/MASTER.md as the global source of truth, and use --page to create page-specific override files that take precedence over the master file.

Related Skills

Explore More Design & Creative Skills→
Full-Stack-AssetsFull-Stack-Assets

brand-packaging

Generate packaging design briefs from product details, brand identity, and market context.

Community
Advanced
rampstackcorampstackco
523

design-standards

Validate UI tokens, contrast, spacing, typography, and responsive rules against design standards.

Official
Advanced
etewiahetewiah
635

theme-evaluation

Evaluate theme palettes for WCAG contrast and accessibility compliance.

Community
Advanced
ChristineThamChristineTham

shadcn

Set up and theme shadcn/ui components with CLI and Tailwind.

Community
Advanced