common-ui-design

Design distinctive, production-grade frontend UI with bold aesthetic choices. Use when building web components, pages, interfaces, dashboards, or applications in any framework (React, Next.js, Angular, Vue, HTML/CSS).

Quality

67%

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 ./.github/skills/common/common-ui-design/SKILL.md

Quality

Content

65%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 content is a well-structured, lean design-direction overview with excellent progressive disclosure via two clearly signaled reference files. Its weaknesses are mid-band actionability (concrete pointers mixed with abstract aesthetic directives, with executable code delegated to references) and a workflow that lacks validation/feedback checkpoints.

Suggestions

Add one small inline code snippet (e.g., a minimal CSS custom-properties block or a self-host next/font example) so the body itself carries executable guidance, not just the references.

Tighten abstract directives like "Create atmosphere" and "Break grid intentionally" into concrete, checkable choices (e.g., "pick one: gradient mesh OR noise overlay OR layered transparency").

Add a brief post-implementation checkpoint (e.g., "re-read the UI against the chosen Tone and Differentiation before finalizing") to give the workflow a feedback loop.

Dimension	Reasoning	Score
Conciseness	The body is lean and directive (bullet lists of named techniques and anti-patterns) and assumes Claude's competence; a few opinionated prose lines ("Bold maximalism and refined minimalism both work — intentionality, not intensity, key.") could be trimmed.	4 / 5
Actionability	It mixes concrete pointers ("Self-host via next/font, @font-face", "Use CSS custom properties (--color-primary)", "Motion library") with abstract aesthetic direction ("Create atmosphere: gradient meshes", "Break grid intentionally"), and the executable code lives in references rather than the body, leaving guidance partially actionable.	3 / 5
Workflow Clarity	Phase 0 provides a clear mandatory pre-code checklist (Purpose, Tone, Differentiation) and the aesthetic dimensions follow, but there are no validation or feedback checkpoints; acceptable for a non-destructive design skill but keeps it at mid-band.	3 / 5
Progressive Disclosure	The body is a well-organized overview that points to two real one-level-deep references ([tones.md](references/tones.md), [motion.md](references/motion.md)), each clearly signaled inline and repeated in a References section with load-when guidance, making navigation easy.	5 / 5
	Total	15 / 20 Passed

Description

70%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 clearly answers both what the skill does and when to use it, with a solid set of natural trigger terms and framework synonyms. It is held back from the top band by qualitative rather than concrete action enumeration and by somewhat broad triggers that overlap with general frontend work.

Suggestions

Add one or two concrete actions to the "what" clause (e.g., "scaffold component layouts, define typography and color systems, orchestrate motion") to lift specificity toward a 5.

Include a couple of common natural phrasings users say (e.g., "make it look good", "redesign this page") to round out trigger-term coverage.

Tighten the "when" clause to emphasize aesthetic/design intent so it conflicts less with general frontend build skills.

Dimension	Reasoning	Score
Specificity	Names the frontend UI domain and a concrete action ("Design distinctive, production-grade frontend UI with bold aesthetic choices"), but does not enumerate multiple specific actions, so coverage is not comprehensive.	3 / 5
Completeness	It explicitly states both what ("Design distinctive, production-grade frontend UI...") and when ("Use when building web components, pages, interfaces, dashboards..."), with concrete trigger phrases; the "what" is qualitative rather than a concrete action list, keeping it just below a 5.	4 / 5
Trigger Term Quality	"Use when building web components, pages, interfaces, dashboards, or applications in any framework (React, Next.js, Angular, Vue, HTML/CSS)" gives good natural-term coverage with framework synonyms, though common phrasings like "make it look good" are absent.	4 / 5
Distinctiveness Conflict Risk	The design/aesthetic framing carves a distinct niche, but the triggers (any web component, page, or application) overlap with general frontend development skills, creating minor conflict risk.	4 / 5
	Total	15 / 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: HoangNguyen0403/agent-skills-standard
Path: .github/skills/common/common-ui-design/SKILL.md
Commit: 405cdd5

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