thirdparty-ui-ux-pro-max

Stars6

Forks0

UpdatedJuly 18, 2026 at 04:17

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.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Source

kensaurus

kensaurus/cursor-kenji

View GitHub Repository View Creator Repositories

Download

Related occupationsSOC

Based on SOC occupation classification

Web and Digital Interface DesignersComputer and Mathematical Occupations·SOC 15-1255

File Explorer

29 files

SKILL.md

readonly

More from this repository

same repository

audit-ux-journeys

kensaurus/cursor-kenji

Cross-page UX audit for user stories, task completion, and information architecture — the layer audit-ux (per-page heuristics) doesn't cover. Derives real user stories from routes/nav/CTAs (not invented personas), scopes depth by audit trigger (KPIs dropping / complaints / redesign / pre-launch), audits IA structurally (click depth, orphan pages, dead ends, label consistency, grouping vs mental model, findability/first-click), then walks every core story end-to-end in a headed browser producing a task-completion matrix with friction logs. Evidence-disciplined: validates with analytics/funnels/drop-offs when available, otherwise marks findings as expert-judgment hypotheses — never presents taste as data. Reports impact×effort quick-wins vs roadmap. Use when "audit user flows", "user story audit", "information architecture / IA audit", "can users find X", "users get lost", "navigation audit", "funnel drop-off", "task completion", or "audit-ux-journeys". Per-page heuristics/microcopy stay with audit-ux.

2026-07-256

audit-ux

kensaurus/cursor-kenji

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 browser MCP 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.

2026-07-256

audit-payment-system

kensaurus/cursor-kenji

Read-only audit for payment/money-movement systems, scope-gated so a simple Stripe-Checkout site and an in-house ledger/gateway each see only relevant findings. Checks the things that lose money or trigger PCI liability: idempotency on every mutation (double-charge on retry), double-entry append-only ledger, payment state machine (no double-capture), sync-auth vs async-webhook flow, HMAC + event-id webhook dedup, 3-way reconciliation vs PSP settlement, fraud/velocity + 3DS/SCA, multi-currency in minor units, PCI DSS v4.0.1 (never log PAN, tokens only, key rotation), and resilience (PSP timeout, partial ledger write, breaker). Uses the Stripe MCP for version-anchored provider checks when the PSP is Stripe. Use when "audit payment system", "payment gateway audit", "double charge / idempotency", "ledger / reconciliation", "webhook / 3DS / PCI", or "audit-payment-system". Defers per-call resilience to audit-resilience, PCI/secrets to audit-security, ledger schema to audit-db-schema.

2026-07-246

backend-patterns

kensaurus/cursor-kenji

Apply modern backend patterns — auth middleware, caching strategies, background queues, rate limiting, and serverless/edge function design — across stacks (examples use Next.js, Node, and Supabase; adapts to your detected ecosystem). Use when the user says "backend architecture", "queue jobs", "caching layer", "rate limiting", "server actions", "edge function", "microservices", "authentication pattern", "circuit breaker", "outbox pattern", "saga", "bulkhead", "hexagonal architecture", "API gateway", or "BFF" (see references/architecture-patterns.md for the distributed-systems patterns). Pairs with design-api, audit-security, backend-realtime, and audit-backend-architecture (the read-only gap report). Do NOT use for database schema design (audit-db-schema) or pure frontend work.

2026-07-246

audit-backend-architecture

kensaurus/cursor-kenji

Read-only audit AND decision advisor for backend/distributed-systems architecture, topology-gated so a Next.js/Supabase monolith and a Kubernetes fleet each see only relevant findings. Reports which patterns are present (maturity matrix, file:line), then — following "start simple, earn every pattern" — recommends which to adopt now, adopt-when-[trigger], or defer as premature, flagging over-engineering and the distributed-monolith anti-pattern. Covers sync request/response vs event-driven, cache-aside, database-per-service, API gateway, BFF, circuit breaker, bulkhead, outbox + CDC, saga, CQRS, hexagonal, strangler-fig, service mesh, cell-based, mTLS, tracing + SLOs, contract testing. Use when "audit backend architecture", "which pattern should I use", "am I over-engineering", "sync vs event-driven", "cache-aside/CQRS/saga/db-per-service", "microservices resilience review", or "audit-backend-architecture". Defers per-call resilience to audit-resilience; fixes via backend-patterns.

2026-07-246

audit-cicd

kensaurus/cursor-kenji

Audit CI/CD pipelines (GitHub Actions) for cost, speed, and safety. Use when the GitHub Actions bill is high, when the user mentions Actions minutes, runner cost, workflow cost, slow CI, artifact/cache storage, or wants a CI/CD / workflow audit. Finds double-billing triggers, missing concurrency, macOS/large runners on push, missing path filters, long artifact retention, and doomed jobs — then proposes fixes that never delete tests or break deploys.

2026-07-236

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.

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.

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: Generate Design System (REQUIRED)

Always 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:

Searches 5 domains in parallel (product, style, color, landing, typography)
Applies reasoning rules from ui-reasoning.csv to select best matches
Returns complete design system: pattern, style, colors, typography, effects
Includes anti-patterns to avoid

Example:

python3 ~/.cursor/skills/thirdparty-ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"

Step 2b: Persist Design System (Master + Overrides Pattern)

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 rules
design-system/pages/ — Folder for page-specific overrides

With 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 Master

How hierarchical retrieval works:

When building a specific page (e.g., "Checkout"), first check design-system/pages/checkout.md
If the page file exists, its rules override the Master file
If not, use design-system/MASTER.md exclusively

Step 3: Supplement with Detailed Searches (as needed)

After 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"`

Step 4: Stack Guidelines (Default: html-tailwind)

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

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
`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)

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
`shadcn`	shadcn/ui components, theming, forms, patterns
`jetpack-compose`	Composables, Modifiers, State Hoisting, Recomposition

Example Workflow

User request: "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"

Step 1: Analyze Requirements

Product type: Beauty/Spa service
Style keywords: elegant, professional, soft
Industry: Beauty/Wellness
Stack: html-tailwind (default)

Step 2: Generate Design System (REQUIRED)

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.

Step 3: Supplement with Detailed Searches (as needed)

# 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

Step 4: Stack Guidelines

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.

Output Formats

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

Tips for Better Results

Be specific with keywords - "healthcare SaaS dashboard" > "app"
Search multiple times - Different keywords reveal different insights
Combine domains - Style + Typography + Color = Complete design system
Always check UX - Search "animation", "z-index", "accessibility" for common issues
Use stack flag - Get implementation-specific best practices
Iterate - If first search doesn't match, try different keywords

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)
Brand logos are correct (verified from Simple Icons)
Hover states don't cause layout shift
Use theme colors directly (bg-primary) not var() wrapper

Interaction

All clickable elements have cursor-pointer
Hover states provide clear visual feedback
Transitions are smooth (150-300ms)
Focus states visible for keyboard navigation

Light/Dark Mode

Light mode text has sufficient contrast (4.5:1 minimum)
Glass/transparent elements visible in light mode
Borders visible in both modes
Test both modes before delivery

Layout

Floating elements have proper spacing from edges
No content hidden behind fixed navbars
Responsive at 375px, 768px, 1024px, 1440px
No horizontal scroll on mobile

Accessibility

All images have alt text
Form inputs have labels
Color is not the only indicator
prefers-reduced-motion respected

Source: nextlevelbuilder/ui-ux-pro-max-skill (MIT). Installed via uipro-cli in cursor_kenji as thirdparty-ui-ux-pro-max. See ATTRIBUTION.md.