CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-ui-ux

Designer-turned-developer who crafts stunning UI/UX even without design mockups. Use for any frontend implementation requiring visual design decisions, aesthetic direction, or pixel-perfect UI work.

64

Quality

76%

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-ui-ux/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

75%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 lean, well-structured instruction skill with concrete design techniques and a clear pre-coding process. Its main gaps are a bit of repeated avoidance guidance and the absence of any executable code example despite naming specific techniques.

Suggestions

De-duplicate the font/color avoidance lists so each appears once (e.g. keep them in Anti-Patterns and reference from Aesthetic Guidelines).

Add one short copy-paste code snippet illustrating a named technique (e.g. a CSS variables palette or a staggered reveal animation-delay) to lift actionability to fully executable.

Tighten or cut the persona opener ("You are a designer who learned to code...") to earn a 5 on conciseness.

DimensionReasoningScore

Conciseness

The body is terse with directive bullets and bold headers and assumes Claude's competence, but the persona opener and the duplicated font/color avoidances across Aesthetic Guidelines and Anti-Patterns are minor instances that could be trimmed.

4 / 5

Actionability

For an instruction-only skill the guidance is concrete and specific, naming exact techniques (CSS variables, animation-delay, gradient meshes, grain overlays, fonts to avoid) plus a worked application example; it lacks executable code but the scoring note exempts instruction skills when guidance is actionable.

4 / 5

Workflow Clarity

The Design Process section gives a clear 4-step sequence (Purpose, Tone, Constraints, Differentiation) to run before coding; there are no validation checkpoints, but none are required for a non-destructive creative design skill, so only a minor gap remains.

4 / 5

Progressive Disclosure

The self-contained body is well-organized into clear labeled sections with no nested references and no bundle files needed; it sits just over the 50-line simple-skill threshold, and the Avoid/Anti-Patterns repetition is a minor organization gap keeping it from a 5.

4 / 5

Total

16

/

20

Passed

Description

78%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, third-person description with an explicit trigger clause that clearly answers both what and when. Its main weakness is specificity: it characterizes the kind of work rather than listing several concrete, discrete actions.

Suggestions

Replace characterization phrases with discrete concrete actions, e.g. "Builds layouts, picks typography, composes color palettes, and adds motion without design mockups."

Add a couple of natural user synonyms such as "styling", "CSS", or "make it look good" to broaden trigger coverage.

DimensionReasoningScore

Specificity

It names the domain (frontend UI/UX, visual design) and a concrete capability ("crafts stunning UI/UX even without design mockups"), but the remaining phrases ("visual design decisions, aesthetic direction, pixel-perfect UI work") characterize the type of work rather than enumerating several discrete concrete actions.

3 / 5

Completeness

It explicitly answers what ("Designer-turned-developer who crafts stunning UI/UX even without design mockups") and when (an explicit "Use for..." clause with concrete trigger phrases), matching the both-what-and-when anchor.

5 / 5

Trigger Term Quality

Natural terms a user would say ("frontend implementation", "UI/UX", "visual design decisions", "design mockups") are present with good coverage, though common synonyms like "styling", "CSS", or "make it look good" are missing.

4 / 5

Distinctiveness Conflict Risk

The designer-who-codes / visual-aesthetic niche is mostly distinct from a generic frontend skill, though the "frontend implementation" framing carries minor overlap risk with closely related general frontend skills.

4 / 5

Total

16

/

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
ArabelaTso/Skills-4-SE
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.