CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

microinteractions

Design the small details -- triggers, rules, feedback, loops and modes -- that separate good products from great ones. Use when the user mentions "microinteraction", "button feedback", "loading state", "toggle design", "animation detail", "interaction polish", "state transitions", or "input feedback". Also trigger when designing form validation responses, progress indicators, confirmation dialogs, or any UI element where the user expects immediate feedback. Covers trigger design, state rules, feedback mechanisms, and progressive loops. For overall UI polish, see refactoring-ui. For affordance design, see design-everyday-things.

Quality

83%

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

67%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 instructional skill: concrete rules, product examples, ethical boundaries, and a genuinely useful diagnostic checklist, with clean one-level-deep references to real bundle files. Its main costs are token weight -- the framework re-explanations, author bio, and affiliate link add little Claude does not already know -- and an evaluation workflow whose steps must be inferred rather than followed.

Suggestions

Remove the "About the Author" section and "Further Reading" affiliate link, and compress the per-section "Core concept"/"Why it works" paragraphs that restate Saffer's well-known four-part framework -- keep the tables, ethical boundaries, and diagnostic, which are the skill's real value-add.

State the review workflow as an explicit ordered sequence (1. audit with the Quick Diagnostic, 2. score 0-10 per the Scoring section, 3. list specific improvements to reach 10/10) so the process does not have to be inferred from document structure.

Link case-studies.md from the relevant sections (e.g., form validation, toggle, pull-to-refresh examples) instead of leaving it only in the Reference Files index, and give the Reducing/Simplifying section a purpose-built reference rather than reusing trigger-design.md.

DimensionReasoningScore

Conciseness

The body is mostly efficient -- dense application tables, "Key insights" lists, and a diagnostic checklist -- but includes unnecessary padding: an "About the Author" biography of Dan Saffer, "Further Reading" with an affiliate-tagged Amazon link, and per-section "Core concept"/"Why it works" paragraphs that restate Saffer's four-part framework, which Claude already knows. This sits between anchor 2 (several padded sections) and anchor 4 (minor trims); the padding is real but confined, so 3 fits best.

3 / 5

Actionability

For an instruction-only skill the guidance is concrete: specific rules ("under 100ms for direct manipulation", "counter decreases, turns red at limit"), named product examples per pattern (Gmail "Undo send" 30 seconds, Twitter/X counter), a Common Mistakes table with fixes, and a Quick Diagnostic with if-no actions. It is not 5 because some guidance stays abstract ("Rules should feel natural", "The best rules are invisible") and there is no worked end-to-end example in the body.

4 / 5

Workflow Clarity

The review workflow is present and mostly checkpointed: a scoring protocol ("rate them 0-10... Always provide the current score and specific improvements needed to reach 10/10") and an audit checklist ("Is there a clear, discoverable trigger? | If No | Add a visible control"). It misses anchor 5 because the sequence -- run the diagnostic, then score, then list improvements -- is never stated as an ordered process; the Scoring section and Quick Diagnostic are 190 lines apart with no explicit linkage.

4 / 5

Progressive Disclosure

Structure is good: each of the six sections ends with a clear one-level-deep pointer ("See: [references/trigger-design.md]"), all six referenced files exist and are substantive (223-371 lines), and a consolidated "Reference Files" index describes each. It falls short of anchor 5 because case-studies.md appears only in the index (never linked from a section), section 6 reuses trigger-design.md under a "for reducing trigger complexity" qualifier rather than having its own home, and the overview body itself carries table-heavy content that could live in the bundles.

4 / 5

Total

15

/

20

Passed

Description

91%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: explicit what-and-when structure, comprehensive natural trigger terms, and deliberate disambiguation from related skills. The only weaknesses are reliance on a single broad verb ("Design") and a slightly over-broad catch-all clause about "any UI element" with immediate feedback.

DimensionReasoningScore

Specificity

The description enumerates concrete scope items -- "triggers, rules, feedback, loops and modes" and "trigger design, state rules, feedback mechanisms, and progressive loops" -- plus concrete application areas ("form validation responses, progress indicators, confirmation dialogs"). It stops short of anchor 5 because it rests on a single design action rather than multiple distinct concrete actions, and "small details" is somewhat abstract.

4 / 5

Completeness

Both halves are explicit: the "what" ("Design the small details -- triggers, rules, feedback, loops and modes... Covers trigger design, state rules, feedback mechanisms, and progressive loops") and an explicit "Use when the user mentions..." clause plus "Also trigger when designing form validation responses...". This mirrors the anchor-5 example structure exactly; a 4 would require the 'when' to be less explicit, which it is not.

5 / 5

Trigger Term Quality

Trigger terms are comprehensive and natural: "microinteraction", "button feedback", "loading state", "toggle design", "animation detail", "interaction polish", "state transitions", "input feedback", "form validation responses", "progress indicators", "confirmation dialogs" -- users needing this skill would plausibly say nearly all of these. Anchor 4 would apply only if common synonyms were missing, which they are not for this domain.

5 / 5

Distinctiveness Conflict Risk

The niche is clear (microinteraction detail design) and the description even disambiguates siblings ("For overall UI polish, see refactoring-ui. For affordance design, see design-everyday-things"). It falls short of anchor 5 because "any UI element where the user expects immediate feedback" is a broad catch-all that overlaps with general UI/UX and form-design skills, creating minor conflict risk.

4 / 5

Total

18

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

valeriibeck-star/claude-skills

Path

skills/microinteractions/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.