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

70%

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 ./plugin/cloudbase/skills/ui-design/SKILL.md

Quality

Content

56%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, a design-spec template, and executable audit commands, and it sequences the workflow with a self-audit feedback loop. It is held back by heavy repetition of the same prohibitions across many sections and a monolithic structure that references a checklist.md file which is not present.

Suggestions

Consolidate the forbidden colors/fonts/icons/centered-layout rules into one canonical section and reference it elsewhere instead of restating them in five separate places.

Move the ANTI-PATTERNS code block, the aesthetic-direction option list, and the SELF-AUDIT checklist into separate reference files (and either ship checklist.md or remove the link to it) so SKILL.md stays a lean overview.

De-duplicate the triggering guidance between "Activation Contract" and "When to use this skill" into a single section to recover token budget.

Dimension	Reasoning	Score
Conciseness	The same prohibitions (forbidden colors, fonts, emoji icons, centered layouts) are restated in at least five sections ("How to use this skill", "Design Thinking", "Frontend Aesthetics Guidelines", "Avoid Generic AI Aesthetics", "ANTI-PATTERNS", "SELF-AUDIT"), and the activation guidance is duplicated across "Activation Contract" and "When to use this skill", making it noticeably padded.	2 / 5
Actionability	Provides concrete, copy-paste-ready material: a DESIGN SPECIFICATION template, real Tailwind className and font-family code examples, named icon libraries, and executable grep audit commands, with only minor gaps in coverage.	4 / 5
Workflow Clarity	A clear six-step Design Process plus a numbered "How to use this skill" sequence is backed by an explicit SELF-AUDIT checklist with a feedback loop ("If any audit fails → Re-design"), though some checkpoints are implicit rather than gated.	4 / 5
Progressive Disclosure	Section headers and signaled references exist (checklist.md, sibling skills), but the body is a ~330-line monolith with anti-pattern code, aesthetic option lists, and the self-audit inlined rather than split into files, and the one referenced bundle file (checklist.md) is missing from the environment.	3 / 5
	Total	13 / 20 Passed

Description

83%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 strong, third-person description that clearly answers both what the skill does and when to use it, with concrete trigger terms and a well-scoped niche. Its main limitation is that the listed actions are conceptual design areas rather than sharply literal operations, and a few common synonyms ("design", "style") are missing.

Dimension	Reasoning	Score
Specificity	Lists several concrete action areas ("visual direction, interface hierarchy, layout decisions, design specifications, or prototypes") tied to a clear domain, but they are decision-making categories rather than the crisp literal operations of a top anchor, leaving minor gaps.	4 / 5
Completeness	It explicitly states what the skill does (visual direction, hierarchy, layout, specifications, prototypes) and when to use it ("Use when users need ... before implementing a Web or mini program UI") with concrete trigger phrasing.	5 / 5
Trigger Term Quality	Natural phrases like "visual direction", "layout decisions", "design specifications", and "prototypes" map well to user requests, though common synonyms such as "design", "style", or "look and feel" are absent.	4 / 5
Distinctiveness Conflict Risk	The design-phase scoping ("before implementing") and Web/mini-program UI niche distinguish it from backend skills, but there is minor overlap risk with closely related general web-development skills.	4 / 5
	Total	17 / 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: plugin/cloudbase/skills/ui-design/SKILL.md
Commit: ef9f182

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.