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.

Quality

89%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

78%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 highly actionable and well organized, with concrete tokens, values, and Before/After examples that make it immediately usable. Its main weakness is progressive disclosure: it references four detail files that are not present in the bundle, leaving broken links.

Suggestions

Ship the referenced bundle files (typography.md, surfaces.md, animations.md, performance.md) or remove the reference links and inline any essential detail, so navigation is not broken.

Reduce redundancy between the Quick Reference table, Core Principles, Common Mistakes, and Review Checklist so each principle is stated once and reused by reference.

Add an explicit validation step to the review workflow (e.g., 'Confirm each change compiles/renders before moving to the next principle') to convert the checklist into a feedback loop.

Dimension	Reasoning	Score
Conciseness	Lean and mostly efficient with terse per-principle guidance and no over-explanation of concepts Claude already knows, but the same principles recur across the Quick Reference table, Core Principles, Common Mistakes, and Checklist sections, adding minor redundancy that could be tightened.	4 / 5
Actionability	Fully actionable: concrete tokens (shadow-subtle/medium/overlay/card), specific values (0.96-0.97, ~100ms, 40x40px, text-wrap: balance), exact CSS properties, and copy-ready Before/After examples with file and property citations.	5 / 5
Workflow Clarity	The review workflow is clearly sequenced (apply principles -> present Before/After tables per principle -> cite file/property -> omit empty tables) with a closing checklist, but there are no explicit validation/feedback checkpoints for the review-decision process.	4 / 5
Progressive Disclosure	The body is well-structured with a clearly signaled one-level-deep reference scheme (Quick Reference table + Reference Files section pointing to typography.md, surfaces.md, animations.md, performance.md), but none of those referenced files actually exist in the bundle, so the navigation links are broken/dead.	3 / 5
	Total	16 / 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.

A strong, complete description: it states the skill's purpose in third person, gives an explicit 'Use when' clause, and lists a rich set of natural trigger terms users would actually say. Trigger coverage and distinctiveness are both excellent.

Dimension	Reasoning	Score
Specificity	Names the domain and lists multiple concrete actions (building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions) with comprehensive coverage.	5 / 5
Completeness	Explicitly answers what ('Design engineering principles for making interfaces feel polished') and when ('Use when building UI components...'), plus an additional 'Triggers on...' clause with concrete phrases.	5 / 5
Trigger Term Quality	Comprehensive coverage of natural user phrases including 'make it feel better', 'feels off', stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, and box shadows.	5 / 5
Distinctiveness Conflict Risk	Clear niche in UI polish/design-detail work with distinctive trigger phrases; minimal overlap risk with other skills. Uses third-person voice throughout with no first/second-person phrasing.	5 / 5
	Total	20 / 20 Passed

Validation

87%

Warnings & errors only

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

Criteria	Description	Result
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
Path: .agents/skills/make-interfaces-feel-better/SKILL.md
Commit: 7945b29

Reviewed: 3 days ago

Table of Contents

Discovery Implementation Validation

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.