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 known issues

Fix and improve this skill with Tessl

tessl review fix ./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 is well-structured and conceptually strong as instruction-only design guidance, but it is slightly padded and lacks concrete code examples or verification steps that would push actionability and workflow clarity higher.

Suggestions

Tighten redundant and motivational lines (e.g., merge the 'NEVER use generic AI-generated aesthetics' paragraph with the earlier guidance, trim 'Remember: Claude is capable of extraordinary creative work') to improve conciseness.

Add a minimal executable example (e.g., a CSS-variables theme block or a Motion library snippet) to make the guidance copy-paste ready and raise actionability.

Add a brief verification checkpoint (e.g., 'Review the result against the chosen aesthetic direction before finalizing') to give the workflow an explicit feedback loop.

DimensionReasoningScore

Conciseness

Mostly directive and assumes Claude's competence without explaining basics, but contains redundancy (e.g., 'NEVER use generic AI-generated aesthetics...' repeats earlier guidance) and motivational padding ('Remember: Claude is capable of extraordinary creative work. Don't hold back...').

2 / 3

Actionability

Provides specific actionable directives ('Use CSS variables', 'animation-delay', 'Motion library for React') but is design-philosophy guidance with no executable code or copy-paste-ready artifacts, leaving implementation specifics abstract.

2 / 3

Workflow Clarity

A clear two-phase sequence is present ('Before coding, understand the context...' then 'Then implement working code'), but there are no validation or verification checkpoints; the sequence relies on implicit judgment rather than explicit feedback loops.

2 / 3

Progressive Disclosure

Single-file skill with no bundle references, under 50 lines, organized into well-labeled sections (Design Thinking, Frontend Aesthetics Guidelines); per the simple-skills note this warrants a 3.

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, trigger-rich, and clearly distinguishes the skill with an explicit 'Use when' clause. It avoids vagueness while remaining concise for its breadth.

DimensionReasoningScore

Specificity

Lists multiple concrete action targets: 'Create distinctive, production-grade frontend interfaces' and enumerates 'web components, pages, artifacts, posters, or applications... 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 an explicit trigger clause.

3 / 3

Trigger Term Quality

Strong coverage of natural user terms: 'build web components, pages, artifacts, posters, or applications', 'websites, landing pages, dashboards, React components, HTML/CSS layouts', and 'styling/beautifying any web UI'.

3 / 3

Distinctiveness Conflict Risk

Clear niche (high-design frontend UI creation) with distinct, specific triggers 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

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository
JetBrains/skills
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.