staggered-word-reveal

Create subtle editorial word-by-word text reveal animations where each word fades and rises into place once it enters the viewport. Use for premium portfolio headlines, hero copy, section intros, and short marketing text that needs a cinematic staggered reveal with IntersectionObserver or in-view detection.

Quality

93%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

100%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 content is an exemplary self-contained recipe: lean, fully executable, and correct, with accessibility and reduced-motion fallbacks plus a closing verification checklist. No bundle structure exists, but none is needed at this size, and organization is clean throughout.

Dimension	Reasoning	Score
Conciseness	The body is lean and skill-specific throughout — exact motion tokens, the no-JS visibility strategy, and restraint rules — with no padding explaining concepts Claude already knows, matching the anchor-5 'every token earns its place' example.	5 / 5
Actionability	It provides complete, interlocking, copy-paste-ready HTML, CSS, and JavaScript (js-class gate, --word-index delay wiring, unobserve-after-reveal, reduced-motion and no-IntersectionObserver fallbacks) plus concrete Framer Motion and GSAP adaptations, fully covering the common cases.	5 / 5
Workflow Clarity	This single-purpose skill has an unambiguous implementation path (HTML → CSS → JS → framework notes) and an explicit 'Quick Checks' validation checklist covering no-JS visibility, replay-once, and reduced-motion behavior, satisfying the simple-skill exception with verification built in.	5 / 5
Progressive Disclosure	No bundle files exist, and nothing inlined clearly belongs in a separate file — the code blocks are the essential recipe, not bulk reference material. Clear headed sections make navigation easy, fitting a well-organized self-contained skill.	5 / 5
	Total	20 / 20 Passed

Description

87%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.

A strong description that clearly and explicitly states both capability and trigger contexts in natural user language, with concrete behavioral specifics. Minor headroom exists in adding a few common synonyms ('fade in on scroll', 'animate headline') to broaden trigger coverage.

Dimension	Reasoning	Score
Specificity	The description names several concrete, parameterized actions — 'each word fades and rises into place once it enters the viewport', 'staggered reveal with IntersectionObserver or in-view detection' — but it is one capability rather than the comprehensive multi-action list of anchor 5, and richer than the 1-2 actions of anchor 3.	4 / 5
Completeness	It explicitly answers both 'what' ('Create subtle editorial word-by-word text reveal animations where each word fades and rises into place') and 'when' ('Use for premium portfolio headlines, hero copy, section intros, and short marketing text') with concrete trigger phrases, matching the anchor-5 exemplar structure.	5 / 5
Trigger Term Quality	Natural user-voice terms like 'word-by-word text reveal', 'staggered reveal', 'hero copy', 'portfolio', and 'in-view detection' are present, but common variations such as 'fade in on scroll' or 'scroll-triggered animation' are missing, so it falls short of anchor 5's synonym-level coverage.	4 / 5
Distinctiveness Conflict Risk	It carves a clear niche (editorial staggered word reveal with once-only viewport triggering) with distinct triggers and only minimal overlap with generic scroll-animation guidance.	5 / 5
	Total	18 / 20 Passed

Validation

100%

Warnings & errors only

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

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: MengTo/Skills
Path: agent-skills/web-design/staggered-word-reveal/SKILL.md
Commit: 798db0a

Reviewed: 5 days ago

Table of Contents

Discovery Implementation Validation

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.