CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications. Generates creative, polished code that avoids generic AI aesthetics.

86

1.34x
Quality

81%

Does it follow best practices?

Impact

97%

1.34x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

75%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.

A well-organized, actionable design-guidance body that mostly respects token budget and gives concrete CSS techniques. Its main weaknesses are minor motivational padding and seven dangling reference links that point to files not shipped with the skill.

Suggestions

Ship the seven referenced reference/*.md files (typography, color-and-contrast, spatial-design, motion-design, interaction-design, responsive-design, ux-writing) or remove the dead links so navigation resolves.

Trim the restated intro and the closing "Remember: {{model}} is capable of extraordinary creative work..." line to tighten conciseness.

Add one or two short, complete copy-paste code snippets (e.g., a fluid clamp type scale or an oklch palette) to lift actionability from concrete-named to fully executable.

DimensionReasoningScore

Conciseness

The bulk is lean DO/DON'T rules that assume Claude's competence, but the intro restates the description and the closing "Remember: {{model}} is capable of extraordinary creative work..." is motivational padding that could be trimmed.

4 / 5

Actionability

Names concrete, executable techniques (clamp, oklch/color-mix/light-dark, @container, ease-out-quart, grid-template-rows transitions), but provides no complete copy-paste code examples, leaving minor gaps for an instruction-only skill.

4 / 5

Workflow Clarity

A clear conceptual flow (commit to a design direction -> implement -> run the AI Slop Test self-check) with the Slop Test acting as a validation checkpoint; no destructive/batch operations so the workflow cap does not apply.

4 / 5

Progressive Disclosure

Section-level references are clearly signaled and one level deep ("Consult [typography reference](reference/typography.md)"), but the seven referenced reference/*.md files are not present in the bundle, so the links are dead and navigation is slightly undermined.

4 / 5

Total

16

/

20

Passed

Description

87%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.

A strong, third-person description that clearly states both capability and trigger conditions with concrete artifact types. It is distinguishable and well-targeted, with only minor room for more varied action verbs and synonyms.

DimensionReasoningScore

Specificity

Lists several concrete target artifacts ("web components, pages, artifacts, posters, or applications") plus actions (create/build/generate), but the verbs are repetitive rather than the distinct actions of the 5-anchor.

4 / 5

Completeness

Explicitly answers both what ("Create distinctive, production-grade frontend interfaces... Generates creative, polished code") and when ("Use this skill when the user asks to build web components, pages, artifacts, posters, or applications") with concrete trigger phrases.

5 / 5

Trigger Term Quality

Includes natural phrases a user would say ("build web components", "posters", "applications"), but lacks file extensions and additional synonyms that would mark comprehensive coverage.

4 / 5

Distinctiveness Conflict Risk

Carves a clear niche (distinctive, design-quality frontend that "avoids generic AI aesthetics") with distinct triggers and minimal overlap with other skills.

5 / 5

Total

18

/

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

relative_links

Relative link issues: 7 missing

Warning

Total

15

/

16

Passed

Repository
holaboss-ai/holaOS
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.