CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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

85%

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

82%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-crafted, highly actionable body: concrete CSS, exact values, and clear anti-patterns (never 'transition: all', 'will-change: all') with no padding or basic-concept explanations. Weaker spots are a few trimmable provenance/editorial lines, the absence of an ordered review workflow with a validation loop, and no progressive-disclosure structure beyond well-organized inline sections.

Suggestions

Drop or move the 'Source: salvaged from stale community PR #1659 by linus707' line and the redundant opening paragraph (which repeats the description) to gain full token efficiency.

Add a short ordered review workflow (e.g. 1. audit against principles, 2. apply fixes, 3. re-check against the Checklist before reporting) with an explicit re-verification step to lift workflow clarity.

Consider moving the darkest-mode/edge-case details (image outline variants, motion entry recipes) into a references/ file with clear one-level-deep pointers if the skill grows, to strengthen progressive disclosure.

DimensionReasoningScore

Conciseness

The body is efficient and assumes Claude's competence, with almost no explanation of known concepts; every section delivers concrete rules (e.g. 'outer radius = inner radius + padding', 'at least a 40x40px hit area'). Minor trimmable content — the 'Source: salvaged from stale community PR #1659' line, an opening sentence echoing the description, and editorial asides like 'not formula worship' — keeps it just below the lean anchor 5.

4 / 5

Actionability

Guidance is fully concrete and executable: complete CSS blocks (font-smoothing on html, inset image outline with a dark-mode media query, an explicit transition-property example), specific properties ("text-wrap: balance", "font-variant-numeric: tabular-nums"), and numeric defaults (44x44px, scale(0.96), 150ms exits) covering the common cases. Nothing is pseudocode or vague direction.

5 / 5

Workflow Clarity

The 'Review Output' section defines a concrete before/after reporting format and the Checklist provides an explicit verification pass, giving most needed checkpoints. It falls short of anchor 5 because there is no ordered process or feedback loop, and the skill exceeds the under-50-line simple-skill exception, so the checklist alone is not a full explicit validation sequence.

4 / 5

Progressive Disclosure

No bundle files exist (no references/, scripts/, or assets/ directories), and the single SKILL.md is well-organized into clearly headed sections (principles, Review Output, Checklist) with no buried or nested references. At roughly 140 lines it exceeds the under-50-line case where organization alone earns a 5, so it fits 'good structure; most content appropriately placed; minor organization gaps' rather than the ideal split/overview anchor.

4 / 5

Total

17

/

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 description with an explicit and specific 'Use when' trigger clause covering the full UI-polish topic surface. The main residual weakness is the generic lead action ('apply concrete design-engineering details') and some missing common synonyms such as 'CSS', 'frontend', or 'animation'.

DimensionReasoningScore

Specificity

The description names the UI-polish domain and enumerates nine concrete areas ("spacing, typography, borders, shadows, motion, hit areas, icons, text wrapping, and interaction states"), matching the 'several specific actions; minor gaps' anchor. It is below anchor 5 because the lead verb 'Apply concrete design-engineering details' is generic rather than a list of distinct concrete actions.

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 top anchor; it is above anchor 4 because the when-clause is explicit and specific rather than only weakly implied.

5 / 5

Trigger Term Quality

It includes natural terms users would say ("UI", "polished", "spacing", "typography", "shadows", "motion", "icons") inside an explicit 'Use when' clause. Missing common variations like 'CSS', 'frontend', 'padding', or 'animation', so it does not reach the comprehensive synonym coverage of anchor 5.

4 / 5

Distinctiveness Conflict Risk

The UI-polish niche with its enumerated trigger topics is mostly distinct, with only minor overlap risk against closely related general frontend or design-system skills. Not anchor 5 because phrases like 'reviewing or improving UI' could plausibly fire for broader frontend-review skills.

4 / 5

Total

17

/

20

Passed

Validation

93%

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

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository

affaan-m/ECC

Path

skills/make-interfaces-feel-better/SKILL.md

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.