skills.rest
sebguevara
sebguevaraCOMMUNITY
Explore all skills by this author →
Website𝕏@jseb_ggGitHub

ui-ux-pro-max

Generate UI/UX design systems with tokens, components, typography, colors, and accessibility rules.

Updated Feb 27, 2026
Search Tags:#typography#design#accessibility#ui-ux#design-system#color-palette#component-library
One-click install
npx skills add https://github.com/sebguevara/inclusion-social --skill ui-ux-pro-max-sebguevara
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/sebguevara/inclusion-social/tree/main/.agent/skills/ui-ux-pro-max
Command: npx skills add https://github.com/sebguevara/inclusion-social --skill ui-ux-pro-max-sebguevara

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill provides AI-assisted UI/UX design guidance, generating comprehensive design systems and UX guidelines from a product brief to accelerate design-to-code workflows.

Core Features & Use Cases

  • Design System Generation: produce tokens for color, typography, spacing, and components.
  • Pattern & Component Library: include buttons, modals, nav, cards, forms, charts; supports multiple stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui).
  • Guidance & Compliance: include accessibility, responsive layouts, dark mode, performance considerations.

Quick Start

Generate a complete UI/UX design system for a SaaS dashboard, including tokens, components, typography, colors, and accessibility guidelines.

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 from a product brief?▼

To generate a UI/UX design system, input a product brief to produce master design tokens, component libraries, typography scales, color palettes, and accessibility rules for web and mobile applications.

Can I generate design tokens and components for React Native and Flutter?▼

Yes, design tokens and component libraries can be generated for React Native and Flutter, alongside React, Next.js, Vue, Svelte, SwiftUI, Tailwind, and shadcn/ui stacks.

How do I create accessible UI components with dark mode and responsive layouts?▼

Create accessible UI components by generating a design system that includes built-in accessibility compliance, responsive layout guidance, dark mode variations, and performance considerations.

What is the best way to build a SaaS dashboard design system with shadcn/ui and Tailwind?▼

The best way to build a SaaS dashboard design system is generating tokens, components, and typography specifically tailored for Tailwind and shadcn/ui stacks from your product brief.

Does the generated design system support page-level overrides for specific domains?▼

Yes, the generated design system supports optional page-level overrides and domain-specific guidance, enabling hierarchical retrieval and reproducible results across different application areas.

What components are included when generating a UI/UX pattern library?▼

A generated UI/UX pattern library includes foundational components such as buttons, modals, navigation, cards, forms, and charts, all mapped to your chosen technical stack.

Related Skills

Explore More Design & Creative Skills→
zhbonerzhboner

ui-ux-pro-max

Generate a complete UI/UX design system from a curated database of styles, colors, and typography.

Community
Intermediate
mchien15mchien15

frontend-design

Convert design references into reusable HTML/CSS/JS components and design tokens.

Community
Advanced
chris78reychris78rey

design-system-components

Generate HTML/Tailwind UI components and design tokens with CSS variables and reusable patterns.

Community
Basic
tiweentiween

wds-6-asset-generation

Generates wireframes, page designs, UI elements, icons, images, videos, and text from specifications.

Official
Advanced