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

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

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

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 tight, highly actionable skill body with concrete values and a useful review checklist. Its main weakness is progressive disclosure: four reference files are advertised but absent from the bundle, so all content stays inline and the navigation links are broken.

Suggestions

Create the referenced bundle files (typography.md, surfaces.md, animations.md, performance.md) so the links in the Quick Reference and Reference Files tables resolve, or remove the references if the inline content is intended to be the whole skill.

Move the deeper detail for each category (e.g. the full icon-animation value tables and motion-library branches from principle 7) into the corresponding reference file, keeping SKILL.md as a true overview.

Verify each markdown link target exists before advertising it; dangling references force Claude to fall back on the inline content anyway.

Dimension	Reasoning	Score
Conciseness	The body is lean and assumes Claude's competence; each of the 16 principles is 1-3 lines of direct guidance with no explanations of basic concepts Claude already knows, and every token earns its place.	3 / 3
Actionability	Concrete, copy-paste-ready values throughout: 'scale(0.96)', '40×40px', 'text-wrap: balance', 'transition: { type: "spring", duration: 0.3, bounce: 0 }', and exact cubic-bezier/opacity/scale values, matching the fully-executable anchor.	3 / 3
Workflow Clarity	Although this is a principle collection rather than a multi-step process, the conditional logic in principles 7 and 12 is explicit, and the Review Checklist provides explicit verification checkpoints for the review use-case; per the simple-skills note, clear single-purpose content can score 3.	3 / 3
Progressive Disclosure	The Quick Reference and Reference Files sections signal one-level-deep references (typography.md, surfaces.md, animations.md, performance.md), but none of these files exist in a bundle directory, so the links are dead and all detail remains inline in SKILL.md rather than being split out.	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 concise, well-constructed description that states concrete capabilities, gives natural-language triggers, and clearly distinguishes the skill's niche. It uses third-person voice and avoids fluff.

Dimension	Reasoning	Score
Specificity	Names the domain ('Design engineering principles for making interfaces feel polished') and lists multiple concrete actions such as 'building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations', matching the multiple-specific-actions anchor.	3 / 3
Completeness	Explicitly answers both what ('Design engineering principles for making interfaces feel polished') and when via a 'Use when ...' clause plus a 'Triggers on ...' clause, satisfying the explicit-trigger anchor.	3 / 3
Trigger Term Quality	Natural user phrasing like "make it feel better", "feels off", and concrete terms (stagger animations, border radius, optical alignment, font smoothing, tabular numbers, box shadows) give broad coverage of phrases a user would actually say.	3 / 3
Distinctiveness Conflict Risk	The UI-polish / design-detail niche is distinct and the triggers are specific enough that it is unlikely to fire for unrelated skills.	3 / 3
	Total	12 / 12 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: 8 missing	Warning

	Total	15 / 16 Passed

Repository: gsd-build/gsd-2
Path: src/resources/skills/make-interfaces-feel-better/SKILL.md
Commit: 33c00aa

Reviewed: about 13 hours 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.