CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

popular-web-designs

54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.

54

Quality

68%

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

Fix and improve this skill with Tessl

tessl review fix ./skills/creative/popular-web-designs/SKILL.md
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.

The body is a well-structured index-plus-pattern skill: a lean catalog of 54 one-level-deep templates, concrete load and HTML-generation commands, and an explicit browser_vision verification step. Its main weaknesses are minor redundancy (boilerplate HTML skeleton, font table duplicating per-template notes), no error-recovery guidance after visual verification, and referenced template files not present in the bundle to validate the paths.

DimensionReasoningScore

Conciseness

The body is largely lean — a usage sequence, one code pattern, a font table, and a catalog index — and does not explain concepts Claude already knows beyond boilerplate. Not a 5 because the full HTML skeleton repeats boilerplate (DOCTYPE, viewport meta, base CSS) Claude obviously knows, and the 14-row font substitution table partially duplicates the per-template 'Hermes Implementation Notes' it says each template already carries; not a 3 because there is no padded or tutorial-style prose anywhere.

4 / 5

Actionability

Concrete, executable guidance dominates: an exact load command (`skill_view(name="popular-web-designs", file_path="templates/<site>.md")`), a complete HTML skeleton with labeled slots for each template section, a copy-paste Google Fonts mapping, and a categorized catalog with exact file names. Not a 5 because the HTML example requires assembling values from an unshown template (placeholder palette/custom properties) rather than being copy-paste runnable on its own; not a 3 because no part is pseudocode or hand-wavy.

4 / 5

Workflow Clarity

'How to Use' gives a clear 4-step sequence (pick → load → apply tokens → serve/verify) and the HTML section adds an explicit verification checkpoint ('verify the result with browser_vision to confirm visual accuracy'). Not a 5 because there is no feedback loop — no guidance on what to do when browser_vision shows the result is off — and steps 2–4 rely on the reader cross-referencing multiple sections; not a 3 because a real validation checkpoint (browser_vision) is explicitly present and the sequence is coherent.

4 / 5

Progressive Disclosure

The body is a well-organized overview — usage, one code pattern, a font table, and a category-indexed catalog — pointing one level deep to per-site template files via a single clearly signaled load command with exact paths. Not a 5 because no bundle files (references/, scripts/, assets/, templates/) actually accompany the SKILL.md to verify the referenced paths resolve, and the font substitution reference is content that arguably belongs in the templates themselves; not a 3 because the catalog/index structure and navigation path are clear and shallow.

4 / 5

Total

16

/

20

Passed

Description

48%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 names a concrete, distinctive domain (real brand design systems for HTML/CSS), but it omits any action verbs and any 'use when' trigger guidance, leaving a reader to infer both the skill's function and its invocation conditions. Adding one sentence of natural trigger phrasing and an explicit capability verb would raise it substantially.

Suggestions

Add action verbs describing what the skill does, e.g., 'Apply real design systems (Stripe, Linear, Vercel) as ready-to-use HTML/CSS design tokens when generating pages.'

Append an explicit 'Use when...' clause with natural trigger phrases such as 'Use when the user wants a page styled like Stripe, Linear, or Vercel, or asks for landing-page or dashboard designs matching a known brand.'

Fold the most natural user phrasings (e.g., 'make it look like Stripe', 'website styled like Linear') into the description so trigger matching does not depend solely on the separate triggers field.

DimensionReasoningScore

Specificity

The description names the domain and artifacts ("54 real design systems (Stripe, Linear, Vercel) as HTML/CSS") but contains no action verbs describing what the skill actually does, matching the anchor 'Names the domain but actions are minimal or generic' (e.g., 'Processes PDF files'). Not a 3 because there are no concrete actions listed at all; not a 1 because the domain and deliverable format are explicit and concrete.

2 / 5

Completeness

The 'what' is clear (a library of 54 real design systems rendered as HTML/CSS) but there is no 'Use when...' clause or equivalent usage guidance, which per the judging guidelines caps completeness at 3. Not a 4 because 'when' is entirely absent rather than just vague; not a 2 because the 'what' is concrete, not vague.

3 / 5

Trigger Term Quality

It includes relevant keywords users would say — brand names "Stripe, Linear, Vercel", "design systems", "HTML/CSS" — but misses common natural phrasings like 'build a page that looks like', 'landing page', 'website styled like', or 'web design' inside the description itself. Matches 'Some relevant keywords but missing common variations or synonyms'; not a 4 because several natural trigger phrases are absent from the description text.

3 / 5

Distinctiveness Conflict Risk

Named real-world brands plus 'design systems as HTML/CSS' carve out a clear niche that would rarely trigger a generic CSS or PDF skill. Not a 5 because phrases like 'HTML/CSS' and 'design systems' still have minor overlap with general web-design skills absent an explicit 'use when' boundary; not a 3 because the brand names make it mostly distinct.

4 / 5

Total

12

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository

NousResearch/hermes-agent

Path

skills/creative/popular-web-designs/SKILL.md

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.