PaperclipOrg
Claude Agent Skill · by Aradotso

Ui Ux Pro Max Skill

Install Ui Ux Pro Max Skill skill for Claude Code from aradotso/trending-skills.

Install
Terminal · npx
$npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices
Works with Paperclip

How Ui Ux Pro Max Skill fits into a Paperclip company.

Ui Ux Pro Max Skill drops into any Paperclip agent that handles this kind of work. Assign it to a specialist inside a pre-configured PaperclipOrg company and the skill becomes available on every heartbeat — no prompt engineering, no tool wiring.

S
SaaS FactoryPaired

Pre-configured AI company — 18 agents, 18 skills, one-time purchase.

$27$59
Explore pack
Source file
SKILL.md514 lines
Expand
---name: ui-ux-pro-max-skilldescription: AI design intelligence skill for building professional UI/UX across multiple platforms with 161 reasoning rules, 67 styles, and automated design system generationtriggers:  - "build a landing page"  - "design a UI for"  - "create a professional interface"  - "what UI style should I use"  - "generate a design system"  - "help me with UI UX design"  - "build a mobile UI"  - "make my app look professional"--- # UI UX Pro Max Skill > Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection. UI UX Pro Max is an AI skill that injects design intelligence into coding agents — giving them 161 industry-specific reasoning rules, 67 UI styles, 57 font pairings, 161 color palettes, and pre-delivery checklists to produce professional, accessible, conversion-optimized interfaces on the first attempt. ## Installation ### Via CLI (Recommended) ```bash# Install the CLI globallynpm install -g uipro-cli # Add the skill to your projectnpx uipro-cli install # Or install globallynpx uipro-cli install --global``` ### Via Python (Direct) ```bash# Clone the repositorygit clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.gitcd ui-ux-pro-max-skill # Install dependenciespip install -r requirements.txt # Run the design system generatorpython main.py``` ### Manual SKILL.md Integration Copy the generated `SKILL.md` into your project root so agents like Claude Code, Cursor, Codex, or Windsurf automatically pick it up: ```bashcp SKILL.md /your-project/SKILL.md``` --- ## Core Concepts ### Design System Generator When you describe a product, the skill runs a multi-domain search across: | Domain | Count | Purpose ||--------|-------|---------|| Reasoning Rules | 161 | Industry-specific layout/style decisions || UI Styles | 67 | Visual language (Glassmorphism, Brutalism, etc.) || Color Palettes | 161 | Industry-matched palettes || Font Pairings | 57 | Typography combinations || Landing Page Patterns | 24 | Conversion-optimized structures | ### Output: Complete Design System Every generation produces:- **Pattern** — Page structure (sections, CTA placement)- **Style** — Visual language with keywords- **Colors** — Primary, secondary, CTA, background, text- **Typography** — Font pairing + Google Fonts URL- **Key Effects** — Animations and interactions- **Anti-Patterns** — What to avoid for this industry- **Pre-Delivery Checklist** — Accessibility and UX gates --- ## Python API Usage ### Basic Design System Generation ```pythonfrom uiuxpro import DesignSystemGenerator # Initialize the generatorgenerator = DesignSystemGenerator() # Generate a complete design system from a descriptionresult = generator.generate(    description="A landing page for a luxury beauty spa",    stack="react",           # react | nextjs | astro | vue | html    mode="light"             # light | dark | auto) print(result.pattern)        # Landing page structureprint(result.style)          # UI style recommendationprint(result.colors)         # Color palette dictprint(result.typography)     # Font pairing + import URLprint(result.effects)        # Animations and interactionsprint(result.anti_patterns)  # What to avoidprint(result.checklist)      # Pre-delivery gates``` ### Query Reasoning Rules ```pythonfrom uiuxpro import ReasoningEngine engine = ReasoningEngine() # Find rules for a product typerules = engine.search("fintech payment app")for rule in rules:    print(rule.category)       # e.g. "Fintech/Crypto"    print(rule.pattern)        # Recommended page pattern    print(rule.style_priority) # Ordered list of styles    print(rule.color_mood)     # Palette keywords    print(rule.anti_patterns)  # e.g. ["playful fonts", "neon colors"] # Get all rules for a categoryall_healthcare = engine.get_by_category("Healthcare")``` ### Style Lookup ```pythonfrom uiuxpro import StyleLibrary styles = StyleLibrary() # Get all 67 stylesall_styles = styles.list_all() # Find styles by keywordmatching = styles.search("glass transparent blur") # Get full style specglassmorphism = styles.get("Glassmorphism")print(glassmorphism.keywords)       # ["frosted glass", "transparency", ...]print(glassmorphism.best_for)       # ["SaaS dashboards", "tech products"]print(glassmorphism.css_variables)  # CSS custom propertiesprint(glassmorphism.tailwind_config) # Tailwind configuration``` ### Color Palette Selection ```pythonfrom uiuxpro import ColorEngine colors = ColorEngine() # Get palette for a product typepalette = colors.get_for_product("medical clinic")print(palette.primary)     # "#2B7A9F"print(palette.secondary)   # "#E8F4FD"print(palette.cta)         # "#0066CC"print(palette.background)  # "#FFFFFF"print(palette.text)        # "#1A2B3C"print(palette.notes)       # "Clinical trust with human warmth" # Get palette by moodcalm_palettes = colors.get_by_mood("calming")luxury_palettes = colors.get_by_mood("luxury")``` ### Typography Pairing ```pythonfrom uiuxpro import TypographyEngine typography = TypographyEngine() # Get font pairing for a moodpairing = typography.get_for_mood("elegant sophisticated")print(pairing.heading)      # "Cormorant Garamond"print(pairing.body)         # "Montserrat"print(pairing.google_url)   # Google Fonts import URLprint(pairing.css_import)   # @import statement # Get all pairings for a tech stackreact_pairings = typography.get_for_stack("react")``` --- ## CLI Commands ```bash# Generate a design system interactivelynpx uipro-cli generate # Generate for a specific product typenpx uipro-cli generate --product "saas dashboard" --stack nextjs # List all 67 UI stylesnpx uipro-cli styles list # Get style detailsnpx uipro-cli styles get glassmorphism # Search reasoning rulesnpx uipro-cli rules search "e-commerce luxury" # List all color palettesnpx uipro-cli colors list # Get font pairingsnpx uipro-cli fonts listnpx uipro-cli fonts get --mood "tech modern" # Output design system as JSONnpx uipro-cli generate --product "restaurant booking" --output json # Output as markdownnpx uipro-cli generate --product "portfolio site" --output markdown``` --- ## Real-World Examples ### Example 1: React SaaS Dashboard ```pythonfrom uiuxpro import DesignSystemGenerator gen = DesignSystemGenerator()ds = gen.generate(    description="B2B SaaS analytics dashboard for enterprise teams",    stack="react",    tech_details={"component_library": "shadcn/ui", "css": "tailwindcss"}) # Result:# Pattern:   "Data-First + Progressive Disclosure"# Style:     "Glassmorphism" or "Bento Grid"# Colors:    Primary #6366F1 (Indigo), CTA #8B5CF6 (Violet)# Fonts:     Inter / Inter (unified, high legibility)# Effects:   Subtle card shadows, smooth data transitions 200ms# Avoid:     Decorative animations, overly complex gradients``` Generated Tailwind config from `ds.tailwind_config`: ```javascript// tailwind.config.jsmodule.exports = {  theme: {    extend: {      colors: {        primary: {          DEFAULT: '#6366F1',          50: '#EEF2FF',          500: '#6366F1',          900: '#312E81',        },        cta: '#8B5CF6',        surface: 'rgba(255,255,255,0.05)',      },      backdropBlur: {        xs: '2px',      },      boxShadow: {        glass: '0 8px 32px rgba(99,102,241,0.15)',      },      fontFamily: {        sans: ['Inter', 'system-ui', 'sans-serif'],      },    },  },}``` ### Example 2: Wellness/Spa Landing Page ```pythonds = gen.generate(    description="Luxury wellness spa booking and services landing page",    stack="html",    tech_details={"css": "tailwindcss"}) # Auto-generates the full CSS variables block:print(ds.css_variables)``` Output `ds.css_variables`: ```css:root {  /* Soft UI Evolution - Serenity Spa */  --color-primary: #E8B4B8;      /* Soft Pink */  --color-secondary: #A8D5BA;    /* Sage Green */  --color-cta: #D4AF37;          /* Gold */  --color-background: #FFF5F5;   /* Warm White */  --color-text: #2D3436;         /* Charcoal */   /* Typography */  --font-heading: 'Cormorant Garamond', Georgia, serif;  --font-body: 'Montserrat', system-ui, sans-serif;   /* Effects */  --shadow-soft: 6px 6px 12px #d1c4c5, -6px -6px 12px #ffffff;  --transition-base: 200ms ease-in-out;  --border-radius-organic: 20px 60px 30px 50px;}``` ### Example 3: Fintech/Banking App ```pythonds = gen.generate(    description="Personal finance tracker with budgeting and investment tracking",    stack="react-native",) # Anti-patterns automatically flagged for finance:print(ds.anti_patterns)# [#   "Playful rounded fonts (use geometric sans)",#   "Bright neon colors (erode trust)",#   "AI purple/pink gradients",#   "Excessive animations on financial data",#   "Gamification elements on serious financial actions"# ] print(ds.checklist)# [#   "✓ WCAG AA contrast on all number displays",#   "✓ Currency formatted with locale awareness",#   "✓ Error states are clear and actionable",#   "✓ Loading states on all async operations",#   "✓ Biometric auth UI integrated",#   "✓ No emojis as primary icons — use Lucide or SF Symbols",# ]``` ### Example 4: Full Stack Integration with Next.js ```pythonfrom uiuxpro import DesignSystemGenerator, StackExporter gen = DesignSystemGenerator()ds = gen.generate(    description="AI-powered recruitment platform for enterprise HR teams",    stack="nextjs",    tech_details={        "component_library": "shadcn/ui",        "css": "tailwindcss",        "icons": "lucide-react"    }) # Export as Next.js-ready filesexporter = StackExporter(ds, stack="nextjs")exporter.write_all(output_dir="./src/design-system/") # Generates:# ./src/design-system/tokens.css        — CSS custom properties# ./src/design-system/tailwind.config.js — Tailwind configuration# ./src/design-system/typography.ts     — Font configuration# ./src/design-system/colors.ts         — Color tokens as TypeScript# ./src/design-system/README.md         — Design decisions + rationale``` --- ## Supported Tech Stacks | Stack | Key | Notes ||-------|-----|-------|| React | `react` | Component patterns + Tailwind || Next.js | `nextjs` | App Router + RSC aware || Astro | `astro` | Island architecture patterns || Vue 3 | `vue` | Composition API patterns || Nuxt.js | `nuxt` | Auto-imports aware || Nuxt UI | `nuxt-ui` | Component overrides || Svelte | `svelte` | Reactive store patterns || SwiftUI | `swiftui` | iOS/macOS native patterns || React Native | `react-native` | Mobile-first responsive || Flutter | `flutter` | Widget tree patterns || HTML + Tailwind | `html` | Standalone CSS output || shadcn/ui | `shadcn` | Theme token overrides || Jetpack Compose | `jetpack` | Android Material3 | --- ## Pre-Delivery Checklist (Universal) The skill enforces these gates on every generated design: ```ACCESSIBILITY[ ] No emojis as icons — use SVG (Heroicons / Lucide / Phosphor)[ ] cursor-pointer on all clickable elements[ ] Hover states with smooth transitions (150–300ms)[ ] Light mode: text contrast ratio 4.5:1 minimum[ ] Dark mode: text contrast ratio 4.5:1 minimum[ ] Focus states visible for keyboard navigation[ ] prefers-reduced-motion respected[ ] ARIA labels on icon-only buttons RESPONSIVE[ ] Mobile: 375px breakpoint tested[ ] Tablet: 768px breakpoint tested[ ] Desktop: 1024px breakpoint tested[ ] Wide: 1440px breakpoint tested PERFORMANCE[ ] Images use next-gen formats (WebP / AVIF)[ ] Fonts loaded with font-display: swap[ ] No layout shift on font load (reserve space)[ ] Animations use transform/opacity only (no layout props) INTERACTION[ ] Loading states on all async actions[ ] Error states are clear and actionable[ ] Empty states are designed (not blank)[ ] Success feedback on form submissions``` --- ## Common Patterns by Industry ### Tech / SaaS- **Style**: Glassmorphism, Bento Grid, AI-Native UI- **Colors**: Indigo/Violet primary, dark backgrounds for dashboards- **Avoid**: Stock photos, clip art, rainbow gradients ### E-commerce / Luxury- **Style**: Minimalism, Editorial, Claymorphism (for casual)- **Colors**: Black/Gold for luxury; bright/bold for casual- **Avoid**: Cluttered layouts, too many CTAs, Comic Sans adjacent fonts ### Healthcare / Medical- **Style**: Clean Minimalism, Soft UI- **Colors**: Blues, teals, whites — clinical but warm- **Avoid**: Red for primary actions (emergency connotation), dark mode on medical data ### Finance / Fintech- **Style**: Professional Minimalism, Data-Dense UI- **Colors**: Deep blues, greens, neutrals- **Avoid**: Playful fonts, neon colors, AI purple gradients, excessive motion ### Food & Restaurant- **Style**: Warm Minimalism, Photography-Forward- **Colors**: Warm neutrals, appetizing reds/oranges, earthy tones- **Avoid**: Cold blues as primary, low-contrast text over food photos --- ## Troubleshooting ### CLI not found after install```bash# Ensure npm global bin is in PATHexport PATH="$(npm bin -g):$PATH" # Or use npx directlynpx uipro-cli generate``` ### Python import errors```bash# Ensure you're in the project directory with venv activepython -m venv venvsource venv/bin/activate  # Windows: venv\Scripts\activatepip install -r requirements.txtpython main.py``` ### Generation returns generic output- Be specific in your description: include industry, audience, and goal- ✗ `"a website"` → ✓ `"a SaaS landing page for a B2B project management tool targeting remote engineering teams"`- Include stack context for framework-specific exports ### No matching reasoning rule found```python# The engine falls back to closest category match# Inspect the match score to verifyresult = engine.search("autonomous drone delivery fleet")print(result[0].score)      # BM25 relevance scoreprint(result[0].category)   # Matched categoryprint(result[0].fallback)   # True if approximate match``` ### Tailwind config conflicts with existing config```python# Get only the theme extension, not the full configtheme_extension = ds.tailwind_theme_extension  # dict, not full config # Merge manually into your existing tailwind.config.jsimport jsonprint(json.dumps(theme_extension, indent=2))``` --- ## Resources - **Homepage**: https://uupm.cc- **GitHub**: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill- **npm CLI**: https://www.npmjs.com/package/uipro-cli- **License**: MIT