CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-design-principles

Use when building or reviewing frontend UI — dashboards, admin panels, landing pages, marketing sites, web apps. Drives domain-specific design decisions (typography, color world, layout, CSS token naming, depth and spacing systems) instead of generic AI defaults; routes to app.md (product/data UIs) or marketing.md (public/creative pages) by context.

91

1.21x
Quality

88%

Does it follow best practices?

Impact

92%

1.21x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

77%Weight 40%Scale 1-3

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

A well-structured, actionable design skill with a clear gated workflow and concrete checklists, but it carries some rhetorical padding and references two files (app.md, marketing.md) that are not present in the bundle.

Suggestions

Trim motivational framing in 'Why This Process Exists', 'Where Defaults Hide', and 'Principles' to their actionable cores to improve token efficiency.

Add the missing app.md and marketing.md to the bundle, or remove/qualify the references so navigation does not dead-end.

Consolidate overlapping guidance — e.g., the 'swap test' restates 'Sameness is failure' — to reduce redundancy.

DimensionReasoningScore

Conciseness

Mostly efficient and free of teaching Claude-known concepts, but sections like 'Why This Process Exists', 'Where Defaults Hide', and 'Principles' carry motivational/rhetorical framing ('Sameness is failure', 'Typography isn't a container — it IS the design') that could be tightened without losing the instruction.

2 / 3

Actionability

Concrete, copy-paste-ready guidance: explicit checklists (Domain min 5, Color world 5+, Rejecting ×3), a direction proposal template, specific anti-pattern values ('box-shadow: 0 25px 50px', '2px+'), and named tests — fully actionable for an instruction-only skill.

3 / 3

Workflow Clarity

Clear sequence with checkpoints: 'Before Generating' (answer → produce four outputs → propose and confirm) then 'Before Showing' with iterate-if-fails checks; 'Wait for confirmation before generating code' is an explicit gate.

3 / 3

Progressive Disclosure

Structure is a clear overview with one-level-deep references, but app.md and marketing.md are referenced (in Scope & Routing and Deep Dives) yet absent from the bundle — only references/principles.md exists, so two referenced paths dangle.

2 / 3

Total

10

/

12

Passed

Description

100%Weight 40%Scale 1-3

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: specific capabilities, natural trigger terms, explicit what-and-when, and a clear distinct niche with routing logic. No first/second-person voice (the 'Use when...' pattern matches the rubric's own good examples, so no specificity penalty).

DimensionReasoningScore

Specificity

Lists multiple concrete capabilities — 'typography, color world, layout, CSS token naming, depth and spacing systems' — plus routing to app.md/marketing.md, matching the 'lists multiple specific concrete actions' anchor.

3 / 3

Completeness

Explicit 'Use when building or reviewing frontend UI' trigger answers 'when', and 'Drives domain-specific design decisions... routes to app.md or marketing.md' answers 'what' — both clearly present.

3 / 3

Trigger Term Quality

Natural user-facing terms — 'dashboards, admin panels, landing pages, marketing sites, web apps' — give good coverage of phrases a user would actually say; not jargon.

3 / 3

Distinctiveness Conflict Risk

Niche is clear — domain-specific frontend design decisions with explicit routing — and unlikely to trigger for non-frontend skills; distinct from generic UI/coding skills.

3 / 3

Total

12

/

12

Passed

Validation

100%

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

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
joshuadavidthomas/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.