skills.rest
vonomarap
vonomarapCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-pro-max

Generate UI/UX design systems with palettes, typography, and stack-specific guidelines.

Updated Aug 30, 2025
Search Tags:#typography#accessibility#tailwind#ui-ux#design-system#color-palette#component-library
One-click install
npx skills add https://github.com/vonomarap/kanokna --skill ui-ux-pro-max-vonomarap
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/vonomarap/kanokna/tree/main/.agents/skills/ui-ux-pro-max
Command: npx skills add https://github.com/vonomarap/kanokna --skill ui-ux-pro-max-vonomarap

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the manual effort of defining cohesive, accessible design systems and implementation guidelines for web and mobile projects by generating style systems, palettes, typography, component patterns, and stack-specific notes.

Core Features & Use Cases

  • Design system generation: Produces a master design system with patterns, color palettes, typography pairings, and anti-patterns tailored to product type and style keywords.
  • Stack-aware implementation: Provides implementation guidance for html-tailwind, React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, and shadcn, including accessibility and performance notes.
  • Persistence & hierarchical overrides: Supports saving a MASTER design system and page-level overrides for consistent retrieval and iterative development.
  • Use case: Quickly create a responsive, accessible landing page or dashboard design system for an e-commerce or SaaS product and export the rules for developer handoff.

Quick Start

Use the ui-ux-pro-max skill to generate and persist a complete design system for "Project Name" including style, palette, typography, components, and stack guidance.

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 UI UX design system for a React or Next.js project?▼

You can generate a complete UI/UX design system by producing cohesive color palettes, typography pairings, and component patterns with stack-specific implementation notes for frameworks like React, Next.js, or Svelte.

What is the best way to create an accessible color palette and typography pairings for a Tailwind CSS landing page?▼

Creating accessible color palettes and typography pairings for Tailwind CSS involves generating a master design system that defines style rules, anti-patterns, and responsive layout guidelines tailored to your specific product type.

Does this design system generator support mobile app frameworks like SwiftUI and Flutter?▼

Yes, the design system generator supports mobile app frameworks by providing stack-aware implementation guidance and component patterns for SwiftUI, React Native, and Flutter, including specific accessibility and performance notes.

Can I save a master design system and apply page-level overrides for iterative web development?▼

You can save a master design system and apply page-level overrides using persistence and hierarchical retrieval features, ensuring consistent style retrieval and supporting iterative development across your web and mobile interfaces.

How do I export component library guidelines and design system rules for developer handoff?▼

Exporting component library guidelines and design system rules for developer handoff is achieved via provided scripts that output stack-specific implementation notes, accessible patterns, and hierarchical overrides for persistent retrieval.

Related Skills

Explore More Design & Creative Skills→
koki3141koki3141
2

ui-ux-pro-max

Generate design systems for UI/UX projects using Python scripts.

Community
Advanced
yuyuxinliyuyuxinli
1

ui-ux-pro-max

Generate stack-specific UI/UX design systems with Master and page override outputs.

Official
Advanced
lukebazelukebaze

ui-styling

Create accessible React UI component libraries with shadcn/ui and Tailwind CSS.

Community
Advanced
hainamchunghainamchung
54

brand-guidelines-community

Provides Anthropic's official brand identity and style resources for documents and presentations.

Community
Basic