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.

90

1.21x
Quality

88%

Does it follow best practices?

Impact

92%

1.21x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No known issues

SKILL.md
Quality
Evals
Security

Quality

Content

77%

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

This is a well-crafted skill with strong actionability and workflow clarity — the checklists, gates, and self-review tests give Claude a concrete process to follow. The main weakness is moderate verbosity in philosophical/motivational passages that could be tightened without losing meaning, and some content that might belong in referenced sub-files rather than the main overview. Overall it's above average and demonstrates genuine design expertise encoded into a usable process.

Suggestions

Tighten the 'Why This Process Exists' and 'Where Defaults Hide' sections — the CSS token example is valuable but the surrounding prose ('Defaults disguise themselves as infrastructure') is motivational rather than instructional. Cut to the actionable insight.

Consider moving 'Craft Foundations' and 'Universal Anti-Patterns' into references/principles.md (which is already referenced) to keep the main SKILL.md focused on the routing decision and the required process/checklists.

DimensionReasoningScore

Conciseness

The skill is mostly efficient and avoids explaining basic concepts Claude knows, but some sections are philosophical/motivational rather than instructional ('Defaults disguise themselves as infrastructure', 'There are no structural decisions. Everything is design.'). The 'Why This Process Exists' section and parts of 'Where Defaults Hide' could be tightened. However, the CSS token example and checklists earn their place.

2 / 3

Actionability

The skill provides highly concrete, actionable checklists: specific intent questions to answer, four required outputs with minimum counts, a proposal template to fill in, and four named self-review tests (swap, squint, signature, token) with clear pass/fail criteria. The CSS variable example is concrete and illustrative. The anti-patterns list is specific and immediately usable.

3 / 3

Workflow Clarity

The workflow is clearly sequenced into three phases (Before Generating → Before Showing → output), each with explicit checkboxes. There's a validation gate ('Wait for confirmation before generating code'), a self-review feedback loop ('iterate if any fails'), and a clear proposal template that serves as a checkpoint. The instruction to not write code until prerequisites are done is an explicit gate.

3 / 3

Progressive Disclosure

The skill references three downstream files (app.md, marketing.md, references/principles.md) with clear routing logic, which is good. However, the bundle files are not provided, so we can't verify the references resolve. The main file itself is moderately long (~100+ lines of substantive content) and some material like 'Craft Foundations' and 'Universal Anti-Patterns' could potentially live in the referenced principles.md to keep the overview leaner.

2 / 3

Total

10

/

12

Passed

Description

100%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

This is a strong skill description that clearly communicates its purpose, scope, and trigger conditions. It provides specific UI contexts (dashboards, admin panels, landing pages), concrete design domains (typography, color, layout, CSS tokens), and explicit routing logic. The description is concise yet comprehensive, with natural trigger terms that users would actually use.

DimensionReasoningScore

Specificity

Lists multiple specific concrete actions and domains: 'domain-specific design decisions (typography, color world, layout, CSS token naming, depth and spacing systems)' and mentions routing to sub-skills (app.md, marketing.md). These are concrete, actionable capabilities.

3 / 3

Completeness

Clearly answers both what ('Drives domain-specific design decisions' with specific examples) and when ('Use when building or reviewing frontend UI — dashboards, admin panels, landing pages, marketing sites, web apps'). The 'Use when' clause is explicit and detailed.

3 / 3

Trigger Term Quality

Excellent coverage of natural terms users would say: 'frontend UI', 'dashboards', 'admin panels', 'landing pages', 'marketing sites', 'web apps', 'typography', 'color', 'layout', 'CSS'. These are terms users naturally use when requesting UI design help.

3 / 3

Distinctiveness Conflict Risk

Clearly carved out niche focused on frontend UI design decisions with specific sub-routing logic (app.md vs marketing.md). The mention of CSS token naming, depth/spacing systems, and the contrast with 'generic AI defaults' makes it highly distinctive from general coding or design 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.

Validation11 / 11 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.