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.

88

1.21x
Quality

84%

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 that provides genuinely actionable, domain-specific guidance for frontend design work. Its strongest qualities are the concrete workflow with validation gates, the specific checklists and self-review tests, and the CSS examples that illustrate good vs bad patterns. The main weakness is moderate verbosity in the philosophical/motivational sections, and some content that could be offloaded to referenced files to keep the main skill leaner.

Suggestions

Trim the 'Why This Process Exists' and 'Where Defaults Hide' sections — the checklist and tests already enforce the anti-default behavior, so the motivational framing could be reduced to 1-2 sentences.

Move 'Universal Anti-Patterns' and 'Craft Foundations' into references/principles.md (or similar) and summarize them with a one-line pointer, keeping SKILL.md focused on the workflow and routing.

DimensionReasoningScore

Conciseness

The skill is mostly efficient and avoids explaining basic concepts Claude already knows, but some sections are somewhat verbose — particularly 'Where Defaults Hide' and 'Principles' which belabor the point about avoiding generic output with repetitive framing. The philosophical motivation ('Why This Process Exists') could be tighter.

2 / 3

Actionability

The skill provides highly concrete, actionable guidance: specific checklists with checkboxes, a structured output template for the design direction proposal, concrete CSS examples showing good vs bad token naming, specific self-review tests (swap test, squint test, signature test, token test), and clear anti-patterns with specific CSS properties to avoid.

3 / 3

Workflow Clarity

The workflow is clearly sequenced into three phases (Before Generating → Before Showing → output), each with explicit validation checkpoints. The 'Before Showing' section functions as a feedback loop — run tests, iterate if any fails. The confirmation gate ('Wait for confirmation before generating code') prevents premature execution.

3 / 3

Progressive Disclosure

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

2 / 3

Total

10

/

12

Passed

Description

92%

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 description that clearly communicates both what the skill does and when to use it, with rich trigger terms covering common UI project types. The specificity around design decisions (typography, color, layout, CSS tokens, spacing) differentiates it from generic coding skills. The main weakness is potential overlap with other frontend/web development skills due to its broad scope as a routing skill.

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 for typography, color, layout, CSS tokens, spacing) 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 upfront.

3 / 3

Trigger Term Quality

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

3 / 3

Distinctiveness Conflict Risk

While it carves out a niche around frontend UI design decisions, the broad scope ('dashboards, admin panels, landing pages, marketing sites, web apps') could overlap with general web development or CSS skills. The routing mechanism (app.md vs marketing.md) helps but also suggests this is a meta-skill that could conflict with its sub-skills.

2 / 3

Total

11

/

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.