skills.rest
stanz-stanz
stanz-stanzCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generate prioritized UI/UX design systems with accessibility-first rules for web and mobile stacks.

Updated Aug 27, 2026
Search Tags:#typography#accessibility#frontend#components#ui-ux#design-system#color-palette
One-click install
npx skills add https://github.com/stanz-stanz/heimdall --skill ui-ux-pro-max-stanz-stanz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/stanz-stanz/heimdall/tree/main/.claude/skills/ui-ux-pro-max
Command: npx skills add https://github.com/stanz-stanz/heimdall --skill ui-ux-pro-max-stanz-stanz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill removes uncertainty and repetitive decision-making from UI/UX work by providing prioritized, production-ready design systems, accessibility checks, color palettes, typography pairings, and implementation guidance for web and mobile projects. It helps teams and builders move from vague requirements or inconsistent UI to a consistent, accessible, and platform-adaptive design system that can be persisted and reused.

Core Features & Use Cases

  • Design system generation: Aggregates product, style, color, typography and landing-pattern recommendations into a Master design system and optional page-specific overrides.
  • Searchable style database: BM25-powered CLI search across styles, colors, UX guidelines, charts, and stack-specific rules (React, Next.js, Vue, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui).
  • Implementation guidance: Pre-delivery checklists, CSS variables, spacing and shadow tokens, and practical do/don't rules to improve accessibility, responsiveness, and performance.
  • Use cases: Create a landing page or dashboard design system, pick accessible color palettes and font pairings, review and fix UI for accessibility and responsiveness, and persist MASTER.md plus page overrides for team use.

Quick Start

Generate a complete design system for a SaaS dashboard named Serenity Spa using the design-system generator and persist the MASTER.md for the 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 complete design system for a React or Next.js web application?▼

To generate a design system, provide your project requirements to get prioritized UI/UX recommendations, accessible color palettes, typography pairings, and stack-specific rules for React or Next.js. The output includes a persisted MASTER.md file containing CSS variables, spacing tokens, and shadow tokens for your web application.

What is the best way to ensure my UI components meet accessibility standards before delivery?▼

The best way to ensure UI components meet accessibility standards is to apply the pre-delivery accessibility checklists and do/don't rules provided. This approach generates accessibility-first design rules, reviews UI components for responsiveness, and fixes color contrast issues before production delivery.

Can I use this tool to pick accessible color palettes and typography pairings for a Flutter or SwiftUI mobile interface?▼

Yes, you can pick accessible color palettes and typography pairings for mobile interfaces. The tool provides platform-adaptive design recommendations and stack-specific implementation guidance for Flutter and SwiftUI, ensuring your mobile UI components remain accessible and responsive.

How do I search for specific UX guidelines and landing page patterns for my Tailwind and shadcn/ui project?▼

You search for UX guidelines and landing page patterns using the BM25-powered CLI search across CSV datasets. This mechanism retrieves stack-specific rules, style recommendations, chart guidelines, and color combinations tailored for your Tailwind and shadcn/ui project implementation.

Does generating a design system create reusable override files for different pages within my Vue project?▼

Yes, generating a design system creates reusable override files for different pages. It aggregates product and style recommendations into a Master design system and produces optional page-specific overrides, allowing your Vue project to maintain consistent styling rules across multiple distinct pages.

What limitations should I expect when creating data visualization rules for a React Native dashboard?▼

When creating data visualization rules for a React Native dashboard, you should expect limitations around the provided chart guidelines being primarily search-driven recommendations from CSV datasets. You must manually apply the generated spacing tokens and accessibility rules to your specific charting components.

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
BrunoSantanaDeveloperBrunoSantanaDeveloper

design-system-enforcement

Enforce design-system tokens and layout specs in new UI code.

Community
Advanced
gfcampos1gfcampos1

ui-design

Guide UI and UX design decisions for web and mobile components.

Community
Intermediate
LimaTechnologiesLimaTechnologies

ui-ux-audit

Automate UI/UX audits for accessibility, responsiveness, and design-system consistency.

Community
Basic