skills.rest
kileroppo
kileroppoCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generate UI/UX design systems with domain-specific style and accessibility guidance.

Updated Aug 27, 2026
Search Tags:#color palettes#typography#accessibility#react#design system#ui/ux#responsive layout
One-click install
npx skills add https://github.com/kileroppo/AI-Coding-Guidance-Skills --skill ui-ux-pro-max-kileroppo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/kileroppo/AI-Coding-Guidance-Skills/tree/main/skills/ui-ux-pro-max
Command: npx skills add https://github.com/kileroppo/AI-Coding-Guidance-Skills --skill ui-ux-pro-max-kileroppo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill helps you design interfaces that look professional, feel intuitive, and work well across platforms by applying accessibility, interaction, layout, typography, and visual style rules.

Core Features & Use Cases

  • UI/UX design system generation: Build a cohesive design system (pattern, style priority, color strategy, typography) from a single product/goal description.
  • Domain-guided recommendations: Apply focused guidance for accessibility, touch interactions, performance, layout responsiveness, form feedback, navigation patterns, and chart/data visualization.
  • Stack-aligned implementation guidance: Use React/Next.js and related stack guidelines to translate design intent into code-friendly direction.
  • Master + Overrides persistence: Persist design system outputs into a reusable Master file with optional page-level overrides for consistent updates across sessions.

Quick Start

Generate a design system for a SaaS dashboard by asking: "Create a UI/UX design system for a 'SaaS analytics dashboard' project named 'Acme Analytics'."

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 cohesive UI/UX design system for a new web project?▼

To generate a UI/UX design system, provide a single product description or goal. The tool outputs domain-specific style priorities, color palettes, typography strategies, and layout guidance, persisting them into a reusable Master file for consistent web and mobile interfaces.

Can I apply accessibility and responsive layout guidance to existing React components?▼

Yes, you can apply accessibility and responsive layout guidance to existing React components. The tool provides stack-aligned implementation direction, translating design intent into code-friendly patterns for refactoring UI components and interaction behaviors.

What is the best way to maintain consistent design tokens across multiple product pages?▼

The best way to maintain consistent design tokens is using Master and Overrides persistence. The tool saves base design system outputs into a MASTER.md file, allowing optional page-level override files for hierarchical reuse and consistent updates across sessions.

Does this UI/UX tool require specific datasets for domain-guided recommendations?▼

Yes, generating domain-guided UI/UX recommendations requires searchable guideline datasets. The tool uses BM25-based domain and stack retrieval to apply focused accessibility, touch interaction, and layout responsiveness guidance to your product experiences.

How do I review UX quality for mobile touch interactions and form feedback?▼

To review UX quality for mobile touch interactions and form feedback, apply the tool's domain-guided recommendations. It evaluates interaction patterns and navigation structures, providing specific guidance for accessibility and user experience across mobile product types.

Related Skills

Explore More Design & Creative Skills→
danielctcdanielctc

ui-ux-pro-max

Search UI/UX style guides using a BM25 index over CSV datasets.

Community
Intermediate
Hey-ViswaHey-Viswa

miro-design-skill

Apply Miro design-system patterns to React/Next.js product interfaces.

Community
Advanced
Hey-ViswaHey-Viswa

wise-design-skill

Generate Wise-aligned React/Next.js UI guidance for dashboards and forms.

Community
Intermediate
hookvibehookvibe
3

ui-ux-pro-max

Generate UI/UX design systems with color palettes and typography guidelines.

Official
Basic