epic-design

Build immersive, cinematic 2.5D interactive websites using scroll storytelling, parallax depth, text animations, and premium scroll effects — no WebGL required. Use this skill for any web design task: landing pages, product sites, hero sections, scroll animations, parallax, sticky sections, section overlaps, floating products between sections, clip-path reveals, text that flies in from sides, words that light up on scroll, curtain drops, iris opens, card stacks, bleed typography, and any site that should feel cinematic or premium. Trigger on phrases like "make it feel alive", "Apple-style animation", "sections that overlap", "product rises between sections", "immersive", "scrollytelling", or any scroll-driven visual effect. Covers 45+ techniques across 8 categories. Always inspects, judges, and plans assets before coding. Use aggressively for ANY web design task.

Quality

90%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

—

The risk profile of this skill

Quality

Content

88%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 highly actionable with concrete code, a clear sequenced workflow, and validation feedback loops, and it uses progressive disclosure well through a well-organized reference table. Its weaknesses are some motivational padding and broken asset file references that should be created or removed.

Suggestions

Remove the motivational/padded passages (e.g., 'You are now a world-class epic design expert' and the standalone mindset section) to tighten the token budget without losing actionable content.

Fix the broken references to assets/hero-section.html, assets/hero-section.css, and assets/hero-section.js — either add these bundle files or remove the references from Step 5.

Dimension	Reasoning	Score
Conciseness	The body is mostly efficient and avoids re-explaining basic concepts, but motivational padding like 'You are now a world-class epic design expert', the mindset section, and 'Never build a flat, static page' could be trimmed for a leaner token footprint.	4 / 5
Actionability	It provides concrete, copy-paste-ready guidance: the 6-layer depth table with parallax/blur/scale values, a full HTML section architecture, the reduced-motion CSS block, an exact GSAP CDN URL, and decision tables mapping user phrases to techniques.	5 / 5
Workflow Clarity	The 5-step workflow (Understand/Inspect → Choose techniques → Layer → Accessibility/Performance → Code) is clearly sequenced, with inspection checkpoints in Step 1 and a post-build validation script ('validate-layers.js') forming a validate-then-fix feedback loop.	5 / 5
Progressive Disclosure	The reference table cleanly signals 9 one-level-deep reference files with 'when to read' guidance, but the body cites assets/hero-section.html, .css, and .js that do not exist in the bundle — broken paths that hinder navigation.	4 / 5
	Total	18 / 20 Passed

Description

92%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 is specific, trigger-rich, and explicitly answers both what the skill does and when to use it, making it strong on completeness and actionability. Its main weakness is over-broad scope language ('ANY web design task') that raises conflict risk with adjacent skills.

Suggestions

Narrow the scope from 'any web design task' / 'Use aggressively for ANY web design task' to specifically cinematic/2.5D scroll-driven work to reduce overlap with ui-design and landing-page-generator.

Move the meta-instruction 'Always inspects, judges, and plans assets before coding' out of the description (it is process guidance, not a capability or trigger) to keep the description focused on what/when.

Dimension	Reasoning	Score
Specificity	The description enumerates many concrete actions — 'scroll storytelling, parallax depth, text animations', 'clip-path reveals', 'curtain drops', 'iris opens', 'card stacks', 'bleed typography' — providing comprehensive coverage rather than vague language.	5 / 5
Completeness	It explicitly answers both 'what' (build cinematic 2.5D interactive websites) and 'when' via 'Use this skill for any web design task' plus 'Trigger on phrases like...', giving concrete trigger guidance.	5 / 5
Trigger Term Quality	It includes natural user phrases such as 'make it feel alive', 'Apple-style animation', 'immersive', 'scrollytelling', and 'product rises between sections', covering synonyms and variations users would actually say.	5 / 5
Distinctiveness Conflict Risk	Phrases like 'any web design task' and 'Use aggressively for ANY web design task' make the scope very broad, creating notable overlap risk with related skills (ui-design, landing-page-generator, senior-frontend), so it is not a clearly distinct niche.	3 / 5
	Total	18 / 20 Passed

Validation

93%

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 — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
referenced_paths_exist	Referenced path issues: 3 missing	Warning

	Total	15 / 16 Passed

Repository: alirezarezvani/claude-skills
Path: engineering-team/skills/epic-design/SKILL.md
Commit: 19392f7

Reviewed: ~8 hours 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.