How to use the Epic Design agent skill: install and prompts

What is the epic-design skill and what does it make the agent do?

An agent skill is a folder of instructions and helper files that an AI agent loads when a task matches it. With epic-design installed, the agent approaches web design with a cinematic scroll-storytelling mindset. It inspects your image files, decides which ones need their backgrounds removed, plans a hierarchy of hero and companion images at different depths, and then builds the page with effects such as parallax, text reveals, pinned sections and similar scroll effects.

The skill's depth model places every element on one of six levels, each with its own parallax speed, blur, scale and shadow. It works with flat assets and plain CSS/JavaScript rather than 3D software.

• Inspects uploaded images and reports format, background status and size
• Recommends which images need background removal and which should keep it
• Plans a hero image with companion images at different depths
• Builds parallax, text reveal, pinned and overlap effects
• Includes a helper script that checks image files and a validator that checks a page's HTML for accessibility and performance basics

Install the epic-design skill

Download the ZIP file from this page and unzip it. You can install the skill in one of two ways. For a personal setup that applies everywhere, place the unzipped epic-design folder inside ~/.claude/skills/. For a single project, place it inside that project's .claude/skills/ folder.

If you use the Claude apps instead of files on disk, open Settings, go to Capabilities, then Skills, and upload the skill there.

• Personal install: ~/.claude/skills/epic-design/
• Project install: .claude/skills/epic-design/ inside your project folder
• Claude apps: Settings → Capabilities → Skills, then upload

Install the Python and Node.js requirements

The skill's scripts need two runtimes. The image inspection script needs Python 3 with the Pillow library. Pillow is only needed for image analysis, not to view the script's help text. The layer validation script needs Node.js. You also need a web browser to preview the pages the agent builds.

• Python 3 with Pillow: pip install Pillow
• Node.js, to run scripts/validate-layers.js
• A web browser to preview the resulting pages

How do you trigger the skill with a natural request?

You do not need a special command. Describe the web design task in plain language and mention the kind of motion you want. The skill's description lists phrases that match it, such as "make it feel alive", "Apple-style animation", "sections that overlap", "product rises between sections", "immersive", "scrollytelling", or any scroll-driven visual effect. Give the agent your image files and say what the page is for.

Include the project type, the mood and the number of sections if you know them. The skill uses these to choose techniques.

• "Build a product launch landing page from these three PNG photos. Make the product rise between sections."
• "Make this hero feel alive with parallax. Keep it dark and luxury."
• "Add scroll-driven text reveals to my existing static site."

What should you prepare before you ask?

Gather your images and decide the role of each one. The skill asks you to judge each image: an isolated product on a studio backdrop usually needs its background removed so it can float over other content, while a website screenshot, a full-bleed photo or a poster should keep its background. Tell the agent what the page is for and whether you are building from scratch or enhancing an existing page.

The skill's workflow inspects assets before writing code, so supply them with the request rather than after.

• Use flat PNG or JPEG files. JPEG has no real transparency.
• Note which image is the main hero and which are supporting images.
• If you have a context file such as project-context.md or product-context.md, the skill reads it first.

Review the output and check accessibility

Treat the generated page as a draft. The skill says its effects need testing across devices. Preview the page in a browser, scroll it on a phone and a laptop, and confirm that motion is handled for users who set reduced motion. The skill's accessibility guidance requires a prefers-reduced-motion block in every project. Run scripts/validate-layers.js to check the HTML for accessibility and performance basics.

If the page stutters or animations misbehave, ask the agent to debug it. The skill has a debug mode that uses the validator and checks GPU rules and reduced-motion handling.

• Preview on desktop and mobile widths
• Confirm reduced-motion handling is present
• Run scripts/validate-layers.js and fix what it reports