skills.rest
RavitejaKarra24
RavitejaKarra24COMMUNITY
Explore all skills by this author →
𝕏@RavitejaKarra24GitHub

ui-ux-pro-max

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Choosing styles, color palettes, typography, and UX patterns for a new interface often means scattered research and inconsistent decisions. This Skill provides a searchable local database of UI/UX design rules that returns prioritized, reasoned recommendations for web and mobile interfaces across 22 technology stacks. ## Core Features & Use Cases - Design System Generation: Run a single query to get a complete design system with pattern, style, colors, typography, effects, and anti-patterns, optionally persisted as a MASTER.md plus per-page overrides. - Domain-Specific Search: Query 12 domains including styles, color palettes, font pairings, UX guidelines, icons, GSAP motion presets, charts, and landing page patterns using BM25 ranking. - Stack-Specific Guidelines: Retrieve implementation do/don't rules for React, Next.js, Vue, Svelte, SwiftUI, Flutter, Tailwind, shadcn/ui, and 14 other stacks. - Use Case: When asked to build an analytics dashboard in Next.js, generate a design system with density and motion dials, then pull Next.js-specific performance guidelines before writing components. ## Quick Start Ask the AI to generate a design system for your product type and stack, for example by requesting a design system for a SaaS dashboard built with 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 keywords. It searches product, style, color, landing, and typography domains in parallel and returns a complete recommendation with reasoning rules.

What design resources are included in the UI/UX 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. It also includes stack-specific guideline files for 22 frameworks.

Does the search tool support React and Next.js guidelines?▼

Yes, pass --stack react or --stack nextjs to get framework-specific do/don't rules with code examples. Other supported stacks include Vue, Svelte, Astro, SwiftUI, Flutter, Tailwind, shadcn/ui, and Jetpack Compose.

What dependencies does the UI/UX search script require?▼

The script requires only Python 3 with no external packages; it uses the standard library csv, re, and math modules. If python is not found, try python3 or py -3.

What should I do when a design search returns zero results?▼

Retry once with broader or differently worded keywords, splitting product and style terms. If still empty, fall back to the built-in priority table defaults and explicitly tell the user the recommendation did not come from a database match.

When should I not use this UI/UX design skill?▼

Skip it for pure backend logic, API or database design, non-visual performance work, infrastructure, and DevOps tasks. It applies only when the work changes how something looks, feels, moves, or is interacted with.

Related Skills

Explore More Design & Creative Skills→
ViperJuiceViperJuice
8

library-detection

Detect languages, frameworks, and build tools from package manifests.

Community
Intermediate
hidonguyenhidonguyen

ck:ui-styling

Generate shadcn/ui component libraries with Tailwind CSS themes.

Community
Intermediate
tuliopc23tuliopc23

axiom-accessibility-diag

Diagnose iOS and macOS accessibility violations with remediation strategies and code examples.

Community
Advanced
vultisigvultisig
19

Figma Design Implementation

Translate Figma UI designs into React components using MCP tools.

Official
Intermediate