Provide alternatives to parallax effects
SkillMediaparallax-effects is a skill for AI agents that reviews rendered HTML, interactive components, and design-system patterns related to provide alternatives to parallax effects. It guides the agent to check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
Available today. Use it from your connected AI after setup.
No other account needed.
Have an agent that can load and use skills.
Then ask your AI: use the Provide alternatives to parallax effects skill
What your AI can do with it
- Reviews rendered HTML for accessible alternatives to parallax scrolling effects
- Checks native semantics before other inspection
- Inspects keyboard behavior of interactive components
- Reviews focus flow across components
- Checks accessible names on interactive elements
- Inspects screen-reader output where relevant
Getting started
- Have an agent that can load and use skills.
- Add the parallax-effects skill to the agent's available skills.
- Ask the agent to review the rendered HTML, component, or design-system pattern in question.
- The agent will check native semantics first, then keyboard behavior, focus flow, accessible names, and screen-reader output.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/parallax-effects/SKILL.md and read by ahel’s review.
Parallax creates a mismatch between what the eyes see and what the inner ear senses—triggering dizziness, nausea, and vertigo for users with vestibular disorders.
Quick Reference
- Disable parallax when prefers-reduced-motion is set
- Parallax creates depth mismatch triggering vestibular disorders
- Provide user toggle to disable motion effects site-wide
- Ensure essential content is accessible without the effect
Check
Identify parallax effects where background and foreground move at different speeds. Verify these effects are disabled when prefers-reduced-motion is set, and essential content is accessible without the effect.
Fix
Wrap parallax effects in @media (prefers-reduced-motion: no-preference) queries. Provide static fallbacks that convey the same content. Consider adding a user toggle to disable motion effects site-wide.
Explain
Explain how parallax effects create a depth mismatch that can trigger vestibular disorders, causing dizziness, nausea, and disorientation in affected users.
Code Review
Review the rendered markup and interactive states that affect Provide alternatives to parallax effects. Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule, and note how to verify the fix with browser accessibility tooling or assistive tech.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/accessibility/parallax-effects
Signals
- GitHub stars
- 74k
- Forks
- 7k
- Last commit
- Aug 2026
Questions
- When should this skill be used?
- Use it when reviewing rendered HTML, interactive components, or design-system patterns related to providing alternatives to parallax effects.
- What does the agent check first?
- Native semantics are checked first, before keyboard behavior, focus flow, accessible names, and screen-reader output.
- Does it work on any web page?
- It is intended for rendered HTML, interactive components, and design-system patterns related to parallax effect alternatives.
Advanced
- Item type
- skill
- Key
parallax-effects- Source
- github.com/thedaviddias/front-end-checklist