Claude MarketplacesSubmit

Scroll Reveal Libraries

freshtechbro/claudedesignskills

AOS is the scroll animation library you reach for when you need simple fade-in and slide-up effects without the complexity of GSAP or Framer Motion. It's data attribute based, so you add `data-aos="fade-up"` to your HTML and initialize with one line of JavaScript. Works great for marketing pages and landing pages where you want elements to animate as users scroll past them. The skill covers 50+ built-in animations, staggered delays for card grids, and anchor-based triggers. It's CSS-driven and GPU-accelerated, but if you need precise scroll-synced animations or complex timelines, you'll want GSAP ScrollTrigger instead. The React integration section shows how to handle route changes properly.

skills.sh installs: 2.6K
GitHub stars: 1.3K
last updated: Aug 21, 2026

Install

$ npx -y skills add freshtechbro/claudedesignskills --skill scroll-reveal-libraries --agent claude-code

Installs into .claude/skills of the current project.

Files

Scroll Reveal Libraries

Overview

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.

Key Features:

Minimal Setup: Single JavaScript file + CSS
Data Attribute API: Configure animations in HTML
Performance: CSS-driven, GPU-accelerated animations
50+ Built-in Animations: Fades, slides, zooms, flips
Framework Agnostic: Works with vanilla JS, React, Vue, etc.

When to Use:

Marketing/landing pages with simple scroll effects
Content-heavy sites (blogs, documentation)
Quick prototypes requiring scroll animations
Projects where GSAP/Framer Motion complexity isn't needed

When NOT to Use:

Complex animation timelines or orchestration → Use GSAP ScrollTrigger
Physics-based animations → Use React Spring or Framer Motion
Precise scroll-synced animations → Use GSAP ScrollTrigger
Heavy interactive animations → Use Framer Motion

Core Concepts

Installation

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthly Promote your product hereReach 125k+ visitors monthly

Agent CaffeineSponsoredClose your lid, come back to finished work

SnugSponsoredThe clipboard manager for the AI era Promote your product hereReach 125k+ visitors monthly

WaxSponsoredBlock anything with supervision, without erasing your iPhone Promote your product hereReach 125k+ visitors monthly

knobsSponsoredSee your site on any phone, any day, in any language

Details

Repository: github.com/freshtechbro/claudedesignskills
Categories: Frontend Development, Automation & Workflows, Marketing & SEO, Design & UI/UX
First seen: Jun 3, 2026

Recommended

More Frontend Development

1

docs-demoremotion-dev/remotionAdd an interactive demo to the Remotion documentation. Use when creating a new <Demo> component for docs pages.2.6Kskills.sh installs

2

barba-jsfreshtechbro/claudedesignskillsPage transitions library for creating fluid, smooth transitions between website pages. Use this skill when implementing page transitions, creating SPA-like expe2.5Kskills.sh installs

3

weread-year-in-review-video-templatenexu-io/open-designWeRead-inspired HyperFrames video template for vertical annual reading reports, personal reading dashboards, book-note recaps, and shareable year-in-review stor2.5Kskills.sh installs

4

wireframe-specowl-listener/designer-skillsSpecify wireframe layouts with content priority, component placement, and annotation.2.5Kskills.sh installs

5

gzh-designisjiamu/gzh-design-skill微信公众号文章排版引擎，将 Markdown 转换为可直接粘贴到公众号编辑器的 HTML。主题风格从 references/theme-index.md 注册的自定义主题库中选取，自动章节编号、关键词下划线标记、引言卡片、目录导航、代码块、图片/GIF、作者签名。支持 Markdown / Word(.docx) / 2.4Kskills.sh installs

6

create-mcp-appmodelcontextprotocol/ext-appsThis skill should be used when the user asks to "create an MCP App", "add a UI to an MCP tool", "build an interactive MCP View", "scaffold an MCP App", or needs2.3Kskills.sh installs