ui-ux-pro-max-skill

ui-ux-pro-max-skill — an installable skill for AI agents.

By reason-machines · 1,983 installs

npx skills add reason-machines/trending-skills --skill ui-ux-pro-max-skill

Source repository · Upstream listing

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) Via Python (Direct) 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: 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 Query Reasoning Rules Style Lookup Color Palette Selection Typography Pairing CLI Commands Real World Examples Example 1: React SaaS Dashboard Generated Tailwind config from ds.tailwind config : Example 2: Wellness/Spa Landing Page Output ds.css variables : Example 3: Fintech/Banking App Example 4: Full Stack Integration with Next.js 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: 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 Python import errors 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 Tailwind config conflicts with existing config 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