frontend-design

Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.

1.58x

Quality

66%

Does it follow best practices?

Impact

87%

1.58x

Average score across 3 eval scenarios

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./prompts/frontend-design/SKILL.md

Quality

Content

63%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 content is a concrete, actionable design reference with a clear workflow and copy-paste-ready token blocks. Its main weaknesses are inline padding of basics Claude already knows and the absence of any progressive disclosure into separate reference files.

Suggestions

Trim the Accessibility and Responsive Design sections to only the non-obvious rules, since semantic HTML, heading hierarchy, and mobile-first media queries are already well known to Claude.

Move the full theme CSS blocks (Modern Dark, Neo-Brutalism, Glassmorphism) and the font catalog into separate reference files under references/ and link to them from SKILL.md to improve progressive disclosure.

Add one complete worked component example (e.g. a button or card with tokens, states, and animation applied) so the guidance is fully executable end-to-end.

Dimension	Reasoning	Score
Conciseness	The body is mostly efficient reference material (token blocks, font lists, CDN snippets), but it also explains concepts Claude already knows such as semantic HTML, heading hierarchy, and mobile-first @media queries, so it could be tightened.	3 / 5
Actionability	Guidance is largely executable: real CSS variable blocks, named font stacks, CDN script tags, an animation micro-syntax, and a quick-reference table, with only minor gaps (no full component examples and a custom notation that needs interpretation).	4 / 5
Workflow Clarity	A clear four-step Design Workflow (Layout, Theme, Animation, Implementation) sequences the process, and because this is generative design rather than destructive/batch work, missing validation checkpoints do not cap the score below 4.	4 / 5
Progressive Disclosure	The file is well-sectioned but everything is inlined into one ~200-line document with no bundle files; multiple full theme CSS blocks and the font catalog could live in separate reference files, so structure is present but content that should be split is inline.	3 / 5
	Total	14 / 20 Passed

Description

70%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 clearly covers both what the skill does and when to use it with natural trigger terms, using appropriate third-person voice. It is slightly held back by abstract capability language ('beautiful, modern UIs') and a broad 'any user interface' catch-all.

Suggestions

Replace the abstract phrase 'creating beautiful, modern UIs' with concrete actions like 'defining color tokens, typography, spacing scales, and animation micro-interactions'.

Tighten the trigger clause by adding common synonyms users say, e.g. 'web apps, marketing sites, or UI redesigns'.

Narrow 'any user interface' to reduce overlap risk with general web-development or component-library skills.

Dimension	Reasoning	Score
Specificity	It names the domain ('frontend design guidelines') and a couple of concrete actions ('creating beautiful, modern UIs', 'building landing pages, dashboards') but the actions are abstract and coverage is not comprehensive, matching the score-3 anchor.	3 / 5
Completeness	It states both what ('Expert frontend design guidelines for creating beautiful, modern UIs') and when ('Use when building landing pages, dashboards, or any user interface'), with the 'when' explicit but slightly broad.	4 / 5
Trigger Term Quality	Natural terms users would say are present ('landing pages', 'dashboards', 'user interface', 'frontend design'), giving good keyword coverage, though a few common synonyms ('web app', 'website', 'UI design') are missing.	4 / 5
Distinctiveness Conflict Risk	The frontend-design niche with landing-page/dashboard triggers is mostly distinct from other skills, with only minor overlap risk against general web-development skills.	4 / 5
	Total	15 / 20 Passed

Validation

87%

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

Validation for skill structure

Criteria	Description	Result
metadata_version	'metadata.version' is missing	Warning
metadata_field	'metadata' should map string keys to string values	Warning

	Total	14 / 16 Passed

Repository: jdrhyne/agent-skills
Path: prompts/frontend-design/SKILL.md
Commit: 439cd3a

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