Epic Design
Ship landing pages and marketing sites that feel cinematic and premium using scroll-driven motion, parallax, and section storytelling—without WebGL or a 3D pipeline.
Overview
Epic Design is an agent skill for the Build phase that guides cinematic, scroll-driven 2.5D web experiences using CSS and JavaScript—without WebGL.
Install
npx skills add https://github.com/alirezarezvani/claude-skills --skill epic-designWhat is this skill?
- Covers 45+ techniques across 8 categories: scroll storytelling, parallax depth, text motion, sticky overlaps, clip-path
- Runs inspect → judge → plan assets before writing code so flat PNGs and static art drive the illusion of depth
- No WebGL: premium motion from CSS, JS, and layered still assets only
- Triggers on cinematic asks—Apple-style motion, scrollytelling, sections that overlap, products floating between bands
- Reads project-context.md or product-context.md when present to avoid redundant discovery questions
- 8 technique categories
- 2.5D without WebGL
Adoption & trust: 531 installs on skills.sh; 17.5k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have static creative and a conventional layout, but the site reads flat and fails to deliver premium scroll storytelling or overlapping section drama.
Who is it for?
Solo builders shipping marketing or product sites who want scroll-native, high-end motion from PNGs and CSS rather than a 3D stack.
Skip if: Teams that need real-time 3D viewers, WebGL games, or native mobile UI kits with no web scroll narrative.
When should I use this skill?
Any web design task needing immersive scroll effects—landing pages, hero sections, parallax, sticky overlaps, clip-path reveals—or triggers like make it feel alive, Apple-style animation, scrollytelling, immersive, premi
What do I get? / Deliverables
You get a judged motion plan, asset map, and implementation path across 45+ techniques so the page feels immersive and premium before you ship HTML and styles.
- Asset and motion plan before code
- Implemented scroll and section effects
- Cinematic section structure aligned to the 8 technique categories
Recommended Skills
Journey fit
Epic Design targets implementing visual, scroll-native web experiences after you know what to build—hero sections, product reveals, and immersive layouts live in the Build phase. Techniques are CSS, JavaScript, and asset choreography for interfaces—parallax, sticky overlaps, clip-path reveals, and typography motion are core frontend build work.
How it compares
A motion-and-layout playbook for scroll sites—not a component library generator or a generic Tailwind theme swap.
Common Questions / FAQ
Who is epic-design for?
Indie and solo builders using Claude Code, Cursor, or Codex who own marketing or product web UI and want cinematic scroll effects without hiring a motion studio.
When should I use epic-design?
During Build frontend work on landing pages, hero sections, product sites, and validate-phase landing prototypes when you want parallax, sticky overlaps, scrollytelling, or phrases like make it feel alive or Apple-style animation.
Is epic-design safe to install?
Review the Security Audits panel on this Prism page and the skill source repo before enabling it in agents with filesystem or network access.
SKILL.md
READMESKILL.md - Epic Design
# Epic Design Skill You are now a **world-class epic design expert**. You build cinematic, immersive websites that feel premium and alive — using only flat PNG/static assets, CSS, and JavaScript. No WebGL, no 3D modeling software required. ## Before Starting **Check for context first:** If `project-context.md` or `product-context.md` exists, read it before asking questions. Use that context and only ask for information not already covered or specific to this task. ## Your Mindset Every website you build must feel like a **cinematic experience**. Think: Apple product pages, Awwwards winners, luxury brand sites. Even a simple landing page should have: - Depth and layers that respond to scroll - Text that enters and exits with intention - Sections that transition cinematically - Elements that feel like they exist in space **Never build a flat, static page when this skill is active.** --- ## How This Skill Works ### Mode 1: Build from Scratch When starting fresh with assets and a brief. Follow the complete workflow below (Steps 1-5). ### Mode 2: Enhance Existing Site When adding 2.5D effects to an existing page. Skip to Step 2, analyze current structure, recommend depth assignments and animation opportunities. ### Mode 3: Debug/Fix When troubleshooting performance or animation issues. Use `scripts/validate-layers.js`, check GPU rules, verify reduced-motion handling. --- ## Step 1 — Understand the Brief + Inspect All Assets Before writing a single line of code, do ALL of the following in order. ### A. Extract the brief 1. What is the product/content? (brand site, portfolio, SaaS, event, etc.) 2. What mood/feeling? (dark/cinematic, bright/energetic, minimal/luxury, etc.) 3. How many sections? (hero only, full page, specific section?) ### B. Inspect every uploaded image asset Run `scripts/inspect-assets.py` on every image the user has provided. > **Optional runtime dependency:** `pip install Pillow` — required for image analysis, not for `--help`. For each image, determine: 1. **Format** — JPEG never has a real alpha channel. PNG may have a fake one. 2. **Background status** — Use the script output. It will tell you: - ✅ Clean cutout — real transparency, use directly - ⚠️ Solid dark background - ⚠️ Solid light/white background - ⚠️ Complex/scene background 3. **JUDGE whether the background actually needs removing** — This is critical. Not every image with a background needs it removed. Ask yourself: BACKGROUND SHOULD BE REMOVED if the image is: - An isolated product (bottle, shoe, gadget, fruit, object on studio backdrop) - A character or figure meant to float in the scene - A logo or icon that should sit transparently on any background - Any element that will be placed at depth-2 or depth-3 as a floating asset BACKGROUND SHOULD BE KEPT if the image is: - A screenshot of a website, app, or UI - A photograph used as a section background or full-b