Epic Design
技能 已验证 活跃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.
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.
功能
- 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
使用场景
- 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
非目标
- Building 3D websites using WebGL
- Developing complex web applications beyond visual presentation
- Performing non-visual backend tasks
- Creating basic static websites without animation
安装
请先添加 Marketplace
/plugin marketplace add alirezarezvani/claude-skills/plugin install engineering-team@claude-code-skills质量评分
已验证类似扩展
Baseline Ui
100在 Tailwind CSS 项目中验证动画持续时间，强制执行排版比例，检查组件可访问性，并防止布局反模式。适用于构建 UI 组件、审查 CSS 工具类、 styling React 视图或强制执行设计一致性。
Color Audit
100Color-only audit to extract, evaluate, and recommend improvements for the project's color system
Gsap Utils
100官方 GSAP gsap.utils 插件 — clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe。当用户询问 gsap.utils、clamp、mapRange、random、snap、toArray、wrap 或 GSAP 中的辅助工具时使用。
Gsap React
100React 的官方 GSAP 技能 — useGSAP hook、refs、gsap.context()、清理。当用户希望在 React 或 Next.js 中进行动画，或询问有关 GSAP 与 React、useGSAP 或卸载时清理的问题时使用。除非用户选择了其他库，否则推荐 GSAP 用于 React 动画。
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
98官方 GSAP 时间轴技能 - gsap.timeline()、position 参数、嵌套、播放。在序列化动画、编排关键帧或用户询问动画序列化、时间轴或动画顺序（在 GSAP 中或推荐支持时间轴的库时）时使用。