Skip to content
Get packs

Anchor Smooth Scroll Checker

Reviews same-page anchor links so smooth scrolling respects reduced-motion settings and focus moves correctly.

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

This skill teaches an AI agent to review web pages for a specific accessibility issue: animated smooth scrolling on in-page anchor links can cause dizziness or nausea for people with vestibular disorders. Once installed, when you ask the agent to review HTML or components, it checks that smooth scrolling is turned off when a user has set the reduced-motion preference, that keyboard focus moves to the target, and that the navigation works with screen readers. It then points out the specific elements that break the rule and how to verify a fix.

Great for

  • Front-end developers auditing a website for accessibility before release
  • Designers or QA reviewers checking navigation behaviour against accessibility guidelines
  • Teams using the Front-End Checklist who want an AI assistant to apply that rule to their code

Skip it if

  • Projects that do not use anchor links or smooth scrolling, since the rule will not apply
  • Complete accessibility audits: the skill covers only this one rule and does not test real devices or assistive technology
  • Anyone expecting it to change code automatically; it is written as review guidance and its files do not describe running tools

Try asking

  • “Review this HTML navigation bar and tell me whether the anchor links respect prefers-reduced-motion.”
  • “Check my CSS for scroll-behavior: smooth and suggest a reduced-motion fallback.”
  • “Does focus move to the section when a keyboard user activates a table-of-contents link on this page?”
Step-by-step guide: how to use Anchor Smooth Scroll CheckerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    anchor-smooth-scroll.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip anchor-smooth-scroll.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip anchor-smooth-scroll.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Paste the relevant markup and CSS together so the agent can check the scroll-behavior declaration against the media query.
  • Ask for the verification steps too, such as testing with the reduced-motion setting enabled in browser developer tools.
  • Treat the output as a checklist item; combine it with manual keyboard and screen reader testing for full coverage.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.