skills.rest
bjorkgard
bjorkgardCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generate UI/UX design systems with palettes, fonts, and layouts.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides comprehensive guidance and actionable recommendations for UI/UX design, ensuring visually appealing, user-friendly, and accessible digital products.

Core Features & Use Cases

  • Design System Generation: Creates tailored design systems based on project type, style, and industry.
  • Component Styling: Offers specific advice on colors, typography, and layout for various UI elements.
  • UX Best Practices: Enforces critical guidelines for accessibility, performance, and interaction.
  • Use Case: When starting a new SaaS dashboard, use this Skill to generate a complete design system, including color palettes, font pairings, and layout recommendations, ensuring a professional and consistent user experience.

Quick Start

Generate a design system for a new e-commerce website by running the command: python3 skills/ui-ux-pro-max/scripts/search.py "e-commerce website" --design-system

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 web or mobile dashboard?▼

To generate a design system for dashboards, specify your project type and industry to receive tailored color palettes, font pairings, and layout recommendations. This ensures a consistent user experience across your application interface.

What font pairings and color palettes work best for UI accessibility?▼

For UI accessibility, choose from 96 color palettes and 57 font pairings that enforce contrast and legibility rules. The system provides specific guidance to ensure your typography and color choices meet accessibility standards.

Can I use this to implement UI components with shadcn/ui?▼

Yes, you can use this to implement UI components with shadcn/ui by searching for specific elements like buttons and modals. It integrates directly with shadcn/ui to provide component examples and styling guidance.

What's the best way to style and refactor mobile app interfaces?▼

The best way to style and refactor mobile app interfaces is to apply one of the 67 available design styles, such as glassmorphism or minimalism. This approach provides specific rules for animation, layout, and component design.

Does it support design guidance for data visualization and charts?▼

Yes, it supports data visualization by offering 25 chart types across 13 technology stacks. You get specific styling and layout recommendations to ensure your charts are visually appealing and user-friendly.

Related Skills

Explore More Design & Creative Skills→
danghungtb26danghungtb26
3

ui-ux-pro-max

Generate design systems for web and mobile projects across nine technology stacks.

Community
Advanced
HaipingXuHaipingXu
21

ui-ux-pro-max

Generate design systems for web and mobile applications with UI/UX guidance.

Community
Advanced
iButtersiButters
3

react-typescript

Generate typed React TypeScript components, hooks, and context providers.

Community
Advanced
mkatoguimkatogui
3

brand-identity-generator

Generate brand identity systems with CSS-ready tokens and brand guidelines.

Community
Advanced