{"id":"f1d78330-bd7d-4027-8c6f-f85138ce5de7","entityType":"agent","slug":"clawhub-xobi667-ui-ux-pro-max--pro-max-2","name":"UI/UX Pro Max","canonicalUrl":"https://www.xpersona.co/agent/clawhub-xobi667-ui-ux-pro-max--pro-max-2","canonicalPath":"/agent/clawhub-xobi667-ui-ux-pro-max--pro-max-2","generatedAt":"2026-11-13T06:00:34.027Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-11-11T17:16:57.110Z","emptyReason":null},"description":"UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.","descriptionLabel":"Source description","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 41.9K downloads reported by the source. Last updated 11/11/2026.","installCommand":"clawhub skill install s17615sgtjb156z98ce0c8v5t5885kb0:ui-ux-pro-max","sourceUrl":"https://clawhub.ai/xobi667/ui-ux-pro-max","homepage":"https://clawhub.ai/xobi667/skills/ui-ux-pro-max","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/xobi667/ui-ux-pro-max","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/xobi667/skills/ui-ux-pro-max","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":92,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"UI/UX Pro Max technical dossier on Xpersona with agent coverage, OPENCLEW support, and live trust metadata."},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-11-11T17:16:57.110Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-11-11T17:16:57.110Z","emptyReason":null},"stars":null,"forks":null,"downloads":41934,"likes":null,"task":null,"library":null,"packageName":null,"latestVersion":"0.1.0","tractionLabel":"41.9K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-11-11T17:16:57.089Z","emptyReason":null},"lastUpdatedAt":"2026-11-11T17:16:57.110Z","lastCrawledAt":"2026-11-11T17:16:57.089Z","lastIndexedAt":null,"nextCrawlAt":"2026-11-12T17:16:57.089Z","lastVerifiedAt":null,"highlights":[{"version":"0.1.0","createdAt":"2026-01-28T16:02:39.343Z","changelog":"Initial Clawdbot packaging from upstream ui-ux-pro-max-skill","fileCount":57,"zipByteSize":337010}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s17615sgtjb156z98ce0c8v5t5885kb0:ui-ux-pro-max","setupComplexity":"low","setupSteps":["Install using `clawhub skill install s17615sgtjb156z98ce0c8v5t5885kb0:ui-ux-pro-max` in an isolated environment before connecting it to live workloads.","No published capability contract is available yet, so validate auth and request/response behavior manually.","Review the upstream CLAWHUB listing at https://clawhub.ai/xobi667/ui-ux-pro-max before using production credentials."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-xobi667-ui-ux-pro-max--pro-max-2/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-xobi667-ui-ux-pro-max--pro-max-2/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-xobi667-ui-ux-pro-max--pro-max-2/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-xobi667-ui-ux-pro-max--pro-max-2/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-xobi667-ui-ux-pro-max--pro-max-2/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-xobi667-ui-ux-pro-max--pro-max-2/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-11-13T06:00:34.026Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-xobi667-ui-ux-pro-max--pro-max-2/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-xobi667-ui-ux-pro-max--pro-max-2/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-xobi667-ui-ux-pro-max--pro-max-2/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-xobi667-ui-ux-pro-max--pro-max-2/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-11-11T17:16:57.110Z","emptyReason":null},"readme":"Skill: UI/UX Pro Max\n\nOwner: xobi667\n\nSummary: UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.\n\nTags: latest:0.1.0\n\nVersion history:\n\nv0.1.0 | 2026-01-28T16:02:39.343Z | user\n\nInitial Clawdbot packaging from upstream ui-ux-pro-max-skill\n\nArchive index:\n\nArchive v0.1.0: 57 files, 337010 bytes\n\nFiles: assets/data/charts.csv (7654b), assets/data/colors.csv (9713b), assets/data/icons.csv (13384b), assets/data/landing.csv (14390b), assets/data/products.csv (29790b), assets/data/react-performance.csv (14822b), assets/data/stacks/astro.csv (11868b), assets/data/stacks/flutter.csv (10469b), assets/data/stacks/html-tailwind.csv (11361b), assets/data/stacks/jetpack-compose.csv (8195b), assets/data/stacks/nextjs.csv (12546b), assets/data/stacks/nuxt-ui.csv (14010b), assets/data/stacks/nuxtjs.csv (16539b), assets/data/stacks/react-native.csv (10035b), assets/data/stacks/react.csv (13016b), assets/data/stacks/shadcn.csv (15921b), assets/data/stacks/svelte.csv (11063b), assets/data/stacks/swiftui.csv (10872b), assets/data/stacks/vue.csv (11056b), assets/data/styles.csv (96553b), assets/data/typography.csv (31877b), assets/data/ui-reasoning.csv (31071b), assets/data/ux-guidelines.csv (18766b), assets/data/web-interface.csv (7472b), data/charts.csv (7654b), data/colors.csv (9713b), data/icons.csv (13384b), data/landing.csv (14390b), data/products.csv (29790b), data/react-performance.csv (14822b), data/stacks/astro.csv (11868b), data/stacks/flutter.csv (10469b), data/stacks/html-tailwind.csv (11361b), data/stacks/jetpack-compose.csv (8195b), data/stacks/nextjs.csv (12546b), data/stacks/nuxt-ui.csv (14010b), data/stacks/nuxtjs.csv (16539b), data/stacks/react-native.csv (10035b), data/stacks/react.csv (13016b), data/stacks/shadcn.csv (15921b), data/stacks/svelte.csv (11063b), data/stacks/swiftui.csv (10872b), data/stacks/vue.csv (11056b), data/styles.csv (96553b), data/typography.csv (31877b), data/ui-reasoning.csv (31071b), data/ux-guidelines.csv (18766b), data/web-interface.csv (7472b), references/upstream-README.md (23615b), references/upstream-skill-content.md (10051b), scripts/__init__.py (0b), scripts/core.py (10227b), scripts/design_system.py (43778b), scripts/search.py (5383b), skill-card.md (2232b), SKILL.md (2635b), _meta.json (132b)\n\nFile v0.1.0:SKILL.md\n\n---\nname: ui-ux-pro-max\ndescription: UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.\n---\n\nFollow these steps to deliver high-quality UI/UX output with minimal back-and-forth.\n\n## 1) Triage\nAsk only what you must to avoid wrong work:\n- Target platform: web / iOS / Android / desktop\n- Stack (if code changes): React/Next/Vue/Svelte, CSS/Tailwind, component library\n- Goal and constraints: conversion, speed, brand vibe, accessibility level (WCAG AA?)\n- What you have: screenshot, Figma, repo, URL, user journey\n\nIf the user says \"全部都要\" (design + UX + code + design system), treat it as four deliverables and ship in that order.\n\n## 2) Produce Deliverables (pick what fits)\nAlways be concrete: name components, states, spacing, typography, and interactions.\n\n- **UI concept + layout**: Provide a clear visual direction, grid, typography, color system, key screens/sections.\n- **UX flow**: Map the user journey, critical paths, error/empty/loading states, edge cases.\n- **Design system**: Tokens (color/typography/spacing/radius/shadow), component rules, accessibility notes.\n- **Implementation plan**: Exact file-level edits, component breakdown, and acceptance criteria.\n\n## 3) Use Bundled Assets\nThis skill bundles data you can cite for inspiration/standards.\n\n- **Design intelligence data**: Read from `skills/ui-ux-pro-max/assets/data/` when you need palettes, patterns, or UI/UX heuristics.\n- **Upstream reference**: If you need more phrasing/examples, consult `skills/ui-ux-pro-max/references/upstream-skill-content.md`.\n\n## 4) Optional Script (Design System Generator)\nIf you need to quickly generate tokens and page-specific overrides, use the bundled script:\n\n```bash\npython3 skills/ui-ux-pro-max/scripts/design_system.py --help\n```\n\nPrefer running it when the user wants a structured token output (ASCII-friendly).\n\n## Output Standards\n- Default to ASCII-only tokens/variables unless the project already uses Unicode.\n- Include: spacing scale, type scale, 2-3 font pair options, color tokens, component states.\n- Always cover: empty/loading/error, keyboard navigation, focus states, contrast.\n\nFile v0.1.0:_meta.json\n\n{\n \"ownerId\": \"kn7dzk42mb9ceh8sm1zdx51sws803c9b\",\n \"slug\": \"ui-ux-pro-max\",\n \"version\": \"0.1.0\",\n \"publishedAt\": 1769616159343\n}\n\nFile v0.1.0:references/upstream-README.md\n\n# UI UX Pro Max\n \n
\n \n \n \n \n \n
\n\n
\n \n \n \n \n
\n\nAn AI skill that provides design intelligence for building professional UI/UX across multiple platforms and frameworks.\n\n
\n \n
\n\n
\n If you find this useful, consider supporting the project:
\n \n
\n\n## What's New in v2.0\n\n### Intelligent Design System Generation\n\nThe flagship feature of v2.0 is the **Design System Generator** - an AI-powered reasoning engine that analyzes your project requirements and generates a complete, tailored design system in seconds.\n\n```\n+----------------------------------------------------------------------------------------+\n| TARGET: Serenity Spa - RECOMMENDED DESIGN SYSTEM |\n+----------------------------------------------------------------------------------------+\n| |\n| PATTERN: Hero-Centric + Social Proof |\n| Conversion: Emotion-driven with trust elements |\n| CTA: Above fold, repeated after testimonials |\n| Sections: |\n| 1. Hero |\n| 2. Services |\n| 3. Testimonials |\n| 4. Booking |\n| 5. Contact |\n| |\n| STYLE: Soft UI Evolution |\n| Keywords: Soft shadows, subtle depth, calming, premium feel, organic shapes |\n| Best For: Wellness, beauty, lifestyle brands, premium services |\n| Performance: Excellent | Accessibility: WCAG AA |\n| |\n| COLORS: |\n| Primary: #E8B4B8 (Soft Pink) |\n| Secondary: #A8D5BA (Sage Green) |\n| CTA: #D4AF37 (Gold) |\n| Background: #FFF5F5 (Warm White) |\n| Text: #2D3436 (Charcoal) |\n| Notes: Calming palette with gold accents for luxury feel |\n| |\n| TYPOGRAPHY: Cormorant Garamond / Montserrat |\n| Mood: Elegant, calming, sophisticated |\n| Best For: Luxury brands, wellness, beauty, editorial |\n| Google Fonts: https://fonts.google.com/share?selection.family=... |\n| |\n| KEY EFFECTS: |\n| Soft shadows + Smooth transitions (200-300ms) + Gentle hover states |\n| |\n| AVOID (Anti-patterns): |\n| Bright neon colors + Harsh animations + Dark mode + AI purple/pink gradients |\n| |\n| PRE-DELIVERY CHECKLIST: |\n| [ ] No emojis as icons (use SVG: Heroicons/Lucide) |\n| [ ] cursor-pointer on all clickable elements |\n| [ ] Hover states with smooth transitions (150-300ms) |\n| [ ] Light mode: text contrast 4.5:1 minimum |\n| [ ] Focus states visible for keyboard nav |\n| [ ] prefers-reduced-motion respected |\n| [ ] Responsive: 375px, 768px, 1024px, 1440px |\n| |\n+----------------------------------------------------------------------------------------+\n```\n\n### How Design System Generation Works\n\n```\n┌─────────────────────────────────────────────────────────────────┐\n│ 1. USER REQUEST │\n│ \"Build a landing page for my beauty spa\" │\n└─────────────────────────────────────────────────────────────────┘\n │\n ▼\n┌─────────────────────────────────────────────────────────────────┐\n│ 2. MULTI-DOMAIN SEARCH (5 parallel searches) │\n│ • Product type matching (100 categories) │\n│ • Style recommendations (67 styles) │\n│ • Color palette selection (96 palettes) │\n│ • Landing page patterns (24 patterns) │\n│ • Typography pairing (57 font combinations) │\n└─────────────────────────────────────────────────────────────────┘\n │\n ▼\n┌─────────────────────────────────────────────────────────────────┐\n│ 3. REASONING ENGINE │\n│ • Match product → UI category rules │\n│ • Apply style priorities (BM25 ranking) │\n│ • Filter anti-patterns for industry │\n│ • Process decision rules (JSON conditions) │\n└─────────────────────────────────────────────────────────────────┘\n │\n ▼\n┌─────────────────────────────────────────────────────────────────┐\n│ 4. COMPLETE DESIGN SYSTEM OUTPUT │\n│ Pattern + Style + Colors + Typography + Effects │\n│ + Anti-patterns to avoid + Pre-delivery checklist │\n└─────────────────────────────────────────────────────────────────┘\n```\n\n### 100 Industry-Specific Reasoning Rules\n\nThe reasoning engine includes specialized rules for:\n\n| Category | Examples |\n|----------|----------|\n| **Tech & SaaS** | SaaS, Micro SaaS, B2B Enterprise, Developer Tools, AI/Chatbot Platform |\n| **Finance** | Fintech, Banking, Crypto, Insurance, Trading Dashboard |\n| **Healthcare** | Medical Clinic, Pharmacy, Dental, Veterinary, Mental Health |\n| **E-commerce** | General, Luxury, Marketplace, Subscription Box |\n| **Services** | Beauty/Spa, Restaurant, Hotel, Legal, Consulting |\n| **Creative** | Portfolio, Agency, Photography, Gaming, Music Streaming |\n| **Emerging Tech** | Web3/NFT, Spatial Computing, Quantum Computing, Autonomous Systems |\n\nEach rule includes:\n- **Recommended Pattern** - Landing page structure\n- **Style Priority** - Best matching UI styles\n- **Color Mood** - Industry-appropriate palettes\n- **Typography Mood** - Font personality matching\n- **Key Effects** - Animations and interactions\n- **Anti-Patterns** - What NOT to do (e.g., \"AI purple/pink gradients\" for banking)\n\n## Features\n\n- **67 UI Styles** - Glassmorphism, Claymorphism, Minimalism, Brutalism, Neumorphism, Bento Grid, Dark Mode, AI-Native UI, and more\n- **96 Color Palettes** - Industry-specific palettes for SaaS, E-commerce, Healthcare, Fintech, Beauty, etc.\n- **57 Font Pairings** - Curated typography combinations with Google Fonts imports\n- **25 Chart Types** - Recommendations for dashboards and analytics\n- **13 Tech Stacks** - React, Next.js, Astro, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, HTML+Tailwind, shadcn/ui, Jetpack Compose\n- **99 UX Guidelines** - Best practices, anti-patterns, and accessibility rules\n- **100 Reasoning Rules** - Industry-specific design system generation (NEW in v2.0)\n\n### Available Styles (67)\n\n\nGeneral Styles (49)\n\n| # | Style | Best For |\n|---|-------|----------|\n| 1 | Minimalism & Swiss Style | Enterprise apps, dashboards, documentation |\n| 2 | Neumorphism | Health/wellness apps, meditation platforms |\n| 3 | Glassmorphism | Modern SaaS, financial dashboards |\n| 4 | Brutalism | Design portfolios, artistic projects |\n| 5 | 3D & Hyperrealism | Gaming, product showcase, immersive |\n| 6 | Vibrant & Block-based | Startups, creative agencies, gaming |\n| 7 | Dark Mode (OLED) | Night-mode apps, coding platforms |\n| 8 | Accessible & Ethical | Government, healthcare, education |\n| 9 | Claymorphism | Educational apps, children's apps, SaaS |\n| 10 | Aurora UI | Modern SaaS, creative agencies |\n| 11 | Retro-Futurism | Gaming, entertainment, music platforms |\n| 12 | Flat Design | Web apps, mobile apps, startup MVPs |\n| 13 | Skeuomorphism | Legacy apps, gaming, premium products |\n| 14 | Liquid Glass | Premium SaaS, high-end e-commerce |\n| 15 | Motion-Driven | Portfolio sites, storytelling platforms |\n| 16 | Micro-interactions | Mobile apps, touchscreen UIs |\n| 17 | Inclusive Design | Public services, education, healthcare |\n| 18 | Zero Interface | Voice assistants, AI platforms |\n| 19 | Soft UI Evolution | Modern enterprise apps, SaaS |\n| 20 | Neubrutalism | Gen Z brands, startups, Figma-style |\n| 21 | Bento Box Grid | Dashboards, product pages, portfolios |\n| 22 | Y2K Aesthetic | Fashion brands, music, Gen Z |\n| 23 | Cyberpunk UI | Gaming, tech products, crypto apps |\n| 24 | Organic Biophilic | Wellness apps, sustainability brands |\n| 25 | AI-Native UI | AI products, chatbots, copilots |\n| 26 | Memphis Design | Creative agencies, music, youth brands |\n| 27 | Vaporwave | Music platforms, gaming, portfolios |\n| 28 | Dimensional Layering | Dashboards, card layouts, modals |\n| 29 | Exaggerated Minimalism | Fashion, architecture, portfolios |\n| 30 | Kinetic Typography | Hero sections, marketing sites |\n| 31 | Parallax Storytelling | Brand storytelling, product launches |\n| 32 | Swiss Modernism 2.0 | Corporate sites, architecture, editorial |\n| 33 | HUD / Sci-Fi FUI | Sci-fi games, space tech, cybersecurity |\n| 34 | Pixel Art | Indie games, retro tools, creative |\n| 35 | Bento Grids | Product features, dashboards, personal |\n| 36 | Spatial UI (VisionOS) | Spatial computing apps, VR/AR |\n| 37 | E-Ink / Paper | Reading apps, digital newspapers |\n| 38 | Gen Z Chaos / Maximalism | Gen Z lifestyle, music artists |\n| 39 | Biomimetic / Organic 2.0 | Sustainability tech, biotech, health |\n| 40 | Anti-Polish / Raw Aesthetic | Creative portfolios, artist sites |\n| 41 | Tactile Digital / Deformable UI | Modern mobile apps, playful brands |\n| 42 | Nature Distilled | Wellness brands, sustainable products |\n| 43 | Interactive Cursor Design | Creative portfolios, interactive |\n| 44 | Voice-First Multimodal | Voice assistants, accessibility apps |\n| 45 | 3D Product Preview | E-commerce, furniture, fashion |\n| 46 | Gradient Mesh / Aurora Evolved | Hero sections, backgrounds, creative |\n| 47 | Editorial Grid / Magazine | News sites, blogs, magazines |\n| 48 | Chromatic Aberration / RGB Split | Music platforms, gaming, tech |\n| 49 | Vintage Analog / Retro Film | Photography, music/vinyl brands |\n\n\n\n\nLanding Page Styles (8)\n\n| # | Style | Best For |\n|---|-------|----------|\n| 1 | Hero-Centric Design | Products with strong visual identity |\n| 2 | Conversion-Optimized | Lead generation, sales pages |\n| 3 | Feature-Rich Showcase | SaaS, complex products |\n| 4 | Minimal & Direct | Simple products, apps |\n| 5 | Social Proof-Focused | Services, B2C products |\n| 6 | Interactive Product Demo | Software, tools |\n| 7 | Trust & Authority | B2B, enterprise, consulting |\n| 8 | Storytelling-Driven | Brands, agencies, nonprofits |\n\n\n\n\nBI/Analytics Dashboard Styles (10)\n\n| # | Style | Best For |\n|---|-------|----------|\n| 1 | Data-Dense Dashboard | Complex data analysis |\n| 2 | Heat Map & Heatmap Style | Geographic/behavior data |\n| 3 | Executive Dashboard | C-suite summaries |\n| 4 | Real-Time Monitoring | Operations, DevOps |\n| 5 | Drill-Down Analytics | Detailed exploration |\n| 6 | Comparative Analysis Dashboard | Side-by-side comparisons |\n| 7 | Predictive Analytics | Forecasting, ML insights |\n| 8 | User Behavior Analytics | UX research, product analytics |\n| 9 | Financial Dashboard | Finance, accounting |\n| 10 | Sales Intelligence Dashboard | Sales teams, CRM |\n\n\n\n## Installation\n\n### Using Claude Marketplace (Claude Code)\n\nInstall directly in Claude Code with two commands:\n\n```\n/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill\n/plugin install ui-ux-pro-max@ui-ux-pro-max-skill\n```\n\n### Using CLI (Recommended)\n\n```bash\n# Install CLI globally\nnpm install -g uipro-cli\n\n# Go to your project\ncd /path/to/your/project\n\n# Install for your AI assistant\nuipro init --ai claude # Claude Code\nuipro init --ai cursor # Cursor\nuipro init --ai windsurf # Windsurf\nuipro init --ai antigravity # Antigravity\nuipro init --ai copilot # GitHub Copilot\nuipro init --ai kiro # Kiro\nuipro init --ai codex # Codex CLI\nuipro init --ai qoder # Qoder\nuipro init --ai roocode # Roo Code\nuipro init --ai gemini # Gemini CLI\nuipro init --ai trae # Trae\nuipro init --ai opencode # OpenCode\nuipro init --ai continue # Continue\nuipro init --ai codebuddy # CodeBuddy\nuipro init --ai all # All assistants\n```\n\n### Other CLI Commands\n\n```bash\nuipro versions # List available versions\nuipro update # Update to latest version\nuipro init --offline # Skip GitHub download, use bundled assets\n```\n\n## Prerequisites\n\nPython 3.x is required for the search script.\n\n```bash\n# Check if Python is installed\npython3 --version\n\n# macOS\nbrew install python3\n\n# Ubuntu/Debian\nsudo apt update && sudo apt install python3\n\n# Windows\nwinget install Python.Python.3.12\n```\n\n## Usage\n\n### Skill Mode (Auto-activate)\n\n**Supported:** Claude Code, Windsurf, Antigravity, Codex CLI, Continue, Gemini CLI, OpenCode, Qoder, CodeBuddy\n\nThe skill activates automatically when you request UI/UX work. Just chat naturally:\n\n```\nBuild a landing page for my SaaS product\n```\n\n> **Trae**: Switch to **SOLO** mode first. The skill will activate for UI/UX requests.\n\n### Workflow Mode (Slash Command)\n\n**Supported:** Cursor, Kiro, GitHub Copilot, Roo Code\n\nUse the slash command to invoke the skill:\n\n```\n/ui-ux-pro-max Build a landing page for my SaaS product\n```\n\n### Example Prompts\n\n```\nBuild a landing page for my SaaS product\n\nCreate a dashboard for healthcare analytics\n\nDesign a portfolio website with dark mode\n\nMake a mobile app UI for e-commerce\n\nBuild a fintech banking app with dark theme\n```\n\n### How It Works\n\n1. **You ask** - Request any UI/UX task (build, design, create, implement, review, fix, improve)\n2. **Design System Generated** - The AI automatically generates a complete design system using the reasoning engine\n3. **Smart recommendations** - Based on your product type and requirements, it finds the best matching styles, colors, and typography\n4. **Code generation** - Implements the UI with proper colors, fonts, spacing, and best practices\n5. **Pre-delivery checks** - Validates against common UI/UX anti-patterns\n\n### Supported Stacks\n\nThe skill provides stack-specific guidelines for:\n\n| Category | Stacks |\n|----------|--------|\n| **Web (HTML)** | HTML + Tailwind (default) |\n| **React Ecosystem** | React, Next.js, shadcn/ui |\n| **Vue Ecosystem** | Vue, Nuxt.js, Nuxt UI |\n| **Other Web** | Svelte, Astro |\n| **iOS** | SwiftUI |\n| **Android** | Jetpack Compose |\n| **Cross-Platform** | React Native, Flutter |\n\nJust mention your preferred stack in the prompt, or let it default to HTML + Tailwind.\n\n## Design System Command (Advanced)\n\nFor direct access to the design system generator:\n\n> Note: If you installed via Continue, replace `.claude/skills/` with `.continue/skills/` in the commands below.\n\n```bash\n# Generate design system with ASCII output\npython3 .claude/skills/ui-ux-pro-max/scripts/search.py \"beauty spa wellness\" --design-system -p \"Serenity Spa\"\n\n# Generate with Markdown output\npython3 .claude/skills/ui-ux-pro-max/scripts/search.py \"fintech banking\" --design-system -f markdown\n\n# Domain-specific search\npython3 .claude/skills/ui-ux-pro-max/scripts/search.py \"glassmorphism\" --domain style\npython3 .claude/skills/ui-ux-pro-max/scripts/search.py \"elegant serif\" --domain typography\npython3 .claude/skills/ui-ux-pro-max/scripts/search.py \"dashboard\" --domain chart\n\n# Stack-specific guidelines\npython3 .claude/skills/ui-ux-pro-max/scripts/search.py \"form validation\" --stack react\npython3 .claude/skills/ui-ux-pro-max/scripts/search.py \"responsive layout\" --stack html-tailwind\n```\n\n### Persist Design System (Master + Overrides Pattern)\n\nSave your design system to files for **hierarchical retrieval across sessions**:\n\n```bash\n# Generate and persist to design-system/MASTER.md\npython3 .claude/skills/ui-ux-pro-max/scripts/search.py \"SaaS dashboard\" --design-system --persist -p \"MyApp\"\n\n# Also create a page-specific override file\npython3 .claude/skills/ui-ux-pro-max/scripts/search.py \"SaaS dashboard\" --design-system --persist -p \"MyApp\" --page \"dashboard\"\n```\n\nThis creates a `design-system/` folder structure:\n\n```\ndesign-system/\n├── MASTER.md # Global Source of Truth (colors, typography, spacing, components)\n└── pages/\n └── dashboard.md # Page-specific overrides (only deviations from Master)\n```\n\n**How hierarchical retrieval works:**\n1. When building a specific page (e.g., \"Checkout\"), first check `design-system/pages/checkout.md`\n2. If the page file exists, its rules **override** the Master file\n3. If not, use `design-system/MASTER.md` exclusively\n\n**Context-aware retrieval prompt:**\n```\nI am building the [Page Name] page. Please read design-system/MASTER.md.\nAlso check if design-system/pages/[page-name].md exists.\nIf the page file exists, prioritize its rules.\nIf not, use the Master rules exclusively.\nNow, generate the code...\n```\n\n## Architecture & Contributing\n\n### For Users\n\nThe codebase has been restructured to use a **template-based generation system**. All platform-specific files (`.cursor/`, `.windsurf/`, `.kiro/`, etc.) are now generated dynamically by the CLI.\n\n**Always use the CLI to install:**\n\n```bash\nnpm install -g uipro-cli\nuipro init --ai \n```\n\nThis ensures you get the latest templates and correct file structure for your AI assistant.\n\n### For Contributors\n\nIf you want to contribute to this project:\n\n```bash\n# 1. Clone the repository\ngit clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git\ncd ui-ux-pro-max-skill\n\n# 2. Understand the structure\nsrc/ui-ux-pro-max/ # Source of truth (data, scripts, templates)\ncli/ # CLI installer (generates files from templates)\n.claude/ # Local dev/test for Claude Code skill\n\n# 3. Make changes in src/ui-ux-pro-max/\n# - data/*.csv → Database files\n# - scripts/*.py → Search engine & design system\n# - templates/ → Platform-specific templates\n\n# 4. Sync to CLI and test locally\ncp -r src/ui-ux-pro-max/data/* cli/assets/data/\ncp -r src/ui-ux-pro-max/scripts/* cli/assets/scripts/\ncp -r src/ui-ux-pro-max/templates/* cli/assets/templates/\n\n# 5. Build and test CLI\ncd cli && bun run build\nnode dist/index.js init --ai claude --offline # Test in a temp folder\n\n# 6. Create PR (never push directly to main)\ngit checkout -b feat/your-feature\ngit commit -m \"feat: description\"\ngit push -u origin feat/your-feature\ngh pr create\n```\n\nSee [CLAUDE.md](CLAUDE.md) for detailed development guidelines.\n\n## Star History\n\n[](https://star-history.com/#nextlevelbuilder/ui-ux-pro-max-skill&Date)\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE).\n\nFile v0.1.0:references/upstream-skill-content.md\n\n# {{TITLE}}\n\n{{DESCRIPTION}}\n{{QUICK_REFERENCE}}\n## Prerequisites\n\nCheck if Python is installed:\n\n```bash\npython3 --version || python --version\n```\n\nIf Python is not installed, install it based on user's OS:\n\n**macOS:**\n```bash\nbrew install python3\n```\n\n**Ubuntu/Debian:**\n```bash\nsudo apt update && sudo apt install python3\n```\n\n**Windows:**\n```powershell\nwinget install Python.Python.3.12\n```\n\n---\n\n## How to Use This {{SKILL_OR_WORKFLOW}}\n\nWhen user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:\n\n### Step 1: Analyze User Requirements\n\nExtract key information from user request:\n- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.\n- **Style keywords**: minimal, playful, professional, elegant, dark mode, etc.\n- **Industry**: healthcare, fintech, gaming, education, etc.\n- **Stack**: React, Vue, Next.js, or default to `html-tailwind`\n\n### Step 2: Generate Design System (REQUIRED)\n\n**Always start with `--design-system`** to get comprehensive recommendations with reasoning:\n\n```bash\npython3 {{SCRIPT_PATH}} \"\" --design-system [-p \"Project Name\"]\n```\n\nThis command:\n1. Searches 5 domains in parallel (product, style, color, landing, typography)\n2. Applies reasoning rules from `ui-reasoning.csv` to select best matches\n3. Returns complete design system: pattern, style, colors, typography, effects\n4. Includes anti-patterns to avoid\n\n**Example:**\n```bash\npython3 {{SCRIPT_PATH}} \"beauty spa wellness service\" --design-system -p \"Serenity Spa\"\n```\n\n### Step 2b: Persist Design System (Master + Overrides Pattern)\n\nTo save the design system for hierarchical retrieval across sessions, add `--persist`:\n\n```bash\npython3 {{SCRIPT_PATH}} \"\" --design-system --persist -p \"Project Name\"\n```\n\nThis creates:\n- `design-system/MASTER.md` — Global Source of Truth with all design rules\n- `design-system/pages/` — Folder for page-specific overrides\n\n**With page-specific override:**\n```bash\npython3 {{SCRIPT_PATH}} \"\" --design-system --persist -p \"Project Name\" --page \"dashboard\"\n```\n\nThis also creates:\n- `design-system/pages/dashboard.md` — Page-specific deviations from Master\n\n**How hierarchical retrieval works:**\n1. When building a specific page (e.g., \"Checkout\"), first check `design-system/pages/checkout.md`\n2. If the page file exists, its rules **override** the Master file\n3. If not, use `design-system/MASTER.md` exclusively\n\n### Step 3: Supplement with Detailed Searches (as needed)\n\nAfter getting the design system, use domain searches to get additional details:\n\n```bash\npython3 {{SCRIPT_PATH}} \"\" --domain [-n ]\n```\n\n**When to use detailed searches:**\n\n| Need | Domain | Example |\n|------|--------|---------|\n| More style options | `style` | `--domain style \"glassmorphism dark\"` |\n| Chart recommendations | `chart` | `--domain chart \"real-time dashboard\"` |\n| UX best practices | `ux` | `--domain ux \"animation accessibility\"` |\n| Alternative fonts | `typography` | `--domain typography \"elegant luxury\"` |\n| Landing structure | `landing` | `--domain landing \"hero social-proof\"` |\n\n### Step 4: Stack Guidelines (Default: html-tailwind)\n\nGet implementation-specific best practices. If user doesn't specify a stack, **default to `html-tailwind`**.\n\n```bash\npython3 {{SCRIPT_PATH}} \"\" --stack html-tailwind\n```\n\nAvailable stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`, `jetpack-compose`\n\n---\n\n## Search Reference\n\n### Available Domains\n\n| Domain | Use For | Example Keywords |\n|--------|---------|------------------|\n| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |\n| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |\n| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |\n| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |\n| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |\n| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |\n| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |\n| `react` | React/Next.js performance | waterfall, bundle, suspense, memo, rerender, cache |\n| `web` | Web interface guidelines | aria, focus, keyboard, semantic, virtualize |\n| `prompt` | AI prompts, CSS keywords | (style name) |\n\n### Available Stacks\n\n| Stack | Focus |\n|-------|-------|\n| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) |\n| `react` | State, hooks, performance, patterns |\n| `nextjs` | SSR, routing, images, API routes |\n| `vue` | Composition API, Pinia, Vue Router |\n| `svelte` | Runes, stores, SvelteKit |\n| `swiftui` | Views, State, Navigation, Animation |\n| `react-native` | Components, Navigation, Lists |\n| `flutter` | Widgets, State, Layout, Theming |\n| `shadcn` | shadcn/ui components, theming, forms, patterns |\n| `jetpack-compose` | Composables, Modifiers, State Hoisting, Recomposition |\n\n---\n\n## Example Workflow\n\n**User request:** \"Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp\"\n\n### Step 1: Analyze Requirements\n- Product type: Beauty/Spa service\n- Style keywords: elegant, professional, soft\n- Industry: Beauty/Wellness\n- Stack: html-tailwind (default)\n\n### Step 2: Generate Design System (REQUIRED)\n\n```bash\npython3 {{SCRIPT_PATH}} \"beauty spa wellness service elegant\" --design-system -p \"Serenity Spa\"\n```\n\n**Output:** Complete design system with pattern, style, colors, typography, effects, and anti-patterns.\n\n### Step 3: Supplement with Detailed Searches (as needed)\n\n```bash\n# Get UX guidelines for animation and accessibility\npython3 {{SCRIPT_PATH}} \"animation accessibility\" --domain ux\n\n# Get alternative typography options if needed\npython3 {{SCRIPT_PATH}} \"elegant luxury serif\" --domain typography\n```\n\n### Step 4: Stack Guidelines\n\n```bash\npython3 {{SCRIPT_PATH}} \"layout responsive form\" --stack html-tailwind\n```\n\n**Then:** Synthesize design system + detailed searches and implement the design.\n\n---\n\n## Output Formats\n\nThe `--design-system` flag supports two output formats:\n\n```bash\n# ASCII box (default) - best for terminal display\npython3 {{SCRIPT_PATH}} \"fintech crypto\" --design-system\n\n# Markdown - best for documentation\npython3 {{SCRIPT_PATH}} \"fintech crypto\" --design-system -f markdown\n```\n\n---\n\n## Tips for Better Results\n\n1. **Be specific with keywords** - \"healthcare SaaS dashboard\" > \"app\"\n2. **Search multiple times** - Different keywords reveal different insights\n3. **Combine domains** - Style + Typography + Color = Complete design system\n4. **Always check UX** - Search \"animation\", \"z-index\", \"accessibility\" for common issues\n5. **Use stack flag** - Get implementation-specific best practices\n6. **Iterate** - If first search doesn't match, try different keywords\n\n---\n\n## Common Rules for Professional UI\n\nThese are frequently overlooked issues that make UI look unprofessional:\n\n### Icons & Visual Elements\n\n| Rule | Do | Don't |\n|------|----|----- |\n| **No emoji icons** | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons |\n| **Stable hover states** | Use color/opacity transitions on hover | Use scale transforms that shift layout |\n| **Correct brand logos** | Research official SVG from Simple Icons | Guess or use incorrect logo paths |\n| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly |\n\n### Interaction & Cursor\n\n| Rule | Do | Don't |\n|------|----|----- |\n| **Cursor pointer** | Add `cursor-pointer` to all clickable/hoverable cards | Leave default cursor on interactive elements |\n| **Hover feedback** | Provide visual feedback (color, shadow, border) | No indication element is interactive |\n| **Smooth transitions** | Use `transition-colors duration-200` | Instant state changes or too slow (>500ms) |\n\n### Light/Dark Mode Contrast\n\n| Rule | Do | Don't |\n|------|----|----- |\n| **Glass card light mode** | Use `bg-white/80` or higher opacity | Use `bg-white/10` (too transparent) |\n| **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text |\n| **Muted text light** | Use `#475569` (slate-600) minimum | Use gray-400 or lighter |\n| **Border visibility** | Use `border-gray-200` in light mode | Use `border-white/10` (invisible) |\n\n### Layout & Spacing\n\n| Rule | Do | Don't |\n|------|----|----- |\n| **Floating navbar** | Add `top-4 left-4 right-4` spacing | Stick navbar to `top-0 left-0 right-0` |\n| **Content padding** | Account for fixed navbar height | Let content hide behind fixed elements |\n| **Consistent max-width** | Use same `max-w-6xl` or `max-w-7xl` | Mix different container widths |\n\n---\n\n## Pre-Delivery Checklist\n\nBefore delivering UI code, verify these items:\n\n### Visual Quality\n- [ ] No emojis used as icons (use SVG instead)\n- [ ] All icons from consistent icon set (Heroicons/Lucide)\n- [ ] Brand logos are correct (verified from Simple Icons)\n- [ ] Hover states don't cause layout shift\n- [ ] Use theme colors directly (bg-primary) not var() wrapper\n\n### Interaction\n- [ ] All clickable elements have `cursor-pointer`\n- [ ] Hover states provide clear visual feedback\n- [ ] Transitions are smooth (150-300ms)\n- [ ] Focus states visible for keyboard navigation\n\n### Light/Dark Mode\n- [ ] Light mode text has sufficient contrast (4.5:1 minimum)\n- [ ] Glass/transparent elements visible in light mode\n- [ ] Borders visible in both modes\n- [ ] Test both modes before delivery\n\n### Layout\n- [ ] Floating elements have proper spacing from edges\n- [ ] No content hidden behind fixed navbars\n- [ ] Responsive at 375px, 768px, 1024px, 1440px\n- [ ] No horizontal scroll on mobile\n\n### Accessibility\n- [ ] All images have alt text\n- [ ] Form inputs have labels\n- [ ] Color is not the only indicator\n- [ ] `prefers-reduced-motion` respected\n\nFile v0.1.0:skill-card.md\n\n## Description:\n\nUI/UX Pro Max provides design intelligence and implementation guidance for polished interfaces, including UI layouts, UX flows, design-system tokens, component specs, accessibility notes, and frontend code recommendations.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[xobi667](https://clawhub.ai/user/xobi667)\n\n### License/Terms of Use:\n\n\n## Use Case:\n\nDevelopers, designers, and product teams use this skill to plan and refine interface structure, visual direction, design systems, accessibility states, and frontend implementation details for web and app experiences.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Bundled scripts and documented workflows can write design-system files when persistence options are used.\n\nMitigation: Run the skill in a scoped workspace and review the output directory, project name, and page name before allowing writes.\n\nRisk: The bundled documentation includes broad installation paths, including unpinned global CLI installation and all-assistant initialization.\n\nMitigation: Prefer scoped or offline installation and use global CLI or all-assistant setup only after trusting the selected release.\n\n## Reference(s):\n\n- [ClawHub skill page](https://clawhub.ai/xobi667/skills/ui-ux-pro-max)\n- [Bundled upstream README](artifact/references/upstream-README.md)\n- [Bundled upstream skill content](artifact/references/upstream-skill-content.md)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, shell commands, configuration, guidance]\n\n**Output Format:** [Markdown prose with optional code blocks, shell commands, and generated design-system files]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May include UI concepts, UX flows, design tokens, component rules, accessibility notes, implementation plans, and optional persisted design-system files.]\n\n## Skill Version(s):\n\n0.1.0 (source: server release metadata)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.","readmeExcerpt":"Skill: UI/UX Pro Max Owner: xobi667 Summary: UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows fo","codeSnippets":[],"executableExamples":[{"language":"bash","snippet":"python3 skills/ui-ux-pro-max/scripts/design_system.py --help"},{"language":"text","snippet":"+----------------------------------------------------------------------------------------+\n| TARGET: Serenity Spa - RECOMMENDED DESIGN SYSTEM |\n+----------------------------------------------------------------------------------------+\n| |\n| PATTERN: Hero-Centric + Social Proof |\n| Conversion: Emotion-driven with trust elements |\n| CTA: Above fold, repeated after testimonials |\n| Sections: |\n| 1. Hero |\n| 2. Services |\n| 3. Testimonials |\n| 4. Booking |\n| 5. Contact |\n| |\n| STYLE: Soft UI Evolution |\n| Keywords: Soft shadows, subtle depth, calming, premium feel, organic shapes |\n| Best For: Wellness, beauty, lifestyle brands, premium services |\n| Performance: Excellent | Accessibility: WCAG AA |\n| |\n| COLORS: |\n| Primary: #E8B4B8 (Soft Pink) |\n| Secondary: #A8D5BA (Sage Green) "},{"language":"text","snippet":"┌─────────────────────────────────────────────────────────────────┐\n│ 1. USER REQUEST │\n│ \"Build a landing page for my beauty spa\" │\n└─────────────────────────────────────────────────────────────────┘\n │\n ▼\n┌─────────────────────────────────────────────────────────────────┐\n│ 2. MULTI-DOMAIN SEARCH (5 parallel searches) │\n│ • Product type matching (100 categories) │\n│ • Style recommendations (67 styles) │\n│ • Color palette selection (96 palettes) │\n│ • Landing page patterns (24 patterns) │\n│ • Typography pairing (57 font combinations) │\n└─────────────────────────────────────────────────────────────────┘\n │\n ▼\n┌─────────────────────────────────────────────────────────────────┐\n│ 3. REASONING ENGINE │\n│ • Match product → UI category rules │\n│ • Apply style priorities (BM25 ranking) │\n│ • Filter anti-patterns for industry │\n│ • Process decision rules (JSON conditions) │\n└─────────────────────────────────────────────────────────────────┘\n │\n ▼\n┌─────────────────────────────────────────────────────────────────┐\n│ 4. COMPLETE DESIGN SYSTEM OUTPUT │\n│ Pattern + Style + Colors + Typography + Effects │\n│ + Anti-patterns to avoid + Pre-delivery checklist │\n└─────────────────────────────────────────────────────────────────┘"},{"language":"text","snippet":"/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill\n/plugin install ui-ux-pro-max@ui-ux-pro-max-skill"},{"language":"bash","snippet":"# Install CLI globally\nnpm install -g uipro-cli\n\n# Go to your project\ncd /path/to/your/project\n\n# Install for your AI assistant\nuipro init --ai claude # Claude Code\nuipro init --ai cursor # Cursor\nuipro init --ai windsurf # Windsurf\nuipro init --ai antigravity # Antigravity\nuipro init --ai copilot # GitHub Copilot\nuipro init --ai kiro # Kiro\nuipro init --ai codex # Codex CLI\nuipro init --ai qoder # Qoder\nuipro init --ai roocode # Roo Code\nuipro init --ai gemini # Gemini CLI\nuipro init --ai trae # Trae\nuipro init --ai opencode # OpenCode\nuipro init --ai continue # Continue\nuipro init --ai codebuddy # CodeBuddy\nuipro init --ai all # All assistants"},{"language":"bash","snippet":"uipro versions # List available versions\nuipro update # Update to latest version\nuipro init --offline # Skip GitHub download, use bundled assets"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: ui-ux-pro-max\ndescription: UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.\n---\n\nFollow these steps to deliver high-quality UI/UX output with minimal back-and-forth.\n\n## 1) Triage\nAsk only what you must to avoid wrong work:\n- Target platform: web / iOS / Android / desktop\n- Stack (if code changes): React/Next/Vue/Svelte, CSS/Tailwind, component library\n- Goal and constraints: conversion, speed, brand vibe, accessibility level (WCAG AA?)\n- What you have: screenshot, Figma, repo, URL, user journey\n\nIf the user says \"全部都要\" (design + UX + code + design system), treat it as four deliverables and ship in that order.\n\n## 2) Produce Deliverables (pick what fits)\nAlways be concrete: name components, states, spacing, typography, and interactions.\n\n- **UI concept + layout**: Provide a clear visual direction, grid, typography, color system, key screens/sections.\n- **UX flow**: Map the user journey, critical paths, error/empty/loading states, edge cases.\n- **Design system**: Tokens (color/typography/spacing/radius/shadow), component rules, accessibility notes.\n- **Implementation plan**: Exact file-level edits, component breakdown, and acceptance criteria.\n\n## 3) Use Bundled Assets\nThis skill bundles data you can cite for inspiration/standards.\n\n- **Design intelligence data**: Read from `skills/ui-ux-pro-max/assets/data/` when you need palettes, patterns, or UI/UX heuristics.\n- **Upstream reference**: If you need more phrasing/examples, consult `skills/ui-ux-pro-max/references/upstream-skill-content.md`.\n\n## 4) Optional Script (Design System Generator)\nIf you need to quickly generate tokens and page-specific overrides, use the bundled script:\n\n```bash\npython3 skills/ui-ux-pro-max/scripts/design_system.py --help\n```\n\nPrefer running it when the user wants a structured token output (ASCII-friendly).\n\n## Output Standards\n- Default to ASCII-only tokens/variables unless the project already uses Unicode.\n- Include: spacing scale, type scale, 2-3 font pair options, color tokens, component states.\n- Always cover: empty/loading/error, keyboard navigation, focus states, contrast."},{"path":"_meta.json","content":"{\n \"ownerId\": \"kn7dzk42mb9ceh8sm1zdx51sws803c9b\",\n \"slug\": \"ui-ux-pro-max\",\n \"version\": \"0.1.0\",\n \"publishedAt\": 1769616159343\n}"},{"path":"references/upstream-README.md","content":"# UI UX Pro Max\n \n
\n \n \n \n \n \n
\n\n
\n \n \n \n \n
\n\nAn AI skill that provides design intelligence for building professional UI/UX across multiple platforms and frameworks.\n\n
\n \n
\n\n
\n If you find this useful, consider supporting the project:
\n \n
\n\n## What's New in v2.0\n\n### Intelligent Design System Generation\n\nThe flagship feature of v2.0 is the **Design System Generator** - an AI-powered reasoning engine that analyzes your project requirements and generates a complete, tailored design system in seconds.\n\n```\n+----------------------------------------------------------------------------------------+\n| TARGET: Serenity Spa - RECOMMENDED DESIGN SYSTEM |\n+----------------------------------------------------------------------------------------+\n| |\n| PATTERN: Hero-Centric + Social Proof |\n| Conversion: Emotion-driven with trust elements |\n| CTA: Above fold, repeated after testimonials |\n| Sections: "},{"path":"references/upstream-skill-content.md","content":"# {{TITLE}}\n\n{{DESCRIPTION}}\n{{QUICK_REFERENCE}}\n## Prerequisites\n\nCheck if Python is installed:\n\n```bash\npython3 --version || python --version\n```\n\nIf Python is not installed, install it based on user's OS:\n\n**macOS:**\n```bash\nbrew install python3\n```\n\n**Ubuntu/Debian:**\n```bash\nsudo apt update && sudo apt install python3\n```\n\n**Windows:**\n```powershell\nwinget install Python.Python.3.12\n```\n\n---\n\n## How to Use This {{SKILL_OR_WORKFLOW}}\n\nWhen user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:\n\n### Step 1: Analyze User Requirements\n\nExtract key information from user request:\n- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.\n- **Style keywords**: minimal, playful, professional, elegant, dark mode, etc.\n- **Industry**: healthcare, fintech, gaming, education, etc.\n- **Stack**: React, Vue, Next.js, or default to `html-tailwind`\n\n### Step 2: Generate Design System (REQUIRED)\n\n**Always start with `--design-system`** to get comprehensive recommendations with reasoning:\n\n```bash\npython3 {{SCRIPT_PATH}} \"\" --design-system [-p \"Project Name\"]\n```\n\nThis command:\n1. Searches 5 domains in parallel (product, style, color, landing, typography)\n2. Applies reasoning rules from `ui-reasoning.csv` to select best matches\n3. Returns complete design system: pattern, style, colors, typography, effects\n4. Includes anti-patterns to avoid\n\n**Example:**\n```bash\npython3 {{SCRIPT_PATH}} \"beauty spa wellness service\" --design-system -p \"Serenity Spa\"\n```\n\n### Step 2b: Persist Design System (Master + Overrides Pattern)\n\nTo save the design system for hierarchical retrieval across sessions, add `--persist`:\n\n```bash\npython3 {{SCRIPT_PATH}} \"\" --design-system --persist -p \"Project Name\"\n```\n\nThis creates:\n- `design-system/MASTER.md` — Global Source of Truth with all design rules\n- `design-system/pages/` — Folder for page-specific overrides\n\n**With page-specific override:**\n```bash\npython3 {{SCRIPT_PATH}} \"\" --design-system --persist -p \"Project Name\" --page \"dashboard\"\n```\n\nThis also creates:\n- `design-system/pages/dashboard.md` — Page-specific deviations from Master\n\n**How hierarchical retrieval works:**\n1. When building a specific page (e.g., \"Checkout\"), first check `design-system/pages/checkout.md`\n2. If the page file exists, its rules **override** the Master file\n3. If not, use `design-system/MASTER.md` exclusively\n\n### Step 3: Supplement with Detailed Searches (as needed)\n\nAfter getting the design system, use domain searches to get additional details:\n\n```bash\npython3 {{SCRIPT_PATH}} \"\" --domain [-n ]\n```\n\n**When to use detailed searches:**\n\n| Need | Domain | Example |\n|------|--------|---------|\n| More style options | `style` | `--domain style \"glassmorphism dark\"` |\n| Chart recommendations | `chart` | `--domain chart \"real-time dashboard\"` |\n| UX best practices | `ux` | `--domain ux \"animation accessibility\"` |"},{"path":"skill-card.md","content":"## Description:\n\nUI/UX Pro Max provides design intelligence and implementation guidance for polished interfaces, including UI layouts, UX flows, design-system tokens, component specs, accessibility notes, and frontend code recommendations.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[xobi667](https://clawhub.ai/user/xobi667)\n\n### License/Terms of Use:\n\n\n## Use Case:\n\nDevelopers, designers, and product teams use this skill to plan and refine interface structure, visual direction, design systems, accessibility states, and frontend implementation details for web and app experiences.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Bundled scripts and documented workflows can write design-system files when persistence options are used.\n\nMitigation: Run the skill in a scoped workspace and review the output directory, project name, and page name before allowing writes.\n\nRisk: The bundled documentation includes broad installation paths, including unpinned global CLI installation and all-assistant initialization.\n\nMitigation: Prefer scoped or offline installation and use global CLI or all-assistant setup only after trusting the selected release.\n\n## Reference(s):\n\n- [ClawHub skill page](https://clawhub.ai/xobi667/skills/ui-ux-pro-max)\n- [Bundled upstream README](artifact/references/upstream-README.md)\n- [Bundled upstream skill content](artifact/references/upstream-skill-content.md)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, shell commands, configuration, guidance]\n\n**Output Format:** [Markdown prose with optional code blocks, shell commands, and generated design-system files]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May include UI concepts, UX flows, design tokens, component rules, accessibility notes, implementation plans, and optional persisted design-system files.]\n\n## Skill Version(s):\n\n0.1.0 (source: server release metadata)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment."}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":null,"editorialQuality":{"score":100,"threshold":65,"status":"thin","wordCount":1561,"uniquenessScore":43,"reasons":["uniqueness-below-45"]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-11-11T17:16:57.110Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-11-11T17:16:57.110Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-11-13T06:00:34.027Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}
![\"GitHub](\"https://img.shields.io/github/v/release/nextlevelbuilder/ui-ux-pro-max-skill?style=for-the-badge&color=blue\")
\n ![\"100](\"https://img.shields.io/badge/reasoning_rules-100-green?style=for-the-badge\"){kind=icon}
\n ![\"67](\"https://img.shields.io/badge/UI_styles-67-purple?style=for-the-badge\"){kind=icon}
\n ![\"Python](\"https://img.shields.io/badge/python-3.x-yellow?style=for-the-badge&logo=python&logoColor=white\"){kind=icon}
\n ![\"License\"](\"https://img.shields.io/github/license/nextlevelbuilder/ui-ux-pro-max-skill?style=for-the-badge&color=green\")
\n![\"npm\"](\"https://img.shields.io/npm/v/uipro-cli?style=flat-square&logo=npm&label=CLI\")
![\"npm](\"https://img.shields.io/npm/dm/uipro-cli?style=flat-square&label=downloads\")
![\"GitHub](\"https://img.shields.io/github/stars/nextlevelbuilder/ui-ux-pro-max-skill?style=flat-square&logo=github\")
![\"PayPal\"](\"https://img.shields.io/badge/PayPal-Support%20Development-00457C?style=flat-square&logo=paypal&logoColor=white\"){kind=icon}
![\"UI](\"screenshots/website.png\")
\n![\"PayPal](\"https://img.shields.io/badge/PayPal-Donate-00457C?style=for-the-badge&logo=paypal&logoColor=white\"){kind=icon}