frontend-design

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

1.58x

Quality

61%

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

64%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

This is a solid, actionable frontend design skill with excellent concrete examples (CSS themes, CDN imports, animation timings) and good structural organization. Its main weaknesses are the monolithic structure that could benefit from splitting detailed references into separate files, and some generic content (accessibility basics, component tips) that Claude already knows. Adding validation checkpoints to the workflow would strengthen it further.

Suggestions

Move detailed theme patterns (dark mode, neo-brutalism, glassmorphism) and font lists into a separate THEMES.md reference file to reduce the main skill's token footprint.

Trim the accessibility section to only non-obvious, project-specific rules — Claude already knows semantic HTML and heading hierarchy basics.

Add a validation/review checkpoint after implementation (e.g., 'Check: responsive at 320px, 768px, 1024px; verify contrast ratios; test keyboard navigation') to strengthen the workflow.

Dimension	Reasoning	Score
Conciseness	The skill is mostly efficient with useful reference tables and code snippets, but includes some unnecessary content Claude already knows (accessibility basics like semantic HTML, heading hierarchy) and some sections like the ASCII wireframe example add bulk without strong instructional value. The component design tips section is fairly generic.	2 / 3
Actionability	The skill provides fully executable CSS snippets, concrete CDN import lines, specific font recommendations, exact animation timing values, and copy-paste ready theme definitions. The guidance is specific and directly usable rather than abstract.	3 / 3
Workflow Clarity	The 4-step design workflow (Layout → Theme → Animation → Implementation) provides a clear sequence, but there are no validation checkpoints or feedback loops. For UI work involving multiple steps, there's no guidance on reviewing/testing output between steps or handling issues.	2 / 3
Progressive Disclosure	The content is well-structured with clear headings and a quick reference table, but it's a monolithic file with no references to supporting files. Several sections (theme patterns, animation guidelines, component tips) could be split into separate reference files to keep the main skill leaner.	2 / 3
	Total	9 / 12 Passed

Description

57%

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 provides explicit 'what' and 'when' clauses but suffers from vague capability language ('beautiful, modern UIs') without listing concrete actions. It includes some useful trigger terms but misses many common variations. The scope is overly broad ('any user interface'), creating potential overlap with other frontend-related skills.

Suggestions

Replace vague language like 'beautiful, modern UIs' with specific concrete actions, e.g., 'Provides spacing, typography, color palette, and layout guidelines for frontend components'.

Add more natural trigger terms users would say, such as 'CSS', 'styling', 'responsive design', 'Tailwind', 'design system', 'web design', or 'UI components'.

Narrow the scope to reduce conflict risk — specify what makes this skill distinct from general frontend coding skills, e.g., 'design principles and visual styling' vs 'functional implementation'.

Dimension	Reasoning	Score
Specificity	The description says 'expert frontend design guidelines' and 'creating beautiful, modern UIs' but lists no concrete actions. There are no specific capabilities like 'applies color palettes', 'generates responsive layouts', or 'creates component hierarchies'. 'Beautiful, modern UIs' is vague fluff.	1 / 3
Completeness	It does answer both 'what' (frontend design guidelines for creating UIs) and 'when' (Use when building landing pages, dashboards, or any user interface) with an explicit 'Use when...' clause. Though the 'what' is vague, both parts are present and explicit.	3 / 3
Trigger Term Quality	Includes some useful trigger terms like 'landing pages', 'dashboards', 'user interface', and 'frontend design'. However, it misses many natural variations users might say such as 'UI design', 'CSS', 'styling', 'layout', 'responsive', 'components', 'Tailwind', 'design system', or 'web design'.	2 / 3
Distinctiveness Conflict Risk	'Any user interface' is extremely broad and could overlap with general coding skills, CSS skills, component library skills, or framework-specific skills. The mention of 'landing pages' and 'dashboards' adds some specificity, but 'guidelines' vs actual code generation is ambiguous and could conflict with many frontend-related skills.	2 / 3
	Total	8 / 12 Passed

Validation

81%

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 — 9 / 11 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	9 / 11 Passed

Repository: jdrhyne/agent-skills
Commit: 292843f

Reviewed: about 13 hours 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.