CtrlK
BlogDocsLog inGet started
Tessl Logo

flashing-content

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Prevent seizure-triggering flashing content. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

56

Quality

65%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/flashing-content/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

71%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is a lean, well-structured overview that correctly delegates code examples to references/rule.md with a clear one-level pointer. Its main weaknesses are mild duplication between the Quick Reference and Check sections and vague measurement guidance ('use animation tools') with no named tool or inline example for verifying flash frequency.

Suggestions

Name a concrete measurement method instead of 'animation tools', e.g., 'Compute flash frequency from the animation-duration/keyframes (0.1s cycle = 10 flashes/sec) or run the video/GIF through PEAT,' and include one short inline CSS example of a dangerous vs. safe animation.

Remove the near-verbatim duplication between the Quick Reference bullets and the 'Check' section, keeping thresholds in one place.

Add an explicit post-fix validation step, e.g., 'Re-measure the animation duration to confirm the result is ≤ 3 flashes per second and flashing area < 25% of viewport.'

DimensionReasoningScore

Conciseness

The ~45-line body is efficient and assumes Claude's competence — no explanation of what WCAG or epilepsy is beyond the one safety-framing sentence. It falls short of anchor 5 only through minor redundancy: the 'Check' section ('Verify no content flashes more than 3 times per second, and that any flashing content occupies less than 25% of the viewport') restates the first two Quick Reference bullets almost verbatim, and the intro sentence's 3-60 Hz fact is repeated in 'Explain'.

4 / 5

Actionability

'Test animated GIFs, videos, and CSS animations for rapid flashing patterns' and 'Replace flashing effects with fade transitions or static alternatives' are concrete directions, but 'Use animation tools to measure flash frequency' names no actual tool or method (e.g., PEAT, browser animation/devtools inspection, reading the animation duration), and the body contains no executable example — the CSS examples live only in references/rule.md. This matches anchor 3: some concrete guidance but incomplete, with key measurement details missing; anchor 4 would require the specific verification method to be named.

3 / 5

Workflow Clarity

The Check → Fix → Explain → Code Review sections form a clear, sensibly ordered sequence for a simple single-purpose skill, and 'note how to verify the fix with browser accessibility tooling' signals a validation checkpoint. It is not anchor 5 because verification is only gestured at — there is no explicit re-measure/re-check step after applying a fix — leaving a minor validation gap consistent with anchor 4.

4 / 5

Progressive Disclosure

The body is a concise overview with well-organized sections and a single, clearly signaled one-level-deep pointer: 'For full implementation details, code examples, and framework-specific guidance, see references/rule.md' — and references/rule.md does exist (203 lines) with no further nesting. This matches anchor 5: clear overview, appropriately split content, easy navigation.

5 / 5

Total

16

/

20

Passed

Description

58%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description has an explicit 'Use when' trigger and names its niche, but the capability list is generic accessibility-review boilerplate that doesn't reflect the skill's flashing-specific function, and it omits several natural trigger terms (animation, GIF, strobe, flicker, WCAG). The broad a11y trigger phrasing also creates overlap risk with other accessibility skills.

Suggestions

Replace the generic 'check native semantics / keyboard behavior / focus flow' action list with flashing-specific capabilities, e.g., 'Measure flash frequency of animations against the 3-per-second WCAG 2.3.1 limit and verify flashing area stays under 25% of the viewport.'

Add natural trigger terms users would actually say: 'flashing', 'strobe', 'flicker', 'animation', 'GIF', 'video', 'photosensitive epilepsy', 'WCAG 2.3.1'.

Narrow the 'when' clause to flashing/seizure-safety contexts (e.g., 'Use when reviewing pages containing animations, videos, GIFs, or strobe effects') so it doesn't fire for every generic accessibility review.

DimensionReasoningScore

Specificity

The description names the domain ('Prevent seizure-triggering flashing content') and lists concrete actions ('Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output'), but those actions are generic accessibility-review boilerplate rather than the skill's actual flashing-specific capabilities (measuring flash frequency, checking the 25% viewport threshold). It matches anchor 3 — domain plus 1-2 concrete actions, not comprehensive — and falls short of anchor 4 because the listed actions don't cover what the skill actually does.

3 / 5

Completeness

Both parts are present: an explicit 'Use when reviewing rendered HTML, interactive components, or design-system patterns...' trigger clause, and a 'what' expressed through the check/inspect actions. It is not a 5 because the 'what' describes generic review activity rather than concretely stating the skill verifies and fixes flashing content against WCAG 2.3.1 thresholds; it exceeds anchor 3 because the 'when' is explicit, not merely implied.

4 / 5

Trigger Term Quality

It contains relevant natural terms ('flashing content', 'seizure', 'rendered HTML'), but misses common variations a user would plausibly say: 'animation', 'GIF', 'video', 'strobe', 'flicker', 'photosensitive epilepsy', or 'WCAG'. Anchor 3 ('some relevant keywords but missing common variations or synonyms') fits; anchor 4 would require broader coverage of these synonyms.

3 / 5

Distinctiveness Conflict Risk

'Prevent seizure-triggering flashing content' names a clear niche, but the trigger clause ('reviewing rendered HTML, interactive components, or design-system patterns') plus generic keyboard/focus/screen-reader checks overlaps heavily with any general accessibility-review skill, so it could fire for the wrong skill. This is anchor 3 — somewhat specific but overlap risk remains; not anchor 4 because the generic a11y phrasing creates real conflict risk with sibling accessibility rules.

3 / 5

Total

13

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository
thedaviddias/Front-End-Checklist
Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.