skills.rest
whyte25
whyte25COMMUNITY
Explore all skills by this author →
Website𝕏@fasifeoluwaGitHub

ui-ux-pro-max

Generate UI/UX design systems with patterns, colors, typography, and anti-patterns.

12|Updated Dec 25, 2024
Search Tags:#typography#accessibility#landing page#design system#ui/ux#color palette#responsive ui
One-click install
npx skills add https://github.com/whyte25/reusables --skill ui-ux-pro-max-whyte25
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/whyte25/reusables/tree/main/.agents/skills/ui-ux-pro-max
Command: npx skills add https://github.com/whyte25/reusables --skill ui-ux-pro-max-whyte25

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill prevents inconsistent, inaccessible, and under-optimized UI/UX work by turning UI/UX principles into a structured, reusable design system recommendation.

Core Features & Use Cases

  • Design-system generation for any product idea: Produces a recommended pattern, style direction, color palette, and typography baseline for common app and landing-page types.
  • Priority-based UX rules: Applies accessibility, touch interaction, performance, responsive layout, and animation guidance with anti-patterns to avoid.
  • Searchable guidance across domains and stacks: Uses BM25 search over style, color, typography, landing structure, and UX guidelines, with optional stack-specific implementation guidance.

Quick Start

Generate a complete UI/UX design system for a project by running: python3 skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard for fintech" --design-system -p "FinDash".

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 complete design system for a web application?▼

Generate a design system by running a local search script with a project description and design flag to aggregate patterns, color palettes, typography baselines, and accessibility rules into a structured output.

What is included in a production-ready UI/UX design system?▼

A production-ready design system includes recommended landing patterns, style directions, color palettes, typography baselines, key effects, and anti-patterns for accessibility, touch interaction, and responsive layout.

Can I use this to create design rules for a SaaS dashboard?▼

Yes, you can generate hierarchical Master and page override files for SaaS dashboards by passing a descriptive prompt to the search script, which outputs stack-specific implementation guidance.

What's the best way to ensure accessibility and responsive UI in my design guidelines?▼

Ensure accessibility and responsive UI by aggregating priority-based UX rules that apply touch interaction, performance, and animation guidance while explicitly listing anti-patterns to avoid.

Do I need any external dependencies to run the UI/UX design system generator?▼

No external dependencies are required; the generator relies on a local deterministic BM25 search logic and YAML-defined metadata to rank and aggregate design guidance.

Why does my generated design system include anti-patterns?▼

Anti-patterns are included to prevent inconsistent and under-optimized UI/UX work by explicitly identifying design choices to avoid across accessibility, performance, and responsive layout categories.

Related Skills

Explore More Design & Creative Skills→
aifuxiaifuxi
437

ui-ux-pro-max

Search UI/UX guidelines across domains to generate cohesive design systems.

Community
Advanced
zhuanggenhuazhuanggenhua
19

ui-ux-pro-max

Generate design systems with patterns, styles, colors, and typography.

Community
Advanced
kaynetikkaynetik
1

frontend-design

Design frontend interfaces with design tokens, typography, motion, and accessibility checks.

Community
Advanced
SharafMawjoodSharafMawjood

ui-ux

Generate design systems with style, color palettes, typography, and UX guidelines.

Community
Intermediate