Name: ui-design
Rating: 55.2 (1 reviews)
Author: TencentCloudBase

ui-design

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

Quality

63%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

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

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.

An actionable, well-structured UI-design instruction skill with concrete examples and a clear audit-driven workflow, but it is markedly verbose due to repeated restatement of the same prohibitions and fails progressive disclosure by inlining reference material and linking a missing checklist.md.

Suggestions

Consolidate the forbidden-color/font/icon rules into a single canonical list and reference it once from the other sections instead of restating them six times.

Move the anti-pattern code catalog and the self-audit grep scripts into separate reference files (e.g., anti-patterns.md, audit.md) and link them one level deep from the body.

Either ship checklist.md in the bundle or remove the broken "Read [UI Design Activation Checklist](checklist.md)" reference so navigation is not broken.

Dimension	Reasoning	Score
Conciseness	The same prohibitions (forbidden purple/violet/indigo colors, Inter/Roboto/system fonts, emoji icons) are restated across at least six sections ("How to use", the mandatory pre-design checklist, the trigger-word detector, the Frontend Aesthetics subsections, "Avoid Generic AI Aesthetics", and the self-audit), producing several heavily padded, redundant blocks.	2 / 5
Actionability	Provides concrete, executable guidance: a fill-in DESIGN SPECIFICATION template, hex ranges for forbidden colors, named aesthetic options, specific icon libraries, BAD/GOOD Tailwind className examples, and runnable grep audit commands, with only minor gaps.	4 / 5
Workflow Clarity	A clear sequence exists (design specification first → 6-step design process → self-audit before submitting) with explicit validation checkpoints and a feedback loop ("If any audit fails → Re-design"), though the workflow is spread across three separate sections rather than one unified flow.	4 / 5
Progressive Disclosure	The body is a ~340-line monolith where reference-style material (anti-pattern code catalog, self-audit scripts, aesthetic option lists) is inlined rather than split into files, and the only external reference — "[UI Design Activation Checklist](checklist.md)" — points to a file that does not exist in the bundle.	2 / 5
	Total	12 / 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.

A solid, third-person description with an explicit "Use when" trigger and a clear UI-design niche. It lists several concrete trigger areas and distinguishes itself from implementation skills, though the skill's actual actions are implied rather than stated and a few natural synonyms are missing.

Dimension	Reasoning	Score
Specificity	Enumerates several concrete areas — "visual direction, interface hierarchy, layout decisions, design specifications, or prototypes" — naming the domain with multiple specific items, though these are framed as user needs rather than performed actions, leaving minor coverage gaps.	4 / 5
Completeness	Explicit "Use when users need...before implementing...UI" answers "when" clearly, and the enumerated needs imply the "what" (produce design direction/specs/prototypes); the "what" could be stated more explicitly as a skill action.	4 / 5
Trigger Term Quality	Includes natural terms users would say ("design", "prototype", "layout", "UI", "Web", "mini program") with good coverage, but misses common synonyms like "wireframe", "mockup", "look and feel", and "style".	4 / 5
Distinctiveness Conflict Risk	The "before implementing" framing carves a clear design-direction niche distinct from sibling implementation skills, with only minor overlap risk against the referenced web-development/miniprogram-development skills.	4 / 5
	Total	16 / 20 Passed

Validation

81%

Warnings & errors only

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

Validation — 13 / 16 Passed

Validation for skill structure

Criteria	Description	Result
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
Path: config/.claude/skills/ui-design/SKILL.md
Commit: 3ce25cd

Reviewed: 3 days ago

Table of Contents

Discovery Implementation Validation

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.