frontend-design

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

1.58x

Quality

80%

Does it follow best practices?

Impact

87%

1.58x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Fix and improve this skill with Tessl

tessl review fix ./prompts/frontend-design/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 highly actionable with concrete, executable code and a clear design workflow, but it over-explains basic accessibility and HTML concepts Claude already knows and bundles ~200 lines of reference material into one file. Trimming Claude-known padding and splitting reference tables into bundled files would improve both conciseness and progressive disclosure.

Suggestions

Cut or compress the Accessibility and Component Design Tips sections to only non-obvious rules, removing restatements of semantic HTML, heading hierarchy, and 4.5:1 contrast that Claude already knows.

Move the font lists, theme CSS patterns, and animation micro-syntax into reference files under ./references/ and link to them from a leaner overview, reducing the inline wall of reference material.

De-duplicate guidance that appears in both the section body and the Quick Reference table (oklch preference, border radius, shadow rules).

Dimension	Reasoning	Score
Conciseness	The reference material (oklch tokens, font lists, animation timings) is genuinely useful, but sections on semantic HTML, heading hierarchy, and 4.5:1 contrast restate concepts Claude already knows, and color/radius guidance is repeated across sections.	2 / 3
Actionability	Provides fully executable, copy-paste-ready guidance: concrete oklch CSS variables, Tailwind/Flowbite/Lucide CDN snippets, and responsive media queries rather than abstract direction.	3 / 3
Workflow Clarity	A clearly sequenced four-step workflow (Layout, Theme, Animation, Implementation) is laid out up front and elaborated per section; this design-generation context does not require the validation gating reserved for destructive/batch operations.	3 / 3
Progressive Disclosure	Sections are well organized with a quick-reference table, but the skill is a monolithic ~200-line single file with no bundle references, and reference-heavy content (font lists, theme patterns, animation syntax) that could live in separate files is kept inline.	2 / 3
	Total	10 / 12 Passed

Description

82%

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 cleanly answers both what the skill does and when to use it with a natural trigger clause, but its capability list is generic and the catch-all 'any user interface' weakens distinctiveness. Tightening the action verbs and narrowing the trigger scope would raise specificity and conflict resistance.

Suggestions

Replace generic verbs ('creating', 'building') with concrete actions, e.g. 'Design layouts, define color/theme tokens, plan animations, and generate responsive UI code'.

Narrow 'any user interface' to specific, distinctive triggers (e.g. 'marketing pages, dashboards, and component libraries') to reduce overlap with general coding skills.

Lead with the most distinctive capability so the skill is distinguishable at a glance from generic frontend or web-dev skills.

Dimension	Reasoning	Score
Specificity	Names the domain ('frontend design guidelines') and some actions ('creating beautiful, modern UIs', 'building landing pages, dashboards') but does not list multiple distinct concrete capabilities the way the top anchor requires.	2 / 3
Completeness	It states what the skill provides ('Expert frontend design guidelines for creating beautiful, modern UIs') and an explicit 'Use when building landing pages, dashboards...' trigger clause, satisfying both what and when.	3 / 3
Trigger Term Quality	'building landing pages, dashboards, or any user interface' surfaces natural terms a user would actually say when requesting this skill, matching the good-coverage anchor.	3 / 3
Distinctiveness Conflict Risk	'any user interface' is broad and could overlap with general UI/component skills, though 'landing pages' and 'dashboards' give it a somewhat specific niche.	2 / 3
	Total	10 / 12 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
Commit: a4d31ad

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