菜单
Use when adding, fixing, or reviewing GSAP ScrollTrigger behavior in Astro pages, especially with view transitions, static routes, client scripts, reduced motion, cleanup, or browser-only lifecycle constraints.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Sheshiyer/skill-clusters --skill astro-gsap-scrolltrigger命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
Arcplume runs Grok through the Grok Build CLI's own OAuth-authenticated session (grok login) for image generation, with strict preflight validation, secret-safe handling, and headless CLI-driven execution -- no separate XAI_API_KEY billing. Video falls back to the billed xAI API. USE WHEN a user wants to generate an image via a locally logged-in Grok Build CLI session, e.g. 'generate an image with grok', 'use grok build', or 'use my logged-in grok session'.
Shared reference for the Selemene cluster: the two report surfaces (deterministic Rust reports vs. narrative witness-pipeline readings), the @selemene/bridge CLI contract, the output manifest format, and non-prescriptive witnessing tone. USE WHEN deciding which Selemene surface to invoke or when routing between birth/compatibility/transit reports and solo/dyadic readings.
Route Selemene Engine tasks to the right surface: deterministic reports (birth/compatibility/transit) via selemene-core and the @selemene/bridge CLI, or narrative witness readings via selemene-report. USE WHEN the user wants anything under the Selemene/Noesis umbrella but has not named the exact surface.
基于 SOC 职业分类
| name | astro-gsap-scrolltrigger |
| description | Use when adding, fixing, or reviewing GSAP ScrollTrigger behavior in Astro pages, especially with view transitions, static routes, client scripts, reduced motion, cleanup, or browser-only lifecycle constraints. |
| cluster | creative-frontend |
| version | 1.0.0 |
Use GSAP in Astro without breaking static rendering, route transitions, accessibility, or mobile performance.
window, document, matchMedia, gsap, and ScrollTrigger initialization inside client-side <script> blocks or imported browser scripts.ScrollTrigger once in the browser script.astro:page-load.astro:before-swap.prefers-reduced-motion: reduce.transform and opacity unless there is a measured reason.ScrollTrigger.refresh() after layout-affecting images/content are ready.<script>
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
let ctx;
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
function cleanup() {
ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
ctx?.revert?.();
ctx = undefined;
}
function init() {
cleanup();
if (reduceMotion.matches) return;
ctx = gsap.context(() => {
gsap.to('[data-narrative]', {
opacity: 1,
y: 0,
duration: 0.7,
ease: 'power3.out',
scrollTrigger: {
trigger: '[data-narrative]',
start: 'top 85%',
},
});
});
requestAnimationFrame(() => ScrollTrigger.refresh());
}
document.addEventListener('astro:page-load', init);
document.addEventListener('astro:before-swap', cleanup);
if (document.readyState !== 'loading') init();
</script>
astro-framework for Astro lifecycle and routing.webapp-testing or browser to verify console errors and layout behavior.web-motion-library only for generic animation inspiration.animejs only inside HyperFrames compositions; do not substitute it for live Astro ScrollTrigger work unless explicitly requested.