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.

56

Quality

65%

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

52%Weight 40%Scale 1-5

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 strong, well-sequenced design workflow and concrete code/audit examples, which are its real strengths. Its weaknesses are verbosity (the same prohibitions and audit steps repeated across several sections) and poor progressive disclosure — everything is inlined in a long SKILL.md while the one referenced checklist file is missing.

Suggestions

De-duplicate the forbidden colors/fonts/emoji rules and the self-audit into a single canonical section; reference it instead of restating it in 'Design Thinking', 'Trigger Word Detector', 'Frontend Aesthetics', and 'Avoid Generic AI Aesthetics'.

Extract the detailed rule catalog and example library into separate reference files (e.g. anti-patterns.md, audit.md) and keep SKILL.md as a concise overview with one-level-deep links.

Either ship checklist.md (the only body reference) or remove the 'Read UI Design Activation Checklist' pointer so SKILL.md has no dangling references.

DimensionReasoningScore

Conciseness

The body is noticeably verbose and repetitive: the forbidden colors/fonts/emoji lists recur in 'How to use', 'Design Thinking', 'Trigger Word Detector', 'Frontend Aesthetics', and 'Avoid Generic AI Aesthetics', plus the full self-audit appears twice (steps 4 and the final checklist). This re-explains the same prohibitions Claude would grasp from a single statement, well past the 3 anchor's 'mostly efficient'.

2 / 5

Actionability

Mostly executable guidance: a copy-paste DESIGN SPECIFICATION template, concrete Tailwind/className anti-pattern and good-example code blocks, and runnable grep audit commands (color/font/icon). Minor gaps — no concrete icon-library import/install snippet and the layout audit is check-questions rather than a runnable check — keep it just below 5.

4 / 5

Workflow Clarity

A clear sequenced workflow (specification-first → 6-step design process → self-audit → submit) with explicit validation checkpoints (the color/font/icon audits and 'If any audit fails → Re-design'). It is a single-pass generation rather than a validate-fix-retry loop on a fragile artifact, so it sits at a strong 4 rather than 5.

4 / 5

Progressive Disclosure

No bundle files exist (references/scripts/assets all empty), yet ~340 lines of rules and examples are inlined into SKILL.md and the only navigational reference, checklist.md, points to a file that is not present in this environment — content that clearly belongs in separate files is inlined and the one reference is unresolvable, matching the 'content that should be separate is inline' anchor.

2 / 5

Total

12

/

20

Passed

Description

78%Weight 40%Scale 1-5

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 is concise, third-person, and explicitly pairs a 'what' with a 'Use when' trigger clause, which is its main strength. It loses ground on specificity by listing deliverable categories rather than concrete actions, and has slight overlap risk with implementation skills.

Suggestions

Trade a category noun ('visual direction') for a concrete verb phrase ('produces a written design specification') to lift specificity toward 5.

Add a 'look and feel' or 'UI style' synonym to round out trigger-term coverage.

Sharpen the pre-implementation boundary (e.g. 'before any UI code is written') to reduce overlap with web/mini-program implementation skills.

DimensionReasoningScore

Specificity

Names the domain (UI design) and lists several concrete deliverables — 'visual direction, interface hierarchy, layout decisions, design specifications, or prototypes' — but these read more like task categories than the multiple discrete actions (e.g. produce spec, generate prototype, choose palette) that would warrant a 4.

3 / 5

Completeness

Clearly answers both 'what' (visual direction, hierarchy, layout, design specs, prototypes) and 'when' via an explicit 'Use when users need...' clause with concrete trigger phrases, matching the anchor for explicit what-and-when.

5 / 5

Trigger Term Quality

Strong natural keywords users actually say — 'visual direction', 'layout decisions', 'design specifications', 'prototypes' — and platform terms 'Web' and 'mini program'; missing a few common synonyms like 'look and feel'/'UI design' itself, so not a 5.

4 / 5

Distinctiveness Conflict Risk

The pre-implementation framing ('before implementing a Web or mini program UI') carves a clear niche distinct from pure implementation skills, with minor overlap risk against general web-development skills; not a fully distinct 5 because the Web/mini-program boundary could still collide with implementation-focused siblings.

4 / 5

Total

16

/

20

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: 2 missing, 2 deeper-than-1-level

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.