make-interfaces-feel-better

Apply concrete design-engineering details that make interfaces feel polished. Use when reviewing or improving UI spacing, typography, borders, shadows, motion, hit areas, icons, text wrapping, and interaction states.

Quality

79%

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

Fix and improve this skill with Tessl

tessl review fix ./skills/make-interfaces-feel-better/SKILL.md

Quality

Content

75%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.

A well-structured, actionable reference of UI-polish principles with executable CSS and concrete numeric guidance. It is held at 4 across dimensions by minor editorial padding, some guidance-only sections, the absence of explicit feedback loops, and no progressive disclosure into deeper reference files.

Suggestions

Trim the provenance line ('Source: salvaged from stale community PR #1659 by linus707') and the opening sentence that repeats the frontmatter description to tighten conciseness.

Add concrete CSS snippets for the optical-alignment and hit-area principles (e.g., an expanded ::before hit-area example) so every principle has copy-paste-ready code.

Move the per-principle detail (full CSS blocks, extended motion guidance) into a reference file referenced one level deep from SKILL.md to improve progressive disclosure.

Dimension	Reasoning	Score
Conciseness	The body is lean and assumes Claude's competence, using tight principles with copy-paste snippets rather than explaining basic CSS, but small editorial asides ('The point is optical coherence, not formula worship') and the provenance line ('Source: salvaged from stale community PR #1659 by linus707') plus a repeated opening sentence could be trimmed.	4 / 5
Actionability	It provides executable CSS (font smoothing, image outlines, transition scope) and concrete numeric rules (40x40px hit area, scale(0.96), 150ms exit, outer radius = inner radius + padding), but several principles (optical alignment, motion defaults, hit areas) are guidance rather than copy-paste code, leaving minor gaps versus the fully-executable anchor 5.	4 / 5
Workflow Clarity	The flow from 'When to Use' through 'Core Principles' to a 'Review Output' before/after table and a 'Checklist' gives a clear, sequenced review process with the checklist acting as a validation checkpoint; it stops short of anchor 5 because there are no explicit feedback/retry loops.	4 / 5
Progressive Disclosure	The file is well-organized into clearly headed sections and is self-contained with no external references (none exist in the bundle), but at ~145 lines it is somewhat long for a single SKILL.md without any one-level-deep references that could offload detail, so it sits below the ideal anchor 5.	4 / 5
	Total	16 / 20 Passed

Description

83%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 clearly states both capability and trigger conditions with a rich set of natural terms. It is held just below top marks by generic verbs and minor overlap risk with broader frontend/design skills.

Dimension	Reasoning	Score
Specificity	The description names the domain and enumerates many concrete target areas ('UI spacing, typography, borders, shadows, motion, hit areas, icons, text wrapping, and interaction states'), but the verbs ('Apply', 'reviewing or improving') stay generic rather than naming discrete actions, so it falls just below the comprehensive-action anchor 5.	4 / 5
Completeness	It explicitly answers both 'what' ('Apply concrete design-engineering details that make interfaces feel polished') and 'when' ('Use when reviewing or improving UI spacing, typography, borders, shadows, motion, hit areas, icons, text wrapping, and interaction states') with concrete trigger phrases, matching the anchor 5 example.	5 / 5
Trigger Term Quality	It lists numerous natural trigger terms a user would say ('spacing', 'typography', 'shadows', 'motion', 'hit areas', 'interaction states') with an explicit 'Use when' clause, but omits common phrasings like 'polish', 'feels off/flat/jumpy' that appear only in the body, leaving a few natural terms missing.	4 / 5
Distinctiveness Conflict Risk	The UI-polish niche with specific visual-detail triggers is mostly distinct from general frontend skills, but the broad 'reviewing or improving UI' framing carries minor overlap risk with general design/frontend skills rather than the minimal conflict of anchor 5.	4 / 5
	Total	17 / 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
metadata_version	'metadata.version' is missing	Warning

	Total	15 / 16 Passed

Repository: affaan-m/ECC
Path: skills/make-interfaces-feel-better/SKILL.md
Commit: 06c5e11

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.