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.

72

Quality

88%

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

85%

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 skill with a clear think-then-build workflow and concrete specifics (fonts, libraries, techniques, code patterns). Its main weakness is verbosity — motivational padding and repeated emphasis markers that could be trimmed without losing clarity.

Suggestions

Trim motivational padding (e.g., the closing 'Don't hold back, show what can truly be created when thinking outside the box...') and reduce redundant ALL-CAPS emphasis markers (BOLD, UNFORGETTABLE, CRITICAL) to tighten the conciseness score.

Condense the eight Branding 'Creative Implementation Ideas' into a shorter representative list, since each is a one-line concept that currently inflates the file's token budget.

DimensionReasoningScore

Conciseness

Mostly efficient and free of basic-concept explanations, but padded with motivational fluff ('Don't hold back, show what can truly be created when thinking outside the box') and scattered emphasis caps (BOLD, UNFORGETTABLE, CRITICAL, NEVER, IMPORTANT, MANDATORY) that could be tightened.

2 / 3

Actionability

Provides concrete, actionable guidance: named fonts to avoid (Inter, Arial, Roboto, Space Grotesk), a named library (Motion for React), specific techniques (gradient meshes, noise textures, animation-delay staggers), and concrete HTML branding patterns with hrefs.

3 / 3

Workflow Clarity

Clear two-phase sequence — 'Design Thinking' (Purpose/Tone/Constraints/Differentiation) followed by 'Then implement working code that is:' with a concrete quality checklist; no validation loop is needed for design generation, so the cap does not apply.

3 / 3

Progressive Disclosure

Single SKILL.md with no external references and well-organized sections (Output Requirements, Design Thinking, Frontend Aesthetics Guidelines, Branding Requirement); per scoring notes, a well-organized single-file skill with no need for external references scores 3.

3 / 3

Total

11

/

12

Passed

Description

92%

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 capabilities and an explicit 'Use when' trigger with rich natural-language examples. Its only weakness is that the trigger terms are broad frontend-dev requests that risk overlapping with general web/coding skills.

DimensionReasoningScore

Specificity

Lists multiple concrete objects and actions — 'build web components, pages, artifacts, posters, or applications' with explicit examples (websites, landing pages, dashboards, React components, HTML/CSS layouts) plus 'Generates creative, polished code and UI design'.

3 / 3

Completeness

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 an explicit trigger clause, in third person.

3 / 3

Trigger Term Quality

Covers natural user phrasing well: 'build web components, pages... applications', 'websites, landing pages, dashboards, React components', and 'styling/beautifying any web UI' — terms a user would actually say.

3 / 3

Distinctiveness Conflict Risk

The design-quality/aesthetic framing carves a niche, but the trigger terms ('build a website', 'landing page', 'dashboard', 'React component') are broad general web-dev requests that could overlap with a generic frontend/coding skill.

2 / 3

Total

11

/

12

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
bytedance/deer-flow
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.