CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

68

Quality

86%

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

SKILL.md
Quality
Evals
Security

Quality

Content

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

A highly actionable, well-structured skill body with a clear sequenced workflow and an excellent one-level-deep reference system. The main costs are token redundancy (Quick Rules duplicating Steps 3-4, plus motivational filler) and three broken `assets/hero-section.*` pointers, plus a missing fix-and-revalidate loop after the validation script.

Suggestions

Collapse the "Quick Rules (Non-Negotiable)" list into Steps 3-4 (keeping only rules not already stated, e.g. the floating-loop timing and depth-3 product default) — roughly rules 2-10 currently restate earlier sections verbatim.

Close the validation feedback loop: after `node scripts/validate-layers.js`, add "If any check fails, fix the reported issue and re-run until all checks pass" rather than stopping at running the script.

Fix the broken pointers by adding the `assets/hero-section.html/.css/.js` files the body promises, or removing/repointing those three references to `references/` files that exist.

DimensionReasoningScore

Conciseness

The bulk is dense, domain-specific guidance, but there is real redundancy: the "Quick Rules (Non-Negotiable)" section restates Step 4 almost item-for-item (reduced-motion, GPU-safe properties, will-change removal, aria-hidden, mobile detection all appear twice), and the "Your Mindset" section is motivational padding ("Never build a flat, static page when this skill is active", "Think: Apple product pages, Awwwards winners"). This is more than the minor trims of anchor 4 but well above the padded verbosity of anchor 2, so it fits anchor 3.

3 / 5

Actionability

Guidance is copy-paste ready throughout: the exact prefers-reduced-motion CSS block, a quantified depth table ("DEPTH 0 → ... parallax: 0.10x | blur: 8px | scale: 0.70"), a complete HTML section architecture, a positioning formula (`right: calc(50% - [hero-half-width] - [gap])`), concrete clip-path values (`inset(0 0 100% 0)` → `inset(0)`), a pinned GSAP CDN URL, and exact commands (`scripts/inspect-assets.py`, `node scripts/validate-layers.js path/to/index.html`). It is not 4 because the common cases are covered with executable specifics rather than leaving minor gaps.

5 / 5

Workflow Clarity

The 5-step build workflow is clearly sequenced with three entry modes, user-facing checkpoints ("State your decisions to the user before building", "get confirmation before treating any background as a problem"), and a final validation step with an exact script and a list of what it checks. It is not 5 because no fix-and-revalidate loop is spelled out — the Validation section ends at "run the validation script" without instructing what to do on failure (Mode 3 Debug exists but is never tied to validation output); it is not 3 because the sequence and checkpoints are explicit, and the operations are generative rather than destructive.

4 / 5

Progressive Disclosure

Structure is strong: a reference table with "File | What's Inside | When to Read" columns clearly signals nine one-level-deep reference files, all of which exist in the bundle, and both referenced scripts exist. It is not 5 because Step 5 points to `assets/hero-section.html`, `assets/hero-section.css`, and `assets/hero-section.js` ("Full boilerplate", "Full CSS system", "Full JS engine") and no `assets/` directory exists in the bundle — three broken pointers; it is not 3 because references are clearly signaled and content is appropriately split between the overview and reference files.

4 / 5

Total

16

/

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.

A strong, technique-dense description with excellent natural trigger phrases and explicit what/when guidance. Its one real weakness is the deliberate over-claim of "ANY web design task", which invites conflicts with sibling design skills the body itself marks as NOT covered by this skill.

Suggestions

Replace "Use this skill for any web design task" and "Use aggressively for ANY web design task" with a scoped trigger such as "Use when the site should feel cinematic or scroll-driven (landing pages, hero sections, parallax, scrollytelling)" to avoid firing on generic web design tasks that belong to ui-design or landing-page-generator.

Trim repeated buzzword adjectives ("immersive", "cinematic", "premium" appear multiple times) — the concrete 45-technique list already carries the specificity, and the padding works against conciseness.

DimensionReasoningScore

Specificity

The description lists multiple concrete actions and techniques — "Build immersive, cinematic 2.5D interactive websites using scroll storytelling, parallax depth, text animations", plus a long enumerated list ("clip-path reveals... curtain drops, iris opens, card stacks, bleed typography") and a process commitment ("Always inspects, judges, and plans assets before coding"). This matches the anchor for comprehensive, specific concrete actions; it is not 4 because coverage of the domain's actions shows no gaps — every major capability category is named.

5 / 5

Completeness

Both what and when are explicit: the what is "Build immersive, cinematic 2.5D interactive websites using scroll storytelling, parallax depth, text animations, and premium scroll effects — no WebGL required", and the when is "Use this skill for any web design task" plus "Trigger on phrases like...". This matches the anchor that clearly answers both with concrete trigger phrases; it is not 4 because the when-clause is fully explicit rather than merely present.

5 / 5

Trigger Term Quality

Trigger coverage includes natural user phrasings — "make it feel alive", "Apple-style animation", "sections that overlap", "product rises between sections", "immersive", "scrollytelling" — alongside concrete feature keywords ("scroll animations, parallax, sticky sections, section overlaps"). This is comprehensive coverage including synonyms and colloquial variations; it is not 4 because even informal phrasings a user would naturally say are explicitly listed.

5 / 5

Distinctiveness Conflict Risk

Most listed techniques ("parallax", "clip-path reveals", "scrollytelling", "words that light up on scroll") are a distinct niche, but the over-claims "Use this skill for any web design task" and "Use aggressively for ANY web design task" broaden it to all web design, creating real overlap risk with general UI-design, landing-page, and frontend-build skills. It fits anchor 3 (somewhat specific but could still overlap); it is not 4 because the explicit "ANY web design task" claim goes beyond minor overlap, and not 2 because the dominant trigger set is still a clearly defined scroll-effects niche.

3 / 5

Total

18

/

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

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

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.