CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

74

1.37x

Quality

67%

Does it follow best practices?

Impact

74%

1.37x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No known issues

Optimize this skill with Tessl

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

Evaluation results

45%

31%

Fintech SaaS Dashboard Design System

Design system workflow with search script

Criteria
Without context
With context

Uses search script

0%

33%

--design-system flag used first

0%

0%

--persist flag used

0%

0%

MASTER.md created

0%

100%

Page-specific override

25%

50%

html-tailwind default

0%

100%

Hierarchical retrieval explained

70%

100%

Project name flag used

0%

25%

Domain searches supplement

0%

0%

Runnable script

71%

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%

100%

Cursor pointer on interactive elements

50%

100%

Hover uses color/opacity only

80%

100%

Transition duration 150-300ms

100%

100%

prefers-reduced-motion

100%

100%

Floating navbar spacing

0%

100%

Content offset for navbar

100%

100%

Form labels with for attribute

100%

100%

Icon-only aria-labels

100%

100%

Color contrast on text

62%

100%

Focus states

100%

100%

Viewport meta tag

100%

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%

100%

Border visibility

37%

100%

Image lazy loading

100%

100%

Image WebP or srcset

0%

0%

Skeleton loading state

100%

100%

z-index scale values

100%

100%

Animation uses transform/opacity

100%

87%

Consistent icon sizing

57%

28%

Brand logo from Simple Icons

0%

0%

Consistent max-width container

100%

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-data
Evaluated
Agent
Claude Code
Model
Claude Sonnet 4.6

Table of Contents

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.