CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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).

63

Quality

79%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

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
SKILL.md
Quality
Evals
Security

Quality

Content

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

A tight, opinionated design-direction skill: lean prose, concrete do/don't guidance, and exemplary progressive disclosure with two purposeful reference files. The main weaknesses are that the workflow ends at the pre-code design phase (no implementation or review steps to close the loop) and a small amount of template scaffolding that should be trimmed.

Suggestions

Add a post-implementation step to close the workflow loop — e.g., "After writing code, re-check the output against the Anti-Patterns list (system fonts, purple-gradient-on-white, scattered animations) before delivering" — turning the anti-patterns section into a validation checkpoint.

Remove or consolidate the redundant framing ("Priority: P0 (CRITICAL)" vs. "Phase 0: Mandatory Pre-Code") and delete the "Canonical response anchors" section, which is scaffolding that consumes context without adding actionable guidance.

Add one small inline snippet per dimension where guidance is currently abstract (e.g., a two-line example of grid-breaking overlap or a noise-texture overlay), since the working examples for tone and motion are only reachable via the reference files.

DimensionReasoningScore

Conciseness

The body is lean and imperative ("never default to system fonts", "Solid white/gray backgrounds = missed creative opportunity") and assumes Claude's competence without explaining basics — close to the score-5 anchor. However, there are minor trimmable instances: "Priority: P0 (CRITICAL)" duplicates "Phase 0: Design Thinking (Mandatory Pre-Code)", and the closing "Canonical response anchors" section is scaffolding that adds no actionable guidance, keeping it at score 4 rather than 5.

4 / 5

Actionability

Concrete, executable specifics are present: "Self-host via `next/font`, `@font-face`, or Google Fonts API — never CDN `<link>`", "Use CSS custom properties (`--color-primary`, `--color-accent`)", "`@keyframes`, `transition`, `animation-delay`". This matches 'mostly executable guidance... with minor gaps'. It does not reach score 5 because several directives stay abstract ("Break grid intentionally", "Create atmosphere: gradient meshes, noise textures") with no inline example — the working code lives in the reference files rather than the body.

4 / 5

Workflow Clarity

There is a real sequence start — "Answer these before touching implementation" with three explicit design questions (Purpose / Tone / Differentiation) acting as a pre-code gate — but after Phase 0 the aesthetic dimensions are unordered parallel guidance with no connection to implementation or review. This matches the score-3 anchor 'sequence present but checkpoints missing or implicit'; there is no validation/feedback loop after code is written, so it does not reach score 4.

3 / 5

Progressive Disclosure

The body is a concise overview with two well-signaled, one-level-deep references that are real files: "[Tone Palette & Font Pairings](references/tones.md) — load when choosing aesthetic direction or fonts" and "[Motion Patterns](references/motion.md) — load when implementing animations or transitions". Content is appropriately split (tone palettes and CSS motion patterns live in the reference files, verified to exist), and navigation is easy — a direct match to the score-5 anchor.

5 / 5

Total

16

/

20

Passed

Description

78%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 strong description with a clear 'what' and an explicit, well-phrased 'Use when' clause covering natural user terminology and all major frameworks. Its only real gap is that the 'what' side names a single broad action ("Design... UI") rather than enumerating multiple concrete capabilities, which limits specificity.

DimensionReasoningScore

Specificity

The description names the domain ("frontend UI") and one action ("Design distinctive, production-grade frontend UI"), which matches the anchor 'Names domain and 1-2 concrete actions, but not comprehensive'. It does not list multiple specific concrete actions the way the score-5 anchor requires, but it is more concrete than the score-2 'domain named, actions generic' anchor, so it is not below 3.

3 / 5

Completeness

It clearly answers both parts: 'what' ("Design distinctive, production-grade frontend UI with bold aesthetic choices") and an explicit 'when' with concrete trigger phrases ("Use when building web components, pages, interfaces, dashboards, or applications..."). This directly matches the score-5 anchor pattern of the PDF example; it is clearly above the score-4 anchor where the 'when' is only adequate.

5 / 5

Trigger Term Quality

"web components, pages, interfaces, dashboards, or applications in any framework (React, Next.js, Angular, Vue, HTML/CSS)" gives good natural keyword coverage including framework names users actually say. A few natural phrases are missing from the description itself (e.g., "make it look good", "landing page" — these only appear in the metadata triggers, not the description field), so it does not reach the comprehensive score-5 anchor.

4 / 5

Distinctiveness Conflict Risk

The aesthetic-design niche ("bold aesthetic choices", "distinctive... production-grade frontend UI") is mostly distinct from functional coding skills, but "in any framework" plus generic triggers like "dashboards" and "pages" create minor overlap risk with closely related skills (charting/dataviz, design-system skills). It is a notch below the score-5 'clear niche with minimal conflict risk' anchor but above score-3's 'could still overlap with similar skills'.

4 / 5

Total

16

/

20

Passed

Validation

87%

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

CriteriaDescriptionResult

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

Reviewed

Table of Contents

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.