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.

60

Quality

73%

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

71%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 body is highly actionable with concrete code, audit commands, and a mandatory specification-first workflow with a self-audit feedback loop. Its weaknesses are repetition of the forbidden-list rules across multiple sections, overlapping dual workflow descriptions, and a missing referenced file with content that could be progressively disclosed into separate references.

Suggestions

Consolidate the forbidden colors/fonts/icons and trigger-word rules into one authoritative section and have other sections reference it, eliminating the three-to-four-fold repetition.

Reconcile the "How to use this skill" and "Design Process" step lists into a single sequenced workflow to remove the overlapping dual descriptions.

Create the missing checklist.md (or remove the reference) and consider splitting the aesthetic-direction options, anti-pattern catalog, and self-audit into reference files to reduce the monolithic 340-line body.

DimensionReasoningScore

Conciseness

The body is mostly actionable rather than explanatory, but the forbidden-colors/fonts/icons rules and the trigger-word detector are restated three to four times across the checklist, Frontend Aesthetics Guidelines, ANTI-PATTERNS, and SELF-AUDIT sections, which is noticeable repetition that could be tightened.

3 / 5

Actionability

It provides copy-paste-ready concrete artifacts: a good/bad TSX anti-pattern block, exact bash grep audit commands with violation responses, named aesthetic-direction options, and curl/PowerShell download commands — fully executable guidance covering the common cases.

5 / 5

Workflow Clarity

There is a clear numbered workflow with an explicit mandatory design-specification gate and a self-audit feedback loop ("If any audit fails → Re-design"), but the "How to use this skill" steps and the separate "Design Process" steps overlap, creating a minor clarity gap that keeps it below 5.

4 / 5

Progressive Disclosure

The file has clear section structure, but no bundle files exist and the one referenced file (checklist.md) is missing from the environment, while substantial content (aesthetic options, anti-patterns, self-audit) is inlined that could live in separate reference files.

3 / 5

Total

15

/

20

Passed

Description

75%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 a single, well-constructed "Use when" trigger clause that names several concrete design capabilities and a clear UI niche. It is strong but stops short of the top anchor because it lacks a separate verb-led "what" statement and a few natural trigger synonyms.

Suggestions

Lead with a concise verb-led "what" statement (e.g., "Produces design specifications, visual directions, and high-fidelity UI prototypes") before the "Use when" clause to cleanly separate what from when.

Add natural trigger synonyms users actually say — "look and feel", "style", "UI design" — alongside the existing terms.

Add file-format or platform tokens (e.g., ".ui", "Web", "mini program / WeChat") to broaden trigger coverage toward the 5 anchor.

DimensionReasoningScore

Specificity

Lists several concrete capability areas — "visual direction, interface hierarchy, layout decisions, design specifications, or prototypes" — but frames them as noun phrases rather than verb-led actions, leaving it just short of the comprehensive verb-action form of the 5 anchor.

4 / 5

Completeness

It has an explicit "Use when" trigger clause answering "when", and the listed tasks convey "what", but there is no separate standalone "what does this do" statement, keeping it below the 5 anchor that cleanly separates both.

4 / 5

Trigger Term Quality

Natural terms like "visual direction", "layout decisions", "design specifications", "prototypes", and "Web or mini program UI" are present, but common synonyms a user might say ("look and feel", "style", "UI design") are missing, so it falls below the 5 anchor.

4 / 5

Distinctiveness Conflict Risk

The "before implementing a Web or mini program UI" framing carves a clear design/prototype niche, but there is minor overlap risk with the sibling web-development and miniprogram-development skills it points to, so it is not a clean 5.

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.