Agent skill · design visual · alirezarezvani
epic-design
Use for any landing page, hero section or scroll-driven web design that should feel cinematic (parallax, scrollytelling, overlapping sections, text reveals, Apple-style animation), before coding. Inspects assets with inspect-assets.py, then builds with 45+ 2.5D techniques, no WebGL.
Why this skill is useful
Provides detailed workflows and scripts for implementing advanced scroll-driven visual effects that the AI wouldn't reliably generate on its own.
What it needs
Requires pip installed locally. About 9k tokens when loaded. Last updated 2026-08-05. 23,939 stars on the source repository.
What this skill does
Epic Design Skill With this skill you work as 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills alirezarezvani/epic-design--1ba3b0