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.

76

Quality

96%

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

92%

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

A dense, highly actionable principles list with a clear review workflow and output format. The only real gap is progressive disclosure: the body points to four reference files that are absent from the bundle.

Suggestions

Add the missing referenced files (typography.md, surfaces.md, animations.md, performance.md) under references/, or move their promised detail inline so the links resolve.

If keeping the external references, verify each linked path exists before shipping so navigation does not break.

Consider consolidating the duplicate Quick Reference and Reference Files tables, which list the same four files with near-identical captions.

DimensionReasoningScore

Conciseness

Lean and information-dense — e.g. 'Outer radius = inner radius + padding' and exact values like 'scale(0.96)', 'bounce must always be 0' — with no padding explaining CSS or React basics, so every token earns its place.

3 / 3

Actionability

Gives exact, executable values and properties — 'rgba(0,0,0,0.1)', 'cubic-bezier(0.2,0,0,1)', 'transition-property: scale, opacity', 'active:scale-[0.96]' — copy-paste-ready guidance for each principle.

3 / 3

Workflow Clarity

The Review Checklist sequences the inspection and the Review Output Format enforces an explicit formatting rule ('Always present changes as a markdown table', 'omit that table entirely'), providing a checklist-style validation step for this review skill.

3 / 3

Progressive Disclosure

The body is well-organized with a quick-reference table and a Reference Files section, but the four referenced files (typography.md, surfaces.md, animations.md, performance.md) do not exist in the bundle, so the one-level-deep references are dead links rather than navigable detail.

2 / 3

Total

11

/

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.

A tight, third-person description that names concrete actions, supplies natural trigger phrases, and explicitly answers both what and when. No vague fluff or over-claims.

DimensionReasoningScore

Specificity

Lists many concrete actions — 'building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations' — matching the score-3 anchor for multiple specific concrete actions.

3 / 3

Completeness

Explicitly states what ('Design engineering principles for making interfaces feel polished') and when with a 'Use when...' clause plus a 'Triggers on...' clause, satisfying the score-3 anchor for both what and when.

3 / 3

Trigger Term Quality

Strong natural-phrase coverage a user would actually say: 'make it feel better', 'feels off', 'UI polish', 'stagger animations', 'border radius', 'font smoothing', 'tabular numbers'.

3 / 3

Distinctiveness Conflict Risk

Clear UI-visual-polish niche with distinct triggers unlikely to fire for unrelated skills, matching the score-3 'clear niche with distinct triggers' anchor.

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

relative_links

Relative link issues: 8 missing

Warning

Total

15

/

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.