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.

67

Quality

84%

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

The canonical home for this skill is epic-design in alirezarezvani/claude-skills

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.

A well-engineered body: lean decision tables, executable boilerplate, and a clearly sequenced build workflow with user-confirmation checkpoints. Two real weaknesses hold it back: the progressive-disclosure structure is entirely notional because none of the referenced reference/script/asset files ship in the bundle, and the final validation step lacks a fix-and-revalidate recovery loop. Minor redundancy between Step 1 and the Quick Rules could also be trimmed.

Suggestions

Ship the referenced bundle files (references/*.md, scripts/inspect-assets.py, scripts/validate-layers.js, assets/hero-section.*) or remove/inline the pointers — as delivered, every 'Read these for full technique details' instruction dead-ends, making the 45-technique catalogue unusable.

Add an explicit feedback loop to the Validation section: after 'node scripts/validate-layers.js', instruct to fix each reported issue (missing depth attributes, aria-hidden, alt text) and re-run until the report is clean before delivering.

Deduplicate Quick Rules 0a/0b against Step 1.B (both restate asset inspection and background-judgment rules) and cut persona lines like 'You are now a world-class epic design expert' to recover tokens without losing guidance.

DimensionReasoningScore

Conciseness

Mostly dense, decision-oriented content (technique mapping tables, depth-level spec table, non-negotiable rules) with little explanation of things Claude already knows — but there is padding and redundancy: 'You are now a world-class epic design expert', 'Never build a flat, static page when this skill is active', and Quick Rules 0a/0b restating Step 1.B almost verbatim. Fits 'efficient; minor instances of over-explanation that could be trimmed'; not 5 because the persona flourishes and the duplicated asset-inspection rules cost tokens without adding guidance.

4 / 5

Actionability

Concrete and executable in the right places: a full reduced-motion CSS block, a copy-paste HTML section architecture, the validation command 'node scripts/validate-layers.js path/to/index.html', the GSAP CDN URL, and request-to-technique decision tables. However some guidance is naming-only (e.g. 'Split converge + Word lighting', 'DJI scale-in pin' are named in tables with no inline code or file that exists to define them), and the positioning recipe uses placeholder values ('right: calc(50% - [hero-half-width] - [gap])'). Fits 'mostly executable guidance with minor gaps'; not 5 because the common cases cannot all be executed from what is actually present.

4 / 5

Workflow Clarity

A clear, well-sequenced workflow (Mode selection → Steps 1–5 → validation) with real checkpoints: 'State your decisions to the user before building', 'get confirmation before treating any background as a problem', and a final validation step listing what is checked. Fits 'clear sequence with most checkpoints present; minor validation gaps'. Not 5 because there is no feedback loop — the Validation section says to run the script but never says what to do when it fails (fix and re-run), which the rubric treats as required for an explicit validate step.

4 / 5

Progressive Disclosure

The in-file structure is genuinely good — a Reference Files table with a 'When to Read' column, one-level-deep references, overview-level inline content. But scoring against the actual bundle: none of the 14 referenced files exist (references/asset-pipeline.md, references/depth-system.md, all 9 reference docs, scripts/inspect-assets.py, scripts/validate-layers.js, assets/hero-section.html/css/js are all absent), so every pointer is a dead end and the promised detail is unreachable. Fits 'some structure but could be better organized'; not 4 because 'references mostly clear' fails when the referenced targets are missing from the bundle, and not 2 because the SKILL.md body itself is well-organized and keeps only overview content inline.

3 / 5

Total

15

/

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 description: concrete capability list, rich natural trigger phrases, and explicit what/when guidance. Its main flaw is over-claiming scope — 'any web design task' / 'ANY web design task' invites it to fire on ordinary web design work where general or sibling skills are more appropriate, raising conflict risk.

Suggestions

Replace 'Use this skill for any web design task' and 'Use aggressively for ANY web design task' with scope tied to the actual niche, e.g. 'Use when the user wants cinematic, scroll-driven, or premium-feel web experiences' — reserving it for tasks where depth/scroll effects are the point.

Trim the long mid-list of technique names ('curtain drops, iris opens, card stacks, bleed typography…') to the highest-value search terms; the full catalogue lives in the skill body, so the description only needs the phrases a user would type.

DimensionReasoningScore

Specificity

The description lists many concrete capabilities — 'scroll storytelling, parallax depth, text animations', 'clip-path reveals, text that flies in from sides, words that light up on scroll, curtain drops, iris opens, card stacks, bleed typography', plus 'Always inspects, judges, and plans assets before coding' — comprehensive rather than minor-gap coverage, matching the anchor for multiple specific concrete actions. It is not a 4 because coverage of actions is broad and specific, not leaving minor gaps.

5 / 5

Completeness

Both halves are explicit: what ('Build immersive, cinematic 2.5D interactive websites using scroll storytelling, parallax depth, text animations, and premium scroll effects — no WebGL required') and when ('Use this skill for any web design task… Trigger on phrases like…'). This mirrors the anchor that clearly answers both what and when with concrete trigger phrases; a 4 would need the 'when' to be less explicit, which it is not.

5 / 5

Trigger Term Quality

Natural phrases users would actually say are well covered: 'landing pages', 'hero sections', 'parallax', 'sticky sections', 'make it feel alive', 'Apple-style animation', 'immersive', 'scrollytelling', plus technique-level synonyms like 'section overlaps' and 'floating products between sections'. Matches the comprehensive-synonyms anchor; a 4 would require noticeably missing natural terms, which is not the case.

5 / 5

Distinctiveness Conflict Risk

The 2.5D/scroll-effects niche itself is distinct, but the claims 'Use this skill for any web design task' and 'Use aggressively for ANY web design task' widen it to all web design, overlapping general web-design, UI, and landing-page skills — matching 'somewhat specific but could still overlap with similar skills'. Not a 4 because the explicit 'ANY web design task' instruction creates more than minor overlap risk; not a 2 because the technique vocabulary (parallax depth, scrub, clip-path reveals) still anchors it to a recognizable 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: 19 missing

Warning

Total

15

/

16

Passed

Repository

alirezarezvani/claude-skills

Path

.gemini/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.