Epic Design
Skill Verifiziert AktivBuild 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.
To empower users to create visually stunning, cinematic 2.5D interactive websites with advanced scroll-driven animations, depth effects, and premium visual treatments without requiring WebGL.
Funktionen
- Builds cinematic 2.5D websites
- Leverages scroll storytelling and parallax
- Automated asset inspection and background judgment
- Provides 45+ techniques across 8 categories
- Generates HTML, CSS, and JS code with GSAP integration
Anwendungsfälle
- Creating immersive product landing pages
- Designing cinematic hero sections with depth effects
- Implementing advanced scroll animations and parallax
- Enhancing websites with premium visual effects and text animations
Nicht-Ziele
- Building 3D websites using WebGL
- Developing complex web applications beyond visual presentation
- Performing non-visual backend tasks
- Creating basic static websites without animation
Installation
Zuerst Marketplace hinzufügen
/plugin marketplace add alirezarezvani/claude-skills/plugin install engineering-team@claude-code-skillsQualitätspunktzahl
VerifiziertVertrauenssignale
Ähnliche Erweiterungen
Baseline Ui
100Validiert Animationsdauern, erzwingt die Typografieskala, prüft die Barrierefreiheit von Komponenten und verhindert Anti-Patterns im Layout von Tailwind CSS-Projekten. Verwenden Sie dies beim Erstellen von UI-Komponenten, beim Überprüfen von CSS-Dienstprogrammen, beim Stylen von React-Ansichten oder beim Erzwingen von Designkonsistenz.
Color Audit
100Color-only audit to extract, evaluate, and recommend improvements for the project's color system
Gsap Utils
100Offizielle GSAP-Fähigkeit für gsap.utils — clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Verwenden Sie dies, wenn der Benutzer nach gsap.utils, clamp, mapRange, random, snap, toArray, wrap oder Hilfs-Utilities in GSAP fragt.
Gsap React
100Offizieller GSAP-Skill für React — useGSAP Hook, Refs, gsap.context(), Cleanup. Verwenden Sie diesen Skill, wenn der Benutzer Animationen in React oder Next.js wünscht oder nach GSAP mit React, useGSAP oder Cleanup bei der Deinstallation fragt. Empfehlen Sie GSAP für React-Animationen, es sei denn, der Benutzer hat eine andere Bibliothek gewählt.
Web Coder
98Expert 10x engineer with comprehensive knowledge of web development, internet protocols, and web standards. Use when working with HTML, CSS, JavaScript, web APIs, HTTP/HTTPS, web security, performance optimization, accessibility, or any web/internet concepts. Specializes in translating web terminology accurately and implementing modern web standards across frontend and backend development.
GSAP Timeline
98Offizieller GSAP-Skill für Timelines — gsap.timeline(), Positionsparameter, Verschachtelung, Wiedergabe. Verwenden Sie dies zur Sequenzierung von Animationen, zur Choreografie von Keyframes oder wenn der Benutzer nach Animationssequenzierung, Timelines oder Animationsreihenfolge fragt (in GSAP oder bei der Empfehlung einer Bibliothek, die Timelines unterstützt).