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.

79

1.37x
Quality

76%

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 ./skills/data/0-ui-ux-pro-max/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Discovery

75%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description excels at specificity and trigger term coverage, providing an impressively comprehensive catalog of supported technologies, design styles, project types, and UI elements. However, it reads more like an inventory list than a skill description—it lacks an explicit 'Use when...' clause that would help Claude know when to select this skill, and its extremely broad scope (covering 9 tech stacks and dozens of project types) increases the risk of conflicting with more specialized skills.

Suggestions

Add an explicit 'Use when...' clause, e.g., 'Use when the user asks to design, build, or improve UI/UX for web or mobile applications, or when they mention visual design styles, color palettes, font pairings, or component styling.'

Consider narrowing the scope or adding boundary conditions to reduce conflict risk, e.g., 'Do not use for backend logic, API design, or non-visual code tasks' to help Claude distinguish this from general development skills.

DimensionReasoningScore

Specificity

The description lists numerous specific concrete actions (plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check), specific project types (website, landing page, dashboard, admin panel, e-commerce, SaaS), specific UI elements (button, modal, navbar, sidebar, card, table, form, chart), and specific design styles (glassmorphism, claymorphism, minimalism, brutalism, neumorphism). This is highly specific and comprehensive.

3 / 3

Completeness

The description thoroughly answers 'what does this do' with extensive lists of capabilities, actions, project types, and supported technologies. However, it lacks an explicit 'Use when...' clause or equivalent trigger guidance telling Claude when to select this skill, which per the rubric caps completeness at 2.

2 / 3

Trigger Term Quality

Excellent coverage of natural terms users would say: file extensions (.html, .tsx, .vue, .svelte), framework names (React, Next.js, Vue, Svelte, Flutter), design terms (dark mode, responsive, color palette, accessibility, animation, typography), project types (landing page, dashboard, mobile app), and UI element names (button, modal, navbar, form). These are all terms users would naturally use when requesting UI/UX help.

3 / 3

Distinctiveness Conflict Risk

While the UI/UX focus with specific design styles and palettes creates some distinctiveness, the broad scope covering React, Vue, Svelte, and general web development actions like 'build, create, implement, fix, improve, refactor' could easily overlap with general web development or framework-specific skills. Terms like 'website' and 'landing page' are quite generic and could conflict with other skills.

2 / 3

Total

10

/

12

Passed

Implementation

77%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

This is a well-structured, highly actionable skill with clear workflows and concrete executable commands. Its main weakness is length — at ~300 lines it includes substantial reference material (domain tables, common rules, checklists) that could be split into separate files for better progressive disclosure. The content is mostly efficient but includes some unnecessary sections like Python installation instructions and generic tips.

Suggestions

Move the 'Common Rules for Professional UI' tables, 'Pre-Delivery Checklist', and 'Search Reference' tables into separate referenced files (e.g., RULES.md, CHECKLIST.md, REFERENCE.md) to keep SKILL.md as a concise overview.

Remove the Prerequisites section about installing Python — Claude already knows how to check for and install Python when needed.

Trim the 'Tips for Better Results' section, which is generic advice that Claude can infer from the workflow itself.

DimensionReasoningScore

Conciseness

The skill is quite long (~300 lines) with some sections that could be tightened. The 'Common Rules for Professional UI' tables and the 'Pre-Delivery Checklist' add genuine value, but the 'Tips for Better Results' section is somewhat generic, and the Prerequisites section (installing Python) explains something Claude already knows how to handle. The priority table and quick reference sections are useful but could be more compact.

2 / 3

Actionability

The skill provides fully executable bash commands with concrete examples, specific flag usage, domain tables with example keywords, and a complete end-to-end workflow example. Commands are copy-paste ready with clear parameter explanations, and the tables provide specific values (e.g., '44x44px touch targets', '4.5:1 contrast ratio', '150-300ms transitions').

3 / 3

Workflow Clarity

The workflow is clearly sequenced (Step 1 → Step 2 → Step 2b → Step 3 → Step 4) with explicit decision points ('REQUIRED' for design system generation, 'as needed' for supplements, 'default to html-tailwind'). The hierarchical retrieval pattern includes a clear override logic, and the pre-delivery checklist serves as a validation checkpoint before final output.

3 / 3

Progressive Disclosure

The skill keeps everything in one file rather than splitting detailed reference tables (available domains, stacks, common rules) into separate files. The Quick Reference section, Search Reference tables, Common Rules tables, and Pre-Delivery Checklist could each be separate referenced files, keeping the main SKILL.md as a concise overview. The content is well-organized with clear headers but is monolithic.

2 / 3

Total

10

/

12

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository
majiayu000/claude-skill-registry
Reviewed

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.