Skip to content
Get packs

Flashing Content Safety Check

Reviews pages and animations for seizure-triggering flashing content under WCAG 2.3.1.

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, interactive components, and animations for flashing that could trigger seizures in people with photosensitive epilepsy. Once installed, the agent checks that content does not flash more than 3 times per second, that any flashing area stays under 25% of the viewport, and that red flashing is avoided. It also suggests fixes such as slowing animations or replacing them with fades or static alternatives.

Great for

  • Front-end developers checking UI animations, carousels, or video before release
  • Designers reviewing motion and GIFs in a design system
  • Accessibility reviewers who want a quick first pass on flashing risks

Skip it if

  • Full accessibility audits: the skill focuses on flashing and does not cover other WCAG criteria, so it can miss other problems (reason: narrow scope)
  • Medical or compliance sign-off: an agent review cannot measure flash frequency or luminance precisely, so a dedicated photosensitivity testing tool is needed (reason: the skill gives guidance, not measurements)

Try asking

  • “Review this CSS keyframe animation for anything that flashes faster than 3 times per second.”
  • “Check our hero video and product GIFs for seizure-risk flashing.”
  • “Is the red alert banner on this page safe for photosensitive users?”
  • “Suggest fixes for the blinking notification badge in this component.”
Step-by-step guide: how to use Flashing Content Safety CheckInstall, 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.

    flashing-content.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip flashing-content.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip flashing-content.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

  • Give the agent the rendered HTML, CSS, or a link to the component so it can inspect the actual animations.
  • Pair the review with a measurement tool such as a flash analyser for videos, since the agent judges from code and descriptions rather than measuring frames.
  • Ask for specific elements and line references so the fixes are easy to apply.

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.