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 anim
Profile →npx skills add alirezarezvani/claude-skills --skill epic-design --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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
- Before Starting
- Your Mindset
- How This Skill Works
- Mode 1: Build from Scratch
- Mode 2: Enhance Existing Site
- Mode 3: Debug/Fix
- Step 1 — Understand the Brief + Inspect All Assets
- A. Extract the brief
- B. Inspect every uploaded image asset
- C. Compositional planning — visual hierarchy before a single line of code
- D. Decide the cinematic role of each asset
- Step 2 — Choose Your Techniques (Decision Engine)
- By Project Type
- By Scroll Behavior Requested
node scripts/validate-layers.js path/to/index.html
What does the epic-design skill do?
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 anim
How do I install it?
Run `npx skills add alirezarezvani/claude-skills --skill epic-design --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From alirezarezvani/claude-skills, a repository with 23,791 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.