CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

78

1.15x
Quality

Does it follow best practices?

Impact

89%

1.15x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No known issues

SKILL.md
Quality
Evals
Security

Quality

Content

57%

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

The skill is well-organized and ideologically strong, but it is guidance-heavy with repeated admonitions and no executable examples or verification steps. Tightening redundancy and adding concrete code/checkpoint steps would raise its quality.

Suggestions

Add at least one copy-paste starter (e.g., an HTML/CSS skeleton with CSS variables and a font import) to make the aesthetic guidance executable.

De-duplicate the repeated 'avoid generic AI aesthetics' admonitions into a single concise NEVER list to reclaim token budget.

Insert an explicit verification step at the end of the workflow (e.g., 'render and visually review against the chosen aesthetic before finalizing').

DimensionReasoningScore

Conciseness

The body is largely punchy and directive, but repeats the same guidance multiple times (e.g., bold aesthetic direction and 'avoid generic' framing restated as 'NEVER use generic AI-generated aesthetics', 'No design should be the same', 'NEVER converge on common choices') adding redundancy.

2 / 3

Actionability

It gives concrete aesthetic directives (CSS variables, animation-delay, gradient meshes, noise textures) but provides no executable code snippets, file scaffolds, or copy-paste examples, so the guidance describes rather than instructs.

2 / 3

Workflow Clarity

There is a clear sequence (Design Thinking → commit to aesthetic → implement working code), but it lacks explicit validation checkpoints or feedback loops to verify the produced frontend, which the guidelines call out as a cap at 2.

2 / 3

Progressive Disclosure

The body is self-contained at a single level with no bundle files and no nested references, organized under clear sections (Design Thinking, Frontend Aesthetics Guidelines), which for a concise single-purpose skill warrants a top score.

3 / 3

Total

9

/

12

Passed

Description

85%

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 states both capability and trigger conditions with concrete, distinct framing. Its main weakness is reliance on internal jargon ('AI slop', 'generic AI aesthetics') as trigger phrasing rather than natural user language.

Suggestions

Replace internal jargon like 'AI slop' and 'generic AI aesthetics' with natural user phrasing such as 'custom UI', 'styled web pages', or 'polished frontend design'.

Add common user variations like 'website', 'landing page', 'dashboard', or 'web app' to broaden natural trigger coverage.

DimensionReasoningScore

Specificity

Lists concrete actions such as building 'web components, pages, or applications' and generating 'creative, polished code', naming the domain and the deliverable rather than vague abstractions.

3 / 3

Completeness

It answers what the skill does ('Create distinctive, production-grade frontend interfaces with high design quality') and when to use it ('Use this skill when the user asks to build web components, pages, or applications').

3 / 3

Trigger Term Quality

It includes 'build web components, pages, or applications' which a user might naturally say, but also leans on designer jargon like 'generic AI aesthetics' and 'AI slop' that a typical user would not phrase as a trigger.

2 / 3

Distinctiveness Conflict Risk

The 'build web components, pages, or applications' trigger carves a clear niche focused on frontend UI generation, and the aesthetic-quality framing distinguishes it from generic coding skills.

3 / 3

Total

11

/

12

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository
block/agent-skills
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.