CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-design

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

43

Quality

44%

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-claude/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

60%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 well-structured, opinionated, and gives a usable design framework with a scoring rubric and checklist, but it is instruction-only with no worked examples or executable artifacts and carries some repetition and generic filler. It is a solid, navigable skill that would benefit from one concrete worked example and trimming redundant sections.

Suggestions

Add one fully worked example (a sample Design Direction Summary + Design System Snapshot with concrete font names, CSS color variables, and the resulting DFII score) to lift actionability from directional to executable.

De-duplicate Section 7 anti-patterns against Section 4 rules and remove the generic 'When to Use' filler line to tighten conciseness.

Consider moving the Section 8 'Integration With Other Skills' list and the DFII detail into a short reference so the overview stays leaner.

DimensionReasoningScore

Conciseness

The body is mostly tight, list-driven guidance (DFII table, execution rules, checklist) without explaining basic concepts Claude already knows, but it repeats itself — Section 7 anti-patterns restate Section 4 rules (Inter/Roboto/system fonts, default layouts) and the closing 'When to Use' line ('This skill is applicable to execute the workflow or actions described in the overview') is generic filler, so it is 'mostly efficient but could be tightened', not a 4.

3 / 5

Actionability

It gives concrete decision frameworks (DFII formula with thresholds, mandatory output structure, operator checklist, named anti-patterns), but as instruction-only guidance it never provides a worked example, sample font pairing, palette, or any copy-paste-ready artifact, leaving it at 'some concrete guidance but incomplete' rather than mostly-executable.

3 / 5

Workflow Clarity

There is a clear sequence — Design Thinking Phase → DFII evaluation → Execution rules → Required Output Structure → Operator Checklist — with validation checkpoints in the DFII thresholds (Risky → reduce scope, Weak → rethink) and an explicit feedback loop ('If the design could be mistaken for a template → restart'); it is not a 5 because the checkpoints are not framed as ordered validate-and-verify gates within the build flow.

4 / 5

Progressive Disclosure

The skill is a single self-contained file with ten well-organized numbered sections and no nested/deep references, and no bundle files exist to misroute; it is not a 5 because the file is long (~270 lines) with some inline content (Section 8 integration list, Section 7 anti-patterns) that is weak/optional rather than essential, leaving minor organization gaps.

4 / 5

Total

14

/

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 terse second-person role statement that names the frontend-design domain but provides no concrete actions and no 'Use when' trigger guidance. It is recognizable but under-specified for triggering purposes.

Suggestions

Rewrite in third person listing concrete actions, e.g. 'Designs distinctive, production-grade frontend interfaces with a named aesthetic direction. Use when creating UI/landing pages, web app frontends, or marketing surfaces that must avoid generic AI-UI patterns.'

Add an explicit 'Use when ...' clause with natural trigger terms users would actually say (e.g. 'design a UI', 'build a landing page', 'frontend styling').

Add concrete capability verbs and examples (e.g. pick font pairings, define CSS-variable color stories, apply the DFII scoring rubric) so the description communicates what the skill does, not just the persona to adopt.

DimensionReasoningScore

Specificity

The description names the domain ("frontend designer-engineer") but lists no concrete actions at all — it is a role statement ("You are ... not a layout generator") rather than a capability statement, so it sits at 'names the domain but actions are minimal or generic'; the second-person voice ('You are') further drags it down per the voice penalty, so it cannot reach 3.

2 / 5

Completeness

It offers only a vague 'what' (an implied design role) and no 'when' / 'Use when' clause at all, matching anchor 2; the missing explicit trigger guidance caps it here and it cannot be 3 because the 'what' is not concrete actions.

2 / 5

Trigger Term Quality

Only 'frontend' and 'layout' appear as loose keywords; the natural phrases a user would say ('design a UI', 'build a landing page', 'create a frontend') are absent, matching 'one or two generic keywords; missing the natural phrases users say', and it is not a 1 because 'frontend' is at least domain-relevant.

2 / 5

Distinctiveness Conflict Risk

The 'designer-engineer, not a layout generator' framing gives it a recognizable niche, but 'frontend' is broad and overlaps with related skills (page-cro, branding, copywriting are even listed in the body), matching 'somewhat specific but could still overlap with similar skills'.

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.