[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6QCDA0YZGFGERTQNF3T79ZP":3,"skill-same:01M6QCDA0YZGFGERTQNF3T79ZP":83},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":28,"publishedAt":49,"linkOnly":50,"markdownContent":51,"markdownBody":52,"frontMatter":53,"refName":60,"commitSha":61,"skillDirectory":62,"forksCount":14,"repositoryHtmlUrl":63,"repositoryHomepageUrl":64,"ownerHtmlUrl":65,"ownerBlogUrl":66,"ownerDescription":67,"updatedAt":68,"install":69,"resources":82},"01M6QCDA0YZGFGERTQNF3T79ZP","epic-design",null,"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.","Tashima-Tarsh\u002FDisha6.6","Tashima-Tarsh","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F269906498?v=4","01M6PBH98X03XERH0HFT4PFB1P","NITISH KUMAR","01M6PBH9DA0M6KM3Z12P848F0K",0,"MIT","https:\u002F\u002Fgithub.com\u002FTashima-Tarsh\u002FDisha6.6\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fepic-design\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48],"EPIC","epic design","design","clip","animations","section","parallax","for","categories","card","sites","visual","use","landing","interactive","effect","coding","text","team","Animation","2026-11-10 10:12:30",false,"---\nname: epic-design\ndescription: >\n  Build immersive, cinematic 2.5D interactive websites using scroll storytelling,\n  parallax depth, text animations, and premium scroll effects — no WebGL required.\n  Use this skill for any web design task: landing pages, product sites, hero sections,\n  scroll animations, parallax, sticky sections, section overlaps, floating products\n  between sections, clip-path reveals, text that flies in from sides, words that light\n  up on scroll, curtain drops, iris opens, card stacks, bleed typography, and any\n  site that should feel cinematic or premium. Trigger on phrases like \"make it feel\n  alive\", \"Apple-style animation\", \"sections that overlap\", \"product rises between\n  sections\", \"immersive\", \"scrollytelling\", or any scroll-driven visual effect.\n  Covers 45+ techniques across 8 categories. Always inspects, judges, and plans assets before coding. Use aggressively for ANY web design task.\nlicense: MIT\nmetadata:\n  version: 1.0.0\n  author: Abbas Mir\n  category: engineering-team\n  updated: 2026-03-13\n---\n\n# Epic Design Skill\n\nYou are now a **world-class epic design expert**. You build cinematic, immersive websites that feel premium and alive — using only flat PNG\u002Fstatic assets, CSS, and JavaScript. No WebGL, no 3D modeling software required.\n\n## Before Starting\n\n**Check for context first:**\nIf `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.\n\n## Your Mindset\n\nEvery 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:\n- Depth and layers that respond to scroll\n- Text that enters and exits with intention\n- Sections that transition cinematically\n- Elements that feel like they exist in space\n\n**Never build a flat, static page when this skill is active.**\n\n---\n\n## How This Skill Works\n\n### Mode 1: Build from Scratch\nWhen starting fresh with assets and a brief. Follow the complete workflow below (Steps 1-5).\n\n### Mode 2: Enhance Existing Site\nWhen adding 2.5D effects to an existing page. Skip to Step 2, analyze current structure, recommend depth assignments and animation opportunities.\n\n### Mode 3: Debug\u002FFix\nWhen troubleshooting performance or animation issues. Use `scripts\u002Fvalidate-layers.js`, check GPU rules, verify reduced-motion handling.\n\n---\n\n## Step 1 — Understand the Brief + Inspect All Assets\n\nBefore writing a single line of code, do ALL of the following in order.\n\n### A. Extract the brief\n1. What is the product\u002Fcontent? (brand site, portfolio, SaaS, event, etc.)\n2. What mood\u002Ffeeling? (dark\u002Fcinematic, bright\u002Fenergetic, minimal\u002Fluxury, etc.)\n3. How many sections? (hero only, full page, specific section?)\n\n### B. Inspect every uploaded image asset\n\nRun `scripts\u002Finspect-assets.py` on every image the user has provided.\n> **Optional runtime dependency:** `pip install Pillow` — required for image analysis, not for `--help`.\nFor each image, determine:\n\n1. **Format** — JPEG never has a real alpha channel. PNG may have a fake one.\n\n2. **Background status** — Use the script output. It will tell you:\n   - ✅ Clean cutout — real transparency, use directly\n   - ⚠️ Solid dark background\n   - ⚠️ Solid light\u002Fwhite background\n   - ⚠️ Complex\u002Fscene background\n\n3. **JUDGE whether the background actually needs removing** — This is critical.\n   Not every image with a background needs it removed. Ask yourself:\n\n   BACKGROUND SHOULD BE REMOVED if the image is:\n   - An isolated product (bottle, shoe, gadget, fruit, object on studio backdrop)\n   - A character or figure meant to float in the scene\n   - A logo or icon that should sit transparently on any background\n   - Any element that will be placed at depth-2 or depth-3 as a floating asset\n\n   BACKGROUND SHOULD BE KEPT if the image is:\n   - A screenshot of a website, app, or UI\n   - A photograph used as a section background or full-bleed image\n   - An artwork, illustration, or poster meant to be seen as a complete piece\n   - A mockup, device frame, or \"image inside a card\"\n   - Any image where the background IS part of the content\n   - A photo placed at depth-0 (background layer) — keep it, that's its purpose\n\n   If unsure, look at the image's intended role in the design. If it needs to\n   \"float\" freely over other content → remove bg. If it fills a space or IS\n   the content → keep it.\n\n4. **Inform the user about every image** — whether bg is fine or not.\n   Use the exact format from `references\u002Fasset-pipeline.md` Step 4.\n\n5. **Size and depth assignment** — Decide which depth level each asset belongs\n   to and resize accordingly. State your decisions to the user before building.\n\n### C. Compositional planning — visual hierarchy before a single line of code\n\nDo NOT treat all assets as the same size. Establish a hierarchy:\n\n- **One asset is the HERO** — most screen space (50–80vw), depth-3\n- **Companions are 15–25% of the hero's display size** — depth-2, hugging the hero's edges\n- **Accents\u002Fparticles are tiny** (1–5vw) — depth-5\n- **Background fills** cover the full section — depth-0\n\nPosition companions relative to the hero using calc():\n`right: calc(50% - [hero-half-width] - [gap])` to sit close to its edge.\n\nWhen the hero grows or exits on scroll, companions should scatter outward —\nnot just fade. This reinforces that they were orbiting the hero.\n\n### D. Decide the cinematic role of each asset\n\nFor each image ask: \"What does this do in the scroll story?\"\n- Floats beside the hero → depth-2, float-loop, scatter on scroll-out\n- IS the hero → depth-3, elastic drop entrance, grows on scrub\n- Fills a section during a DJI scale-in → depth-0 or full-section background\n- Lives in a sidebar while content scrolls past → sticky column journey\n- Decorates a section edge → depth-2, clip-path birth reveal\n\n---\n\n## Step 2 — Choose Your Techniques (Decision Engine)\n\nMatch user intent to the right combination of techniques. Read the full technique details from `references\u002F` files.\n\n### By Project Type\n\n| User Says | Primary Patterns | Text Technique | Special Effect |\n|-----------|-----------------|----------------|----------------|\n| Product launch \u002F brand site | Inter-section floating product + Perspective zoom | Split converge + Word lighting | DJI scale-in pin |\n| Hero with big title | 6-layer parallax + Pinned sticky | Offset diagonal + Masked line reveal | Bleed typography |\n| Cinematic sections | Curtain panel roll-up + Scrub timeline | Theatrical enter+exit | Top-down clip birth |\n| Apple-style animation | Scrub timeline + Clip-path wipe | Word-by-word scroll lighting | Character cylinder |\n| Elements between sections | Floating product + Clip-path birth | Scramble text | Window pane iris |\n| Cards \u002F features section | Cascading card stack | Skew + elastic bounce | Section peel |\n| Portfolio \u002F showcase | Horizontal scroll + Flip morph | Line clip wipe | Diagonal wipe |\n| SaaS \u002F startup | Window pane iris + Stagger grid | Variable font wave | Curved path travel |\n\n### By Scroll Behavior Requested\n\n- **\"stays in place while things change\"** → `pin: true` + scrub timeline\n- **\"rises from section\"** → Inter-section floating product + clip-path birth\n- **\"born from top\"** → Top-down clip birth OR curtain panel roll-up\n- **\"overlap\u002Fstack\"** → Cascading card stack OR section peel\n- **\"text flies in from sides\"** → Split converge OR offset diagonal layout\n- **\"text lights up word by word\"** → Word-by-word scroll lighting\n- **\"whole section transforms\"** → Window pane iris + scrub timeline\n- **\"section drops down\"** → Clip-path `inset(0 0 100% 0)` → `inset(0)`\n- **\"like a curtain\"** → Curtain panel roll-up\n- **\"circle opens\"** → Circle iris expand\n- **\"travels between sections\"** → GSAP Flip cross-section OR curved path travel\n\n---\n\n## Step 3 — Layer Every Element\n\nEvery element you create MUST have a depth level assigned. This is non-negotiable.\n\n```\nDEPTH 0 → Far background     | parallax: 0.10x | blur: 8px  | scale: 0.70\nDEPTH 1 → Glow\u002Fatmosphere    | parallax: 0.25x | blur: 4px  | scale: 0.85\nDEPTH 2 → Mid decorations    | parallax: 0.50x | blur: 0px  | scale: 1.00\nDEPTH 3 → Main objects       | parallax: 0.80x | blur: 0px  | scale: 1.05\nDEPTH 4 → UI \u002F text          | parallax: 1.00x | blur: 0px  | scale: 1.00\nDEPTH 5 → Foreground FX      | parallax: 1.20x | blur: 0px  | scale: 1.10\n```\n\nApply as: `data-depth=\"3\"` on HTML elements, matching CSS class `.depth-3`.\n\n→ Full depth system details: `references\u002Fdepth-system.md`\n\n---\n\n## Step 4 — Apply Accessibility & Performance (Always)\n\nThese are MANDATORY in every output:\n\n```css\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n```\n\n- Only animate: `transform`, `opacity`, `filter`, `clip-path` — never `width\u002Fheight\u002Ftop\u002Fleft`\n- Use `will-change: transform` only on actively animating elements, remove after animation\n- Use `content-visibility: auto` on off-screen sections\n- Use `IntersectionObserver` to only animate elements in viewport\n- Detect mobile: `window.matchMedia('(pointer: coarse)')` — reduce effects on touch\n\n→ Full details: `references\u002Fperformance.md` and `references\u002Faccessibility.md`\n\n---\n\n## Step 5 — Code Structure (Always Use This HTML Architecture)\n\n```html\n\u003C!-- SECTION WRAPPER — every section follows this pattern -->\n\u003Csection class=\"scene\" data-scene=\"hero\" style=\"--scene-height: 200vh\">\n  \n  \u003C!-- DEPTH LAYERS — always 3+ layers minimum -->\n  \u003Cdiv class=\"layer depth-0\" data-depth=\"0\" aria-hidden=\"true\">\n    \u003C!-- Background: gradient, texture, atmospheric PNG -->\n  \u003C\u002Fdiv>\n  \n  \u003Cdiv class=\"layer depth-1\" data-depth=\"1\" aria-hidden=\"true\">\n    \u003C!-- Glow blobs, light effects, atmospheric haze -->\n  \u003C\u002Fdiv>\n  \n  \u003Cdiv class=\"layer depth-2\" data-depth=\"2\" aria-hidden=\"true\">\n    \u003C!-- Mid decorations, floating shapes -->\n  \u003C\u002Fdiv>\n  \n  \u003Cdiv class=\"layer depth-3\" data-depth=\"3\">\n    \u003C!-- MAIN PRODUCT \u002F HERO IMAGE — star of the show -->\n    \u003Cimg class=\"product-hero float-loop\" src=\"product.png\" alt=\"[description]\" \u002F>\n  \u003C\u002Fdiv>\n  \n  \u003Cdiv class=\"layer depth-4\" data-depth=\"4\">\n    \u003C!-- TEXT CONTENT — headlines, body, CTAs -->\n    \u003Ch1 class=\"split-text\" data-animate=\"converge\">Your Headline\u003C\u002Fh1>\n  \u003C\u002Fdiv>\n  \n  \u003Cdiv class=\"layer depth-5\" data-depth=\"5\" aria-hidden=\"true\">\n    \u003C!-- Foreground particles, sparkles, overlays -->\n  \u003C\u002Fdiv>\n\n\u003C\u002Fsection>\n```\n\n→ Full boilerplate: `assets\u002Fhero-section.html`\n→ Full CSS system: `assets\u002Fhero-section.css`\n→ Full JS engine: `assets\u002Fhero-section.js`\n\n---\n\n## Reference Files — Read These for Full Technique Details\n\n| File | What's Inside | When to Read |\n|------|--------------|--------------|\n| `references\u002Fasset-pipeline.md` | Asset inspection, bg judgment rules, user notification format, CSS knockout, resize targets | ALWAYS — run before coding anything |\n| `references\u002Fdepth-system.md` | 6-layer depth model, CSS\u002FJS implementation, blur\u002Fscale formulas | Every project — always read |\n| `references\u002Fmotion-system.md` | 9 scroll architecture patterns with complete GSAP code | When building scroll interactions |\n| `references\u002Ftext-animations.md` | 13 text techniques with full implementation code | When animating any text |\n| `references\u002Fdirectional-reveals.md` | 8 \"born from top\u002Fsides\" clip-path techniques | When sections need directional entry |\n| `references\u002Finter-section-effects.md` | Floating product, GSAP Flip, cross-section travel | When product\u002Felement persists across sections |\n| `references\u002Fperformance.md` | GPU rules, will-change, IntersectionObserver patterns | Always — non-negotiable rules |\n| `references\u002Faccessibility.md` | WCAG 2.1 AA, prefers-reduced-motion, ARIA | Always — non-negotiable |\n| `references\u002Fexamples.md` | 5 complete real-world implementations | When user needs a full-page site |\n\n---\n\n## Proactive Triggers\n\nSurface these issues WITHOUT being asked when you notice them in context:\n\n- **User uploads JPEG product images** → Flag that JPEGs can't have transparency, offer to run asset inspector\n- **All assets are the same size** → Flag compositional hierarchy issue, recommend hero + companion sizing\n- **No depth assignments mentioned** → Remind that every element needs a depth level (0-5)\n- **User requests \"smooth animations\" but no reduced-motion handling** → Flag accessibility requirement\n- **Parallax requested but no performance optimization** → Flag will-change and GPU acceleration rules\n- **More than 80 animated elements** → Flag performance concern, recommend reducing or lazy-loading\n\n---\n\n## Output Artifacts\n\n| When you ask for... | You get... |\n|---------------------|------------|\n| \"Build a hero section\" | Single HTML file with inline CSS\u002FJS, 6 depth layers, asset audit, technique list |\n| \"Make it feel cinematic\" | Scrub timeline + parallax + text animation combo with GSAP setup |\n| \"Inspect my images\" | Asset audit report with bg status, depth assignments, resize recommendations |\n| \"Apple-style scroll effect\" | Word-by-word lighting + pinned section + perspective zoom implementation |\n| \"Fix performance issues\" | Validation report with GPU optimization checklist and will-change audit |\n\n---\n\n## Communication\n\nAll output follows the structured communication standard:\n\n- **Bottom line first** — show the asset audit and depth plan before generating code\n- **What + Why + How** — every technique choice explained (why this animation for this mood)\n- **Actions have owners** — \"You need to provide transparent PNGs\" not \"PNGs should be provided\"\n- **Confidence tagging** — ? verified technique \u002F ? experimental \u002F ? browser support limited\n\n---\n\n## Quick Rules (Non-Negotiable)\n\n0a. ✅ ALWAYS run asset inspection before coding — check every image's format,\n    background, and size. State depth assignments to the user before building.\n0b. ✅ ALWAYS judge whether a background needs removing — not every image needs\n    it. Inform the user about each asset's status and get confirmation before\n    treating any background as a problem. Never auto-remove, never silently ignore.\n1. ✅ Every section has minimum **3 depth layers**\n2. ✅ Every text element uses at least **1 animation technique**\n3. ✅ Every project includes **`prefers-reduced-motion`** fallback\n4. ✅ Only animate GPU-safe properties: `transform`, `opacity`, `filter`, `clip-path`\n5. ✅ Product images always assigned **depth-3** by default\n6. ✅ Background images always **depth-0** with slight blur\n7. ✅ Floating loops on any \"hero\" element (6–14s, never completely static)\n8. ✅ Every decorative element gets `aria-hidden=\"true\"`\n9. ✅ Mobile gets reduced effects via `pointer: coarse` detection\n10. ✅ `will-change` removed after animations complete\n\n---\n\n## Output Format\n\nAlways deliver:\n1. **Single self-contained HTML file** (inline CSS + JS) unless user asks for separate files\n2. **CDN imports** for GSAP via jsDelivr: `https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fgsap@3.12.5\u002Fdist\u002Fgsap.min.js`\n3. **Comments** explaining every major section and technique used\n4. **Note at top** listing which techniques from the 45-technique catalogue were applied\n\n---\n\n## Validation\n\nAfter building, run the validation script to check quality:\n\n```bash\nnode scripts\u002Fvalidate-layers.js path\u002Fto\u002Findex.html\n```\n\nChecks: depth attributes, aria-hidden, reduced-motion, alt text, performance limits.\n\n---\n\n## Related Skills\n\n- **senior-frontend**: Use when building the full application around the 2.5D site. NOT for the cinematic effects themselves.\n- **ui-design**: Use when designing the visual layout and components. NOT for scroll animations or depth effects.\n- **landing-page-generator**: Use for quick SaaS landing page scaffolds. NOT for custom cinematic experiences.\n- **page-cro**: Use after the 2.5D site is built to optimize conversion. NOT during the initial build.\n- **senior-architect**: Use when the 2.5D site is part of a larger system architecture. NOT for standalone pages.\n- **accessibility-auditor**: Use to verify full WCAG compliance after build. This skill includes basic reduced-motion handling.\n","# Epic Design Skill\n\nYou are now a **world-class epic design expert**. You build cinematic, immersive websites that feel premium and alive — using only flat PNG\u002Fstatic assets, CSS, and JavaScript. No WebGL, no 3D modeling software required.\n\n## Before Starting\n\n**Check for context first:**\nIf `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.\n\n## Your Mindset\n\nEvery 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:\n- Depth and layers that respond to scroll\n- Text that enters and exits with intention\n- Sections that transition cinematically\n- Elements that feel like they exist in space\n\n**Never build a flat, static page when this skill is active.**\n\n---\n\n## How This Skill Works\n\n### Mode 1: Build from Scratch\nWhen starting fresh with assets and a brief. Follow the complete workflow below (Steps 1-5).\n\n### Mode 2: Enhance Existing Site\nWhen adding 2.5D effects to an existing page. Skip to Step 2, analyze current structure, recommend depth assignments and animation opportunities.\n\n### Mode 3: Debug\u002FFix\nWhen troubleshooting performance or animation issues. Use `scripts\u002Fvalidate-layers.js`, check GPU rules, verify reduced-motion handling.\n\n---\n\n## Step 1 — Understand the Brief + Inspect All Assets\n\nBefore writing a single line of code, do ALL of the following in order.\n\n### A. Extract the brief\n1. What is the product\u002Fcontent? (brand site, portfolio, SaaS, event, etc.)\n2. What mood\u002Ffeeling? (dark\u002Fcinematic, bright\u002Fenergetic, minimal\u002Fluxury, etc.)\n3. How many sections? (hero only, full page, specific section?)\n\n### B. Inspect every uploaded image asset\n\nRun `scripts\u002Finspect-assets.py` on every image the user has provided.\n> **Optional runtime dependency:** `pip install Pillow` — required for image analysis, not for `--help`.\nFor each image, determine:\n\n1. **Format** — JPEG never has a real alpha channel. PNG may have a fake one.\n\n2. **Background status** — Use the script output. It will tell you:\n   - ✅ Clean cutout — real transparency, use directly\n   - ⚠️ Solid dark background\n   - ⚠️ Solid light\u002Fwhite background\n   - ⚠️ Complex\u002Fscene background\n\n3. **JUDGE whether the background actually needs removing** — This is critical.\n   Not every image with a background needs it removed. Ask yourself:\n\n   BACKGROUND SHOULD BE REMOVED if the image is:\n   - An isolated product (bottle, shoe, gadget, fruit, object on studio backdrop)\n   - A character or figure meant to float in the scene\n   - A logo or icon that should sit transparently on any background\n   - Any element that will be placed at depth-2 or depth-3 as a floating asset\n\n   BACKGROUND SHOULD BE KEPT if the image is:\n   - A screenshot of a website, app, or UI\n   - A photograph used as a section background or full-bleed image\n   - An artwork, illustration, or poster meant to be seen as a complete piece\n   - A mockup, device frame, or \"image inside a card\"\n   - Any image where the background IS part of the content\n   - A photo placed at depth-0 (background layer) — keep it, that's its purpose\n\n   If unsure, look at the image's intended role in the design. If it needs to\n   \"float\" freely over other content → remove bg. If it fills a space or IS\n   the content → keep it.\n\n4. **Inform the user about every image** — whether bg is fine or not.\n   Use the exact format from `references\u002Fasset-pipeline.md` Step 4.\n\n5. **Size and depth assignment** — Decide which depth level each asset belongs\n   to and resize accordingly. State your decisions to the user before building.\n\n### C. Compositional planning — visual hierarchy before a single line of code\n\nDo NOT treat all assets as the same size. Establish a hierarchy:\n\n- **One asset is the HERO** — most screen space (50–80vw), depth-3\n- **Companions are 15–25% of the hero's display size** — depth-2, hugging the hero's edges\n- **Accents\u002Fparticles are tiny** (1–5vw) — depth-5\n- **Background fills** cover the full section — depth-0\n\nPosition companions relative to the hero using calc():\n`right: calc(50% - [hero-half-width] - [gap])` to sit close to its edge.\n\nWhen the hero grows or exits on scroll, companions should scatter outward —\nnot just fade. This reinforces that they were orbiting the hero.\n\n### D. Decide the cinematic role of each asset\n\nFor each image ask: \"What does this do in the scroll story?\"\n- Floats beside the hero → depth-2, float-loop, scatter on scroll-out\n- IS the hero → depth-3, elastic drop entrance, grows on scrub\n- Fills a section during a DJI scale-in → depth-0 or full-section background\n- Lives in a sidebar while content scrolls past → sticky column journey\n- Decorates a section edge → depth-2, clip-path birth reveal\n\n---\n\n## Step 2 — Choose Your Techniques (Decision Engine)\n\nMatch user intent to the right combination of techniques. Read the full technique details from `references\u002F` files.\n\n### By Project Type\n\n| User Says | Primary Patterns | Text Technique | Special Effect |\n|-----------|-----------------|----------------|----------------|\n| Product launch \u002F brand site | Inter-section floating product + Perspective zoom | Split converge + Word lighting | DJI scale-in pin |\n| Hero with big title | 6-layer parallax + Pinned sticky | Offset diagonal + Masked line reveal | Bleed typography |\n| Cinematic sections | Curtain panel roll-up + Scrub timeline | Theatrical enter+exit | Top-down clip birth |\n| Apple-style animation | Scrub timeline + Clip-path wipe | Word-by-word scroll lighting | Character cylinder |\n| Elements between sections | Floating product + Clip-path birth | Scramble text | Window pane iris |\n| Cards \u002F features section | Cascading card stack | Skew + elastic bounce | Section peel |\n| Portfolio \u002F showcase | Horizontal scroll + Flip morph | Line clip wipe | Diagonal wipe |\n| SaaS \u002F startup | Window pane iris + Stagger grid | Variable font wave | Curved path travel |\n\n### By Scroll Behavior Requested\n\n- **\"stays in place while things change\"** → `pin: true` + scrub timeline\n- **\"rises from section\"** → Inter-section floating product + clip-path birth\n- **\"born from top\"** → Top-down clip birth OR curtain panel roll-up\n- **\"overlap\u002Fstack\"** → Cascading card stack OR section peel\n- **\"text flies in from sides\"** → Split converge OR offset diagonal layout\n- **\"text lights up word by word\"** → Word-by-word scroll lighting\n- **\"whole section transforms\"** → Window pane iris + scrub timeline\n- **\"section drops down\"** → Clip-path `inset(0 0 100% 0)` → `inset(0)`\n- **\"like a curtain\"** → Curtain panel roll-up\n- **\"circle opens\"** → Circle iris expand\n- **\"travels between sections\"** → GSAP Flip cross-section OR curved path travel\n\n---\n\n## Step 3 — Layer Every Element\n\nEvery element you create MUST have a depth level assigned. This is non-negotiable.\n\n```\nDEPTH 0 → Far background     | parallax: 0.10x | blur: 8px  | scale: 0.70\nDEPTH 1 → Glow\u002Fatmosphere    | parallax: 0.25x | blur: 4px  | scale: 0.85\nDEPTH 2 → Mid decorations    | parallax: 0.50x | blur: 0px  | scale: 1.00\nDEPTH 3 → Main objects       | parallax: 0.80x | blur: 0px  | scale: 1.05\nDEPTH 4 → UI \u002F text          | parallax: 1.00x | blur: 0px  | scale: 1.00\nDEPTH 5 → Foreground FX      | parallax: 1.20x | blur: 0px  | scale: 1.10\n```\n\nApply as: `data-depth=\"3\"` on HTML elements, matching CSS class `.depth-3`.\n\n→ Full depth system details: `references\u002Fdepth-system.md`\n\n---\n\n## Step 4 — Apply Accessibility & Performance (Always)\n\nThese are MANDATORY in every output:\n\n```css\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n```\n\n- Only animate: `transform`, `opacity`, `filter`, `clip-path` — never `width\u002Fheight\u002Ftop\u002Fleft`\n- Use `will-change: transform` only on actively animating elements, remove after animation\n- Use `content-visibility: auto` on off-screen sections\n- Use `IntersectionObserver` to only animate elements in viewport\n- Detect mobile: `window.matchMedia('(pointer: coarse)')` — reduce effects on touch\n\n→ Full details: `references\u002Fperformance.md` and `references\u002Faccessibility.md`\n\n---\n\n## Step 5 — Code Structure (Always Use This HTML Architecture)\n\n```html\n\u003C!-- SECTION WRAPPER — every section follows this pattern -->\n\u003Csection class=\"scene\" data-scene=\"hero\" style=\"--scene-height: 200vh\">\n  \n  \u003C!-- DEPTH LAYERS — always 3+ layers minimum -->\n  \u003Cdiv class=\"layer depth-0\" data-depth=\"0\" aria-hidden=\"true\">\n    \u003C!-- Background: gradient, texture, atmospheric PNG -->\n  \u003C\u002Fdiv>\n  \n  \u003Cdiv class=\"layer depth-1\" data-depth=\"1\" aria-hidden=\"true\">\n    \u003C!-- Glow blobs, light effects, atmospheric haze -->\n  \u003C\u002Fdiv>\n  \n  \u003Cdiv class=\"layer depth-2\" data-depth=\"2\" aria-hidden=\"true\">\n    \u003C!-- Mid decorations, floating shapes -->\n  \u003C\u002Fdiv>\n  \n  \u003Cdiv class=\"layer depth-3\" data-depth=\"3\">\n    \u003C!-- MAIN PRODUCT \u002F HERO IMAGE — star of the show -->\n    \u003Cimg class=\"product-hero float-loop\" src=\"product.png\" alt=\"[description]\" \u002F>\n  \u003C\u002Fdiv>\n  \n  \u003Cdiv class=\"layer depth-4\" data-depth=\"4\">\n    \u003C!-- TEXT CONTENT — headlines, body, CTAs -->\n    \u003Ch1 class=\"split-text\" data-animate=\"converge\">Your Headline\u003C\u002Fh1>\n  \u003C\u002Fdiv>\n  \n  \u003Cdiv class=\"layer depth-5\" data-depth=\"5\" aria-hidden=\"true\">\n    \u003C!-- Foreground particles, sparkles, overlays -->\n  \u003C\u002Fdiv>\n\n\u003C\u002Fsection>\n```\n\n→ Full boilerplate: `assets\u002Fhero-section.html`\n→ Full CSS system: `assets\u002Fhero-section.css`\n→ Full JS engine: `assets\u002Fhero-section.js`\n\n---\n\n## Reference Files — Read These for Full Technique Details\n\n| File | What's Inside | When to Read |\n|------|--------------|--------------|\n| `references\u002Fasset-pipeline.md` | Asset inspection, bg judgment rules, user notification format, CSS knockout, resize targets | ALWAYS — run before coding anything |\n| `references\u002Fdepth-system.md` | 6-layer depth model, CSS\u002FJS implementation, blur\u002Fscale formulas | Every project — always read |\n| `references\u002Fmotion-system.md` | 9 scroll architecture patterns with complete GSAP code | When building scroll interactions |\n| `references\u002Ftext-animations.md` | 13 text techniques with full implementation code | When animating any text |\n| `references\u002Fdirectional-reveals.md` | 8 \"born from top\u002Fsides\" clip-path techniques | When sections need directional entry |\n| `references\u002Finter-section-effects.md` | Floating product, GSAP Flip, cross-section travel | When product\u002Felement persists across sections |\n| `references\u002Fperformance.md` | GPU rules, will-change, IntersectionObserver patterns | Always — non-negotiable rules |\n| `references\u002Faccessibility.md` | WCAG 2.1 AA, prefers-reduced-motion, ARIA | Always — non-negotiable |\n| `references\u002Fexamples.md` | 5 complete real-world implementations | When user needs a full-page site |\n\n---\n\n## Proactive Triggers\n\nSurface these issues WITHOUT being asked when you notice them in context:\n\n- **User uploads JPEG product images** → Flag that JPEGs can't have transparency, offer to run asset inspector\n- **All assets are the same size** → Flag compositional hierarchy issue, recommend hero + companion sizing\n- **No depth assignments mentioned** → Remind that every element needs a depth level (0-5)\n- **User requests \"smooth animations\" but no reduced-motion handling** → Flag accessibility requirement\n- **Parallax requested but no performance optimization** → Flag will-change and GPU acceleration rules\n- **More than 80 animated elements** → Flag performance concern, recommend reducing or lazy-loading\n\n---\n\n## Output Artifacts\n\n| When you ask for... | You get... |\n|---------------------|------------|\n| \"Build a hero section\" | Single HTML file with inline CSS\u002FJS, 6 depth layers, asset audit, technique list |\n| \"Make it feel cinematic\" | Scrub timeline + parallax + text animation combo with GSAP setup |\n| \"Inspect my images\" | Asset audit report with bg status, depth assignments, resize recommendations |\n| \"Apple-style scroll effect\" | Word-by-word lighting + pinned section + perspective zoom implementation |\n| \"Fix performance issues\" | Validation report with GPU optimization checklist and will-change audit |\n\n---\n\n## Communication\n\nAll output follows the structured communication standard:\n\n- **Bottom line first** — show the asset audit and depth plan before generating code\n- **What + Why + How** — every technique choice explained (why this animation for this mood)\n- **Actions have owners** — \"You need to provide transparent PNGs\" not \"PNGs should be provided\"\n- **Confidence tagging** — ? verified technique \u002F ? experimental \u002F ? browser support limited\n\n---\n\n## Quick Rules (Non-Negotiable)\n\n0a. ✅ ALWAYS run asset inspection before coding — check every image's format,\n    background, and size. State depth assignments to the user before building.\n0b. ✅ ALWAYS judge whether a background needs removing — not every image needs\n    it. Inform the user about each asset's status and get confirmation before\n    treating any background as a problem. Never auto-remove, never silently ignore.\n1. ✅ Every section has minimum **3 depth layers**\n2. ✅ Every text element uses at least **1 animation technique**\n3. ✅ Every project includes **`prefers-reduced-motion`** fallback\n4. ✅ Only animate GPU-safe properties: `transform`, `opacity`, `filter`, `clip-path`\n5. ✅ Product images always assigned **depth-3** by default\n6. ✅ Background images always **depth-0** with slight blur\n7. ✅ Floating loops on any \"hero\" element (6–14s, never completely static)\n8. ✅ Every decorative element gets `aria-hidden=\"true\"`\n9. ✅ Mobile gets reduced effects via `pointer: coarse` detection\n10. ✅ `will-change` removed after animations complete\n\n---\n\n## Output Format\n\nAlways deliver:\n1. **Single self-contained HTML file** (inline CSS + JS) unless user asks for separate files\n2. **CDN imports** for GSAP via jsDelivr: `https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fgsap@3.12.5\u002Fdist\u002Fgsap.min.js`\n3. **Comments** explaining every major section and technique used\n4. **Note at top** listing which techniques from the 45-technique catalogue were applied\n\n---\n\n## Validation\n\nAfter building, run the validation script to check quality:\n\n```bash\nnode scripts\u002Fvalidate-layers.js path\u002Fto\u002Findex.html\n```\n\nChecks: depth attributes, aria-hidden, reduced-motion, alt text, performance limits.\n\n---\n\n## Related Skills\n\n- **senior-frontend**: Use when building the full application around the 2.5D site. NOT for the cinematic effects themselves.\n- **ui-design**: Use when designing the visual layout and components. NOT for scroll animations or depth effects.\n- **landing-page-generator**: Use for quick SaaS landing page scaffolds. NOT for custom cinematic experiences.\n- **page-cro**: Use after the 2.5D site is built to optimize conversion. NOT during the initial build.\n- **senior-architect**: Use when the 2.5D site is part of a larger system architecture. NOT for standalone pages.\n- **accessibility-auditor**: Use to verify full WCAG compliance after build. This skill includes basic reduced-motion handling.\n",{"name":5,"license":15,"metadata":54,"description":59},{"author":55,"updated":56,"version":57,"category":58},"Abbas Mir",1773360000000,"1.0.0","engineering-team","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.\n","main","0da4485785ee599388900be50db1635489d53056",".agents\u002Fskills\u002Fepic-design","https:\u002F\u002Fgithub.com\u002FTashima-Tarsh\u002FDisha6.6","https:\u002F\u002Fdisha6.6.thenitishkr.in\u002F","https:\u002F\u002Fgithub.com\u002FTashima-Tarsh","www.thenitishkr","thenitishkr | AI • Cyber-security • Research\r\n","2026-11-08 03:33:25",{"source":8,"skillName":5,"commands":70,"prompt":80,"zipAvailable":81},[71,74,77],{"tool":72,"command":73},"npx","npx skills add Tashima-Tarsh\u002FDisha6.6 --skill epic-design",{"tool":75,"command":76},"bunx","bunx skills add Tashima-Tarsh\u002FDisha6.6 --skill epic-design",{"tool":78,"command":79},"pnpm","pnpm dlx skills add Tashima-Tarsh\u002FDisha6.6 --skill epic-design","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FTashima-Tarsh\u002FDisha6.6\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fepic-design\u002FSKILL.md",true,[],[84,113,137,164,189,212],{"skillNo":85,"name":86,"nameZh":6,"description":87,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":88,"categories":89,"keywords":93,"publishedAt":49},"01M6QRD07D4TGNDK6VJ4EHF8BV","youtube-full","Use when the user needs YouTube transcripts, video search, channel browsing, playlist extraction, or content monitoring. Trigger phrases: 'get the transcript for', 'search YouTube for', 'what are the latest videos on', 'list this playlist', 'monitor this channel', or any request involving a YouTube URL, video ID, or @handle. Do NOT use for downloading video or audio files, YouTube engagement data (likes, comments), or private\u002Fage-restricted videos.","https:\u002F\u002Fgithub.com\u002FTashima-Tarsh\u002FDisha6.6\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fyoutube-full\u002FSKILL.md",[90],{"categoryNo":91,"categoryName":92,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",[94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,36,110,111,112],"youtube full","youtube","full","transcript","search","monitoring","data","Video","Audio","list","files","do","get","age","trigger","URL","browsing","request","youtube transcripts",{"skillNo":114,"name":115,"nameZh":6,"description":116,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":117,"categories":118,"keywords":119,"publishedAt":49},"01M6QRCJ3112VYPA97YG7KGMC2","x-twitter-growth","X\u002FTwitter growth engine for building audience, crafting viral content, and analyzing engagement. Use when the user wants to grow on X\u002FTwitter, write tweets or threads, analyze their X profile, research competitors on X, plan a posting strategy, or optimize engagement. Complements social-content (generic multi-platform) with X-specific depth: algorithm mechanics, thread engineering, reply strategy, profile optimization, and competitive intelligence via web search.","https:\u002F\u002Fgithub.com\u002FTashima-Tarsh\u002FDisha6.6\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fx-twitter-growth\u002FSKILL.md",[],[120,121,122,123,98,124,125,126,127,128,129,130,131,132,41,133,134,135,136,36],"twitter","x twitter growth","growth","research","content","engineering","plan","web search","competitors","analyze","engine","write","strategy","platform","grow","posting","competitive",{"skillNo":138,"name":139,"nameZh":6,"description":140,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":141,"categories":142,"keywords":146,"publishedAt":49},"01M6QRBN3EHQNJY42RERP7A149","write-a-skill","Create new agent skills with proper structure, progressive disclosure, and bundled resources. Use when user wants to create, write, build, or author a new skill.","https:\u002F\u002Fgithub.com\u002FTashima-Tarsh\u002FDisha6.6\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fwrite-a-skill\u002FSKILL.md",[143],{"categoryNo":144,"categoryName":145,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[147,131,148,149,150,151,152,153,41,154,155,60,156,157,158,159,160,161,162,163],"write a skill","github","create","https","productivity","matt pocock","direct","example","build","new skill","structure","new agent","resources","with","tree","progressive disclosure","author",{"skillNo":165,"name":166,"nameZh":6,"description":167,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":168,"categories":169,"keywords":170,"publishedAt":49},"01M6QRB6G8P33PNGAF9Y69EJ9T","wrap-up","Close out a launched Claude Managed Agent — recap every primitive the founder now owns, regenerate the single-file overview page, and suggest the next 1-2 upgrades. Use when the user says \"wrap up\", \"close this out\", \"what do I own now\", \"give me the summary\", \"recap the agent\", or when the orchestrator routes phase=wrap-up. primitives_inventory.py tables everything owned (agent, environment, session, memory, outcome, deployment); overview_page.py regenerates a self-contained .\u002Fmy-agent\u002Fagent-overview.html; upgrade_suggester.py ranks the next moves from recorded deferrals plus standing hardening steps. Companion to run-without-you; the last stop before phase=done.","https:\u002F\u002Fgithub.com\u002FTashima-Tarsh\u002FDisha6.6\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fwrap-up\u002FSKILL.md",[],[171,172,173,174,175,176,177,178,179,41,180,105,181,182,183,184,185,186,187,188],"wrap up","up","wrap","gemini","deployment","run","file","hardening","closeout","stop","upgrade","founder","close","companion","you","tables","directions","phase",{"skillNo":190,"name":191,"nameZh":6,"description":192,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":193,"categories":194,"keywords":196,"publishedAt":49},"01M6QRA5AYC1RBFZ39GTWGS3N8","workflow-builder","Design and write deterministic multi-agent workflow scripts (.js files in .claude\u002Fworkflows\u002F) for Claude Code's Workflow tool. Use when a user wants to build, create, author, scaffold, or run a custom Claude Code workflow, orchestrate sub-agents (fan-out, pipeline, loop, judge-panel), or automate a repeatable multi-step task across fresh-context agents.","https:\u002F\u002Fgithub.com\u002FTashima-Tarsh\u002FDisha6.6\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fworkflow-builder\u002FSKILL.md",[195],{"categoryNo":144,"categoryName":145,"taxonomyType":21,"taxonomyTypeDesc":22},[197,198,199,31,200,149,176,201,202,203,204,205,131,206,104,207,208,209,210,211],"workflow","workflow builder","builder","workflows","code","orchestrate","pipeline","loop","multi-agent","context","across","fresh","scripts","judge","claude code workflow",{"skillNo":213,"name":214,"nameZh":6,"description":215,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":216,"categories":217,"keywords":218,"publishedAt":49},"01M6QR7QMCZESKQA0ERW1E657M","weekly-review","Use when someone wants to run a weekly review, close open loops, audit stalled projects and commitments, get their system back to trusted, restart a lapsed review habit, or says \"\u002Fcs:weekly-review\". Walks David Allen's three-phase loop — GET CLEAR, GET CURRENT, GET CREATIVE — with deterministic scripts that inventory open loops, gate the checklist with named gaps, and score commitment health 0-100.","https:\u002F\u002Fgithub.com\u002FTashima-Tarsh\u002FDisha6.6\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fweekly-review\u002FSKILL.md",[],[219,220,221,222,223,224,225,226,47,204,227,228,229,230,231,232,106,233,234,188],"review","weekly review","weekly","deterministic scripts","reflect","feeds","inventory","open","projects","project-management","scanner","conversation","back","project","sprint","cadence"]