frontend-design

Transform UI style requirements into production-ready frontend code with systematic design tokens, accessibility compliance, and creative execution. Use when building websites, web applications, React/Vue components, dashboards, landing pages, or any web UI requiring both design consistency and aesthetic quality.

Quality

71%

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

60%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.

Highly actionable content with concrete token systems and executable code, but it is markedly verbose with redundant checklists and templated restatements, and its progressive-disclosure structure is undermined by inlined detail and references to nonexistent bundle files.

Suggestions

Consolidate the four overlapping quality/checklists sections (Self-Review, Verification, Output Quality Standards, Tips for Excellence) into a single verification checklist to remove padded repetition.

Move the detailed token scales, design-direction templates, and prompt templates into the referenced reference files (examples/css/tokens.css, templates/*, etc.) and actually ship those files so the in-SKILL.md references resolve.

Tighten the prompt-template section, which largely restates the Core Principles and Implementation Workflow, keeping only what adds executable value beyond the methodology already stated.

Dimension	Reasoning	Score
Conciseness	At ~975 lines the body has several padded, heavily overlapping sections — Self-Review Checklist, Verification Checklist, Output Quality Standards, and Tips for Excellence restate the same principles, and four prompt templates restate the methodology — fitting the "noticeably verbose; several unnecessary padded sections" anchor.	2 / 5
Actionability	Provides exact token scales (px/rem values, typography/radius/shadow/motion), copy-paste CSS and TSX (clamp() fluid type, oklch colors, skeleton shimmer, keyframes), and concrete install commands — fully executable and copy-paste ready across common cases.	5 / 5
Workflow Clarity	A clear four-phase sequence (Design Analysis → Component Development → Page Assembly → QA) with a self-review checklist, but validation is a checklist rather than an explicit validate→fix→retry feedback loop, so it stops short of 5.	4 / 5
Progressive Disclosure	Most detail that belongs in separate files (token scales, five design-direction templates, prompt templates, advanced techniques) is inlined in SKILL.md, and the referenced bundle files (examples/css/, examples/typescript/, templates/*) do not exist, so the documented navigation is broken.	2 / 5
	Total	13 / 20 Passed

Description

83%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.

A well-constructed description that clearly states capabilities and trigger contexts in third person, with comprehensive natural trigger terms. It is held back from a perfect score by conceptually-phrased actions and slight breadth-related overlap risk.

Dimension	Reasoning	Score
Specificity	Lists several concrete capabilities — "systematic design tokens, accessibility compliance, and creative execution" alongside producing "production-ready frontend code" — but the actions are conceptual categories rather than the discrete file-level operations of the score-5 anchor.	4 / 5
Completeness	Explicitly answers both what ("Transform UI style requirements into production-ready frontend code…") and when ("Use when building websites, web applications, React/Vue components, dashboards, landing pages…") with concrete trigger phrases, matching the score-5 anchor.	5 / 5
Trigger Term Quality	Strong natural-term coverage ("websites, web applications, React/Vue components, dashboards, landing pages…web UI") users would actually say; a few synonyms (e.g. "frontend", "UI design") are absent, keeping it below 5.	4 / 5
Distinctiveness Conflict Risk	The frontend-design niche with aesthetic-quality framing is mostly distinct, but "any web UI" breadth leaves minor overlap risk with general web-development skills, so it is not a clear 5.	4 / 5
	Total	17 / 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
skill_md_line_count	SKILL.md is long (982 lines); consider splitting into references/ and linking	Warning
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	14 / 16 Passed

Repository: jjyaoao/HelloAgents
Path: skills/frontend-design/SKILL.md
Commit: 93e77ea

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