Guide · Agent skill
How to use the Flashing Content Safety Check agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The flashing-content skill is an agent skill that teaches an AI agent to review web pages, interactive components, animations, GIFs and videos for flashing that could trigger seizures in people with photosensitive epilepsy. This guide is for front-end developers, designers and accessibility reviewers who want a quick first pass on flashing risks. By the end you will know what the skill does, how to install it, how to ask for a check and what its limits are.
Flashing Content Safety Checkthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the skill. Download the ZIP for flashing-content from this page and unzip it. You should see SKILL.md and references/rule.md.
- 2Choose the install location. Put the folder in ~/.claude/skills/ for personal use, or in the project's .claude/skills/ folder for one project.
- 3Or upload it in the Claude apps. Open Settings, go to Capabilities, then Skills, and upload the skill.
- 4Make a specific request. Name the component, page, GIF or video you want checked and mention flashing or seizure risk.
- 5Review the findings. Check the agent's report against the 3-flashes-per-second and 25% viewport rules.
- 6Apply and recheck. Slow the animation, replace it with a fade or static alternative, then ask the agent to review again.
What is an agent skill and what does this one do?
An agent skill is a folder of instructions that an AI agent loads when a task matches the skill's description. This skill is based on the WCAG 2.3.1 rule that content should not flash more than three times per second. Flashing between 3 and 60 Hz can trigger seizures in people with photosensitive epilepsy, so the rule is treated as a safety requirement rather than a style preference.
Once installed, the agent checks that no content flashes more than 3 times per second, that any flashing area stays under 25% of the viewport, and that red flashing is avoided. When it finds a problem it suggests fixes such as slowing the animation, replacing it with a fade, or using a static alternative that conveys the same information.
- Checks animated GIFs, videos and CSS animations for rapid flashing
- Checks flashing area against 25% of the viewport
- Flags red flashing as especially risky
- Suggests slower animations, fades or static alternatives
How do you install the flashing-content skill?
Download the ZIP for the skill from this page and unzip it. The skill folder contains references/rule.md and SKILL.md. Place the unzipped folder in one of the two locations below, depending on whether you want it for all projects or one project.
You can also upload the skill in the Claude apps. Go to Settings, then Capabilities, then Skills, and upload the skill there.
- Personal use across projects: unzip into ~/.claude/skills/
- Single project: unzip into the project's .claude/skills/ folder
- Claude apps: Settings → Capabilities → Skills, then upload
How do you trigger the skill with a natural request?
You do not need a special command. The agent decides to use the skill when your request matches its description, which mentions reviewing rendered HTML, interactive components and design-system patterns for seizure-triggering flashing content. Be specific about what you want checked and where it lives.
Good requests name the thing to review and the kind of risk you care about. Mention the file, component or page so the agent knows what to inspect.
- Check this carousel for flashing content before we release it.
- Review these GIFs in the design system for anything that flashes more than 3 times per second.
- Does this hero video have any rapid flashing or red flashes?
- Look at this loading spinner component and tell me if its animation could trigger seizures.
What examples does the skill check?
The skill's reference file includes a CSS example of a dangerous animation. A keyframe that switches opacity between 1 and 0 with a 0.1 second duration produces 10 flashes per second, which is above the limit. The agent is expected to identify patterns like this and suggest a slower or non-flashing version.
Typical targets are animations that loop continuously, such as carousels that cycle quickly, promotional banners, auto-playing video, and animated GIFs used in a design system.
@keyframes flash {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.danger {
/* 0.1s = 10 flashes per second - SEIZURE RISK */
animation: flash 0.1s infinite;
}What does the skill need, and what should you know about scripts and network use?
The skill lists no requirements. It does not run scripts and does not use the network, so it works by giving the agent instructions to follow while it reads your files and markup.
The skill is guidance, not measurement. The agent cannot measure flash frequency or luminance precisely, so its results are a first pass. The skill's own fix guidance mentions animation tools for measuring flash frequency, but this skill does not provide one.
- Requirements: none listed
- Runs scripts: no
- Uses network: no
- Scope: flashing only, not a full accessibility audit
What tips help you get better results?
Give the agent the rendered markup or the actual animation code, not only a description. Ask it to check frequency, area and colour together, since the rule combines all three. Use the agent's findings as a starting point, then confirm timing with a dedicated photosensitivity testing tool before sign-off.
- Include the CSS, GIF or video file, not just the page name
- Ask about frequency, area and red flashing in the same request
- Re-run the check after you apply a fix
- Pair it with other accessibility checks, since it does not cover other WCAG criteria
What people use it for
- Reviewing a carousel or hero animation before a release
- Checking animated GIFs and motion in a design system
- Scanning a loading spinner or UI transition for rapid flashing
- Doing a quick first pass on a video before publishing
Frequently asked questions
Is the flashing-content skill free to use?
The skill is published under the MIT licence, as stated on this page. Check the licence file in the download for the exact terms before you redistribute it.
What do I need to run the flashing-content skill?
The skill lists no requirements. It does not run scripts and does not use the network, so it only needs an AI agent that supports agent skills.
Where do I install an agent skill for Claude?
Unzip the skill into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps you can instead upload it under Settings, then Capabilities, then Skills.
Does this skill replace a full accessibility audit?
No. It focuses only on flashing content and does not cover other WCAG criteria, so it can miss other accessibility problems.
Can an AI agent measure flashing frequency accurately?
Not precisely. An agent review cannot measure flash frequency or luminance exactly, so it gives a first pass. For medical or compliance sign-off, use a dedicated photosensitivity testing tool.
What is the rule the skill checks?
The rule is that content should not flash more than three times per second, from WCAG 2.3.1 Level A. The skill also checks that flashing areas stay under 25% of the viewport and avoids red flashing.
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
Use this skill if you are a front-end developer, designer or accessibility reviewer who wants an agent to catch obvious flashing risks in animations, carousels, GIFs and video before release. Pick a dedicated photosensitivity testing tool or a full accessibility audit if you need measured results, compliance sign-off or coverage of other WCAG criteria.
Download the skill