CtrlK
BlogDocsLog inGet started
Tessl Logo

reduced-motion

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Respect reduced motion preferences. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

55

Quality

62%

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

Fix and improve this skill with Tessl

tessl review fix ./skills/reduced-motion/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

57%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is a clean, well-structured overview that uses progressive disclosure effectively via a single real reference file. Its main weaknesses are redundancy of the two core rules across sections and the lack of executable code or an explicit verify-the-fix checkpoint in the body itself.

Suggestions

De-duplicate the prefers-reduced-motion and 3-flashes/second rules so they appear once (e.g. in Quick Reference) and are referenced rather than restated in Check and Fix.

Include a small executable CSS snippet for `@media (prefers-reduced-motion: reduce)` directly in the Fix section so the body is actionable without opening the reference.

Add an explicit verification step, e.g. "Verify: toggle the OS reduced-motion setting and confirm animations are disabled / flashing stops", to close the check-fix loop.

DimensionReasoningScore

Conciseness

The body is short and well-sectioned, but the prefers-reduced-motion and 3-flashes/second points are restated across Quick Reference, Check, and Fix, and the opening sentence about vestibular disorders/migraines/seizures is knowledge Claude already has.

2 / 3

Actionability

It gives concrete direction ("Use @media (prefers-reduced-motion: reduce) to disable animations", "no flashing exceeds 3 flashes/second") but no executable CSS snippet in the body; the copy-paste code is deferred to references/rule.md, leaving the body's guidance incomplete on its own.

2 / 3

Workflow Clarity

Check / Fix / Explain / Code Review provide a loose thematic sequence, but there is no explicit validation checkpoint — verification is only hinted at via "note how to verify the fix with browser accessibility tooling or assistive tech".

2 / 3

Progressive Disclosure

A concise overview body points once, clearly, and one level deep to the existing references/rule.md for "full implementation details, code examples, and framework-specific guidance", with easy navigation and no nested references.

3 / 3

Total

9

/

12

Passed

Description

67%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description answers both what and when with an explicit trigger, but its described actions are generic accessibility-review steps that do not match the skill's actual reduced-motion focus (prefers-reduced-motion, flashing, vestibular/epilepsy concerns). Trigger-term coverage and distinctiveness suffer from this misalignment.

Suggestions

Rewrite the "what" clause to name reduced-motion-specific actions, e.g. "Audit animations, parallax, and scrolljacking against prefers-reduced-motion and verify no content flashes more than 3 times per second" instead of generic keyboard/focus/screen-reader checks.

Add common user-facing trigger terms such as "animations", "prefers-reduced-motion", "flashing", and "vestibular/photosensitive" so the skill matches natural phrasing.

Tighten the trigger so it is clearly scoped to motion/animation review rather than broad rendered-HTML accessibility, reducing overlap with general accessibility skills.

DimensionReasoningScore

Specificity

It names several concrete review actions ("inspect keyboard behavior, focus flow, accessible names, and screen-reader output"), but those actions are generic accessibility checks rather than the reduced-motion-specific work this skill actually covers, so coverage is not comprehensive.

2 / 3

Completeness

Both halves are explicitly present: a "Use when reviewing ... related to ... reduced motion preferences" trigger and a stated "what" ("Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output").

3 / 3

Trigger Term Quality

It includes the natural term "reduced motion preferences" plus "interactive components" and "design-system patterns", but misses common variations a user would say such as "animations", "prefers-reduced-motion", "flashing", or "seizures".

2 / 3

Distinctiveness Conflict Risk

The "reduced motion preferences" qualifier narrows the trigger, but the broad a11y framing (rendered HTML, keyboard behavior, focus flow, accessible names) would overlap heavily with sibling accessibility review skills.

2 / 3

Total

9

/

12

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.

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository
thedaviddias/Front-End-Checklist
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.