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.

65

Quality

78%

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 ./SKILLs/frontend-design/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

57%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body delivers focused, opinionated design guidance with concrete techniques and avoid-lists, well-organized into clear sections. It is held back by motivational padding, the absence of worked examples, and no explicit review/validation step in the workflow.

Suggestions

Trim motivational filler such as "Remember: Claude is capable of extraordinary creative work. Don't hold back..." and "There are so many flavors to choose from." to tighten the typography and tone bullets.

Add one or two short worked examples (e.g., a CSS-variable palette skeleton or a sample distinctive font pairing) to move guidance from concrete-but-abstract to directly applicable.

Add an explicit final review step (e.g., "Verify the result against the chosen aesthetic direction and the Differentiation criterion before delivering") to close the workflow with a validation checkpoint.

DimensionReasoningScore

Conciseness

Mostly efficient, but includes motivational padding ("Remember: Claude is capable of extraordinary creative work. Don't hold back...", "There are so many flavors to choose from.") and some redundant phrasing in the typography bullet that could be tightened.

2 / 3

Actionability

Provides concrete named techniques and libraries (Motion library, CSS variables, asymmetry, gradient meshes, noise textures) plus explicit avoid-lists, but offers no worked examples or templates to make the guidance copy-paste ready.

2 / 3

Workflow Clarity

A clear sequence exists (Design Thinking: Purpose/Tone/Constraints/Differentiation, then implement), but there are no explicit validation checkpoints or review loops to confirm the output meets the stated criteria.

2 / 3

Progressive Disclosure

Under 50 lines with no need for external references, organized into clear sections (Design Thinking, Frontend Aesthetics Guidelines); per the simple-skill guideline this scores 3 on organization alone.

3 / 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.

The description is specific, complete, and uses third-person voice with explicit "Use when" trigger guidance and natural user-facing keywords. It clearly conveys both the skill's purpose and its activation conditions.

DimensionReasoningScore

Specificity

Lists multiple specific concrete actions and targets: "Create distinctive, production-grade frontend interfaces" and building "web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts)".

3 / 3

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...") with concrete trigger guidance.

3 / 3

Trigger Term Quality

Includes natural terms users would actually say: "build web components", "websites", "landing pages", "dashboards", "React components", "HTML/CSS layouts", and "styling/beautifying any web UI".

3 / 3

Distinctiveness Conflict Risk

Occupies a clear frontend design/UI niche with distinct triggers, making it 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

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository
netease-youdao/LobsterAI
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.