CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-design

You are a frontend designer-engineer, not a layout generator.

42

Quality

42%

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 ./plugins/AI-Agents-Safe-Coding-Skills/skills/frontend-design/SKILL.md

The canonical home for this skill is frontend-design in administrakt0r/AI-Agents-Safe-Coding-Skills

SKILL.md
Quality
Evals
Security

Quality

Content

56%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 body is a well-structured, opinionated design framework with a concrete DFII scoring mechanism and a required output structure, giving it solid workflow clarity. It is let down by verbosity/redundancy, a lack of executable code examples for a code-producing skill, and a monolithic single-file layout with no progressive disclosure.

Suggestions

Add at least one minimal executable example (e.g. a CSS-variables color system snippet or a sample design-system snapshot) so the guidance is copy-paste ready.

De-duplicate section 7's anti-patterns against section 4's execution rules, or collapse them into a single checklist to tighten the token budget.

Move the DFII detail, the 'Integration With Other Skills' list, and the 'Questions to Ask' section into a reference file referenced one level deep to improve progressive disclosure.

DimensionReasoningScore

Conciseness

Most content is directive and opinionated rather than explaining basics Claude already knows, but the execution rules in section 4 are restated as anti-patterns in section 7 and section 10 adds generic filler, fitting the score-3 'mostly efficient but could be tightened' anchor rather than the lean score-4.

3 / 5

Actionability

The DFII scoring formula, color/typography rules, and required output structure are concrete, but a skill whose output is frontend code provides no executable code template or example design-system snapshot, matching score-3's 'some concrete guidance but incomplete' rather than the mostly-executable score-4.

3 / 5

Workflow Clarity

Sections are sequenced from design thinking through DFII evaluation to implementation with an operator checklist, and 'If the design could be mistaken for a template -> restart' supplies a feedback loop; this matches score-4's 'clear sequence with most checkpoints present' with only minor validation gaps.

4 / 5

Progressive Disclosure

The 10 numbered sections are well-organized, but all guidance is inlined in a ~270-line SKILL.md with no references or bundle files, fitting score-3's 'some structure but content that should be separate is inline' rather than score-4's appropriately-placed references.

3 / 5

Total

13

/

20

Passed

Description

28%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 is a stylish role statement that names its domain but fails to communicate concrete actions or a triggering 'when' clause, leaving it weak on specificity, trigger quality, and completeness. It is recognizable but not informative enough for reliable skill selection.

Suggestions

Append concrete actions, e.g. 'Designs and codes distinctive, production-grade frontend interfaces with intentional aesthetic direction.'

Add an explicit trigger clause: 'Use when creating UI/web interfaces that must avoid generic AI-template aesthetics.'

Include natural user-facing keywords such as 'web UI', 'landing page', 'frontend design', or 'interface styling' so the skill triggers on how users actually phrase the request.

DimensionReasoningScore

Specificity

The phrase 'frontend designer-engineer' names the domain but the description states zero concrete actions ('create', 'build', 'generate'); it is a stance statement rather than an action list, matching the score-2 anchor of naming the domain with minimal actions and not the score-1 pure-abstract anchor.

2 / 5

Completeness

It offers only a vague role-statement 'what' ('You are a frontend designer-engineer') and entirely lacks a 'when', which the score-2 anchor ('vague what and no when') matches; the missing 'Use when...' clause also caps completeness per the guidelines, keeping it below score-3.

2 / 5

Trigger Term Quality

Only 'frontend' is a natural keyword; 'designer-engineer' and 'layout generator' are coined role terms a user would rarely say, and there is no 'Use when...' trigger phrase, fitting the score-2 'one or two generic keywords; missing natural phrases' anchor rather than score-3's relevant-keyword coverage.

2 / 5

Distinctiveness Conflict Risk

The frontend-design niche is somewhat distinguishable from generic coding skills, but the description alone is too thin to cleanly separate it from related design/UI skills, fitting score-3's 'somewhat specific but could still overlap' rather than the mostly-distinct score-4 anchor.

3 / 5

Total

9

/

20

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
administrakt0r/AI-Agents-Safe-Coding-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.