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, icons, micro-interactions, enter/exit animations, or any visual detail work. Supports quick and full review modes. 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, icons, icon stroke weight, icon states, motion restraint.

Quality

96%

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

92%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 an exceptionally actionable and concise reference with a rigorous, checkpoint-driven review workflow. Its one structural defect is that the Quick Reference table links to five detail files that are not present in the bundle, leaving those references dead.

Suggestions

Ship the five referenced bundle files (typography.md, surfaces.md, animations.md, icons.md, performance.md) so the Quick Reference links resolve, or remove the links and keep all detail inline.

If keeping detail inline, retitle the Quick Reference as an in-page index with anchor links rather than file links to avoid implying external content that is absent.

Verify each referenced path exists before publishing; broken references are the only thing capping progressive_disclosure here.

Dimension	Reasoning	Score
Conciseness	Lean and dense throughout: exact values (scale 0.96, cubic-bezier(0.2,0,0,1), oklch(0 0 0 / 0.1), 100ms stagger, 44×44px) with no padding about concepts Claude already knows; rationale sentences convey domain insight, not basic instruction.	5 / 5
Actionability	Fully executable guidance — copy-paste-ready CSS values, stroke-weight-to-text-weight mappings, exact hit-area pixel targets, and concrete Tailwind/CSS replacements in both the principles and the Common Mistakes and Example tables.	5 / 5
Workflow Clarity	The review workflow is explicitly sequenced with checkpoints: slow motion to 10% speed and walk every state, a mode/scope/coverage table, severity definitions, a findings format with a worked example, a 'Considered but Rejected' step, and a Verification + Verdict step with Block/Needs changes/Approve decision rules and 'Not verified' labeling.	5 / 5
Progressive Disclosure	The Quick Reference table signals one-level-deep references to typography.md, surfaces.md, animations.md, icons.md, and performance.md, but no bundle files exist — every link is broken, so navigation fails despite the otherwise well-organized structure.	3 / 5
	Total	18 / 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, third-person description that pairs a concise capability statement with an explicit 'Use when' clause and an extensive list of natural trigger phrases. It is specific, complete, and clearly niche-scoped to interface polish.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions on concrete objects — 'building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, icons, micro-interactions, enter/exit animations' — giving comprehensive coverage rather than abstract language.	5 / 5
Completeness	Explicitly answers both what ('Design engineering principles for making interfaces feel polished') and when ('Use when building UI components, reviewing frontend code...' plus 'Triggers on...') with concrete trigger phrases.	5 / 5
Trigger Term Quality	Comprehensive natural-term coverage including quoted user phrases ('make it feel better', 'feels off') plus specific triggers like 'stagger animations, border radius, optical alignment, font smoothing, tabular numbers' that a user would naturally say.	5 / 5
Distinctiveness Conflict Risk	Occupies a clear UI-polish niche with distinctive triggers (optical alignment, font smoothing, icon stroke weight, motion restraint) that minimize overlap with generic frontend or code-review skills.	5 / 5
	Total	20 / 20 Passed

Validation

93%

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 — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
relative_links	Relative link issues: 5 missing	Warning

	Total	15 / 16 Passed

Repository: jakubkrehel/make-interfaces-feel-better
Path: skills/make-interfaces-feel-better/SKILL.md
Commit: 5a4076a

Reviewed: 12 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.