Epic Design Skill — Development

Epic Design Skill builds cinematic, immersive 2.5D interactive websites using scroll storytelling, parallax depth, text animations, and premium scroll effects—no WebGL required. It produces HTML/CSS/JS code with layered depth, scroll-driven animations, and asset audits.

engineering claude-code

📂 View skill on GitHub ↗ 🚀 How to use

✨ What it does

Inspects and judges image assets for background removal and depth assignment.
Assigns every element a depth level (0-5) for parallax and scaling.
Provides 45+ techniques across 8 categories for scroll effects and text animations.
Enforces accessibility (prefers-reduced-motion) and performance (GPU-friendly properties).
Generates structured HTML with layered sections and data-depth attributes.
Includes proactive triggers to flag asset and performance issues.

🎯 When to use it

When creating a landing page, product site, or hero section that should feel premium and alive.
When the user requests scroll-driven effects like parallax, sticky sections, or text animations.
When enhancing an existing site with cinematic transitions or depth layers.
When the user mentions 'Apple-style animation', 'scrollytelling', or 'make it feel alive'.

🚀 How to use

Trigger by describing a web design task with cinematic or scroll-driven language, or by asking to build a hero section or enhance an existing site. Provide product context, images, and desired mood. The skill will inspect assets, plan depth, and generate code.

Example prompts:

Build a hero section for a new sneaker launch with a floating product and text that lights up on scroll.
Make my landing page feel cinematic with sections that overlap and a product that rises between sections.

📄 Output: Single HTML files with inline CSS/JS, asset audit reports, and technique lists.

📦 Add this skill to Claude Code

# 1. Get the skills repo
git clone --depth 1 https://github.com/alirezarezvani/claude-skills /tmp/claude-skills

# 2. Copy this skill into your project (or ~/.claude/skills for all projects)
mkdir -p .claude/skills
cp -r /tmp/claude-skills/engineering-team/skills/epic-design .claude/skills/epic-design

Skill source: engineering-team/skills/epic-design/SKILL.md

⚠️ Good to know

Requires flat PNG/static assets; no WebGL or 3D modeling support, and image inspection needs Pillow installed.

❓ FAQ

What does the skill do with uploaded images?

It inspects each image for format, background, and size, then judges whether the background should be removed based on the image's role in the design.

Is WebGL required for the effects?

No, the skill uses only CSS and JavaScript to create 2.5D effects, so no WebGL is needed.

How does the skill handle accessibility?

It includes mandatory CSS for prefers-reduced-motion and uses ARIA attributes for decorative layers.

🤖 Overview, features, install steps and FAQ were generated from the project's SKILL.md on Sep 4, 2026. Always check the original source before running commands.