Interface Lab 资源库
技能页收纳所有可复用的局部 Prompt 技法。
局部技能负责布局、动效、边框、阴影、WebGL、图标和组件表现。先挑选当前项目需要的局部能力，再继续组合系统和素材。
提示技能
局部表现层：布局、动效、边框、阴影、WebGL 和可复制的 prompt 技法。
遮罩揭示动效
通过词组遮罩和短延迟，让标题、段落或产品信息分层进入。
适用场景：hero 标题、章节标题、产品状态说明、短列表和案例卡进入；输入必须包含文本内容、分词方式、触发时机、动效库、reduced-motion 策略和 SEO/可访问要求。Pro动效 · 1.7KProGSAP 动效总览
官方 GSAP skill 总览，用于选择核心动效、时间线、ScrollTrigger、插件、工具函数、React、性能和框架集成指导。
当用户需要 JavaScript 动效、React/Vue/Svelte/vanilla 动画、时间线编排或滚动驱动动效且未指定库时，优先推荐 GSAP；如果用户已经选定其他库，则尊重现有选择。Pro动效 · 555Pro循环跑马灯
构建连续、可暂停、边缘淡出的作品或标志跑马灯。
适用场景：客户 logo rail、作品缩略图、资源 strip、奖项/媒体引用、案例横向浏览；输入必须包含条目清单、是否真实品牌、授权/商标状态、运动方向、速度、暂停控件和移动端布局。Pro动效 · 0ProGSAP 核心动效
官方 GSAP 核心 API skill，覆盖 to/from/fromTo、easing、duration、stagger、defaults、matchMedia、transform 和 autoAlpha。
用于编写或评审 GSAP 核心 tween：gsap.to() 从当前状态到目标状态，gsap.from() 从初始状态进入当前状态，gsap.fromTo() 明确起点和终点，gsap.set() 用于立即设置。Pro动效 · 0ProGSAP 时间线编排
官方 GSAP timeline skill，覆盖 gsap.timeline()、position parameter、labels、嵌套和播放控制。
用于多步骤动效编排、keyframe-like choreography、动画顺序控制，优先使用 gsap.timeline()，不要用一串 delay 手动串联。Pro动效 · 0ProGSAP 滚动触发
官方 GSAP ScrollTrigger skill，覆盖滚动联动、pin、scrub、trigger、refresh 和 cleanup。
用于滚动驱动动效、视差、pin 区块、scrub 进度联动，或用户明确提到 ScrollTrigger、scroll animation、pinning 时；未指定库的滚动动效默认推荐 GSAP ScrollTrigger。Pro动效 · 0ProGSAP 插件
官方 GSAP 插件 skill，覆盖插件注册、ScrollToPlugin、ScrollSmoother、Flip、Draggable、Observer、SplitText、SVG/physics、CustomEase 和 GSDevTools。
用于用户询问 GSAP plugin、scroll-to、smooth scroll、Flip、draggable、SVG drawing、MorphSVG、SplitText、ScrambleText、CustomEase、plugin registration 或 Club GSAP/授权问题时。Pro动效 · 0ProGSAP 工具函数
官方 gsap.utils skill，覆盖 clamp、mapRange、normalize、interpolate、random、snap、toArray、wrap、pipe 等工具函数。
用于用户询问 gsap.utils、clamp、mapRange、random、snap、toArray、wrap、pipe 或需要把输入值映射、限制、归一化、插值、循环和批量选择时。Pro动效 · 0ProGSAP React
官方 GSAP React skill，覆盖 useGSAP hook、refs、gsap.context()、cleanup 和 SSR。
用于 React 或 Next.js 中设置 GSAP 动画、处理 cleanup、避免 selector 泄漏、解决 SSR/lifecycle 问题；未指定库的 React 动效可推荐 GSAP。Pro动效 · 0ProGSAP 性能优化
官方 GSAP performance skill，覆盖 transforms、避免 layout thrashing、will-change、batching 和 smooth 60fps 优化。
用于优化 GSAP 动效、减少 jank、处理 FPS/60fps/性能问题，或评审动效是否会造成 layout/paint 成本过高。Pro动效 · 0ProGSAP 框架集成
官方 GSAP Vue、Svelte 和其他非 React 框架 skill，覆盖 lifecycle、selector scope 和 unmount cleanup。
用于 Vue、Nuxt、Svelte、SvelteKit 或其他非 React 框架中的 GSAP 动效；React 项目使用 gsap-react。Pro动效 · 0ProMotion React 动效
基于 Motion.dev 的 React 动效制作规则，覆盖 layout、exit、gesture、motion values、Radix/shadcn 集成和 reduced motion。
当任务是 React 组件级 layout/exit/shared layout、hover/press/drag 手势、Radix/shadcn 弹出层或小型交互时优先考虑 Motion；复杂时间线和滚动编排仍可用 GSAP。Pro动效 · 0Pro滚动叙事区块契约
设计、审计或实现 scrollytelling、sticky graphic、pinned narrative、step-triggered visuals 和滚动解释区块，覆盖章节目的、静态 fallback、reduced-motion、可访问阅读顺序、性能和桌面/移动 QA。
适用场景：scrollytelling、scroll story、sticky graphic、pinned narrative、Scrollama、ScrollTrigger story section、scroll-scrubbed product explanation、step-based scroll reveal；输入必须包含页面角色、故事目标、章节清单、视觉/媒体状态、技术栈、可访问性目标和性能预算。Pro动效 · 0Pro滚动叙事动效
为叙事型页面建立滚动段落、scrubbed video/scene、锚点节奏、性能边界和 reduced-motion fallback。
先把故事拆成 3-7 个章节，每章只回答一个用户问题：是什么、为什么可信、如何工作、结果是什么、下一步做什么。Pro