[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EWV5ESCGDEVJ0ZPA9ES834":3,"skill-same:01M6EWV5ESCGDEVJ0ZPA9ES834":173},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":34,"publishedAt":55,"linkOnly":56,"markdownContent":57,"markdownBody":58,"frontMatter":59,"refName":60,"commitSha":61,"skillDirectory":62,"forksCount":63,"repositoryHtmlUrl":64,"repositoryHomepageUrl":65,"ownerHtmlUrl":66,"ownerBlogUrl":6,"ownerDescription":67,"updatedAt":68,"install":69,"resources":82},"01M6EWV5ESCGDEVJ0ZPA9ES834","ui-ux-pro-max",null,"UI\u002FUX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI\u002FUX 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.","ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",66,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fnextlevelbuilder\u002Fui-ux-pro-max\u002FSKILL.md",[18,23,26,29],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":30,"categoryName":31,"taxonomyType":32,"taxonomyTypeDesc":33},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54],"ux","ui","ui ux pro max","max","improve","palette","card","chart","app","tsx","fix","projects","plan","design","Tailwind","Charts","Animation","actions","create","react","2026-11-10 10:12:30",false,"---\r\nname: ui-ux-pro-max\r\ndescription: \"UI\u002FUX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI\u002FUX 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.\"\r\n---\r\n\r\n# UI\u002FUX Pro Max - Design Intelligence\r\n\r\nSearchable database of UI styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices.\r\n\r\n## Prerequisites\r\n\r\nCheck if Python is installed:\r\n\r\n```bash\r\npython3 --version || python --version\r\n```\r\n\r\nIf Python is not installed, install it based on user's OS:\r\n\r\n**macOS:**\r\n```bash\r\nbrew install python3\r\n```\r\n\r\n**Ubuntu\u002FDebian:**\r\n```bash\r\nsudo apt update && sudo apt install python3\r\n```\r\n\r\n**Windows:**\r\n```powershell\r\nwinget install Python.Python.3.12\r\n```\r\n\r\n---\r\n\r\n## How to Use This Skill\r\n\r\nWhen user requests UI\u002FUX work (design, build, create, implement, review, fix, improve), follow this workflow:\r\n\r\n### Step 1: Analyze User Requirements\r\n\r\nExtract key information from user request:\r\n- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.\r\n- **Style keywords**: minimal, playful, professional, elegant, dark mode, etc.\r\n- **Industry**: healthcare, fintech, gaming, education, etc.\r\n- **Stack**: React, Vue, Next.js, or default to `html-tailwind`\r\n\r\n### Step 2: Search Relevant Domains\r\n\r\nUse `search.py` multiple times to gather comprehensive information. Search until you have enough context.\r\n\r\n```bash\r\npython3 .claude\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"\u003Ckeyword>\" --domain \u003Cdomain> [-n \u003Cmax_results>]\r\n```\r\n\r\n**Recommended search order:**\r\n\r\n1. **Product** - Get style recommendations for product type\r\n2. **Style** - Get detailed style guide (colors, effects, frameworks)\r\n3. **Typography** - Get font pairings with Google Fonts imports\r\n4. **Color** - Get color palette (Primary, Secondary, CTA, Background, Text, Border)\r\n5. **Landing** - Get page structure (if landing page)\r\n6. **Chart** - Get chart recommendations (if dashboard\u002Fanalytics)\r\n7. **UX** - Get best practices and anti-patterns\r\n8. **Stack** - Get stack-specific guidelines (default: html-tailwind)\r\n\r\n### Step 3: Stack Guidelines (Default: html-tailwind)\r\n\r\nIf user doesn't specify a stack, **default to `html-tailwind`**.\r\n\r\n```bash\r\npython3 .claude\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"\u003Ckeyword>\" --stack html-tailwind\r\n```\r\n\r\nAvailable stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`\r\n\r\n---\r\n\r\n## Search Reference\r\n\r\n### Available Domains\r\n\r\n| Domain | Use For | Example Keywords |\r\n|--------|---------|------------------|\r\n| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |\r\n| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |\r\n| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |\r\n| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |\r\n| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |\r\n| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |\r\n| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |\r\n| `prompt` | AI prompts, CSS keywords | (style name) |\r\n\r\n### Available Stacks\r\n\r\n| Stack | Focus |\r\n|-------|-------|\r\n| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) |\r\n| `react` | State, hooks, performance, patterns |\r\n| `nextjs` | SSR, routing, images, API routes |\r\n| `vue` | Composition API, Pinia, Vue Router |\r\n| `svelte` | Runes, stores, SvelteKit |\r\n| `swiftui` | Views, State, Navigation, Animation |\r\n| `react-native` | Components, Navigation, Lists |\r\n| `flutter` | Widgets, State, Layout, Theming |\r\n\r\n---\r\n\r\n## Example Workflow\r\n\r\n**User request:** \"Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp\"\r\n\r\n**AI should:**\r\n\r\n```bash\r\n# 1. Search product type\r\npython3 .claude\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"beauty spa wellness service\" --domain product\r\n\r\n# 2. Search style (based on industry: beauty, elegant)\r\npython3 .claude\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"elegant minimal soft\" --domain style\r\n\r\n# 3. Search typography\r\npython3 .claude\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"elegant luxury\" --domain typography\r\n\r\n# 4. Search color palette\r\npython3 .claude\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"beauty spa wellness\" --domain color\r\n\r\n# 5. Search landing page structure\r\npython3 .claude\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"hero-centric social-proof\" --domain landing\r\n\r\n# 6. Search UX guidelines\r\npython3 .claude\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"animation\" --domain ux\r\npython3 .claude\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"accessibility\" --domain ux\r\n\r\n# 7. Search stack guidelines (default: html-tailwind)\r\npython3 .claude\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"layout responsive\" --stack html-tailwind\r\n```\r\n\r\n**Then:** Synthesize all search results and implement the design.\r\n\r\n---\r\n\r\n## Tips for Better Results\r\n\r\n1. **Be specific with keywords** - \"healthcare SaaS dashboard\" > \"app\"\r\n2. **Search multiple times** - Different keywords reveal different insights\r\n3. **Combine domains** - Style + Typography + Color = Complete design system\r\n4. **Always check UX** - Search \"animation\", \"z-index\", \"accessibility\" for common issues\r\n5. **Use stack flag** - Get implementation-specific best practices\r\n6. **Iterate** - If first search doesn't match, try different keywords\r\n\r\n---\r\n\r\n## Common Rules for Professional UI\r\n\r\nThese are frequently overlooked issues that make UI look unprofessional:\r\n\r\n### Icons & Visual Elements\r\n\r\n| Rule | Do | Don't |\r\n|------|----|----- |\r\n| **No emoji icons** | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like ? ? ⚙️ as UI icons |\r\n| **Stable hover states** | Use color\u002Fopacity transitions on hover | Use scale transforms that shift layout |\r\n| **Correct brand logos** | Research official SVG from Simple Icons | Guess or use incorrect logo paths |\r\n| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly |\r\n\r\n### Interaction & Cursor\r\n\r\n| Rule | Do | Don't |\r\n|------|----|----- |\r\n| **Cursor pointer** | Add `cursor-pointer` to all clickable\u002Fhoverable cards | Leave default cursor on interactive elements |\r\n| **Hover feedback** | Provide visual feedback (color, shadow, border) | No indication element is interactive |\r\n| **Smooth transitions** | Use `transition-colors duration-200` | Instant state changes or too slow (>500ms) |\r\n\r\n### Light\u002FDark Mode Contrast\r\n\r\n| Rule | Do | Don't |\r\n|------|----|----- |\r\n| **Glass card light mode** | Use `bg-white\u002F80` or higher opacity | Use `bg-white\u002F10` (too transparent) |\r\n| **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text |\r\n| **Muted text light** | Use `#475569` (slate-600) minimum | Use gray-400 or lighter |\r\n| **Border visibility** | Use `border-gray-200` in light mode | Use `border-white\u002F10` (invisible) |\r\n\r\n### Layout & Spacing\r\n\r\n| Rule | Do | Don't |\r\n|------|----|----- |\r\n| **Floating navbar** | Add `top-4 left-4 right-4` spacing | Stick navbar to `top-0 left-0 right-0` |\r\n| **Content padding** | Account for fixed navbar height | Let content hide behind fixed elements |\r\n| **Consistent max-width** | Use same `max-w-6xl` or `max-w-7xl` | Mix different container widths |\r\n\r\n---\r\n\r\n## Pre-Delivery Checklist\r\n\r\nBefore delivering UI code, verify these items:\r\n\r\n### Visual Quality\r\n- [ ] No emojis used as icons (use SVG instead)\r\n- [ ] All icons from consistent icon set (Heroicons\u002FLucide)\r\n- [ ] Brand logos are correct (verified from Simple Icons)\r\n- [ ] Hover states don't cause layout shift\r\n- [ ] Use theme colors directly (bg-primary) not var() wrapper\r\n\r\n### Interaction\r\n- [ ] All clickable elements have `cursor-pointer`\r\n- [ ] Hover states provide clear visual feedback\r\n- [ ] Transitions are smooth (150-300ms)\r\n- [ ] Focus states visible for keyboard navigation\r\n\r\n### Light\u002FDark Mode\r\n- [ ] Light mode text has sufficient contrast (4.5:1 minimum)\r\n- [ ] Glass\u002Ftransparent elements visible in light mode\r\n- [ ] Borders visible in both modes\r\n- [ ] Test both modes before delivery\r\n\r\n### Layout\r\n- [ ] Floating elements have proper spacing from edges\r\n- [ ] No content hidden behind fixed navbars\r\n- [ ] Responsive at 320px, 768px, 1024px, 1440px\r\n- [ ] No horizontal scroll on mobile\r\n\r\n### Accessibility\r\n- [ ] All images have alt text\r\n- [ ] Form inputs have labels\r\n- [ ] Color is not the only indicator\r\n- [ ] `prefers-reduced-motion` respected\r\n","# UI\u002FUX Pro Max - Design Intelligence\r\n\r\nSearchable database of UI styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices.\r\n\r\n## Prerequisites\r\n\r\nCheck if Python is installed:\r\n\r\n```bash\r\npython3 --version || python --version\r\n```\r\n\r\nIf Python is not installed, install it based on user's OS:\r\n\r\n**macOS:**\r\n```bash\r\nbrew install python3\r\n```\r\n\r\n**Ubuntu\u002FDebian:**\r\n```bash\r\nsudo apt update && sudo apt install python3\r\n```\r\n\r\n**Windows:**\r\n```powershell\r\nwinget install Python.Python.3.12\r\n```\r\n\r\n---\r\n\r\n## How to Use This Skill\r\n\r\nWhen user requests UI\u002FUX work (design, build, create, implement, review, fix, improve), follow this workflow:\r\n\r\n### Step 1: Analyze User Requirements\r\n\r\nExtract key information from user request:\r\n- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.\r\n- **Style keywords**: minimal, playful, professional, elegant, dark mode, etc.\r\n- **Industry**: healthcare, fintech, gaming, education, etc.\r\n- **Stack**: React, Vue, Next.js, or default to `html-tailwind`\r\n\r\n### Step 2: Search Relevant Domains\r\n\r\nUse `search.py` multiple times to gather comprehensive information. Search until you have enough context.\r\n\r\n```bash\r\npython3 .claude\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"\u003Ckeyword>\" --domain \u003Cdomain> [-n \u003Cmax_results>]\r\n```\r\n\r\n**Recommended search order:**\r\n\r\n1. **Product** - Get style recommendations for product type\r\n2. **Style** - Get detailed style guide (colors, effects, frameworks)\r\n3. **Typography** - Get font pairings with Google Fonts imports\r\n4. **Color** - Get color palette (Primary, Secondary, CTA, Background, Text, Border)\r\n5. **Landing** - Get page structure (if landing page)\r\n6. **Chart** - Get chart recommendations (if dashboard\u002Fanalytics)\r\n7. **UX** - Get best practices and anti-patterns\r\n8. **Stack** - Get stack-specific guidelines (default: html-tailwind)\r\n\r\n### Step 3: Stack Guidelines (Default: html-tailwind)\r\n\r\nIf user doesn't specify a stack, **default to `html-tailwind`**.\r\n\r\n```bash\r\npython3 .claude\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"\u003Ckeyword>\" --stack html-tailwind\r\n```\r\n\r\nAvailable stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`\r\n\r\n---\r\n\r\n## Search Reference\r\n\r\n### Available Domains\r\n\r\n| Domain | Use For | Example Keywords |\r\n|--------|---------|------------------|\r\n| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |\r\n| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |\r\n| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |\r\n| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |\r\n| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |\r\n| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |\r\n| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |\r\n| `prompt` | AI prompts, CSS keywords | (style name) |\r\n\r\n### Available Stacks\r\n\r\n| Stack | Focus |\r\n|-------|-------|\r\n| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) |\r\n| `react` | State, hooks, performance, patterns |\r\n| `nextjs` | SSR, routing, images, API routes |\r\n| `vue` | Composition API, Pinia, Vue Router |\r\n| `svelte` | Runes, stores, SvelteKit |\r\n| `swiftui` | Views, State, Navigation, Animation |\r\n| `react-native` | Components, Navigation, Lists |\r\n| `flutter` | Widgets, State, Layout, Theming |\r\n\r\n---\r\n\r\n## Example Workflow\r\n\r\n**User request:** \"Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp\"\r\n\r\n**AI should:**\r\n\r\n```bash\r\n# 1. Search product type\r\npython3 .claude\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"beauty spa wellness service\" --domain product\r\n\r\n# 2. Search style (based on industry: beauty, elegant)\r\npython3 .claude\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"elegant minimal soft\" --domain style\r\n\r\n# 3. Search typography\r\npython3 .claude\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"elegant luxury\" --domain typography\r\n\r\n# 4. Search color palette\r\npython3 .claude\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"beauty spa wellness\" --domain color\r\n\r\n# 5. Search landing page structure\r\npython3 .claude\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"hero-centric social-proof\" --domain landing\r\n\r\n# 6. Search UX guidelines\r\npython3 .claude\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"animation\" --domain ux\r\npython3 .claude\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"accessibility\" --domain ux\r\n\r\n# 7. Search stack guidelines (default: html-tailwind)\r\npython3 .claude\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"layout responsive\" --stack html-tailwind\r\n```\r\n\r\n**Then:** Synthesize all search results and implement the design.\r\n\r\n---\r\n\r\n## Tips for Better Results\r\n\r\n1. **Be specific with keywords** - \"healthcare SaaS dashboard\" > \"app\"\r\n2. **Search multiple times** - Different keywords reveal different insights\r\n3. **Combine domains** - Style + Typography + Color = Complete design system\r\n4. **Always check UX** - Search \"animation\", \"z-index\", \"accessibility\" for common issues\r\n5. **Use stack flag** - Get implementation-specific best practices\r\n6. **Iterate** - If first search doesn't match, try different keywords\r\n\r\n---\r\n\r\n## Common Rules for Professional UI\r\n\r\nThese are frequently overlooked issues that make UI look unprofessional:\r\n\r\n### Icons & Visual Elements\r\n\r\n| Rule | Do | Don't |\r\n|------|----|----- |\r\n| **No emoji icons** | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like ? ? ⚙️ as UI icons |\r\n| **Stable hover states** | Use color\u002Fopacity transitions on hover | Use scale transforms that shift layout |\r\n| **Correct brand logos** | Research official SVG from Simple Icons | Guess or use incorrect logo paths |\r\n| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly |\r\n\r\n### Interaction & Cursor\r\n\r\n| Rule | Do | Don't |\r\n|------|----|----- |\r\n| **Cursor pointer** | Add `cursor-pointer` to all clickable\u002Fhoverable cards | Leave default cursor on interactive elements |\r\n| **Hover feedback** | Provide visual feedback (color, shadow, border) | No indication element is interactive |\r\n| **Smooth transitions** | Use `transition-colors duration-200` | Instant state changes or too slow (>500ms) |\r\n\r\n### Light\u002FDark Mode Contrast\r\n\r\n| Rule | Do | Don't |\r\n|------|----|----- |\r\n| **Glass card light mode** | Use `bg-white\u002F80` or higher opacity | Use `bg-white\u002F10` (too transparent) |\r\n| **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text |\r\n| **Muted text light** | Use `#475569` (slate-600) minimum | Use gray-400 or lighter |\r\n| **Border visibility** | Use `border-gray-200` in light mode | Use `border-white\u002F10` (invisible) |\r\n\r\n### Layout & Spacing\r\n\r\n| Rule | Do | Don't |\r\n|------|----|----- |\r\n| **Floating navbar** | Add `top-4 left-4 right-4` spacing | Stick navbar to `top-0 left-0 right-0` |\r\n| **Content padding** | Account for fixed navbar height | Let content hide behind fixed elements |\r\n| **Consistent max-width** | Use same `max-w-6xl` or `max-w-7xl` | Mix different container widths |\r\n\r\n---\r\n\r\n## Pre-Delivery Checklist\r\n\r\nBefore delivering UI code, verify these items:\r\n\r\n### Visual Quality\r\n- [ ] No emojis used as icons (use SVG instead)\r\n- [ ] All icons from consistent icon set (Heroicons\u002FLucide)\r\n- [ ] Brand logos are correct (verified from Simple Icons)\r\n- [ ] Hover states don't cause layout shift\r\n- [ ] Use theme colors directly (bg-primary) not var() wrapper\r\n\r\n### Interaction\r\n- [ ] All clickable elements have `cursor-pointer`\r\n- [ ] Hover states provide clear visual feedback\r\n- [ ] Transitions are smooth (150-300ms)\r\n- [ ] Focus states visible for keyboard navigation\r\n\r\n### Light\u002FDark Mode\r\n- [ ] Light mode text has sufficient contrast (4.5:1 minimum)\r\n- [ ] Glass\u002Ftransparent elements visible in light mode\r\n- [ ] Borders visible in both modes\r\n- [ ] Test both modes before delivery\r\n\r\n### Layout\r\n- [ ] Floating elements have proper spacing from edges\r\n- [ ] No content hidden behind fixed navbars\r\n- [ ] Responsive at 320px, 768px, 1024px, 1440px\r\n- [ ] No horizontal scroll on mobile\r\n\r\n### Accessibility\r\n- [ ] All images have alt text\r\n- [ ] Form inputs have labels\r\n- [ ] Color is not the only indicator\r\n- [ ] `prefers-reduced-motion` respected\r\n",{"name":5,"description":7},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Faiskillstore\u002Fmarketplace\u002Fnextlevelbuilder\u002Fui-ux-pro-max",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":8,"skillName":5,"commands":70,"prompt":80,"zipAvailable":81},[71,74,77],{"tool":72,"command":73},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill ui-ux-pro-max",{"tool":75,"command":76},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill ui-ux-pro-max",{"tool":78,"command":79},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill ui-ux-pro-max","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fnextlevelbuilder\u002Fui-ux-pro-max\u002FSKILL.md",true,[83,89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,163,167],{"path":84,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":87,"sourceHtmlUrl":88},"data\u002Fcharts.csv","ASSET","资产文件",7680,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fnextlevelbuilder\u002Fui-ux-pro-max\u002Fdata\u002Fcharts.csv",{"path":90,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":91,"sourceHtmlUrl":92},"data\u002Fcolors.csv",13023,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fnextlevelbuilder\u002Fui-ux-pro-max\u002Fdata\u002Fcolors.csv",{"path":94,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":95,"sourceHtmlUrl":96},"data\u002Flanding.csv",14372,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fnextlevelbuilder\u002Fui-ux-pro-max\u002Fdata\u002Flanding.csv",{"path":98,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":99,"sourceHtmlUrl":100},"data\u002Fproducts.csv",29790,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fnextlevelbuilder\u002Fui-ux-pro-max\u002Fdata\u002Fproducts.csv",{"path":102,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":103,"sourceHtmlUrl":104},"data\u002Fprompts.csv",17421,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fnextlevelbuilder\u002Fui-ux-pro-max\u002Fdata\u002Fprompts.csv",{"path":106,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":107,"sourceHtmlUrl":108},"data\u002Fstacks\u002Fflutter.csv",10469,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fnextlevelbuilder\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fflutter.csv",{"path":110,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":111,"sourceHtmlUrl":112},"data\u002Fstacks\u002Fhtml-tailwind.csv",11361,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fnextlevelbuilder\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fhtml-tailwind.csv",{"path":114,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":115,"sourceHtmlUrl":116},"data\u002Fstacks\u002Fnextjs.csv",12546,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fnextlevelbuilder\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fnextjs.csv",{"path":118,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":119,"sourceHtmlUrl":120},"data\u002Fstacks\u002Fnuxt-ui.csv",14010,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fnextlevelbuilder\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fnuxt-ui.csv",{"path":122,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":123,"sourceHtmlUrl":124},"data\u002Fstacks\u002Fnuxtjs.csv",16539,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fnextlevelbuilder\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fnuxtjs.csv",{"path":126,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":127,"sourceHtmlUrl":128},"data\u002Fstacks\u002Freact-native.csv",10035,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fnextlevelbuilder\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Freact-native.csv",{"path":130,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":131,"sourceHtmlUrl":132},"data\u002Fstacks\u002Freact.csv",13016,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fnextlevelbuilder\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Freact.csv",{"path":134,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":135,"sourceHtmlUrl":136},"data\u002Fstacks\u002Fsvelte.csv",11063,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fnextlevelbuilder\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fsvelte.csv",{"path":138,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":139,"sourceHtmlUrl":140},"data\u002Fstacks\u002Fswiftui.csv",10872,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fnextlevelbuilder\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fswiftui.csv",{"path":142,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":143,"sourceHtmlUrl":144},"data\u002Fstacks\u002Fvue.csv",11056,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fnextlevelbuilder\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fvue.csv",{"path":146,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":147,"sourceHtmlUrl":148},"data\u002Fstyles.csv",40970,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fnextlevelbuilder\u002Fui-ux-pro-max\u002Fdata\u002Fstyles.csv",{"path":150,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":151,"sourceHtmlUrl":152},"data\u002Ftypography.csv",31878,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fnextlevelbuilder\u002Fui-ux-pro-max\u002Fdata\u002Ftypography.csv",{"path":154,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":155,"sourceHtmlUrl":156},"data\u002Fux-guidelines.csv",18766,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fnextlevelbuilder\u002Fui-ux-pro-max\u002Fdata\u002Fux-guidelines.csv",{"path":158,"resourceType":159,"resourceTypeDesc":160,"sizeBytes":161,"sourceHtmlUrl":162},"scripts\u002Fcore.py","SCRIPT","脚本",9111,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fnextlevelbuilder\u002Fui-ux-pro-max\u002Fscripts\u002Fcore.py",{"path":164,"resourceType":159,"resourceTypeDesc":160,"sizeBytes":165,"sourceHtmlUrl":166},"scripts\u002Fsearch.py",2394,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fnextlevelbuilder\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py",{"path":168,"resourceType":169,"resourceTypeDesc":170,"sizeBytes":171,"sourceHtmlUrl":172},"skill-report.json","REFERENCE","参考文档",13908,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fnextlevelbuilder\u002Fui-ux-pro-max\u002Fskill-report.json",[174,184,194,203,209,216],{"skillNo":175,"name":176,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":177,"categories":178,"keywords":180,"publishedAt":55},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[179],{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},[181,182,183],"model","model hierarchy","model hierarchy skill",{"skillNo":185,"name":186,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":187,"categories":188,"keywords":190,"publishedAt":55},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[189],{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},[191,192,193],"MCP","zoom","zoom mcp",{"skillNo":195,"name":196,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":197,"categories":198,"keywords":199,"publishedAt":55},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[200,201,202,192],"sdk","zoom apps sdk","apps",{"skillNo":204,"name":205,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":206,"categories":207,"keywords":208,"publishedAt":55},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[205],{"skillNo":210,"name":211,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":212,"categories":213,"keywords":215,"publishedAt":55},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[214],{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},[211],{"skillNo":217,"name":218,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":219,"categories":220,"keywords":221,"publishedAt":55},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[218]]