Agent skill · design visual · aradotso
ui-ux-pro-max-skill
AI design intelligence skill for building professional UI/UX across multiple platforms with 161 reasoning rules, 67 styles, and automated design system generation
Why this skill is useful
Adds a complete design system generation capability with industry-specific reasoning rules, styles, and automated outputs that the AI cannot generate on its own.
What it needs
Requires npm, python installed locally. About 8k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
UI UX Pro Max Skill Skill by 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.tailwindconfig: Example 2: Wellness/Spa Landing Page Output ds.cssvariables: 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 Compositio …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/ui-ux-pro-max-skill