popular-web-designs

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

Quality

63%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Low

Low-risk findings worth noting

Fix and improve this skill with Tessl

tessl review fix ./skills/creative/popular-web-designs/SKILL.md

Quality

Content

77%

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 lean, well-organized catalog skill with a clear generate-then-verify workflow and good navigation structure, but the main HTML example relies on placeholders and the referenced template/companion files are not present in the bundle to verify progressive disclosure.

Suggestions

Make the HTML generation example more copy-paste ready by including at least one fully-resolved concrete example (real Google Fonts href and a complete :root palette) instead of placeholders, or explicitly label it as a pattern whose values come from the loaded template.

Bundle the referenced templates/ directory (or at least one representative template) so the one-level-deep references in the catalog are resolvable and progressive disclosure can be verified.

Clarify how to obtain/confirm the companion skills (claude-design, design-md, generative-widgets) are available, since they are referenced as load-bearing workflow steps but are not part of this bundle.

Dimension	Reasoning	Score
Conciseness	The body is almost entirely the skill's payload (the 54-item catalog and the proprietary-to-CDN font mapping table) and avoids explaining concepts Claude already knows; it assumes Claude's competence and every catalog row earns its place.	3 / 3
Actionability	It gives a concrete, executable instruction ('skill_view(name="popular-web-designs", file_path="templates/<site>.md")') and a clear serve/verify workflow, but the HTML generation pattern uses placeholders ('family=...', 'more from template Section 2') and relies on template files that are not bundled, so it is not copy-paste ready.	2 / 3
Workflow Clarity	The How-to-Use steps are clearly sequenced (pick, load, apply, pair/serve) and include an explicit validation checkpoint ('verify the result with browser_vision to confirm visual accuracy'), matching the clear-sequence-with-validation anchor.	3 / 3
Progressive Disclosure	The catalog provides good one-level-deep navigation and the body correctly defers full design specs to template files rather than inlining them, but the referenced templates/<site>.md files and companion skills (claude-design, design-md, generative-widgets) do not exist in the bundle, so the references cannot be verified as resolvable.	2 / 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 is tight and specific about the skill's content and niche, but is a noun phrase with no actions and lacks an explicit 'Use when' trigger clause, capping completeness and trigger quality at 2.

Suggestions

Add an explicit 'Use when...' clause naming natural triggers (e.g. 'Use when building a page that should look like Stripe, Linear, Vercel, or other known brands; for landing pages, dashboards, or marketing sites').

Lead with a concrete action verb (e.g. 'Apply 54 real design systems ... to generated HTML/CSS') so the capability reads as an action rather than a noun phrase.

Include common user phrasings ('landing page', 'dashboard design', 'web design') alongside the brand names to broaden trigger coverage.

Dimension	Reasoning	Score
Specificity	The phrase '54 real design systems (Stripe, Linear, Vercel) as HTML/CSS' names the domain concretely with specific brands, but contains no action verbs (e.g. build/apply/generate), so it falls short of the multi-action anchor 3 without being vague enough for anchor 1.	2 / 3
Completeness	It clearly states what the skill provides ('54 real design systems ... as HTML/CSS') but has no 'Use when...' clause or equivalent trigger guidance, so per the rubric completeness is capped at 2.	2 / 3
Trigger Term Quality	Named brands (Stripe, Linear, Vercel) and 'design systems' / 'HTML/CSS' are terms users would say, but common variations like 'landing page', 'dashboard', or 'web design' are absent, matching the 'some relevant keywords but missing common variations' anchor.	2 / 3
Distinctiveness Conflict Risk	The brand-mimicking design-systems niche is fairly distinct, but with no explicit triggers to disambiguate from sibling skills (claude-design, design-md) it could still overlap, matching anchor 2.	2 / 3
	Total	8 / 12 Passed

Validation

93%

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

Validation for skill structure

Criteria	Description	Result
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
Commit: 5be99b6

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