skills.rest
gdg-seneca
gdg-senecaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

ui-ux-pro-max

Generate design systems and review UI/UX code across 9 tech stacks.

Updated Apr 3, 2026
Search Tags:#typography#accessibility#frontend#animation#ui-ux#design-system#color-palette
One-click install
npx skills add https://github.com/gdg-seneca/pirate-therapy --skill ui-ux-pro-max-gdg-seneca
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/gdg-seneca/pirate-therapy/tree/main/agent
Command: npx skills add https://github.com/gdg-seneca/pirate-therapy --skill ui-ux-pro-max-gdg-seneca

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the guesswork and inconsistency in UI/UX design by providing a centralized, searchable database of proven design rules, styles, and best practices, helping designers and developers create polished, accessible, and high-performing interfaces without extensive trial and error.

Core Features & Use Cases

  • Comprehensive Design Database: Access 50+ UI styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types tailored to different product types and industries.
  • Multi-Stack Support: Get implementation-specific best practices for 9 major tech stacks including React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, and shadcn/ui.
  • Workflow Automation: Generate complete design systems, review existing UI/UX code for issues, and get priority-based recommendations for accessibility, performance, and layout.
  • Use Case: A developer building a healthcare SaaS dashboard can use this Skill to quickly generate a compliant design system with appropriate color contrast, typography, and animation guidelines, plus a pre-delivery checklist to ensure accessibility standards are met.

Quick Start

Use the ui-ux-pro-max skill to generate a complete design system for your e-commerce landing page, including all recommended styles, color palettes, typography, and Tailwind implementation 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 design system for my web application?▼

To generate a design system, this tool provides a searchable database of 50+ UI styles, 97 color palettes, and 57 font pairings. It outputs priority-based rules and stack-specific implementation guidelines for production-ready interfaces.

What's the best way to ensure my frontend UI meets accessibility compliance?▼

Ensuring frontend accessibility compliance involves applying proven UX guidelines and running a pre-delivery quality checklist. This tool categorizes priority-based design rules and validates color contrast and layout for accessible interfaces.

Does this UI/UX guidance work with React Native and Flutter for mobile development?▼

Yes, this UI/UX guidance supports mobile development across 9 major tech stacks including React Native and Flutter. It delivers stack-specific implementation recommendations and best practices for both web and mobile applications.

Can I use Tailwind and shadcn/ui to implement the recommended color palettes and typography?▼

You can implement recommended color palettes and typography using Tailwind and shadcn/ui. The tool provides stack-specific implementation guidelines and style selections tailored to these frameworks for consistent frontend development.

How do I review existing UI/UX code for layout and performance issues?▼

Reviewing existing UI/UX code involves checking against a database of 99 UX guidelines and industry best practices. The tool identifies layout and performance issues, providing priority-based recommendations and a pre-delivery checklist.

When do I need a centralized database of UI styles and UX guidelines?▼

You need a centralized database of UI styles and UX guidelines to eliminate guesswork and inconsistency in interface design. It helps developers create polished, accessible, and high-performing interfaces without extensive trial and error.

Related Skills

Explore More Design & Creative Skills→
Kin3XcKin3Xc

frontend-design

Transform vague UI requirements into token-based frontend code for React, Vue, Svelte, and Next.js.

Community
Advanced
binan-makerbinan-maker

branding-generator

Generate complete brand identities with naming, color palettes, typography, and guidelines.

Community
Advanced
OpenCovenOpenCoven
20

dataviz-dashboard-ux

Guide chart type selection and dashboard design for accessible React visualizations.

Official
Advanced
Dzakiamriz22Dzakiamriz22
1

color-system

Define semantic color tokens in OKLCH with WCAG 2.1 AA contrast.

Community
Advanced