菜单
Third-party skill — design intelligence for professional UI/UX (the full style catalog, palettes, typography, UX guidelines). Generates tailored design systems via Python search scripts. Use when building, designing, or reviewing UI/UX, or when the user mentions ui-ux-pro-max or thirdparty-ui-ux-pro-max.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Run a PDCA quality audit on LLM/AI features: traces, prompts, costs, evals, grounding, hallucination. Use for "audit LLM", "check Langfuse", "audit prompts", "check AI quality", "audit AI costs", "check traces", "audit eval scores", "verify AI pipeline".
Audit visual UI coherency, design token compliance, and component modularity against a design system for any project. Auto-detects CSS framework (Tailwind v3/v4, CSS Modules, Styled Components), component library (shadcn, Radix, MUI, Chakra), and icon library. Uses playwright-cli for live visual verification, Firecrawl for current design system best practices, and Context7 for component library documentation. Use when reviewing design consistency, checking component modularity, auditing color/typography/spacing tokens, checking dark mode compliance, or when the user mentions design drift, UI inconsistency, design system compliance, visual coherency, token violations, or component architecture review. This skill focuses on VISUAL UI only — for UX evaluation (heuristics, content, interaction patterns, user flows), use the audit-ux skill instead.
Audit user experience quality using research-backed frameworks: Nielsen Norman Group's 10 usability heuristics, Intuit Content Design System for microcopy, Google's HEART metrics, and Laws of UX (Fitts's, Hick's, Miller's, Jakob's, cognitive load). Evaluates information architecture, user flows, error recovery, onboarding, content clarity, and interaction patterns. Uses playwright-cli for live walkthrough, Firecrawl for current NN/g research, and Sequential Thinking for complex flows. Generic — works with any webapp. Use when evaluating usability, reviewing user flows, auditing microcopy, checking UX heuristics, assessing cognitive load, reviewing onboarding, or when the user mentions UX audit, usability review, heuristic evaluation, content audit, interaction design review, or user flow analysis. Focuses on per-page EXPERIENCE — for visual design-system compliance (tokens, components, dark mode) use audit-uiux-design-system; for cross-page user-story/IA/journey audits use audit-ux-journeys.
Generative, NN/g-grounded page enhancement skill. Given a route, screen, or component, it produces concrete, design-system-compliant code changes that replace generic, AI-templated, or "stacked" UI with intelligent, context-aware layouts. Inventories the page's data domain and primitives FIRST, maps each pain point to a Nielsen Norman heuristic, then proposes the smallest change using an existing primitive (Badge, Button, Card, Tooltip, semantic token). Replaces empty cells with semantic data, fixes label-wrap/overflow at the helper level, and verifies live across viewports via playwright-cli. Use when the user says "enhance this page", "make /xxx better", "this page feels AI-generated", "fix UX of /xxx", "improve information density", "icons all look the same", or asks for any non-trivial UX improvement on a screen. Generic across stacks. For visual-token compliance use audit-uiux-design-system; for a heuristic report use audit-ux.
Close the PDCA loop on the work you just did. After implementing changes, drive the LIVE app on localhost through the playwright-cli like a real end user — manually, in a visible (headed) browser, clicking and typing one action at a time, NEVER through scripts or test runners — exercising every page, component, and flow the current session touched. Reproduce real user journeys, hunt for pain points, and FIX them as you go (full-stack: UI/UX + backend + DB), using already-enabled MCP servers (Sentry for production errors, Supabase for schema/logs/data, Firecrawl for research). Red-team your own work, give brutally honest critique, and suggest feature/UX improvements. Generic across any repo and stack. Use after building or changing a feature, or when the user says "test this with playwright", "test my changes", "test on localhost like a user", "PDCA this", "did you actually test it", "red-team this feature", or "verify the work end-to-end".
Generic webapp QA fallback — use only when no project-specific QA skill applies (project-local QA skills take precedence; use mobile-emulator-test for native builds). For unit tests use test-unit. Drives a visible (headed) browser manually through playwright-cli like a real user — clicking and typing one action at a time, never via scripts or test runners. Auto-discovers pages, entities, and auth from the codebase, generates user stories, performs real CRUD with data-pipeline verification (FE -> API -> DB -> FE), audits UX quality, tests edge cases, and produces a pass/fail report. Use when asked to "QA the app", "test the app", "find bugs", "run QA", "test CRUD", "smoke test", "check for dead buttons", or "test like a real user" AND no project-specific QA skill matches the repo.
| name | thirdparty-ui-ux-pro-max |
| description | Third-party skill — design intelligence for professional UI/UX (the full style catalog, palettes, typography, UX guidelines). Generates tailored design systems via Python search scripts. Use when building, designing, or reviewing UI/UX, or when the user mentions ui-ux-pro-max or thirdparty-ui-ux-pro-max. |
Third-party skill (upstream-maintained). See ATTRIBUTION.md.
Upstream: nextlevelbuilder/ui-ux-pro-max-skill · Local name:thirdparty-ui-ux-pro-max
Comprehensive design guide for web and mobile applications. Contains the full style catalog, 96 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 13 technology stacks. Searchable database with priority-based recommendations.
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
When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
Extract key information from user request:
html-tailwindAlways start with --design-system to get comprehensive recommendations with reasoning:
python3 ~/.cursor/skills/thirdparty-ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
This command:
ui-reasoning.csv to select best matchesExample:
python3 ~/.cursor/skills/thirdparty-ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
To save the design system for hierarchical retrieval across sessions, add --persist:
python3 ~/.cursor/skills/thirdparty-ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"
This creates:
design-system/MASTER.md — Global Source of Truth with all design rulesdesign-system/pages/ — Folder for page-specific overridesWith page-specific override:
python3 ~/.cursor/skills/thirdparty-ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
This also creates:
design-system/pages/dashboard.md — Page-specific deviations from MasterHow hierarchical retrieval works:
design-system/pages/checkout.mddesign-system/MASTER.md exclusivelyAfter getting the design system, use domain searches to get additional details:
python3 ~/.cursor/skills/thirdparty-ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
When to use detailed searches:
| Need | Domain | Example |
|---|---|---|
| More style options | style | --domain style "glassmorphism dark" |
| Chart recommendations | chart | --domain chart "real-time dashboard" |
| UX best practices | ux | --domain ux "animation accessibility" |
| Alternative fonts | typography | --domain typography "elegant luxury" |
| Landing structure | landing | --domain landing "hero social-proof" |
Get implementation-specific best practices. If user doesn't specify a stack, default to html-tailwind.
python3 ~/.cursor/skills/thirdparty-ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
Available stacks: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose
| 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 |
react | React/Next.js performance | waterfall, bundle, suspense, memo, rerender, cache |
web | Web interface guidelines | aria, focus, keyboard, semantic, virtualize |
prompt | AI prompts, CSS keywords | (style name) |
| 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 |
shadcn | shadcn/ui components, theming, forms, patterns |
jetpack-compose | Composables, Modifiers, State Hoisting, Recomposition |
User request: "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"
python3 ~/.cursor/skills/thirdparty-ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"
Output: Complete design system with pattern, style, colors, typography, effects, and anti-patterns.
# Get UX guidelines for animation and accessibility
python3 ~/.cursor/skills/thirdparty-ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux
# Get alternative typography options if needed
python3 ~/.cursor/skills/thirdparty-ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography
python3 ~/.cursor/skills/thirdparty-ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind
Then: Synthesize design system + detailed searches and implement the design.
The --design-system flag supports two output formats:
# ASCII box (default) - best for terminal display
python3 ~/.cursor/skills/thirdparty-ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
# Markdown - best for documentation
python3 ~/.cursor/skills/thirdparty-ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown
These are frequently overlooked issues that make UI look unprofessional:
| 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 |
| 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) |
| 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) |
| 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 |
Before delivering UI code, verify these items:
cursor-pointerprefers-reduced-motion respectedSource: nextlevelbuilder/ui-ux-pro-max-skill (MIT). Installed via uipro-cli in cursor_kenji as thirdparty-ui-ux-pro-max. See ATTRIBUTION.md.