frontend-design

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

Quality

60%

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

70%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is a tight, well-structured instruction-only skill with a clear sequenced workflow, an explicit verification step, and a concrete review checklist. Its main weaknesses are a non-essential migration note that dilutes conciseness and a lack of concrete examples (token tables, breakpoint values) that would lift actionability.

Suggestions

Remove or relocate the 'PilotDeck Migration Note' (provenance/admin detail) out of the SKILL.md body so every remaining token serves the user's task.

Add one compact concrete reference — e.g. a small type-scale (e.g. 12/14/16/20/24/32px), a spacing scale (4/8/12/16/24px), or common breakpoints — so the guidance is copy-paste ready rather than directive-only.

Tighten the verify step from 'when available' to a clear checkpoint, e.g. 'Open the result in the browser/preview and confirm the focal point, alignment, and responsive states before finishing.'

Dimension	Reasoning	Score
Conciseness	The body is lean and well-listed with no padding of concepts Claude already knows, but the 'PilotDeck Migration Note' section is administrative prose that doesn't help accomplish the task and so doesn't fully earn the score-3 'every token earns its place' anchor.	2 / 3
Actionability	Workflow steps and the checklist give specific, directive guidance ('Use consistent spacing, type scale, color tokens, border radius, shadows'), but there are no concrete examples or copy-paste-ready specifics like a type-scale table, token names, or breakpoint values, landing at the 'some concrete guidance but incomplete' anchor.	2 / 3
Workflow Clarity	The 6-step workflow is clearly sequenced and ends with an explicit verification step ('Verify the result in a browser or preview surface'), backed by a review checklist; as a simple, non-fragile design/review task this meets the 'clear sequence with explicit validation step' anchor.	3 / 3
Progressive Disclosure	The skill is under 50 lines with no need for external references and is organized into clear sections (Workflow, Review Checklist, Migration Note); per the rubric's guidance for short single-purpose skills this earns the top score on well-organized sections alone.	3 / 3
	Total	10 / 12 Passed

Description

50%

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 clearly identifies a niche (frontend UI design) and enumerates relevant topical areas, but it reads as a topic list rather than an action-oriented statement and omits any explicit 'Use when' trigger guidance, leaving it at the middle anchor across all dimensions.

Suggestions

Rewrite the description in action-oriented third person, e.g. 'Designs and reviews frontend UI: establishes visual hierarchy, picks spacing/type/color tokens, and avoids generic AI-style pages. Use when creating or reviewing frontend UI where visual quality matters.'

Add an explicit 'Use when ...' trigger clause naming natural user phrasing such as 'frontend design', 'UI layout', 'make this page look less AI-generated', or 'responsive design'.

Lead with the concrete actions the skill performs (design, audit, apply tokens) rather than listing abstract principles.

Dimension	Reasoning	Score
Specificity	The description names the domain ('前端界面设计原则') and lists several concrete topics — '视觉层次、布局、色彩、间距、响应式和避免AI味页面' — but frames them as principles/areas rather than concrete actions the skill performs, so it stops short of the score-3 'multiple specific concrete actions' anchor.	2 / 3
Completeness	It conveys what the skill covers (frontend design principles across several areas) but gives no explicit 'Use when...' trigger; per the rubric a missing explicit trigger clause caps completeness at 2.	2 / 3
Trigger Term Quality	It includes several natural terms a user might say ('前端界面设计', '视觉层次', '布局', '色彩', '响应式'), but lacks the common variation/trigger coverage and explicit trigger phrasing of the score-3 example.	2 / 3
Distinctiveness Conflict Risk	'前端界面设计原则' plus the distinctive '避免AI味页面' angle gives it a recognizable niche, yet broad 'frontend design' could still overlap with general UI/design skills, matching the 'somewhat specific but could overlap' anchor.	2 / 3
	Total	8 / 12 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: c88d7d1

Reviewed: about 13 hours 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.