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.

87

1.34x
Quality

82%

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

65%

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 with highly actionable, concrete design guidance, but it is held back by editorial padding, a loosely sequenced workflow without checkpoints, and seven missing reference files that break the otherwise-good progressive disclosure.

Suggestions

Trim the opening paragraph (it restates the description) and the motivational 'AI Slop Test' / closing '{{model}}...' paragraphs to tighten conciseness.

Add an explicit sequenced workflow with checkpoints — e.g., commit to aesthetic direction → implement → self-check against the DON'T list → refine — to raise workflow clarity.

Ship the seven referenced reference/*.md files (typography, color-and-contrast, spatial-design, motion-design, interaction-design, responsive-design, ux-writing) so the clearly-signaled navigation actually resolves, or inline the essential content if the files will not be bundled.

DimensionReasoningScore

Conciseness

The DO/DON'T lists are dense and assume Claude's competence, but the opening paragraph restates the frontmatter description and the 'AI Slop Test' / closing 'Remember: {{model}} is capable of extraordinary creative work' sections are editorial padding that could be tightened.

2 / 3

Actionability

Concrete, executable guidance throughout — named techniques like 'oklch, color-mix, light-dark', 'clamp()', '@container', 'grid-template-rows transitions', and 'ease-out-quart/quint/expo' give specific, applicable instruction without explaining basics Claude already knows.

3 / 3

Workflow Clarity

A loose sequence exists (commit to a Design Direction, then implement) and the 'AI Slop Test' acts as an implicit review, but there are no explicit validation checkpoints or feedback loops; steps are present but checkpoints are missing or implicit.

2 / 3

Progressive Disclosure

The body is well-organized with clearly signaled one-level-deep references ('Consult [typography reference](reference/typography.md)...'), but all seven referenced files under reference/ are absent from the bundle, so the navigation is broken rather than functional.

2 / 3

Total

9

/

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.

A strong description: third-person voice, concrete capabilities, explicit 'Use when...' trigger, and a distinctive design-quality niche. It cleanly answers both what the skill does and when to invoke it.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — 'build web components, pages, artifacts, posters, or applications' and 'Generates creative, polished code' — rather than vague language.

3 / 3

Completeness

Explicitly states both what ('Create distinctive, production-grade frontend interfaces... Generates creative, polished code') and when ('Use this skill when the user asks to build...').

3 / 3

Trigger Term Quality

Natural user-facing terms ('web components, pages, artifacts, posters, or applications') cover the phrasings a user would actually say when requesting frontend work.

3 / 3

Distinctiveness Conflict Risk

The distinctive-design / anti-'AI slop' framing plus concrete artifact types (posters, artifacts, web components) carve a clear niche unlikely to fire for unrelated skills.

3 / 3

Total

12

/

12

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.