skills.rest
qqrus
qqrusCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generate design systems with styles, palettes, typography, and UX guidelines across 10 technology stacks.

1|Updated Mar 31, 2026
Search Tags:#mobile design#design system#web design#ux design#ui design
One-click install
npx skills add https://github.com/qqrus/hakanot4 --skill ui-ux-pro-max-qqrus
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/qqrus/hakanot4/tree/main/.augment/skills/ui-ux-pro-max
Command: npx skills add https://github.com/qqrus/hakanot4 --skill ui-ux-pro-max-qqrus

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides a comprehensive design guide for web and mobile applications, addressing UI structure, visual design, interaction patterns, and user experience quality control.

Core Features & Use Cases

  • Comprehensive Design Guide: Offers 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 technology stacks.
  • Actions: Plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code.
  • Projects: Website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app.
  • Elements: Button, modal, navbar, sidebar, card, table, form, and chart.
  • Styles: Glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design.
  • Topics: Color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient.
  • Integrations: shadcn/ui MCP for component search and examples.
  • Use Case: When designing a new web application, this Skill can be used to ensure the UI/UX is professional, accessible, and consistent with the latest design trends.

Quick Start

Use the ui-ux-pro-max skill to generate a design system for a new project 'Serenity Spa'.

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 create a consistent design system for a web and mobile application?▼

This skill provides a comprehensive UI/UX design system with 161 color palettes, 57 font pairings, and 99 UX guidelines across 10 technology stacks to ensure web and mobile app consistency.

What design styles and UI elements are available for building a dashboard or SaaS project?▼

You can apply 50+ styles like glassmorphism and bento grid alongside UI elements such as buttons, modals, cards, and charts to build dashboards and SaaS interfaces with modern visual trends.

Can I use this to review and improve existing UI/UX code and interactions?▼

Yes, you can review, fix, optimize, and refactor existing UI/UX code by applying its 99 UX guidelines, interaction patterns, and accessibility checks to enhance user experience quality control.

Does this skill support specific technology stacks for frontend implementation?▼

Yes, this skill supports frontend implementation across 10 technology stacks and integrates with shadcn/ui MCP to search component examples and ensure design consistency.

What are the best practices for choosing typography and color palettes for mobile apps?▼

Best practices involve selecting from 57 font pairings and 161 color palettes while following accessibility and contrast guidelines to ensure readable and visually consistent mobile app interfaces.

Related Skills

Explore More Design & Creative Skills→
vobasevobase
59

teach-impeccable

Scan project files and write design context to CLAUDE.md.

Official
Intermediate
kjayleekjaylee

ui-ux-pro-max

Generate UI/UX design guidance and frontend code for web and mobile platforms.

Community
Advanced
sumik5sumik5
2

mcp-shadcn

Search and add shadcn/ui components to React/Next.js projects.

Community
Intermediate
deangilmoreremixdeangilmoreremix

frontend-design

Generate production-grade frontend interfaces with a unique aesthetic direction.

Community
Advanced