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.

68

Quality

83%

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

71%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 body is a dense, highly actionable catalog of UI polish principles with concrete values, tokens, and property names, plus a clear review-output contract and checklist. Its two weaknesses are redundancy — the same 16 principles are restated as principles, a mistakes table, and a checklist, and the file list appears twice — and progressive disclosure that references four detail files that are absent from the bundle.

Suggestions

Ship the four referenced files (typography.md, surfaces.md, animations.md, performance.md) in the skill bundle, or drop the references and the Quick Reference/Reference Files tables that point to them — as written, all disclosure paths beyond SKILL.md dead-end.

Collapse the triple restatement: keep Core Principles plus the Review Checklist (the actionable form), and fold the Common Mistakes table's unique fixes into the corresponding principle entries instead of repeating all 16 as a second table.

Keep only one of the two file listings (the Quick Reference table already carries the Reference Files section's content verbatim).

DimensionReasoningScore

Conciseness

The 16 principles themselves are lean (1-3 sentences each with exact values), but the same content is restated three times: as Core Principles, again as the Common Mistakes table ("Same border radius on parent and child | Calculate outerRadius = innerRadius + padding"), and again as the Review Checklist. The four reference files are also listed twice (Quick Reference table plus Reference Files section). This matches the 3 anchor ('mostly efficient but could be tightened') rather than 2, since nothing explains concepts Claude already knows.

3 / 5

Actionability

Guidance is copy-paste concrete throughout: exact values ("~100ms delay", "0.96-0.97", "40×40px"), exact properties (`transition-property: scale, opacity`, `font-variant-numeric: tabular-nums`, `text-wrap: balance`, `-webkit-font-smoothing: antialiased`), named tokens (`shadow-subtle`/`shadow-overlay`), and Before/After example rows with real Tailwind classes (`active:scale-[0.96] transition-transform`). This fully matches the 5 anchor: executable examples covering the common cases.

5 / 5

Workflow Clarity

The review workflow is well defined: a Review Output Format ("markdown tables with Before and After columns, one table per principle"), a worked example section, a Review Checklist as an explicit verification pass, and a rule for empty results ("omit that table entirely"). This matches the 4 anchor (clear sequence, most checkpoints present) — a checklist and output contract exist, but there is no explicit ordering of check-then-report steps or loop-back guidance, keeping it below the 5 anchor's explicit validate/feedback-loop structure.

4 / 5

Progressive Disclosure

Structure is good on paper — a Quick Reference table mapping categories to files, inline principles kept brief, and one-level-deep references clearly signaled — but the four referenced files (typography.md, surfaces.md, animations.md, performance.md) do not exist in the skill bundle, so the disclosure path dead-ends. Verified against the actual bundle: no reference files are present, so navigation cannot complete. This falls between the 3 anchor (references present but undermined) and the 4 anchor (mostly clear references with minor gaps) — missing files are more than a minor organization gap, so 3.

3 / 5

Total

15

/

20

Passed

Description

95%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 description: third-person voice, explicit what and when clauses, and an unusually thorough list of natural trigger phrases covering both casual ("feels off") and technical ("tabular-nums"-adjacent) vocabulary. The only weakness is that the core capability statement is a single abstract sentence rather than a list of concrete actions, with specificity carried by the use-when enumeration.

DimensionReasoningScore

Specificity

The 'what' ("Design engineering principles for making interfaces feel polished") is somewhat abstract, but the description enumerates several concrete activities — "building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations" — matching the 'several specific actions with minor gaps' anchor rather than the fully comprehensive 5 or the 1-2-action 3.

4 / 5

Completeness

Both what ("Design engineering principles for making interfaces feel polished") and when ("Use when building UI components, reviewing frontend code... or any visual detail work") are explicitly stated, with an additional concrete trigger list. This matches the 5 anchor's pattern of a clear what + explicit when with concrete trigger phrases; it is clearly above the 4 anchor where 'when' is only serviceable.

5 / 5

Trigger Term Quality

Comprehensive natural trigger coverage including synonyms and CSS-specific terms users would actually say: "UI polish", "make it feel better", "feels off", "stagger animations", "border radius", "optical alignment", "font smoothing", "tabular numbers", "image outlines", "box shadows". No common variation is obviously missing, so the 4 anchor ('a few natural terms missing') fits worse.

5 / 5

Distinctiveness Conflict Risk

Clear niche (UI polish micro-details) with distinctive triggers like "tabular numbers", "optical alignment", and "stagger animations" that few other frontend/design skills would claim. Overlap with general styling skills is minimal, fitting the 'clear niche with distinct triggers' 5 anchor better than the 'minor overlap with closely related skills' 4 anchor.

5 / 5

Total

19

/

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.

Validation — 14 / 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.