frontend-design

Frontend UI: pages, apps, components, polished non-generic design.

Quality

66%

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 ./skills/frontend-design/SKILL.md

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 well-structured and unusually actionable for an instruction-only design skill, with a clear think-then-implement sequence and concrete named techniques, libraries, and anti-patterns. Its main weakness is padding: redundant adjective chains and motivational flourishes that could be cut without losing any guidance.

Suggestions

Cut the redundant adjectives in the typography bullet ('Choose fonts that are beautiful, unique, and interesting... distinctive choices... unexpected, characterful font choices') to a single directive.

Remove motivational filler such as 'There are so many flavors to choose from' and the closing 'Remember: Claude is capable of extraordinary creative work. Don't hold back...' paragraph.

Tighten the tone bullet by dropping the garbled sentence 'Use these for inspiration but design one that is true to the aesthetic direction' and keeping just the list of aesthetic extremes.

Dimension	Reasoning	Score
Conciseness	The skeleton is lean, but several passages are padded or redundant — the typography bullet makes the same point three ways ('beautiful, unique, and interesting... distinctive choices... unexpected, characterful font choices'), and 'There are so many flavors to choose from' and the closing 'Remember: Claude is capable of extraordinary creative work. Don't hold back...' add no guidance. This fits anchor 3 ('could be tightened') more than anchor 4's 'minor instances'.	3 / 5
Actionability	As an instruction-only skill it gives concrete, specific techniques — 'Use CSS variables', 'staggered reveals (animation-delay)', 'Use Motion library for React', 'Avoid generic fonts like Arial and Inter', 'NEVER converge on... (Space Grotesk)' — with only minor vagueness ('Unexpected layouts. Asymmetry. Overlap.'). Per the scoring note, absence of code is not penalized when guidance is actionable.	4 / 5
Workflow Clarity	A clear two-phase sequence is present — 'Before coding, understand the context and commit to a BOLD aesthetic direction' (purpose/tone/constraints/differentiation), then 'implement working code' with complexity matched to the vision. The operation is not destructive or batch, so no validation cap applies, but there are no explicit checkpoints, keeping it at anchor 4 rather than 5.	4 / 5
Progressive Disclosure	The body is under 50 lines with no bundle files (no references/, scripts/, or assets/ exist) and no need for external references, and it is cleanly organized into '## Design Thinking' and '## Frontend Aesthetics Guidelines' — per the judging guidelines, this earns a 5.	5 / 5
	Total	16 / 20 Passed

Description

61%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 is concise and names a distinct niche with a clear design stance, but it lists objects rather than actions and omits any 'Use when...' trigger guidance. Adding an explicit when-to-use clause and action verbs would materially improve it.

Suggestions

Add an explicit 'Use when...' clause, e.g. 'Use when building or restyling web pages, apps, or components where distinctive, production-grade visual design matters.'

Lead with concrete action verbs (builds, designs, restyles) so the description lists specific actions rather than only artifacts.

Include natural trigger synonyms and technologies users actually say — 'website', 'landing page', 'UI', 'React/CSS', 'frontend design' — to broaden trigger coverage.

Dimension	Reasoning	Score
Specificity	Names the domain ('Frontend UI') plus several concrete artifacts ('pages, apps, components') and a design stance ('polished non-generic design'), but contains no action verbs, so it does not reach anchor 4's 'several specific actions' nor fall to anchor 2's bare domain label.	3 / 5
Completeness	The 'what' is present (frontend UI with polished, non-generic design) but the 'when' is entirely absent — there is no 'Use when...' clause or equivalent trigger guidance, which caps completeness at 3 per the judging guidelines.	3 / 5
Trigger Term Quality	Terms like 'Frontend UI', 'pages', 'apps', 'components', and 'design' are natural phrases users would say, but common variants like 'build', 'website', 'landing page', 'React', or 'CSS' are missing, matching anchor 4's 'good keyword coverage; a few natural terms missing'.	4 / 5
Distinctiveness Conflict Risk	'Frontend UI' with 'polished non-generic design' is a mostly distinct niche with a distinguishing quality marker, though the broad 'pages, apps, components' scope creates minor overlap risk with component-library or styling skills.	4 / 5
	Total	14 / 20 Passed

Validation

100%

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

Validation for skill structure

No warnings or errors.

Repository: steipete/agent-scripts
Path: skills/frontend-design/SKILL.md
Commit: 3f8c6a3

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.