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 (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

69

Quality

85%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

78%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-structured, lean design-guidance skill that names concrete techniques and libraries while staying self-contained and well-sectioned. Its main limitation is the absence of executable code examples and explicit validation checkpoints, which limits actionability and workflow clarity slightly.

Suggestions

Add 1-2 short, copy-paste code snippets (e.g., a CSS-variables theme block or a staggered-reveal animation-delay example) to lift actionability from qualitative directive to executable reference.

Tighten motivational redundancy — fold 'Don't hold back—commit fully' and the repeated 'NEVER use generic AI aesthetics' guidance into a single concise directive to recover tokens.

Add a brief self-check step after implementation (e.g., 'Verify the result against the chosen tone and the anti-slop list before finalizing') to give the workflow an explicit checkpoint.

DimensionReasoningScore

Conciseness

The body is lean and assumes Claude's competence, avoiding basic-concept padding, but contains minor motivational redundancy ('Don't hold back—commit fully to a distinctive vision', repeated emphasis on avoiding generic aesthetics) that could be trimmed.

4 / 5

Actionability

Names concrete, specific techniques and libraries ('Use CSS variables', 'animation-delay', 'Motion library for React', 'gradient meshes, noise textures, geometric patterns') that are actionable; no executable code, but that is appropriate for an instruction-only design skill.

4 / 5

Workflow Clarity

A clear two-phase sequence ('Before coding, understand the context and commit to a BOLD aesthetic direction' then 'implement working code that is: ...') with a criteria checklist, but no explicit validation checkpoints — acceptable since this is generative, not destructive/batch.

4 / 5

Progressive Disclosure

Under 50 lines, self-contained, and well-organized with clear section headers ('## Design Thinking', '## Frontend Aesthetics Guidelines'); no external references are needed, satisfying the simple-skill exception.

5 / 5

Total

17

/

20

Passed

Description

91%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 description that clearly states both capability and trigger conditions with rich, natural keyword coverage. It is comprehensive and well-differentiated, with only minor overlap risk against generic frontend-build skills.

DimensionReasoningScore

Specificity

Lists several concrete actions ('build web components, pages, artifacts, posters, or applications', 'styling/beautifying any web UI', 'Generates creative, polished code') with comprehensive examples, but the actions are mostly variations of 'build frontend' rather than distinct operations like extract/fill/merge.

4 / 5

Completeness

Explicitly answers both what ('Create distinctive, production-grade frontend interfaces with high design quality') 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

Comprehensive natural keyword coverage with synonyms and concrete artifacts a user would actually say: 'websites, landing pages, dashboards, React components, HTML/CSS layouts', 'posters', 'styling/beautifying any web UI'.

5 / 5

Distinctiveness Conflict Risk

The aesthetic/design-quality framing carves a clear niche, but the trigger 'build web components, pages, ... applications' overlaps somewhat with general web-development skills, leaving minor conflict risk.

4 / 5

Total

18

/

20

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
shareAI-lab/Kode-CLI
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.