CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-design

Build distinctive, production-quality UI. Use when creating or reshaping user-facing interfaces, components, pages, layouts, visual redesigns, responsive behavior, loading/error/empty states, or accessibility-sensitive frontend work.

69

Quality

83%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

75%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 thorough, opinionated design-lead brief that gives concrete, actionable guidance with a clear two-pass workflow and verification checklist. It is well structured but slightly verbose and could benefit from splitting dense reference material into a bundled file.

Suggestions

Tighten the opening framing ('Approach this as the design lead at a small studio...') and other prose passages to reduce token weight without losing the opinionated voice.

Consider moving the detailed accessibility, responsive-breakpoint, and state-management checklists into a bundled reference file referenced from SKILL.md to improve progressive disclosure.

Add one or two minimal concrete code/HTML snippets (e.g. a skeleton loading pattern or a focus-trap sketch) to lift actionability toward fully executable guidance.

DimensionReasoningScore

Conciseness

Dense and opinionated, assuming Claude's competence without explaining basics, but at ~109 lines a few prose passages (e.g. the 'design lead at a small studio' framing) could be trimmed.

4 / 5

Actionability

Concrete, specific guidance throughout — exact breakpoints (320/768/1024/1440px), contrast ratios (4.5:1, 3:1), state-management heuristics, and a 'remove one accessory' rule — though as an instruction-only skill it lacks executable code blocks.

4 / 5

Workflow Clarity

A clear two-pass sequence (design plan → critique against brief → build) with an explicit gating checkpoint ('Only then write code') and a closing Verification Checklist; minor validation gaps keep it just below 5.

4 / 5

Progressive Disclosure

Well-organized into numbered sections (1–5) plus a checklist with no nested references; no bundle files exist, but at this length a separate reference file for detailed checklists could improve navigation.

4 / 5

Total

16

/

20

Passed

Description

92%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, well-scoped description that pairs a concrete capability statement with an explicit, trigger-rich 'Use when' clause. It is third-person, avoids fluff, and clearly distinguishes the skill from generic alternatives.

DimensionReasoningScore

Specificity

Lists multiple specific concrete scopes — 'user-facing interfaces, components, pages, layouts, visual redesignes, responsive behavior, loading/error/empty states, or accessibility-sensitive frontend work' — giving comprehensive coverage of the skill's actions.

5 / 5

Completeness

Explicitly answers both 'what' ('Build distinctive, production-quality UI') and 'when' ('Use when creating or reshaping...') with concrete trigger phrases.

5 / 5

Trigger Term Quality

Strong natural-term coverage ('visual redesignes', 'responsive behavior', 'pages', 'components', 'loading/error/empty states') that users would say, though a few synonyms (e.g. 'website', 'CSS', 'mockup') are missing.

4 / 5

Distinctiveness Conflict Risk

A clearly scoped frontend/UI niche with specific triggers; minimal risk of firing for non-frontend skills.

5 / 5

Total

19

/

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.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
MODSetter/SurfSense
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.