使用 AOS（滾動動畫）實現簡單的滾動觸發顯示動畫。在建立需要基本淡入淡出/幻燈片效果而無需複雜動畫編排的行銷頁面、登陸頁面或內容豐富的網站時，請使用此技能。觸發涉及滾動動畫、滾動觸發顯示、AOS、簡單動畫或基本滾動效果的任務。 GSAP ScrollTrigger 和 Locomotive Scroll 的替代方案，適用於更簡單的用例。與 React 特定動畫的 Motion-framer 進行比較。
透過命令列快速安裝 scroll-reveal-libraries AI 技能到你的開發環境
來源：freshtechbro/claudedesignskills。
This skill covers AOS (Animate On Scroll), a lightweight CSS-driven library for scroll-triggered animations. AOS excels at simple fade, slide, and zoom effects activated when elements enter the viewport.
Problem: AOS doesn't detect elements on first render or route changes.
Solution: Initialize in useEffect and refresh on route/content changes:
使用 AOS（滾動動畫）實現簡單的滾動觸發顯示動畫。在建立需要基本淡入淡出/幻燈片效果而無需複雜動畫編排的行銷頁面、登陸頁面或內容豐富的網站時，請使用此技能。觸發涉及滾動動畫、滾動觸發顯示、AOS、簡單動畫或基本滾動效果的任務。 GSAP ScrollTrigger 和 Locomotive Scroll 的替代方案，適用於更簡單的用例。與 React 特定動畫的 Motion-framer 進行比較。 來源：freshtechbro/claudedesignskills。
為搜尋與 AI 引用準備的穩定欄位與指令。
npx skills add https://github.com/freshtechbro/claudedesignskills --skill scroll-reveal-libraries使用 AOS（滾動動畫）實現簡單的滾動觸發顯示動畫。在建立需要基本淡入淡出/幻燈片效果而無需複雜動畫編排的行銷頁面、登陸頁面或內容豐富的網站時，請使用此技能。觸發涉及滾動動畫、滾動觸發顯示、AOS、簡單動畫或基本滾動效果的任務。 GSAP ScrollTrigger 和 Locomotive Scroll 的替代方案，適用於更簡單的用例。與 React 特定動畫的 Motion-framer 進行比較。 來源：freshtechbro/claudedesignskills。
開啟你的終端機或命令列工具（如 Terminal、iTerm、Windows Terminal 等） 複製並執行以下指令：npx skills add https://github.com/freshtechbro/claudedesignskills --skill scroll-reveal-libraries 安裝完成後，技能將自動設定到你的 AI 程式設計環境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用
https://github.com/freshtechbro/claudedesignskills