← ClaudeAtlas

epic-designlisted

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.
mdnaimul22/human-skills · ★ 2 · Web & Frontend · score 78
Install: claude install-skill mdnaimul22/human-skills
# 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 AL