Guide · Agent skill
How to use the Anchor Smooth Scroll Checker agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Anchor Smooth Scroll Checker is an agent skill, a set of instructions that an AI agent such as Claude loads when it needs them. It teaches the agent to review web pages for one accessibility problem: animated smooth scrolling on in-page anchor links can cause dizziness or nausea for people with vestibular disorders. This guide shows you how to install the skill, ask for a review in plain language, and read what the agent reports back.
Anchor Smooth Scroll Checkerthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Get the skill's ZIP file from our page.
- 2Unzip the skill folder. Extract it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder.
- 3Or upload it in the Claude apps. Open Settings, go to Capabilities, choose Skills and upload the ZIP.
- 4Paste or point to your markup. Share the HTML or component that contains your in-page anchor links.
- 5Ask for a review. Request a check of smooth scrolling, reduced-motion support and keyboard focus on the anchor targets.
- 6Verify the fixes. Apply the suggested changes, then test with the reduced-motion setting and your browser accessibility tools.
What does the skill make the agent do?
When the skill is active and you ask the agent to review HTML or components, it checks that smooth scrolling is turned off when a user has set the prefers-reduced-motion preference. It also checks that keyboard focus moves to the anchor target and that anchor navigation works with keyboard and screen readers.
The agent then points out the specific elements that break the rule, including their roles, labels or focus behaviour where relevant, and explains how to verify a fix with browser accessibility tooling or assistive technology.
- Checks that smooth scroll is disabled under reduced-motion preference
- Checks that focus moves to the anchor target for keyboard users
- Checks that anchor navigation works with screen readers
- Flags exact elements that violate the rule and suggests how to verify the fix
How do you install the Anchor Smooth Scroll skill?
Download the ZIP file for the skill from our page. Unzip it so the skill folder ends up in ~/.claude/skills/ to make it available across your projects, or in a project's .claude/skills/ folder to make it available only in that project.
You can also upload the skill in the Claude apps. Open Settings, go to Capabilities, then choose Skills and upload the ZIP there.
- Personal install: unzip into ~/.claude/skills/
- Project install: unzip into the project's .claude/skills/ folder
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
How do you trigger the skill with a natural request?
You do not need a special command. The skill's description tells the agent when to use it: reviewing rendered HTML, interactive components, or design-system patterns related to providing an instant anchor scroll option. Ask for a review in those terms and name the code you want checked.
Good requests say what you are reviewing and what you want checked. The skill is most useful when you paste or point the agent at markup that contains in-page anchor links, such as a table of contents, a skip link, or a page with sections linked from a menu.
- Review this page's anchor links for smooth scrolling and reduced-motion support
- Check this navigation component for keyboard focus after an anchor link is clicked
- Audit this HTML for smooth scroll problems that could affect users with vestibular disorders
What rule should your code follow?
The skill recommends using scroll-behavior: smooth only inside a prefers-reduced-motion check, with instant scrolling as the default or fallback. The rule reference shows the pattern below, where users who prefer reduced motion get instant scrolling by default.
/* Bad: always smooth, ignores preferences */ html { scroll-behavior: smooth; } /* Good: respect motion preferences */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }What do you need before you start?
The skill lists no requirements and runs no scripts. It does not use the network. It is written as review guidance, so it reports issues but does not change your code automatically. Your project only needs to contain the HTML, CSS or components you want reviewed.
The skill covers only this one rule. It does not test real devices or assistive technology, so treat its findings as one input to a wider check.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
What safety notes should you know?
Because the skill runs no scripts and uses no network, it only reads the material you give the agent and returns a written review. Nothing is executed on your machine by the skill itself.
Read the agent's suggested changes before applying them. The skill is review guidance, and its files do not describe running tools.
- No scripts are run by the skill
- No network access is used by the skill
- Review every suggested change yourself before merging it
What tips help you get better results?
Give the agent complete markup for the component, including the links and the targets they point to, so it can check focus behaviour. For a full accessibility audit, pair this skill with your own browser accessibility tools and screen reader testing.
- Include both the anchor link and its target element in your request
- Ask the agent to note how to verify each fix, not just what is wrong
- Test the reduced-motion setting in your browser after applying a fix
What people use it for
- Auditing a marketing page with a table of contents before release
- Reviewing a documentation site's in-page links and skip links
- Checking a design-system navigation component for reduced-motion support
- Giving QA reviewers a consistent checklist item for anchor navigation
Frequently asked questions
Is the Anchor Smooth Scroll skill free to use?
The skill is released under the MIT licence, as stated on its page. The source does not list a price, so check the directory listing for current terms before you rely on it.
What do I need to install the Anchor Smooth Scroll skill?
The skill lists no requirements, runs no scripts and uses no network. You download the ZIP from our page and unzip it into ~/.claude/skills/ or a project's .claude/skills/ folder, or upload it in Claude under Settings, Capabilities, Skills.
How do I trigger the anchor smooth scroll checker?
Ask the agent to review HTML, interactive components, or design-system patterns for an instant anchor scroll option. Paste the markup that contains your anchor links so the agent can check smooth scrolling, reduced-motion support and focus.
Will the skill fix my code automatically?
No. The skill is written as review guidance. It flags the elements that break the rule and explains how to verify a fix, but you make the changes yourself.
Does this skill make my site fully accessible?
No. It covers only the anchor smooth scroll rule. It does not test real devices or assistive technology, so use browser accessibility tooling and screen reader testing for a complete audit.
What should I use instead if my project has no anchor links?
The skill's own description says the rule will not apply to projects that do not use anchor links or smooth scrolling. In that case, this skill is not needed for this check.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
This skill suits front-end developers, designers and QA reviewers who want an AI assistant to check anchor navigation against the reduced-motion and focus rule from the Front-End Checklist. It is a poor fit for projects with no anchor links or smooth scrolling, and for anyone expecting a full accessibility audit or automatic code changes.
Download the skill