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

68%

Does it follow best practices?

Impact

74%

1.37x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No known issues

Fix and improve this skill with Tessl

tessl review fix ./skills/data/0-ui-ux-pro-max/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

62%

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

The skill provides highly actionable, well-sequenced guidance for using a CLI-based design system tool, with concrete commands and a clear workflow. However, it is significantly over-verbose, including Python installation instructions, basic UI/UX knowledge Claude already possesses, and large reference tables that should be in separate files. The content would benefit greatly from aggressive trimming and splitting reference material into linked files.

Suggestions

Remove Python installation instructions and basic UI/UX knowledge (accessibility basics, common rules) that Claude already knows — this could cut 30-40% of content.

Move the 'Common Rules for Professional UI' and 'Pre-Delivery Checklist' sections into separate referenced files (e.g., RULES.md, CHECKLIST.md) to improve progressive disclosure.

Remove the 'Tips for Better Results' section — advice like 'be specific with keywords' and 'iterate' is generic and unnecessary for Claude.

Consolidate the redundant reference tables (Available Domains, Available Stacks) which partially repeat information already shown in the workflow steps.

DimensionReasoningScore

Conciseness

The skill is extremely verbose at ~300+ lines. It explains concepts Claude already knows (what product types are, what accessibility means, how to install Python on different OSes), includes redundant tables, and repeats information across sections. The 'Tips for Better Results' and 'Common Rules' sections contain basic UI knowledge Claude already possesses. The Python installation instructions are entirely unnecessary.

1 / 3

Actionability

The skill provides fully executable CLI commands with concrete examples, specific flag usage, and clear input/output expectations. The workflow steps include copy-paste ready bash commands with real arguments, and the search reference tables provide specific keywords and domains.

3 / 3

Workflow Clarity

The 4-step workflow is clearly sequenced with explicit ordering (Step 1 → Step 2 → Step 3 → Step 4), includes a concrete example walkthrough, and has a pre-delivery checklist serving as validation. The hierarchical design system persistence pattern includes clear retrieval logic with override rules.

3 / 3

Progressive Disclosure

The content is largely monolithic — extensive reference tables, common rules, and checklists are all inline rather than split into separate files. The skill references scripts and CSV files (ui-reasoning.csv) but doesn't reference any supplementary documentation files. Much of the inline content (Common Rules, Pre-Delivery Checklist, full search reference) could be in separate files with brief pointers.

2 / 3

Total

9

/

12

Passed

Description

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 listing specific capabilities, technologies, and natural trigger terms, making it very comprehensive in scope. However, it reads more like a keyword dump than a well-structured skill description, and critically lacks an explicit 'Use when...' clause that would help Claude know precisely when to select this skill. The extremely broad scope also creates potential overlap with other development-focused skills.

Suggestions

Add an explicit 'Use when...' clause, e.g., 'Use when the user asks about UI/UX design, visual styling, component design, or needs help with frontend aesthetics and design patterns.'

Consider narrowing the scope or adding boundary statements to reduce conflict risk, e.g., 'Use this for design and visual concerns; defer to framework-specific skills for business logic or backend functionality.'

DimensionReasoningScore

Specificity

The description lists extensive concrete actions (plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check), specific project types (website, landing page, dashboard, etc.), specific UI elements (button, modal, navbar, etc.), and specific design styles (glassmorphism, brutalism, etc.). This is highly specific with multiple concrete capabilities.

3 / 3

Completeness

The description thoroughly answers 'what does this do' with extensive lists of capabilities, actions, and supported technologies. However, there is no explicit 'Use when...' clause or equivalent trigger guidance telling Claude when to select this skill. The triggers are implied through the keyword lists but never stated explicitly, which caps this at 2 per the rubric guidelines.

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, accessibility, animation), UI elements (button, modal, navbar, form), and project types (landing page, dashboard, e-commerce, SaaS). These are highly natural keywords users would use.

3 / 3

Distinctiveness Conflict Risk

While the UI/UX design focus is clear, the extremely broad scope (covering React, Vue, Svelte, mobile apps, websites, dashboards, etc.) means it could overlap with general web development skills, frontend framework-specific skills, or mobile development skills. Terms like 'website', 'landing page', and framework names could easily trigger conflicts with other coding-related skills.

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.