ui-ux-pro-max

Generate design systems with color palettes, font pairings, and UX guidelines.

Updated Feb 25, 2024
One-click install
npx skills add https://github.com/jorgeluis594/lorito-killer --skill ui-ux-pro-max-jorgeluis594
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/jorgeluis594/lorito-killer/tree/main/.agents/skills/ui-ux-pro-max
Command: npx skills add https://github.com/jorgeluis594/lorito-killer --skill ui-ux-pro-max-jorgeluis594

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires csv, re, json, os, datetime, pathlib, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides comprehensive UI/UX design intelligence to ensure visually appealing, user-friendly, and accessible interfaces across various platforms and styles.

Core Features & Use Cases

  • Design System Generation: Creates a complete design system based on product type, industry, and keywords.
  • Style & Component Recommendations: Offers guidance on over 50+ styles, 161 color palettes, 57 font pairings, and common UI elements.
  • UX & Accessibility Audits: Provides checklists and rules for critical areas like accessibility, performance, and interaction design.
  • Use Case: When building a new SaaS dashboard, use this Skill to generate a modern, accessible design system, including color palettes, typography, and layout recommendations, ensuring a professional and user-centric outcome.

Quick Start

Generate a design system for a 'fintech mobile app' project.

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 SaaS application?

Generate a SaaS application design system by specifying your product type and industry to receive tailored color palettes, font pairings, and layout recommendations. This provides a complete, accessible design foundation ensuring a professional and user-centric outcome.

What is the best way to choose a color palette and typography for a fintech mobile app?

Choosing a color palette and typography for a fintech mobile app involves matching industry requirements with predefined design intelligence. You can select from 161 color palettes and 57 font pairings to ensure visual appeal and accessibility.

Can I use this to audit accessibility and UX guidelines for web dashboards?

Yes, you can audit accessibility and UX guidelines for web dashboards using provided checklists and rules. It evaluates interaction design and performance across 99 UX guidelines and 10 technology stacks to identify critical areas for improvement.

Does the UI/UX design intelligence work with shadcn/ui components?

The UI/UX design intelligence works with shadcn/ui by integrating with the shadcn/ui MCP for component search and examples. This allows you to find and implement common UI elements that align with your generated design system.

How do I review and refactor UI/UX code for an e-commerce site?

Review and refactor UI/UX code for an e-commerce site by applying targeted design patterns and accessibility rules. It analyzes your implementation against 50+ styles and 99 UX guidelines to provide actionable fixes and optimization enhancements.

What tech stacks are supported for building landing pages and admin panels?

Building landing pages and admin panels is supported across 10 technology stacks with tailored design patterns and component recommendations. This ensures your generated design system and UI elements match your specific development environment.