CtrlK
BlogDocsLog inGet started
Tessl Logo

ui-design

Use when users need visual direction, interface hierarchy, layout decisions, design specifications, or prototypes before implementing a Web or mini program UI.

55

Quality

63%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./config/.claude/skills/ui-design/SKILL.md

The canonical home for this skill is ui-design in TencentCloudBase/CloudBase-AI-Toolkit

SKILL.md
Quality
Evals
Security

Quality

Content

77%

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

The skill is highly actionable with a clear, validated workflow and concrete examples, but it suffers from heavy internal repetition and a monolithic structure with a broken local reference. Deduplicating and splitting detailed material into real reference files would materially raise quality.

Suggestions

De-duplicate the forbidden color/font/emoji rules: state them once authoritatively and have later sections link back instead of restating the full lists.

Consolidate the three overlapping trigger sections (Activation Contract, When to use this skill, Do NOT use for) into one, since they restate the same scope three times.

Either ship the referenced checklist.md or remove the [UI Design Activation Checklist](checklist.md) link, and move the long ANTI-PATTERNS and SELF-AUDIT blocks into a separate references/ file that the overview points to.

DimensionReasoningScore

Conciseness

The body is domain guidance rather than basic-concept explanation, but the forbidden color/font/emoji lists are repeated roughly five times (How-to-use, MANDATORY checklist, Trigger Word Detector, Frontend Aesthetics, Avoid Generic AI, ANTI-PATTERNS, SELF-AUDIT) and three overlapping trigger sections (Activation Contract, When to use, Do NOT use) restate the same scope, so it could be tightened substantially.

2 / 3

Actionability

It gives concrete executable guidance throughout: specific forbidden hex ranges (#800080-#9370DB), named fonts, copy-paste Tailwind className examples in ❌/✅ code blocks, named icon libraries, and runnable grep self-audit commands.

3 / 3

Workflow Clarity

The design process is explicitly sequenced (6 steps), a MANDATORY pre-design DESIGN SPECIFICATION checklist gates code, and a SELF-AUDIT checklist with a clear feedback loop ("If any audit fails -> Re-design with correct approach") provides validation checkpoints.

3 / 3

Progressive Disclosure

The body is a ~325-line monolith with clear sections but content that could be split (anti-patterns, self-audit, full design rules) kept inline, and the single local reference [UI Design Activation Checklist](checklist.md) points to a file that does not exist in any bundle directory.

2 / 3

Total

10

/

12

Passed

Description

50%

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 has a clear explicit trigger ("Use when users need ...") and names a recognizable domain, but it never states what the skill actually does as a verb-action and leans on formal rather than colloquial trigger terms. It is solidly average rather than stand-out.

Suggestions

Lead with a concrete action clause, e.g. "Produces design specifications, visual directions, and high-fidelity UI prototypes for Web and mini-program interfaces." before the "Use when" trigger, so both what and when are explicit.

Add natural trigger terms users actually say — "look and feel", "style", "redesign my UI", "design a page" — alongside the existing formal ones.

Sharpen distinctiveness from the sibling coding skills, e.g. "Use when the visual/aesthetic direction is not yet decided; for already-approved UI, use web-development instead."

DimensionReasoningScore

Specificity

The description lists concrete capability areas ("visual direction, interface hierarchy, layout decisions, design specifications, or prototypes") but frames them as user "needs" (noun phrases) rather than concrete verb-actions the skill performs, so it stops short of the multi-action 'extract/fill/merge' level.

2 / 3

Completeness

An explicit "Use when users need ..." trigger is present, but the "what does this do" half is only implied inside that clause rather than stated as an independent action statement, so both halves are not cleanly explicit.

2 / 3

Trigger Term Quality

It covers relevant terms (design, prototype, layout, Web/mini program UI) but omits common colloquial variations a user would actually say such as "look and feel", "style", "make it look good", or "UI", so coverage is partial.

2 / 3

Distinctiveness Conflict Risk

The UI-design niche is reasonably clear, but the "before implementing a Web or mini program UI" framing overlaps with the sibling web-development / miniprogram-development skills and could trigger for general frontend work.

2 / 3

Total

8

/

12

Passed

Validation

81%

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

Validation13 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

relative_links

Relative link issues: 1 missing

Warning

referenced_paths_exist

Referenced path issues: 1 missing

Warning

Total

13

/

16

Passed

Repository
TencentCloudBase/CloudBase-AI-Toolkit
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.