{"id":"3d46108a-c2fc-4fb3-b8b3-99fddf3eb3da","shortId":"ZNGwAp","kind":"skill","title":"ui-ux-pro-max","tagline":"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check U","description":"# UI/UX Pro Max - Design Intelligence\n\nComprehensive design guide for web and mobile applications. Contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 technology stacks. Searchable database with priority-based recommendations.\n\n## When to Apply\n\nReference these guidelines when:\n- Designing new UI components or pages\n- Choosing color palettes and typography\n- Reviewing code for UX issues\n- Building landing pages or dashboards\n- Implementing accessibility requirements\n\n## Rule Categories by Priority\n\n| Priority | Category | Impact | Domain |\n|----------|----------|--------|--------|\n| 1 | Accessibility | CRITICAL | `ux` |\n| 2 | Touch & Interaction | CRITICAL | `ux` |\n| 3 | Performance | HIGH | `ux` |\n| 4 | Layout & Responsive | HIGH | `ux` |\n| 5 | Typography & Color | MEDIUM | `typography`, `color` |\n| 6 | Animation | MEDIUM | `ux` |\n| 7 | Style Selection | MEDIUM | `style`, `product` |\n| 8 | Charts & Data | LOW | `chart` |\n\n## Quick Reference\n\n### 1. Accessibility (CRITICAL)\n\n- `color-contrast` - Minimum 4.5:1 ratio for normal text\n- `focus-states` - Visible focus rings on interactive elements\n- `alt-text` - Descriptive alt text for meaningful images\n- `aria-labels` - aria-label for icon-only buttons\n- `keyboard-nav` - Tab order matches visual order\n- `form-labels` - Use label with for attribute\n\n### 2. Touch & Interaction (CRITICAL)\n\n- `touch-target-size` - Minimum 44x44px touch targets\n- `hover-vs-tap` - Use click/tap for primary interactions\n- `loading-buttons` - Disable button during async operations\n- `error-feedback` - Clear error messages near problem\n- `cursor-pointer` - Add cursor-pointer to clickable elements\n\n### 3. Performance (HIGH)\n\n- `image-optimization` - Use WebP, srcset, lazy loading\n- `reduced-motion` - Check prefers-reduced-motion\n- `content-jumping` - Reserve space for async content\n\n### 4. Layout & Responsive (HIGH)\n\n- `viewport-meta` - width=device-width initial-scale=1\n- `readable-font-size` - Minimum 16px body text on mobile\n- `horizontal-scroll` - Ensure content fits viewport width\n- `z-index-management` - Define z-index scale (10, 20, 30, 50)\n\n### 5. Typography & Color (MEDIUM)\n\n- `line-height` - Use 1.5-1.75 for body text\n- `line-length` - Limit to 65-75 characters per line\n- `font-pairing` - Match heading/body font personalities\n\n### 6. Animation (MEDIUM)\n\n- `duration-timing` - Use 150-300ms for micro-interactions\n- `transform-performance` - Use transform/opacity, not width/height\n- `loading-states` - Skeleton screens or spinners\n\n### 7. Style Selection (MEDIUM)\n\n- `style-match` - Match style to product type\n- `consistency` - Use same style across all pages\n- `no-emoji-icons` - Use SVG icons, not emojis\n\n### 8. Charts & Data (LOW)\n\n- `chart-type` - Match chart type to data type\n- `color-guidance` - Use accessible color palettes\n- `data-table` - Provide table alternative for accessibility\n\n## How to Use\n\nSearch specific domains using the CLI tool below.\n\n---\n\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\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 skills/ui-ux-pro-max/scripts/search.py \"<product_type> <industry> <keywords>\" --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 skills/ui-ux-pro-max/scripts/search.py \"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 skills/ui-ux-pro-max/scripts/search.py \"<query>\" --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 skills/ui-ux-pro-max/scripts/search.py \"<query>\" --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**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### 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 skills/ui-ux-pro-max/scripts/search.py \"<keyword>\" --domain <domain> [-n <max_results>]\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 skills/ui-ux-pro-max/scripts/search.py \"<keyword>\" --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 skills/ui-ux-pro-max/scripts/search.py \"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 skills/ui-ux-pro-max/scripts/search.py \"animation accessibility\" --domain ux\n\n# Get alternative typography options if needed\npython3 skills/ui-ux-pro-max/scripts/search.py \"elegant luxury serif\" --domain typography\n```\n\n### Step 4: Stack Guidelines\n\n```bash\npython3 skills/ui-ux-pro-max/scripts/search.py \"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 skills/ui-ux-pro-max/scripts/search.py \"fintech crypto\" --design-system\n\n# Markdown - best for documentation\npython3 skills/ui-ux-pro-max/scripts/search.py \"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","tags":["pro","max","claude","arsenal","majiayu000","agent-skills","ai-agents","ai-coding-assistant","automation","claude-code","code-review","developer-tools"],"capabilities":["skill","source-majiayu000","skill-ui-ux-pro-max","topic-agent-skills","topic-ai-agents","topic-ai-coding-assistant","topic-automation","topic-claude","topic-claude-code","topic-code-review","topic-developer-tools","topic-devops","topic-productivity","topic-prompt-engineering","topic-python"],"categories":["claude-arsenal"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/majiayu000/claude-arsenal/ui-ux-pro-max","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add majiayu000/claude-arsenal","source_repo":"https://github.com/majiayu000/claude-arsenal","install_from":"skills.sh"}},"qualityScore":"0.464","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 29 github stars · SKILL.md body (13,522 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-01T07:01:17.436Z","embedding":null,"createdAt":"2026-04-18T22:24:35.475Z","updatedAt":"2026-05-01T07:01:17.436Z","lastSeenAt":"2026-05-01T07:01:17.436Z","tsv":"'-0':1588,1590,1592 '-1.75':351 '-200':1489 '-300':380,1696 '-4':1578,1580,1582 '-400':1535,1549 '-6':1439,1441 '-600':1545 '-75':361 '-900':1529 '/10':1520,1566 '/80':1512 '/master.md':693,779,798 '/pages':705,805 '/pages/checkout.md':759 '/pages/dashboard.md':735 '0f172a':1527 '1':123,164,172,310,531,606,746,1147,1302,1713 '1.5':350 '10':338 '1024px':1749 '1440px':1750 '150':379,1695 '16px':316 '2':127,222,578,617,760,1167,1311 '20':16,339 '200':1558 '21':11 '24x24':1436 '25':70 '2b':659 '3':132,269,627,772,831,1201,1320 '3.12':509 '30':340 '375px':1747 '4':136,296,637,905,1236,1329 '4.5':171,1712 '44x44px':231 '475569':1543 '5':141,342,608,1342 '50':9,13,58,341 '500ms':1496 '57':63 '6':147,372,1352 '65':360 '6xl':1615 '7':151,400 '768px':1748 '7xl':1620 '8':157,428 '9':18,74 '94a3b8':1533 '97':60 '99':66 'a11y':1078 'access':113,124,165,445,455,887,1038,1215,1219,1338,1756 'account':1595 'across':73,416,674 'action':30 'add':262,676,1455,1576 'addit':848 'ai':1062 'also':730,799 'alt':187,190,1760 'alt-text':186 'altern':453,888,1223 'alway':583,1330 'analyz':532,1148 'anim':148,373,886,1037,1105,1213,1218,1334 'anti':640,1035,1198 'anti-pattern':639,1034,1197 'api':1089,1093 'app':1310 'appli':86,618 'applic':56 'apt':498,501 'aria':196,199,1056 'aria-label':195,198 'ascii':1271 'async':249,294 'attribut':221 'avail':937,957,1068 'avoid':643 'awar':783 'base':82,485 'bash':473,491,496,595,645,678,717,850,930,1172,1208,1239,1270 'beauti':648,974,1004,1175 'beauty/spa':1152 'beauty/wellness':1160 'behind':1603,1742 'best':625,881,916,1032,1274,1286,1350 'better':1300 'bg':1510,1518,1673 'bg-primari':1672 'bg-white':1509,1517 'bodi':317,353,1537 'border':1476,1552,1556,1564,1721 'border-gray':1555 'border-whit':1563 'box':1272 'brand':1416,1653 'brew':492 'brutal':985 'build':32,107,521,748,788 'bundl':1047 'button':205,245,247 'cach':1051 'card':1462,1505 'categori':116,120 'caus':1665 'centric':1015 'chang':1492 'charact':362 'chart':17,71,158,161,429,433,436,871,873,875,1021,1022 'chart-typ':432 'check':42,283,468,755,800,1331 'checklist':1628 'checkout':753 'cho':1138 'choos':97 'chuyên':1144 'chăm':1141 'clear':254,1689 'cli':464 'click/tap':239 'clickabl':267,1680 'clickable/hoverable':1461 'code':103,829,1632 'color':61,98,143,146,168,344,442,446,614,634,979,995,996,1193,1325,1474,1487,1670,1766 'color-contrast':167 'color-guid':441 'color/opacity':1405 'combin':1321 'command':605 'commerc':546,971 'common':1340,1363 'comparison':1027 'complet':629,1187,1326 'compon':94,1109,1119 'compos':954,1125,1126 'composit':1092 'comprehens':49,591 'consist':412,1430,1606,1649 'contain':57,1623 'content':289,295,325,1593,1601,1740 'content-jump':288 'context':782 'context-awar':781 'contrast':169,1499,1524,1711 'correct':1415,1656 'creat':33,522,689,731 'critic':125,130,166,225 'crypto':1281,1292 'css':1064 'cta':1010 'cursor':260,264,1448,1453,1457,1465,1684 'cursor-point':259,263,1456,1683 'da':1143 'dark':558,870,983 'dashboard':111,548,728,879,1309 'data':159,430,439,449 'data-t':448 'databas':78 'default':572,908,925,1079,1165,1273,1464 'defin':333 'deliv':1630 'deliveri':1627,1730 'descript':189 'design':7,34,47,50,91,520,580,587,599,630,653,661,669,682,691,700,703,721,733,757,777,796,803,841,1169,1181,1188,1251,1258,1263,1283,1294,1327 'design-system':586,598,652,681,690,702,720,732,756,776,795,802,1180,1262,1282,1293 'detail':834,849,858,1204,1253 'deviat':739 'devic':305 'device-width':304 'differ':1315,1318,1361,1443,1622 'direct':1671 'disabl':246 'display':1277 'document':1288 'doesn':920,1357 'domain':122,461,609,844,853,861,867,874,884,891,898,958,959,1220,1233,1322 'durat':376,1488 'duration-tim':375 'dịch':1139 'e':545,970 'e-commerc':544,969 'e.g':752 'ecommerc':1002 'edg':1738 'educ':565 'effect':636,980,1195 'eleg':557,893,991,1156,1179,1230 'element':185,268,1380,1468,1479,1605,1681,1716,1733 'emoji':421,427,1386,1396,1639 'enhanc':40 'ensur':324 'error':252,255 'error-feedback':251 'etc':551,560,566 'exampl':644,862,962,1131 'exclus':780,825 'exist':765,810,815 'extract':535 'f':1296 'feedback':253,1470,1473,1691 'file':764,771,814 'fintech':563,1005,1280,1291 'first':754,1355 'fit':326 'fix':37,525,1434,1597,1604,1743 'flag':1265,1345 'float':1574,1732 'flutter':27,950,1112 'focus':178,181,1057,1071,1698 'focus-st':177 'folder':706 'follow':527 'font':14,64,313,366,370,889,987,990 'font-pair':365 'form':215,1121,1244,1762 'form-label':214 'format':1260,1269 'frequent':1370 'funnel':1029 'game':564 'generat':579,827,1168 'get':590,839,847,912,1209,1222,1346 'glass':1504 'glass/transparent':1715 'glassmorph':869,981 'global':694 'googl':989 'gray':1548,1557 'guess':1424 'guid':51 'guidanc':443 'guidelin':68,89,907,1055,1211,1238 'h':1440 'heading/body':369 'healthcar':562,973,1003,1307 'height':348,1599 'hero':900,1012,1014 'hero-centr':1013 'heroicon':1391 'heroicons/lucide':1652 'hidden':1741 'hide':1602 'hierarch':672,743 'high':134,139,271,299 'higher':1514 'hoist':1129 'hook':1082 'horizont':322,1752 'horizontal-scrol':321 'hover':235,1402,1408,1469,1661,1686 'hover-vs-tap':234 'html':575,910,928,935,940,1073,1163,1247 'html-tailwind':574,909,927,934,939,1072,1162,1246 'icon':203,422,425,1378,1387,1390,1394,1400,1423,1431,1444,1642,1647,1650,1660 'icon-on':202 'imag':194,273,1088,1758 'image-optim':272 'impact':121 'implement':35,112,523,914,1256,1348 'implementation-specif':913,1347 'improv':38,526 'includ':638 'incorrect':1427 'index':331,336,1041,1337 'indic':1478,1771 'industri':561,1159 'inform':537 'initi':308 'initial-scal':307 'input':1763 'insight':1319 'instal':472,482,483,493,502,507 'instant':1490 'instead':1645 'intellig':8,48 'interact':129,184,224,242,385,1447,1467,1481,1678 'interfac':1054 'invis':1567 'issu':106,1341,1372 'item':1635 'iter':1353 'jetpack':953,1124 'jetpack-compos':952,1123 'jump':290 'key':536 'keyboard':207,1058,1702 'keyboard-nav':206 'keyword':553,963,1065,1155,1306,1316,1362 'label':197,200,216,218,1765 'land':108,549,615,895,897,899,1007,1136 'layout':137,297,1115,1242,1414,1568,1666,1731 'lazi':278 'leav':1463 'left':1579,1589 'length':357 'let':1600 'librari':1024 'light':1506,1525,1541,1560,1706,1719 'light/dark':1497,1704 'lighter':1551 'like':1397 'limit':358 'line':347,356,364 'line-height':346 'line-length':355 'list':1111 'load':244,279,394,1042 'loading-button':243 'loading-st':393 'logo':1417,1428,1654 'look':1376 'low':160,431 'lucid':1392 'luxuri':894,1231 'làm':1135 'maco':490 'make':1374 'manag':332 'markdown':1285,1297 'master':663,741,770,823 'match':211,368,406,407,435,626,1359 'max':5,46,1608,1613,1618 'max-w-6xl':1612 'max-w-7xl':1617 'max-width':1607 'md':809 'meaning':193 'medium':144,149,154,345,374,403 'memo':1049 'messag':256 'meta':302 'micro':384 'micro-interact':383 'minim':554,982 'minimum':170,230,315,1546,1714 'mix':1442,1621 'mobil':55,320,1755 'mode':559,984,1498,1507,1561,1705,1707,1720,1725,1728 'modern':994 'modifi':1127 'motion':282,287,1775 'ms':381,1697 'multipl':1313 'mute':1539 'n':854 'name':603,687,726,791,808,1067 'nativ':26,949,1108 'nav':208 'navbar':1575,1585,1598,1744 'navig':1104,1110,1703 'near':257 'need':837,860,1207,1227 'new':92 'next.js':21,570 'nextj':943,1085 'nghiệp':1145 'no-emoji-icon':419 'normal':175 'offici':1419 'opac':1515 'oper':250 'optim':39,274 'option':865,1225 'order':210,213 'os':489 'output':1186,1259,1268 'overlook':1371 'overrid':664,711,716,768 'p':601,655,685,724,1183 'pad':1594 'page':96,109,418,550,709,714,727,737,751,763,790,792,807,813,1008,1137 'page-nam':806 'page-specif':708,713,736 'pair':15,65,367,988 'palett':12,62,99,447,997 'parallel':611 'path':1429 'pattern':632,641,665,1036,1084,1122,1191,1199 'per':363 'perform':133,270,388,1045,1083 'persist':660,677,684,723 'person':371 'pie':1030 'pinia':1094 'plan':31 'play':555,992 'pleas':793 'pointer':261,265,1454,1458,1685 'portfolio':547,972 'powershel':505 'practic':882,917,1033,1351 'pre':1626 'pre-deliveri':1625 'prefer':285,1773 'prefers-reduced-mot':284,1772 'prerequisit':467 'price':1017 'primari':241,1674 'priorit':816 'prioriti':81,118,119 'priority-bas':80 'pro':4,45 'problem':258 'product':156,410,541,612,964,965,999,1150 'profession':556,993,1157,1366 'project':602,686,725 'prompt':785,1061,1063 'proof':903,1020 'proper':1735 'provid':451,1471,1688 'python':470,476,479 'python.python':508 'python3':474,494,503,596,646,679,718,851,931,1173,1216,1228,1240,1278,1289 'qualiti':1637 'quick':162 'random':1446 'ratio':173 'react':20,25,568,942,948,1043,1080,1107 'react-nat':947,1106 'react/next.js':1044 'read':794 'readabl':312 'readable-font-s':311 'real':877 'real-tim':876 'reason':594,619 'recommend':83,592,872,967,1025 'recomposit':1130 'reduc':281,286,1774 'reduced-mot':280 'refactor':41 'refer':87,163,956 'request':517,540,1134 'requir':114,534,582,1149,1171 'rerend':1050 'research':1418 'reserv':291 'respect':1776 'respons':138,298,1077,1243,1745 'result':1301 'retriev':673,744,784 'return':628 'reveal':1317 'review':36,102,524 'right':1581,1591 'ring':182 'rout':1087,1090 'router':1096 'rule':115,620,701,767,818,824,1364,1381,1449,1500,1570 'rune':1098 'saa':543,968,1001,1308 'save':667 'scale':309,337,1410 'screen':397 'scroll':323,1753 'search':459,607,835,845,859,955,1205,1254,1312,1333,1356 'searchabl':77 'select':153,402,624 'semant':1059 'seren':656,1184 'serif':1232 'servic':651,975,1006,1153,1178 'session':675 'set':1651 'shadcn':951,1117 'shadcn/ui':29,1118 'shadow':1475 'shift':1413,1667 'simpl':1393,1422,1659 'size':229,314,1432,1445 'skeleton':396 'skill':514 'skill-ui-ux-pro-max' 'skills/ui-ux-pro-max/scripts/search.py':597,647,680,719,852,932,1174,1217,1229,1241,1279,1290 'slate':1528,1534,1544 'slow':1495 'smooth':1482,1694 'social':902,1019 'social-proof':901,1018 'soft':1158 'sourc':695 'source-majiayu000' 'spa':649,657,1176,1185 'space':292,1569,1583,1736 'specif':460,710,715,738,750,915,1304,1349 'specifi':922 'spinner':399 'srcset':277 'ssr':1086 'stabl':1401 'stack':19,76,567,906,924,933,938,1069,1070,1161,1237,1245,1344 'start':584 'state':179,395,1081,1103,1114,1128,1403,1491,1662,1687,1699 'step':530,577,658,830,904,1146,1166,1200,1235 'stick':1584 'store':1099 'strategi':1011 'structur':896,1009 'style':10,59,152,155,401,405,408,415,552,613,633,864,866,868,976,978,1066,1154,1192,1323 'style-match':404 'sudo':497,500 'suffici':1710 'supplement':832,1202 'support':1266 'suspens':1048 'svelt':23,945,1097 'sveltekit':1100 'svg':424,1389,1420,1644 'swiftui':24,946,1101 'synthes':1250 'system':581,588,600,631,654,662,670,683,692,704,722,734,758,778,797,804,842,1170,1182,1189,1252,1264,1284,1295,1328 'sóc':1142 'tab':209 'tabl':450,452 'tailwind':28,576,911,929,936,941,1074,1075,1164,1248 'tap':237 'target':228,233 'technolog':75 'termin':1276 'test':1726 'testimoni':1016 'text':176,188,191,318,354,1523,1531,1538,1540,1708,1761 'theme':1116,1120,1669 'time':377,878,1314 'timelin':1028 'tip':1298 'tool':465 'top':1577,1587 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-coding-assistant' 'topic-automation' 'topic-claude' 'topic-claude-code' 'topic-code-review' 'topic-developer-tools' 'topic-devops' 'topic-productivity' 'topic-prompt-engineering' 'topic-python' 'touch':128,223,227,232 'touch-target-s':226 'transform':387,1411 'transform-perform':386 'transform/opacity':390 'transit':1406,1483,1486,1692 'transition-color':1485 'transpar':1522 'trend':1026 'tri':1360 'truth':697 'two':1267 'type':72,411,434,437,440,542,966,1000,1023,1151 'typographi':101,142,145,343,616,635,890,892,986,1194,1224,1234,1324 'u':43 'ubuntu/debian':495 'ui':2,93,977,1367,1375,1399,1631 'ui-reasoning.csv':622 'ui-ux-pro-max':1 'ui/ux':6,44,518 'unprofession':1377 'updat':499 'use':217,238,275,349,378,389,413,423,444,458,462,512,775,821,843,857,960,1343,1388,1395,1404,1409,1426,1433,1484,1508,1516,1526,1532,1542,1547,1554,1562,1610,1640,1643,1668 'user':487,516,533,539,919,1133 'util':1076 'ux':3,67,105,126,131,135,140,150,880,883,885,1031,1210,1221,1332 'var':1676 'verifi':1633,1657 'version':475,477 'view':1102 'viewbox':1435 'viewport':301,327 'viewport-meta':300 'virtual':1060 'visibl':180,1553,1700,1717,1722 'visual':212,1379,1472,1636,1690 'vs':236 'vue':22,569,944,1091,1095 'vụ':1140 'w':1438,1614,1619 'waterfal':1046 'web':53,1052,1053 'webp':276 'well':650,1177 'white':1511,1519,1565 'widget':1113 'width':303,306,328,1609,1624 'width/height':392 'window':504 'winget':506 'work':519,745 'workflow':529,1132 'wrapper':1677 'z':330,335,1040,1336 'z-index':334,1039,1335 'z-index-manag':329","prices":[{"id":"76dea6b1-c7be-4bc5-801e-f29c2d1ab352","listingId":"3d46108a-c2fc-4fb3-b8b3-99fddf3eb3da","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"majiayu000","category":"claude-arsenal","install_from":"skills.sh"},"createdAt":"2026-04-18T22:24:35.475Z"}],"sources":[{"listingId":"3d46108a-c2fc-4fb3-b8b3-99fddf3eb3da","source":"github","sourceId":"majiayu000/claude-arsenal/ui-ux-pro-max","sourceUrl":"https://github.com/majiayu000/claude-arsenal/tree/main/skills/ui-ux-pro-max","isPrimary":false,"firstSeenAt":"2026-04-18T22:24:35.475Z","lastSeenAt":"2026-05-01T07:01:17.436Z"}],"details":{"listingId":"3d46108a-c2fc-4fb3-b8b3-99fddf3eb3da","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"majiayu000","slug":"ui-ux-pro-max","github":{"repo":"majiayu000/claude-arsenal","stars":29,"topics":["agent-skills","ai-agents","ai-coding-assistant","automation","claude","claude-code","code-review","developer-tools","devops","productivity","prompt-engineering","python","software-development","typescript","workflows"],"license":"mit","html_url":"https://github.com/majiayu000/claude-arsenal","pushed_at":"2026-04-29T04:12:22Z","description":"52 production-ready Claude Code skills and 7 specialized agents for software development, DevOps, product workflows, and automation.","skill_md_sha":"e58d6187f3d2fa94927fccbdb06ea0314ac89b2c","skill_md_path":"skills/ui-ux-pro-max/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/majiayu000/claude-arsenal/tree/main/skills/ui-ux-pro-max"},"layout":"multi","source":"github","category":"claude-arsenal","frontmatter":{"name":"ui-ux-pro-max","description":"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples."},"skills_sh_url":"https://skills.sh/majiayu000/claude-arsenal/ui-ux-pro-max"},"updatedAt":"2026-05-01T07:01:17.436Z"}}