{"id":"16bb3121-cc68-4451-80ca-b4242d453bc2","shortId":"sUugKf","kind":"skill","title":"ui-ux-pro-max","tagline":"UI/UX design intelligence with 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Use when designing or reviewing UI: websites, dashboards, landing pages, admin panels, e-commerce, SaaS","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","synapse","deve1993","agent-skills","ai-agents","ai-coding","ai-workspace","anti-poisoning","auto-learning-ai","automation","claude-code"],"capabilities":["skill","source-deve1993","skill-ui-ux-pro-max","topic-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workspace","topic-anti-poisoning","topic-auto-learning-ai","topic-automation","topic-claude-code","topic-code-quality","topic-cursor","topic-developer-tools","topic-devops"],"categories":["Synapse"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/deve1993/Synapse/ui-ux-pro-max","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add deve1993/Synapse","source_repo":"https://github.com/deve1993/Synapse","install_from":"skills.sh"}},"qualityScore":"0.453","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 7 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-18T19:14:14.667Z","embedding":null,"createdAt":"2026-05-18T13:21:47.929Z","updatedAt":"2026-05-18T19:14:14.667Z","lastSeenAt":"2026-05-18T19:14:14.667Z","tsv":"'-0':1591,1593,1595 '-1.75':354 '-200':1492 '-300':383,1699 '-4':1581,1583,1585 '-400':1538,1552 '-6':1442,1444 '-600':1548 '-75':364 '-900':1532 '/10':1523,1569 '/80':1515 '/master.md':696,782,801 '/pages':708,808 '/pages/checkout.md':762 '/pages/dashboard.md':738 '0f172a':1530 '1':126,167,175,313,534,609,749,1150,1305,1716 '1.5':353 '10':341 '1024px':1752 '1440px':1753 '150':382,1698 '16px':319 '2':130,225,581,620,763,1170,1314 '20':17,342 '200':1561 '21':12 '24x24':1439 '25':73 '2b':662 '3':135,272,630,775,834,1204,1323 '3.12':512 '30':343 '375px':1750 '4':139,299,640,908,1239,1332 '4.5':174,1715 '44x44px':234 '475569':1546 '5':144,345,611,1345 '50':10,14,61,344 '500ms':1499 '57':66 '6':150,375,1355 '65':363 '6xl':1618 '7':154,403 '768px':1751 '7xl':1623 '8':160,431 '9':19,77 '94a3b8':1536 '97':63 '99':69 'a11y':1081 'access':116,127,168,448,458,890,1041,1218,1222,1341,1759 'account':1598 'across':76,419,677 'add':265,679,1458,1579 'addit':851 'admin':41 'ai':1065 'also':733,802 'alt':190,193,1763 'alt-text':189 'altern':456,891,1226 'alway':586,1333 'analyz':535,1151 'anim':151,376,889,1040,1108,1216,1221,1337 'anti':643,1038,1201 'anti-pattern':642,1037,1200 'api':1092,1096 'app':1313 'appli':89,621 'applic':59 'apt':501,504 'aria':199,202,1059 'aria-label':198,201 'ascii':1274 'async':252,297 'attribut':224 'avail':940,960,1071 'avoid':646 'awar':786 'base':85,488 'bash':476,494,499,598,648,681,720,853,933,1175,1211,1242,1273 'beauti':651,977,1007,1178 'beauty/spa':1155 'beauty/wellness':1163 'behind':1606,1745 'best':628,884,919,1035,1277,1289,1353 'better':1303 'bg':1513,1521,1676 'bg-primari':1675 'bg-white':1512,1520 'bodi':320,356,1540 'border':1479,1555,1559,1567,1724 'border-gray':1558 'border-whit':1566 'box':1275 'brand':1419,1656 'brew':495 'brutal':988 'build':110,524,751,791 'bundl':1050 'button':208,248,250 'cach':1054 'card':1465,1508 'categori':119,123 'caus':1668 'centric':1018 'chang':1495 'charact':365 'chart':18,74,161,164,432,436,439,874,876,878,1024,1025 'chart-typ':435 'check':286,471,758,803,1334 'checklist':1631 'checkout':756 'cho':1141 'choos':100 'chuyên':1147 'chăm':1144 'clear':257,1692 'cli':467 'click/tap':242 'clickabl':270,1683 'clickable/hoverable':1464 'code':106,832,1635 'color':64,101,146,149,171,347,445,449,617,637,982,998,999,1196,1328,1477,1490,1673,1769 'color-contrast':170 'color-guid':444 'color/opacity':1408 'combin':1324 'command':608 'commerc':45,549,974 'common':1343,1366 'comparison':1030 'complet':632,1190,1329 'compon':97,1112,1122 'compos':957,1128,1129 'composit':1095 'comprehens':52,594 'consist':415,1433,1609,1652 'contain':60,1626 'content':292,298,328,1596,1604,1743 'content-jump':291 'context':785 'context-awar':784 'contrast':172,1502,1527,1714 'correct':1418,1659 'creat':525,692,734 'critic':128,133,169,228 'crypto':1284,1295 'css':1067 'cta':1013 'cursor':263,267,1451,1456,1460,1468,1687 'cursor-point':262,266,1459,1686 'da':1146 'dark':561,873,986 'dashboard':38,114,551,731,882,1312 'data':162,433,442,452 'data-t':451 'databas':81 'default':575,911,928,1082,1168,1276,1467 'defin':336 'deliv':1633 'deliveri':1630,1733 'descript':192 'design':7,33,50,53,94,523,583,590,602,633,656,664,672,685,694,703,706,724,736,760,780,799,806,844,1172,1184,1191,1254,1261,1266,1286,1297,1330 'design-system':589,601,655,684,693,705,723,735,759,779,798,805,1183,1265,1285,1296 'detail':837,852,861,1207,1256 'deviat':742 'devic':308 'device-width':307 'differ':1318,1321,1364,1446,1625 'direct':1674 'disabl':249 'display':1280 'document':1291 'doesn':923,1360 'domain':125,464,612,847,856,864,870,877,887,894,901,961,962,1223,1236,1325 'durat':379,1491 'duration-tim':378 'dịch':1142 'e':44,548,973 'e-commerc':43,547,972 'e.g':755 'ecommerc':1005 'edg':1741 'educ':568 'effect':639,983,1198 'eleg':560,896,994,1159,1182,1233 'element':188,271,1383,1471,1482,1608,1684,1719,1736 'emoji':424,430,1389,1399,1642 'ensur':327 'error':255,258 'error-feedback':254 'etc':554,563,569 'exampl':647,865,965,1134 'exclus':783,828 'exist':768,813,818 'extract':538 'f':1299 'feedback':256,1473,1476,1694 'file':767,774,817 'fintech':566,1008,1283,1294 'first':757,1358 'fit':329 'fix':528,1437,1600,1607,1746 'flag':1268,1348 'float':1577,1735 'flutter':28,953,1115 'focus':181,184,1060,1074,1701 'focus-st':180 'folder':709 'follow':530 'font':15,67,316,369,373,892,990,993 'font-pair':368 'form':218,1124,1247,1765 'form-label':217 'format':1263,1272 'frequent':1373 'funnel':1032 'game':567 'generat':582,830,1171 'get':593,842,850,915,1212,1225,1349 'glass':1507 'glass/transparent':1718 'glassmorph':872,984 'global':697 'googl':992 'gray':1551,1560 'guess':1427 'guid':54 'guidanc':446 'guidelin':71,92,910,1058,1214,1241 'h':1443 'heading/body':372 'healthcar':565,976,1006,1310 'height':351,1602 'hero':903,1015,1017 'hero-centr':1016 'heroicon':1394 'heroicons/lucide':1655 'hidden':1744 'hide':1605 'hierarch':675,746 'high':137,142,274,302 'higher':1517 'hoist':1132 'hook':1085 'horizont':325,1755 'horizontal-scrol':324 'hover':238,1405,1411,1472,1664,1689 'hover-vs-tap':237 'html':578,913,931,938,943,1076,1166,1250 'html-tailwind':577,912,930,937,942,1075,1165,1249 'icon':206,425,428,1381,1390,1393,1397,1403,1426,1434,1447,1645,1650,1653,1663 'icon-on':205 'imag':197,276,1091,1761 'image-optim':275 'impact':124 'implement':115,526,917,1259,1351 'implementation-specif':916,1350 'improv':529 'includ':641 'incorrect':1430 'index':334,339,1044,1340 'indic':1481,1774 'industri':564,1162 'inform':540 'initi':311 'initial-scal':310 'input':1766 'insight':1322 'instal':475,485,486,496,505,510 'instant':1493 'instead':1648 'intellig':8,51 'interact':132,187,227,245,388,1450,1470,1484,1681 'interfac':1057 'invis':1570 'issu':109,1344,1375 'item':1638 'iter':1356 'jetpack':956,1127 'jetpack-compos':955,1126 'jump':293 'key':539 'keyboard':210,1061,1705 'keyboard-nav':209 'keyword':556,966,1068,1158,1309,1319,1365 'label':200,203,219,221,1768 'land':39,111,552,618,898,900,902,1010,1139 'layout':140,300,1118,1245,1417,1571,1669,1734 'lazi':281 'leav':1466 'left':1582,1592 'length':360 'let':1603 'librari':1027 'light':1509,1528,1544,1563,1709,1722 'light/dark':1500,1707 'lighter':1554 'like':1400 'limit':361 'line':350,359,367 'line-height':349 'line-length':358 'list':1114 'load':247,282,397,1045 'loading-button':246 'loading-st':396 'logo':1420,1431,1657 'look':1379 'low':163,434 'lucid':1395 'luxuri':897,1234 'làm':1138 'maco':493 'make':1377 'manag':335 'markdown':1288,1300 'master':666,744,773,826 'match':214,371,409,410,438,629,1362 'max':5,49,1611,1616,1621 'max-w-6xl':1615 'max-w-7xl':1620 'max-width':1610 'md':812 'meaning':196 'medium':147,152,157,348,377,406 'memo':1052 'messag':259 'meta':305 'micro':387 'micro-interact':386 'minim':557,985 'minimum':173,233,318,1549,1717 'mix':1445,1624 'mobil':58,323,1758 'mode':562,987,1501,1510,1564,1708,1710,1723,1728,1731 'modern':997 'modifi':1130 'motion':285,290,1778 'ms':384,1700 'multipl':1316 'mute':1542 'n':857 'name':606,690,729,794,811,1070 'nativ':27,952,1111 'nav':211 'navbar':1578,1588,1601,1747 'navig':1107,1113,1706 'near':260 'need':840,863,1210,1230 'new':95 'next.js':22,573 'nextj':946,1088 'nghiệp':1148 'no-emoji-icon':422 'normal':178 'offici':1422 'opac':1518 'oper':253 'optim':277 'option':868,1228 'order':213,216 'os':492 'output':1189,1262,1271 'overlook':1374 'overrid':667,714,719,771 'p':604,658,688,727,1186 'pad':1597 'page':40,99,112,421,553,712,717,730,740,754,766,793,795,810,816,1011,1140 'page-nam':809 'page-specif':711,716,739 'pair':16,68,370,991 'palett':13,65,102,450,1000 'panel':42 'parallel':614 'path':1432 'pattern':635,644,668,1039,1087,1125,1194,1202 'per':366 'perform':136,273,391,1048,1086 'persist':663,680,687,726 'person':374 'pie':1033 'pinia':1097 'play':558,995 'pleas':796 'pointer':264,268,1457,1461,1688 'portfolio':550,975 'powershel':508 'practic':885,920,1036,1354 'pre':1629 'pre-deliveri':1628 'prefer':288,1776 'prefers-reduced-mot':287,1775 'prerequisit':470 'price':1020 'primari':244,1677 'priorit':819 'prioriti':84,121,122 'priority-bas':83 'pro':4,48 'problem':261 'product':159,413,544,615,967,968,1002,1153 'profession':559,996,1160,1369 'project':605,689,728 'prompt':788,1064,1066 'proof':906,1023 'proper':1738 'provid':454,1474,1691 'python':473,479,482 'python.python':511 'python3':477,497,506,599,649,682,721,854,934,1176,1219,1231,1243,1281,1292 'qualiti':1640 'quick':165 'random':1449 'ratio':176 'react':21,26,571,945,951,1046,1083,1110 'react-nat':950,1109 'react/next.js':1047 'read':797 'readabl':315 'readable-font-s':314 'real':880 'real-tim':879 'reason':597,622 'recommend':86,595,875,970,1028 'recomposit':1133 'reduc':284,289,1777 'reduced-mot':283 'refer':90,166,959 'request':520,543,1137 'requir':117,537,585,1152,1174 'rerend':1053 'research':1421 'reserv':294 'respect':1779 'respons':141,301,1080,1246,1748 'result':1304 'retriev':676,747,787 'return':631 'reveal':1320 'review':35,105,527 'right':1584,1594 'ring':185 'rout':1090,1093 'router':1099 'rule':118,623,704,770,821,827,1367,1384,1452,1503,1573 'rune':1101 'saa':46,546,971,1004,1311 'save':670 'scale':312,340,1413 'screen':400 'scroll':326,1756 'search':462,610,838,848,862,958,1208,1257,1315,1336,1359 'searchabl':80 'select':156,405,627 'semant':1062 'seren':659,1187 'serif':1235 'servic':654,978,1009,1156,1181 'session':678 'set':1654 'shadcn':954,1120 'shadcn/ui':30,1121 'shadow':1478 'shift':1416,1670 'simpl':1396,1425,1662 'size':232,317,1435,1448 'skeleton':399 'skill':517 'skill-ui-ux-pro-max' 'skills/ui-ux-pro-max/scripts/search.py':600,650,683,722,855,935,1177,1220,1232,1244,1282,1293 'slate':1531,1537,1547 'slow':1498 'smooth':1485,1697 'social':905,1022 'social-proof':904,1021 'soft':1161 'sourc':698 'source-deve1993' 'spa':652,660,1179,1188 'space':295,1572,1586,1739 'specif':463,713,718,741,753,918,1307,1352 'specifi':925 'spinner':402 'srcset':280 'ssr':1089 'stabl':1404 'stack':20,79,570,909,927,936,941,1072,1073,1164,1240,1248,1347 'start':587 'state':182,398,1084,1106,1117,1131,1406,1494,1665,1690,1702 'step':533,580,661,833,907,1149,1169,1203,1238 'stick':1587 'store':1102 'strategi':1014 'structur':899,1012 'style':11,62,155,158,404,408,411,418,555,616,636,867,869,871,979,981,1069,1157,1195,1326 'style-match':407 'sudo':500,503 'suffici':1713 'supplement':835,1205 'support':1269 'suspens':1051 'svelt':24,948,1100 'sveltekit':1103 'svg':427,1392,1423,1647 'swiftui':25,949,1104 'synthes':1253 'system':584,591,603,634,657,665,673,686,695,707,725,737,761,781,800,807,845,1173,1185,1192,1255,1267,1287,1298,1331 'sóc':1145 'tab':212 'tabl':453,455 'tailwind':29,579,914,932,939,944,1077,1078,1167,1251 'tap':240 'target':231,236 'technolog':78 'termin':1279 'test':1729 'testimoni':1019 'text':179,191,194,321,357,1526,1534,1541,1543,1711,1764 'theme':1119,1123,1672 'time':380,881,1317 'timelin':1031 'tip':1301 'tool':468 'top':1580,1590 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workspace' 'topic-anti-poisoning' 'topic-auto-learning-ai' 'topic-automation' 'topic-claude-code' 'topic-code-quality' 'topic-cursor' 'topic-developer-tools' 'topic-devops' 'touch':131,226,230,235 'touch-target-s':229 'transform':390,1414 'transform-perform':389 'transform/opacity':393 'transit':1409,1486,1489,1695 'transition-color':1488 'transpar':1525 'trend':1029 'tri':1363 'truth':700 'two':1270 'type':75,414,437,440,443,545,969,1003,1026,1154 'typographi':104,145,148,346,619,638,893,895,989,1197,1227,1237,1327 'ubuntu/debian':498 'ui':2,36,96,980,1370,1378,1402,1634 'ui-reasoning.csv':625 'ui-ux-pro-max':1 'ui/ux':6,47,521 'unprofession':1380 'updat':502 'use':31,220,241,278,352,381,392,416,426,447,461,465,515,778,824,846,860,963,1346,1391,1398,1407,1412,1429,1436,1487,1511,1519,1529,1535,1545,1550,1557,1565,1613,1643,1646,1671 'user':490,519,536,542,922,1136 'util':1079 'ux':3,70,108,129,134,138,143,153,883,886,888,1034,1213,1224,1335 'var':1679 'verifi':1636,1660 'version':478,480 'view':1105 'viewbox':1438 'viewport':304,330 'viewport-meta':303 'virtual':1063 'visibl':183,1556,1703,1720,1725 'visual':215,1382,1475,1639,1693 'vs':239 'vue':23,572,947,1094,1098 'vụ':1143 'w':1441,1617,1622 'waterfal':1049 'web':56,1055,1056 'webp':279 'websit':37 'well':653,1180 'white':1514,1522,1568 'widget':1116 'width':306,309,331,1612,1627 'width/height':395 'window':507 'winget':509 'work':522,748 'workflow':532,1135 'wrapper':1680 'z':333,338,1043,1339 'z-index':337,1042,1338 'z-index-manag':332","prices":[{"id":"5e292429-0968-4d48-a674-b6a167e6fdad","listingId":"16bb3121-cc68-4451-80ca-b4242d453bc2","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"deve1993","category":"Synapse","install_from":"skills.sh"},"createdAt":"2026-05-18T13:21:47.929Z"}],"sources":[{"listingId":"16bb3121-cc68-4451-80ca-b4242d453bc2","source":"github","sourceId":"deve1993/Synapse/ui-ux-pro-max","sourceUrl":"https://github.com/deve1993/Synapse/tree/main/skills/ui-ux-pro-max","isPrimary":false,"firstSeenAt":"2026-05-18T13:21:47.929Z","lastSeenAt":"2026-05-18T19:14:14.667Z"}],"details":{"listingId":"16bb3121-cc68-4451-80ca-b4242d453bc2","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"deve1993","slug":"ui-ux-pro-max","github":{"repo":"deve1993/Synapse","stars":7,"topics":["agent-skills","ai-agents","ai-coding","ai-workspace","anti-poisoning","auto-learning-ai","automation","claude-code","code-quality","cursor","developer-tools","devops","fullstack-development","multi-agent-systems","nextjs","opencode","persistent-memory","self-improving","telegram-bot"],"license":"other","html_url":"https://github.com/deve1993/Synapse","pushed_at":"2026-05-15T21:34:01Z","description":"Self-improving AI brain for Claude Code & Desktop — 28 MCP tools, 253 skills, collective memory, project tracking, work logs. One server, all your sessions share the same knowledge. Deploy on Coolify in 2 minutes.","skill_md_sha":"6b29081b97524d426eeb911ed2ad64c52473fca1","skill_md_path":"skills/ui-ux-pro-max/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/deve1993/Synapse/tree/main/skills/ui-ux-pro-max"},"layout":"multi","source":"github","category":"Synapse","frontmatter":{"name":"ui-ux-pro-max","description":"UI/UX design intelligence with 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Use when designing or reviewing UI: websites, dashboards, landing pages, admin panels, e-commerce, SaaS, mobile apps. Use when user asks to plan, build, design, implement, review, fix, improve, or check UI/UX code, color palette, typography, or accessibility. Covers glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode."},"skills_sh_url":"https://skills.sh/deve1993/Synapse/ui-ux-pro-max"},"updatedAt":"2026-05-18T19:14:14.667Z"}}