Can I use this with my existing image assets?

Yes. The skill includes an asset inspection workflow that judges whether backgrounds should be removed or kept based on the asset's intended role (e.g., hero product vs. background scene).

Is the generated code mobile-friendly and accessible?

Yes. Every output includes mandatory 'prefers-reduced-motion' CSS media queries and optimized GPU rules. It also features touch-detection logic to scale back effects on mobile devices for better performance.

Does this skill require WebGL or 3D software?

No, the Epic Design skill is specifically designed to create cinematic effects using only CSS, JavaScript, and static assets, making it lightweight and easier to maintain than WebGL-based solutions.

How does the depth system work?

The skill utilizes a standardized 6-layer model (Depth 0-5). Each layer has specific parallax coefficients, blur formulas, and scale ratios to create a consistent sense of spatial depth during scrolling.

Epic Design Skill

Name: Epic Design Skill
Author: micsapp

bymicsapp

0•

设计工具

Builds cinematic 2.5D interactive websites and premium scroll-driven experiences using advanced CSS and JavaScript techniques.

The Epic Design Skill transforms Claude into a high-end creative technologist capable of creating immersive, 'Apple-style' web experiences. It specializes in 2.5D scrollytelling, utilizing a sophisticated 6-layer depth system, parallax effects, and cinematic transitions without requiring complex WebGL or 3D modeling. From automated asset inspection and background removal judgment to implementing accessible, motion-aware code, this skill provides a comprehensive framework for building luxury landing pages, product showcases, and premium brand sites that feel alive and responsive to user interaction.

主要功能

010 GitHub stars

02Cinematic section transitions including curtain drops and iris opens

03Built-in performance optimization and motion accessibility rules

04Advanced text animations like word lighting and split-converge reveals

05Automated image asset inspection and depth-level assignment

06Immersive 2.5D scrollytelling and parallax depth layering

使用场景

01Creating high-end, cinematic product launch landing pages

02Enhancing existing web interfaces with 'Apple-style' scroll-driven micro-interactions

03Building premium portfolio sites with overlapping sections and floating assets

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add micsapp/micstec-skills epic-design

For use in Claude.ai and ChatGPT