skills.rest
cartridge-gg
cartridge-ggOFFICIAL
Explore all skills by this author โ†’
GitHub

ui-ux-pro-max

Generate design system blueprints with color tokens, typography, and component guidance.

Updated Apr 3, 2026
Search Tags:#typography#design#ui#accessibility#ux#design-system#color-palette
One-click install
npx skills add https://github.com/cartridge-gg/scoundrel --skill ui-ux-pro-max-cartridge-gg
Or copy as Structured Prompt for Agentโ–ผ
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/cartridge-gg/scoundrel/tree/main/.agents/skills/ui-ux-pro-max
Command: npx skills add https://github.com/cartridge-gg/scoundrel --skill ui-ux-pro-max-cartridge-gg

SYSTEM DOCUMENTATION & REQUIREMENTS

๐Ÿ’ก This Skill includes scripts (resource) components.

What problem does it solve?

UI/UX design decisions can be slow and error-prone without a structured system. This Skill provides AI-powered guidance to accelerate design decisions across web and mobile projects.

Core Features & Use Cases

  • Comprehensive design-system planning: patterns, styles, color palettes, typography, and accessibility considerations for multiple stacks.
  • Domain-aware recommendations: tailored guidance for React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS.
  • Quick-start workflows: generate page-ready design systems and override rules for specific screens or products.

Quick Start

Generate a design system blueprint for your product by running the design system search with your project goals.

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 blueprint for a React and Next.js project?โ–ผ

Yes, the design guidance provides domain-aware recommendations tailored for mobile stacks like SwiftUI, React Native, and Flutter. It generates component guidance and visual language rules specific to your mobile project's framework requirements.

Can I use this to select color palettes and typography for Tailwind and shadcn/ui?โ–ผ

Yes, you can select color palettes and typography for Tailwind and shadcn/ui projects. The system generates color tokens, typography styles, and component overrides that align your visual language across these specific stacks.

What is the best way to evaluate accessibility when building a UI design system?โ–ผ

The best way to evaluate accessibility is to use the generated design system blueprint, which includes specific accessibility considerations. It aligns visual language and component patterns to ensure your UI meets accessibility standards across multiple stacks.

How do I override design system rules for specific pages or products?โ–ผ

You can override design system rules by using the page-specific override functionality. This allows you to generate tailored patterns, styles, and component guidance for individual screens while maintaining the broader visual language system.

Does the UI/UX design guidance work with Vue and Svelte frameworks?โ–ผ

Yes, the UI/UX design guidance works with Vue and Svelte frameworks. It provides domain-focused recommendations and generates comprehensive design system blueprints, including patterns and component guidance for these specific stacks.

Related Skills

Explore More Design & Creative Skillsโ†’
hbn0729hbn0729
1

ui-ux-pro-max

Generate a UI/UX design system with patterns, styles, colors, and typography.

Community
Advanced
Yoriichi-DangYoriichi-Dang

tailwind-v4-shadcn

Migrate React projects to Tailwind v4 with shadcn/ui using CSS-first theming.

Community
Advanced
semicolon-devteamsemicolon-devteam

generate-mockup

Generate UI mockups from design requirements using the 21st_magic_component_builder.

Official
Advanced
hendripermanahendripermana

ui-ux-pro-max

Generate a structured design system with patterns, style rules, and palettes.

Community
Advanced