ui-ux-pro-max

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). 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. Integrations: shadcn/ui MCP for component search and examples.

1.37x

Quality

67%

Does it follow best practices?

Impact

74%

1.37x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./skills/data/0-ui-ux-pro-max/SKILL.md

Evaluation results

45%

31%

Fintech SaaS Dashboard Design System

Design system workflow with search script

Criteria

Without context

With context

Uses search script

33%

--design-system flag used first

--persist flag used

MASTER.md created

100%

Page-specific override

25%

50%

html-tailwind default

100%

Hierarchical retrieval explained

70%

100%

Project name flag used

25%

Domain searches supplement

Runnable script

71%

Without context: $0.6336 · 3m · 20 turns · 23 in / 13,105 out tokens

With context: $1.1947 · 5m 42s · 36 turns · 152 in / 19,688 out tokens

100%

17%

Marketing Landing Page for a Productivity App

Interaction, accessibility, and hover/transition rules

Criteria

Without context

With context

No emoji icons

100%

Cursor pointer on interactive elements

50%

100%

Hover uses color/opacity only

80%

100%

Transition duration 150-300ms

100%

prefers-reduced-motion

100%

Floating navbar spacing

100%

Content offset for navbar

100%

Form labels with for attribute

100%

Icon-only aria-labels

100%

Color contrast on text

62%

100%

Focus states

100%

Viewport meta tag

100%

Without context: $0.5058 · 2m 33s · 12 turns · 19 in / 12,216 out tokens

With context: $0.9555 · 3m 50s · 28 turns · 81 in / 16,852 out tokens

79%

12%

E-Commerce Product Listing Page

Light mode contrast, image optimization, and layout rules

Criteria

Without context

With context

Glass card opacity

50%

100%

Body text color light mode

100%

Border visibility

37%

100%

Image lazy loading

100%

Image WebP or srcset

Skeleton loading state

100%

z-index scale values

100%

Animation uses transform/opacity

100%

87%

Consistent icon sizing

57%

28%

Brand logo from Simple Icons

Consistent max-width container

100%

Line height on descriptions

50%

100%

Without context: $0.5158 · 2m 33s · 14 turns · 20 in / 12,091 out tokens

With context: $1.1311 · 4m 42s · 25 turns · 64 in / 22,044 out tokens

Repository: majiayu000/claude-skill-registry
Commit: 6213d1a

Evaluated: 13 days ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Fintech SaaS Dashboard Design System Marketing Landing Page for a Productivity App E-Commerce Product Listing Page

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.