CtrlK
BlogDocsLog inGet started
Tessl Logo

web-design-guidelines

前端 UI 审查清单:可读性、视觉密度、间距、响应式、空状态、加载态和可访问性。

78

1.05x
Quality

68%

Does it follow best practices?

Impact

97%

1.05x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/web-design-guidelines/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

70%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.

A tight, well-organized checklist skill with a clear single-action workflow and specified output format, held back by descriptive rather than measurable check criteria and a provenance section that wastes context. Removing the migration note and adding concrete thresholds would lift both weaker dimensions.

Suggestions

Delete the 'PilotDeck Migration Note' section — provenance metadata does not help the agent perform the review and spends context on nothing.

Make checklist items measurable: cite WCAG contrast ratios (e.g., 4.5:1 body text), minimum font sizes, touch-target minimums (44px), and specific breakpoints to test.

Add brief how-to-check guidance per area (e.g., 'resize viewport to 375px/768px/1280px', 'tab through interactive elements to verify focus order') so items are executable rather than descriptive.

DimensionReasoningScore

Conciseness

The checklist and Output sections are lean and assume Claude's competence, but two sections are unnecessary padding: the 'PilotDeck Migration Note' (provenance metadata irrelevant to performing the review) and the intro line 'It helps the agent review whether the interface is usable, readable, responsive, and polished', which restates checklist items. This matches 'mostly efficient but includes some unnecessary explanation' rather than the minor-trimming profile of 4.

3 / 5

Actionability

The checklist items are checkable but largely descriptive rather than measurable — 'no accidental crowding', 'readable sizes', 'copy tone feel consistent' lack concrete thresholds (e.g., WCAG contrast ratios, minimum font/tap-target sizes, specific breakpoints) or any how-to-check method. As an instruction-only skill code absence is not penalized, but key verification details are missing, matching the 'some concrete guidance but incomplete' anchor; the specified output format (pass/fail summary, top issues, fixes, affected files) lifts it above 2.

3 / 5

Workflow Clarity

This is a simple single-purpose skill under 50 lines with one unambiguous action: review the UI against the 8 checklist areas and return the structured output defined in the Output section. The simple-skill exception applies and no validation loop is required since the operation is neither destructive nor batch, so the sequence is fully clear — not 4, which requires minor gaps.

5 / 5

Progressive Disclosure

The body is under 50 lines with no external bundle files (references/, scripts/, assets/ are absent) and no need for them; content is organized into clear, well-signaled sections (intro, Checklist, Output). Per the scoring notes, well-organized sections alone merit 5 for a short skill needing no external references; no references are buried or nested.

5 / 5

Total

16

/

20

Passed

Description

66%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 compact, reasonably specific description that clearly states what the skill covers, weakened by the complete absence of a 'when to use' trigger clause and missing common synonyms like 'design' or 'UX'. Voice is appropriately third-person/neutral.

Suggestions

Append an explicit trigger clause, e.g. 'Use after building or modifying web UI, or when the user asks for a design review, UI audit, or accessibility check of frontend pages.'

Add natural synonyms users would say — 'design review', 'UI audit', 'polish', 'UX' — to broaden trigger coverage toward the top anchor.

State the deliverable ('returns a pass/fail summary with top issues and concrete fixes') so the 'what' covers both scope and output.

DimensionReasoningScore

Specificity

The description names the domain ('前端 UI 审查清单' — frontend UI review checklist) and lists seven concrete focus areas ('可读性、视觉密度、间距、响应式、空状态、加载态和可访问性'), matching the 'lists several specific items; minor gaps' anchor. It falls short of 5 because it names review areas but no distinct actions or deliverables, and above 3 because coverage goes well beyond 1-2 items.

4 / 5

Completeness

The 'what' is clear (a UI review checklist covering listed areas), but there is no 'when' — no 'Use when...' or equivalent trigger clause anywhere in the description. Per the judging guidelines, a missing explicit trigger clause caps completeness at 3; it is above 2 because the 'what' is concrete, not vague.

3 / 5

Trigger Term Quality

Natural terms users would say are present: 'UI', '审查' (review), '前端' (frontend), '响应式' (responsive), '可访问性' (accessibility), '空状态' (empty states), '加载态' (loading states). A few common variations are missing ('design', 'UX', 'polish', 'usability'), which matches the 'good keyword coverage; a few natural terms missing' anchor rather than the comprehensive synonym coverage of 5.

4 / 5

Distinctiveness Conflict Risk

It carves a fairly distinct niche (visual/design QA of web UI) with specific triggers like empty/loading states and accessibility that most other skills would not claim, matching 'mostly distinct; minor overlap risk'. It is not 5 because generic terms like 'UI' and '可访问性' could overlap with general frontend or accessibility skills.

4 / 5

Total

15

/

20

Passed

Validation

100%

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
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.