frontend-design

前端界面设计原则：视觉层次、布局、色彩、间距、响应式和避免“AI 味”页面。

Quality

66%

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 ./skills/frontend-design/SKILL.md

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 well-structured, concise, and cleanly sequenced for a lightweight design-review skill, but its guidance stays high-level without concrete values or examples that would make it fully actionable.

Suggestions

Add concrete defaults or examples for the design tokens referenced (e.g., a sample type scale, spacing scale, or shadow/radius token set).

Turn the final verify step into an explicit feedback loop ('if a state is missing or layout breaks at a width, fix and re-verify').

Drop or condense the 'PilotDeck Migration Note' since it is provenance metadata rather than guidance that aids execution.

Dimension	Reasoning	Score
Conciseness	The body is lean with no padding of concepts Claude already knows; the only trimmable part is the 'PilotDeck Migration Note', which is meta context rather than execution guidance, keeping it just below a 5.	4 / 5
Actionability	Steps name concrete directives (spacing, type scale, color tokens, border radius, shadows) and a clear checklist, but there are no concrete values, code, or specific token examples, so key execution details are missing.	3 / 5
Workflow Clarity	The 6-step workflow is clearly sequenced and ends with a verify step ('Verify the result in a browser or preview surface when available'); the verify step is conditional with no explicit fix-retry feedback loop, so it does not reach 5.	4 / 5
Progressive Disclosure	The skill is under 50 lines with no external references needed (no references/scripts/assets bundle present) and is organized into clear sections (Workflow, Review Checklist, Migration Note), meeting the simple-skill exception for a top score.	5 / 5
	Total	16 / 20 Passed

Description

61%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 and domain-specific with solid natural trigger terms, but it omits an explicit 'when to use' clause and frames capabilities as principle areas rather than concrete actions.

Suggestions

Add an explicit trigger clause, e.g. 'Use when creating or reviewing frontend UI where visual quality matters.'

Reframe the principle list as concrete actions (e.g. 'Establish visual hierarchy, apply consistent spacing and color tokens, design responsive states').

Include a few more natural synonyms users might say (e.g. 网页设计, UI 设计, 配色) to broaden trigger coverage.

Dimension	Reasoning	Score
Specificity	The description names the domain ('前端界面设计') plus several concrete facets ('视觉层次、布局、色彩、间距、响应式和避免“AI 味”页面'), but they are framed as principles/areas rather than concrete actions, so it sits at the 'names domain and 1-2 concrete actions' anchor and not above.	3 / 5
Completeness	It gives a clear 'what' (frontend design principles and the dimensions covered) but no 'Use when...' trigger clause, which per the rubric caps completeness at 3.	3 / 5
Trigger Term Quality	It surfaces natural terms a user would actually say (前端界面设计, 布局, 色彩, 间距, 响应式) with good coverage; a few common synonyms/variants are missing, so it is above the midpoint but not fully comprehensive.	4 / 5
Distinctiveness Conflict Risk	'前端界面设计原则' carves a fairly distinct visual-design niche with low conflict risk; only minor overlap with general web-development skills keeps it below 5.	4 / 5
	Total	14 / 20 Passed

Validation

100%

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 — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: OpenBMB/PilotDeck
Path: skills/frontend-design/SKILL.md
Commit: 9a33f4d

Reviewed: 2 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.