frontend-design

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

Quality

68%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

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

The canonical home for this skill is frontend-design in jdrhyne/agent-skills

Quality

Content

71%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 highly actionable with copy-paste-ready code and a clear design workflow, but it is a dense monolith that inlines reference-grade material (theme presets, font catalogs) instead of splitting it into bundled files. Tightening and externalizing reference material would notably improve it.

Suggestions

Move the full CSS theme presets (Modern Dark, Neo-Brutalism, Glassmorphism) and font catalogs into references/ files (e.g. references/themes.md, references/fonts.md) and link to them from SKILL.md to improve progressive disclosure.

De-duplicate the Quick Reference table against the detailed sections so guidance lives in one place, reducing token cost.

Add a brief validation/review checkpoint at the end of the Design Workflow (e.g. "Verify contrast ≥4.5:1 and test responsive breakpoints before shipping") to close the workflow-clarity gap.

Dimension	Reasoning	Score
Conciseness	The body is mostly efficient and concrete with little over-explanation of concepts Claude already knows, but at roughly 200 lines it inlines full CSS theme presets, font catalogs, and a duplicated quick-reference table that could be tightened or split out, matching the "mostly efficient but could be tightened" anchor.	3 / 5
Actionability	Guidance is copy-paste ready throughout — executable CSS :root blocks, Tailwind/Flowbite/Lucide CDN script tags, animation micro-syntax, and responsive media queries — with specific examples covering the common cases, matching the fully executable score-5 anchor.	5 / 5
Workflow Clarity	A clear four-step Design Workflow (Layout → Theme → Animation → Implementation) is sequenced with one section per step; this is generative design work rather than destructive/batch, so no validation cap applies, but explicit checkpoints for review are absent, keeping it just below score 5.	4 / 5
Progressive Disclosure	Sections are well organized (eight numbered sections plus a quick-reference table), but the skill is a long monolithic document with no bundle files and content that clearly belongs in separate references (full theme presets, font catalogs) is inlined, matching the "some structure but content that should be separate is inline" anchor rather than the under-50-line exception.	3 / 5
	Total	15 / 20 Passed

Description

65%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 cleanly answers what the skill does and when to use it with natural trigger terms, but leans on generic fluff ("beautiful, modern UIs") rather than concrete capabilities. It is solid but could be sharpened by naming specific deliverables.

Suggestions

Replace "beautiful, modern UIs" with concrete deliverables, e.g. "Design and implement landing pages, dashboards, and component systems with modern color, typography, and animation guidelines."

Add common synonyms and file/scope triggers ("UI", "web app", "component library", "design system") to broaden natural keyword coverage.

Tighten the "what" so it lists specific actions (define themes, wireframe layouts, generate styled components) instead of the abstract "guidelines for creating".

Dimension	Reasoning	Score
Specificity	The description names the frontend-design domain but its only stated action — "creating beautiful, modern UIs" — is generic and padded with buzzwords ("beautiful, modern"), matching the anchor where the domain is named but actions are minimal or generic.	2 / 5
Completeness	It states both a "what" ("Expert frontend design guidelines for creating... UIs") and an explicit "Use when..." clause with concrete triggers, but the "what" remains somewhat generic, so it falls just below the fully concrete score-5 anchor.	4 / 5
Trigger Term Quality	"building landing pages, dashboards, or any user interface" surfaces natural phrases users actually say, with good keyword coverage; it stops short of score 5 because synonyms like "UI", "web app", or "website" are only weakly covered by the broad "any user interface".	4 / 5
Distinctiveness Conflict Risk	"frontend design" plus "landing pages" and "dashboards" carves a mostly distinct niche with only minor overlap risk; the broad "any user interface" tail prevents a score of 5 by leaving overlap with general UI/component skills.	4 / 5
	Total	14 / 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: bap-jorkim/agent-skills-fork-feb-25
Path: prompts/frontend-design/SKILL.md
Commit: f4ed46f

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.