--- title: "ui-ux-pro-max by likaia · skilld" canonical_url: "https://skilld.dev/gh/likaia/nginxpulse" meta: description: "Provides a searchable database of UI styles, color palettes, font pairings, and stack-specific guidelines that an AI agent queries during design work on websites, dashboards,… From likaia/nginxpulse." "og:description": "Provides a searchable database of UI styles, color palettes, font pairings, and stack-specific guidelines that an AI agent queries during design work on websites, dashboards,… From likaia/nginxpulse." "og:title": "ui-ux-pro-max by likaia" "twitter:description": "Provides a searchable database of UI styles, color palettes, font pairings, and stack-specific guidelines that an AI agent queries during design work on websites, dashboards,… From likaia/nginxpulse." "twitter:title": "ui-ux-pro-max by likaia" --- ` [All skills](https://skilld.dev/skills) [![likaia avatar](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Flikaia.png%3Fsize%3D96)](https://skilld.dev/gh/likaia) # **/ui-ux-pro-max** [@3e0eb31](https://github.com/likaia/nginxpulse/commit/3e0eb3115bd7aea76046bec33a4fc67aecea2ad8 "Your agent reads SKILL.md at commit 3e0eb31") by [likai](https://skilld.dev/gh/likaia)· [likaia](https://skilld.dev/gh/likaia)/ [nginxpulse](https://skilld.dev/gh/likaia/nginxpulse)·2.7k stars 206 UI/UX 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/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. - 1 file - 8.1 KB - Updated 9 months ago - [GitHub](https://github.com/likaia/nginxpulse/blob/3e0eb3115bd7aea76046bec33a4fc67aecea2ad8/.codex/skills/ui-ux-pro-max/SKILL.md "View SKILL.md on GitHub") - [1 alert](#third-party-checks "Third-party checks: 1 alert · 4 checks · Risk HIGH") ## SKILL.md 8.1 KB **≈187** tokens always: the name and description. **≈1.9k** when used: this file. ## UI/UX Pro Max - Design Intelligence Searchable database of UI styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices. ### Prerequisites Check if Python is installed: ``` python3 --version || python --version ``` If Python is not installed, install it based on user's OS: **macOS:** ``` brew install python3 ``` **Ubuntu/Debian:** ``` sudo apt update && sudo apt install python3 ``` **Windows:** ``` winget install Python.Python.3.12 ``` --- ### How to Use This Skill When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow: #### Step 1: Analyze User Requirements Extract key information from user request: - **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc. - **Style keywords**: minimal, playful, professional, elegant, dark mode, etc. - **Industry**: healthcare, fintech, gaming, education, etc. - **Stack**: React, Vue, Next.js, or default to `html-tailwind` #### Step 2: Search Relevant Domains Use `search.py` multiple times to gather comprehensive information. Search until you have enough context. ``` python3 .shared/ui-ux-pro-max/scripts/search.py "" --domain [-n ] ``` **Recommended search order:** 1. **Product** - Get style recommendations for product type 2. **Style** - Get detailed style guide (colors, effects, frameworks) 3. **Typography** - Get font pairings with Google Fonts imports 4. **Color** - Get color palette (Primary, Secondary, CTA, Background, Text, Border) 5. **Landing** - Get page structure (if landing page) 6. **Chart** - Get chart recommendations (if dashboard/analytics) 7. **UX** - Get best practices and anti-patterns 8. **Stack** - Get stack-specific guidelines (default: html-tailwind) #### Step 3: Stack Guidelines (Default: html-tailwind) If user doesn't specify a stack, **default to `html-tailwind`**. ``` python3 .shared/ui-ux-pro-max/scripts/search.py "" --stack html-tailwind ``` Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter` --- ### Search Reference #### Available Domains | Domain | Use For | Example Keywords | | --- | --- | --- | | `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service | | `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism | | `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern | | `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service | | `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof | | `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie | | `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading | | `prompt` | AI prompts, CSS keywords | (style name) | #### Available Stacks | Stack | Focus | | --- | --- | | `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) | | `react` | State, hooks, performance, patterns | | `nextjs` | SSR, routing, images, API routes | | `vue` | Composition API, Pinia, Vue Router | | `svelte` | Runes, stores, SvelteKit | | `swiftui` | Views, State, Navigation, Animation | | `react-native` | Components, Navigation, Lists | | `flutter` | Widgets, State, Layout, Theming | --- ### Example Workflow **User request:** "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp" **AI should:** ``` # 1. Search product type python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product # 2. Search style (based on industry: beauty, elegant) python3 .shared/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style # 3. Search typography python3 .shared/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography # 4. Search color palette python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color # 5. Search landing page structure python3 .shared/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing # 6. Search UX guidelines python3 .shared/ui-ux-pro-max/scripts/search.py "animation" --domain ux python3 .shared/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux # 7. Search stack guidelines (default: html-tailwind) python3 .shared/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind ``` **Then:** Synthesize all search results and implement the design. --- ### Tips for Better Results 1. **Be specific with keywords** - "healthcare SaaS dashboard" > "app" 2. **Search multiple times** - Different keywords reveal different insights 3. **Combine domains** - Style + Typography + Color = Complete design system 4. **Always check UX** - Search "animation", "z-index", "accessibility" for common issues 5. **Use stack flag** - Get implementation-specific best practices 6. **Iterate** - If first search doesn't match, try different keywords 7. **Split Into Multiple Files** - For better maintainability: - Separate components into individual files (e.g., `Header.tsx`, `Footer.tsx`) - Extract reusable styles into dedicated files - Keep each file focused and under 200-300 lines --- ### Common Rules for Professional UI These are frequently overlooked issues that make UI look unprofessional: #### Icons & Visual Elements | Rule | Do | Don't | | --- | --- | --- | | **No emoji icons** | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons | | **Stable hover states** | Use color/opacity transitions on hover | Use scale transforms that shift layout | | **Correct brand logos** | Research official SVG from Simple Icons | Guess or use incorrect logo paths | | **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly | #### Interaction & Cursor | Rule | Do | Don't | | --- | --- | --- | | **Cursor pointer** | Add `cursor-pointer` to all clickable/hoverable cards | Leave default cursor on interactive elements | | **Hover feedback** | Provide visual feedback (color, shadow, border) | No indication element is interactive | | **Smooth transitions** | Use `transition-colors duration-200` | Instant state changes or too slow (>500ms) | #### Light/Dark Mode Contrast | Rule | Do | Don't | | --- | --- | --- | | **Glass card light mode** | Use `bg-white/80` or higher opacity | Use `bg-white/10` (too transparent) | | **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text | | **Muted text light** | Use `#475569` (slate-600) minimum | Use gray-400 or lighter | | **Border visibility** | Use `border-gray-200` in light mode | Use `border-white/10` (invisible) | #### Layout & Spacing | Rule | Do | Don't | | --- | --- | --- | | **Floating navbar** | Add `top-4 left-4 right-4` spacing | Stick navbar to `top-0 left-0 right-0` | | **Content padding** | Account for fixed navbar height | Let content hide behind fixed elements | | **Consistent max-width** | Use same `max-w-6xl` or `max-w-7xl` | Mix different container widths | --- ### Pre-Delivery Checklist Before delivering UI code, verify these items: #### Visual Quality - No emojis used as icons (use SVG instead) - All icons from consistent icon set (Heroicons/Lucide) Source: [SKILL.md on GitHub](https://github.com/likaia/nginxpulse/blob/3e0eb3115bd7aea76046bec33a4fc67aecea2ad8/.codex/skills/ui-ux-pro-max/SKILL.md) ## Third-party checks
1 alert16d4 checks · Risk HIGH - Gen Agent Trust Hub16d The skill facilitates UI/UX design intelligence but introduces significant security risks through its execution patterns. It provides instructions that include 'sudo' for system package management, posing a privilege escalation risk. More critically, the skill workflow interpolates user-controlled keywords directly into shell commands when executing a local search script, creating a path for command injection attacks if the input is malicious. - Socket16d No alerts - Snyk16d Risk: LOW · No issues - Runlayer7mo 1 file scanned · No issues
## Provenance [Signed by skilld at 3e0eb31.](https://github.com/likaia/nginxpulse/commit/3e0eb3115bd7aea76046bec33a4fc67aecea2ad8 "3e0eb3115bd7aea76046bec33a4fc67aecea2ad8") This ties the file your Agent reads to that commit on GitHub. It does not review the instructions. Last checked against GitHub 4 months ago. Steadyupdated 9 months ago ## Topics - [React](https://skilld.dev/frameworks/react "React components, hooks, state mgmt") - [Next.js](https://skilld.dev/frameworks/nextjs "Next.js app router, server components, routing") - [Vue](https://skilld.dev/frameworks/vue "Vue components, composables, reactivity") - ui-design - ux - tailwind - svelte - color-palette - typography - accessibility ## README badge ![README badge for likaia/nginxpulse](https://skilld.dev/b/likaia/nginxpulse?theme=light&label=0) ## What it does Provides a searchable database of UI styles, color palettes, font pairings, and stack-specific guidelines that an AI agent queries during design work on websites, dashboards, landing pages, and mobile apps. Covers 50 styles (glassmorphism, minimalism, brutalism, etc.), 21 color palettes, and 8 implementation stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Generated from the current SKILL.md. ## Frequently asked
What frameworks and stacks does this skill support? The skill supports 8 stacks: React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, and html-tailwind (the default). You can specify a stack via the --stack flag when searching.
How does this skill work — what does it actually do? It provides a searchable database of UI styles, color palettes, font pairings, chart types, and UX guidelines. You call search.py with keywords and a domain (product, style, typography, color, landing, chart, ux, or prompt) to retrieve design recommendations for your project type.
Does this skill generate code or just design recommendations? It retrieves design intelligence and guidelines; you then synthesize the results and implement the code yourself. The skill provides the reference data, not a code generator.
What project types does this skill cover? It covers websites, landing pages, dashboards, admin panels, e-commerce, SaaS, portfolios, blogs, mobile apps, and HTML/TSX/Vue/Svelte single files.
Do I need to install any dependencies? You need Python 3 installed. The skill uses a search.py script that queries the UI/UX database locally.
Generated from the current SKILL.md. These answers refresh after source changes. ## Related skills - - - - - -