CtrlK
BlogDocsLog inGet started
Tessl Logo

make-interfaces-feel-better

Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, box shadows.

71

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

The canonical home for this skill is make-interfaces-feel-better in jakubkrehel/make-interfaces-feel-better

SKILL.md
Quality
Evals
Security

Quality

Content

77%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 content is highly actionable and reasonably concise, with a clear review workflow anchored by a checklist. Its main weakness is progressive disclosure: four reference files are cited but none are present in the bundle.

Suggestions

Add the missing referenced files (typography.md, surfaces.md, animations.md, performance.md) to a references/ directory, or remove the references and inline the content — citing files that do not exist breaks navigation.

Tighten a few rationale sentences (e.g. the image-outline tinted-neutral explanation) where the justification restates something inferable, to push conciseness toward 5.

Add an explicit feedback loop to the review workflow (e.g. re-verify each applied change against the checklist before reporting) to reach full workflow-clarity scoring.

DimensionReasoningScore

Conciseness

The body is dense and largely free of padding, listing concrete rules with exact values; it slightly over-explains rationale (e.g. 'A tinted outline picks up the surface color underneath it and reads as dirt') but such justifications genuinely aid correctness rather than restate the obvious.

4 / 5

Actionability

Guidance is concrete and executable throughout — exact values like scale 0.96, rgba(0,0,0,0.1), cubic-bezier(0.2,0,0,1), font-variant-numeric: tabular-nums, and Tailwind class equivalents make each rule directly applicable.

5 / 5

Workflow Clarity

The review workflow is clearly sequenced (apply principles → checklist → output as Before/After tables grouped by principle), and the checklist acts as a validation checkpoint; it falls just short of 5 because there is no explicit feedback/retry loop for findings that need re-checking.

4 / 5

Progressive Disclosure

Navigation is well-signaled (Quick Reference table, Reference Files list, all pointing one level deep to typography.md/surfaces.md/animations.md/performance.md), but every referenced file is MISSING from the bundle — the structure promises detail that does not exist, leaving the overview pointing to dead links.

2 / 5

Total

15

/

20

Passed

Description

100%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 exemplary: it concisely states what the skill does, when to use it, and surfaces a rich set of natural trigger phrases. It uses third person and avoids vague fluff.

DimensionReasoningScore

Specificity

Lists multiple concrete, specific actions including 'building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations' — comprehensive coverage matching the 5-anchor example.

5 / 5

Completeness

Explicitly answers both 'what' (design engineering principles for making interfaces feel polished) and 'when' ('Use when building UI components... Triggers on UI polish...'), with concrete trigger phrases matching the 5-anchor example.

5 / 5

Trigger Term Quality

Includes natural user phrases and synonyms like 'make it feel better', 'feels off', stagger animations, border radius, font smoothing, tabular numbers, box shadows, alongside technical terms — comprehensive natural-keyword coverage.

5 / 5

Distinctiveness Conflict Risk

Occupies a clear niche (frontend UI polish/detail work) with distinctive trigger phrases unlikely to fire for unrelated skills; minimal conflict risk.

5 / 5

Total

20

/

20

Passed

Validation

87%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

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

Warning

relative_links

Relative link issues: 8 missing

Warning

Total

14

/

16

Passed

Repository
simstudioai/sim
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.