CtrlK
BlogDocsLog inGet started
Tessl Logo

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

72

Quality

91%

Does it follow best practices?

Impact

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

SKILL.md
Quality
Evals
Security

Quality

Content

100%

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

The body is an efficient, directive overview that assumes Claude's competence, points to real one-level-deep reference files for detailed code, and enforces a mandatory pre-code design phase followed by an anti-patterns checklist. It is a well-structured example of progressive disclosure for an instruction-style skill.

DimensionReasoningScore

Conciseness

The body is lean and directive ('Pair distinctive display font + refined body font; never default to system fonts') with no padding explaining concepts Claude already knows; every line earns its place.

3 / 3

Actionability

Gives concrete, actionable guidance naming exact mechanisms ('Self-host via next/font, @font-face, or Google Fonts API', 'Use CSS custom properties (--color-primary, --color-accent)', 'CSS-first: @keyframes, transition, animation-delay'); full code is appropriately deferred to the references, which the rubric permits for actionable instruction-only skills.

3 / 3

Workflow Clarity

A clear sequence is enforced: 'Phase 0: Design Thinking (Mandatory Pre-Code)' with explicit questions to answer before implementation, followed by the Aesthetic Dimensions and an Anti-Patterns review checklist; for this non-fragile design skill that explicit pre-code checkpoint satisfies the clarity bar.

3 / 3

Progressive Disclosure

SKILL.md is a concise overview with well-signaled, one-level-deep references to real files ([references/tones.md] and [references/motion.md]), each annotated with when to load it; content is appropriately split between overview and detailed material.

3 / 3

Total

12

/

12

Passed

Description

82%

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 strong on completeness and trigger coverage, clearly stating both what the skill does and when to use it. It is slightly weak on distinctiveness because its trigger surface overlaps with generic frontend development, and on specificity because it names a single broad action rather than enumerating concrete capabilities.

Suggestions

Enumerate concrete actions (e.g., 'choose typography, build color systems, orchestrate motion, compose layouts') to lift specificity from a single 'Design' verb to multiple specific actions.

Tighten the trigger clause toward aesthetic/design intent (e.g., 'Use when the user wants a distinctive look, custom theme, or bold visual direction') to reduce overlap with general frontend coding skills.

Consider dropping the long framework list or moving it to body content; it adds tokens without improving distinctiveness.

DimensionReasoningScore

Specificity

Names the domain clearly ('Design distinctive, production-grade frontend UI with bold aesthetic choices') but offers essentially one action verb rather than a list of multiple concrete actions, matching the 'names domain and some actions but not comprehensive' anchor.

2 / 3

Completeness

Explicitly answers both what ('Design distinctive, production-grade frontend UI...') and when ('Use when building web components, pages, interfaces, dashboards...'), satisfying the score-3 anchor for both what AND when with explicit triggers.

3 / 3

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 coverage of natural terms a user would say, supported by the metadata trigger keywords.

3 / 3

Distinctiveness Conflict Risk

The aesthetic-design framing is a niche, but broad triggers like 'building web components', 'pages', and 'applications' overlap with general frontend coding skills, so it could still trigger for non-design work.

2 / 3

Total

10

/

12

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.

Validation14 / 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
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.