skills.rest
ai-for-war
ai-for-warOFFICIAL
Explore all skills by this author →
GitHub

ui-ux-pro-max

Search UI styles, color palettes, font pairings, and stack guidelines via a BM25 engine.

1|Updated Mar 4, 2026
Search Tags:#typography#frontend#color palette#ui design#tailwind#ux guidelines#bm25 search
One-click install
npx skills add https://github.com/ai-for-war/war_mind_fe --skill ui-ux-pro-max-ai-for-war
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/ai-for-war/war_mind_fe/tree/main/.agents/skills/ui-ux-pro-max
Command: npx skills add https://github.com/ai-for-war/war_mind_fe --skill ui-ux-pro-max-ai-for-war

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Designing professional frontend interfaces requires choosing the right style, colors, typography, and layout patterns, which is time-consuming without a structured reference. This Skill provides a searchable design database so AI agents can ground UI/UX decisions in curated guidelines before writing code. ## Core Features & Use Cases - BM25 Design Search: Query 8 domains (style, color, typography, chart, landing, product, UX, prompt) via a Python CLI backed by CSV datasets. - Stack-Specific Guidelines: Retrieve best practices for 8 stacks including React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, and html-tailwind. - Pre-Delivery Quality Rules: Built-in checklists for icons, hover states, light/dark mode contrast, layout spacing, and accessibility. - Use Case: When asked to build a landing page for a beauty spa, the agent searches product, style, typography, color, and landing domains, then synthesizes the results into a complete design system before implementing the page. ## Quick Start Ask the AI to design a landing page or dashboard and it will search the ui-ux-pro-max database for matching styles, palettes, and fonts before generating the 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 search UI design styles and color palettes from the command line?▼

Run python3 scripts/search.py with a query and a --domain flag such as style, color, typography, or landing. The script uses BM25 ranking over CSV datasets and returns the top matching style guides, hex palettes, or font pairings.

What frontend stacks does this design guideline search support?▼

It supports eight stacks via the --stack flag: html-tailwind (default), react, nextjs, vue, svelte, swiftui, react-native, and flutter. Each stack returns category-specific do/don't guidelines with code examples.

Does the search script require external Python packages?▼

No, the search engine uses only the Python standard library (csv, re, math, collections, argparse). You only need Python 3 installed; no pip dependencies are required.

How does the BM25 search decide which domain to query?▼

If no --domain flag is given, the script auto-detects the domain by matching query keywords against domain-specific term lists, defaulting to style when nothing matches. You can override this by passing --domain explicitly.

Why does a search return zero results for my keyword?▼

Results require a BM25 score above zero, so very short or unrelated keywords may match nothing. The tokenizer also drops words of two characters or fewer, so use specific multi-word queries like 'healthcare SaaS dashboard' instead of single generic terms.

Related Skills

Explore More Design & Creative Skills→
futureboardfutureboard
82

design

Generates logos, CIP mockups, SVG icons, banners, and social images using Gemini AI.

Official
Advanced
ralphjohn29ralphjohn29
1

ui-ux-pro-max

Provide UI/UX design recommendations for React, Next.js, Vue, and SwiftUI.

Community
Advanced
scsm-unrestrictscsm-unrestrict
1

a11y-responsive

Implements and audits accessibility, responsive layouts, and cross-browser compatibility for web interfaces.

Community
Intermediate
google-labs-codegoogle-labs-code
8.2k

shadcn-ui

Integrates and customizes shadcn/ui components in React applications using Tailwind CSS.

Official
Advanced