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.

63

Quality

74%

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

Fix and improve this skill with Tessl

tessl review fix ./.agents/skills/frontend-design/SKILL.md

The canonical home for this skill is frontend-design in gsd-build/gsd-2

SKILL.md
Quality
Evals
Security

Quality

Content

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

The body is well-structured and token-efficient for a creative guidance skill, but its actionability is hampered by abstract qualitative language with few concrete examples. Adding a few specific font/palette references or a short code snippet would lift the executable guidance without sacrificing brevity.

Suggestions

Replace abstract adjectives ('beautiful, unique, and interesting') with a few concrete font recommendations or a short pairing example to make typography guidance executable.

Add one minimal HTML/CSS snippet demonstrating a signature technique (e.g., staggered animation-delay reveal) so the motion guidance is copy-paste ready.

Insert an explicit checkpoint between design thinking and implementation (e.g., 'State the chosen aesthetic direction in one sentence before coding') to strengthen the workflow.

DimensionReasoningScore

Conciseness

Largely lean directive content that assumes Claude's competence without explaining basic concepts; minor motivational padding ('Remember: Claude is capable of extraordinary creative work. Don't hold back...') and slight redundancy in the anti-generic-aesthetic warnings could be trimmed.

4 / 5

Actionability

Names some concrete techniques ('Use Motion library for React', 'animation-delay', 'CSS variables', 'gradient meshes, noise textures') but the guidance is dominated by abstract qualitative adjectives ('visually striking', 'memorable', 'meticulously refined') with no executable examples or concrete font/palette references.

3 / 5

Workflow Clarity

A loose think-then-build sequence exists with a pre-build checklist (Purpose, Tone, Constraints, Differentiation), but there are no explicit validation checkpoints or feedback loops between the design and implementation phases.

3 / 5

Progressive Disclosure

A single-file skill under 50 lines with well-organized sections (Design Thinking, Frontend Aesthetics Guidelines) and no need for external references, matching the simple-skill exception for full marks.

5 / 5

Total

15

/

20

Passed

Description

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

The description is strong: it clearly states what the skill does and when to use it, with concrete, natural trigger terms and a well-defined frontend-design niche. Minor improvements could come from broader synonym coverage and tighter target scoping.

DimensionReasoningScore

Specificity

Lists several concrete build targets ('web components, pages, artifacts, posters, or applications', 'React components, HTML/CSS layouts') with distinct actions (build, style/beautify, generate), but action verbs are somewhat limited compared to a fully comprehensive set.

4 / 5

Completeness

Explicitly answers 'what' ('Create distinctive, production-grade frontend interfaces... Generates creative, polished code and UI design') and 'when' via a concrete 'Use this skill when the user asks to build...' trigger clause.

5 / 5

Trigger Term Quality

Strong natural terms users would say ('landing pages', 'dashboards', 'React components', 'styling/beautifying any web UI') with good synonym coverage; a few natural variations (e.g., 'prototype', 'mockup', 'design a page') are absent.

4 / 5

Distinctiveness Conflict Risk

Clear frontend-design niche with distinct visual/UI triggers and minimal conflict risk; the broad term 'applications' introduces minor overlap with general coding skills.

4 / 5

Total

17

/

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
databricks/devhub
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.