ReddRadar
Agent skill
webflow-interactivity-systems
Use observer, scroll tracking, and subscription services for advanced interactivity. Use when implementing scroll animations, viewport detection, or frame-based updates.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/webflow-interactivity-systems
SKILL.md
Webflow Interactivity Systems
This skill guides you through the specialized systems for viewport detection, scroll progress tracking, and global event subscriptions.
Viewport & Scroll Tracking
Import from @/modules/_:
onView (Viewport Detection)
Triggers a callback when an element enters or leaves the viewport.
onView(element, {
threshold: 0.1,
callback: ({ isIn, direction }) => {
element.classList.toggle("is-visible", isIn);
}
});
onTrack (Scroll Progress)
Maps scroll progress through an element to a range of values.
onTrack(element, {
bounds: [0, 100], // Map progress to 0-100
top: "bottom", // Start when bottom of element hits viewport top
bottom: "top", // End when top of element hits viewport bottom
callback: (value) => {
element.style.setProperty("--progress", value.toString());
}
});
Global Subscriptions
Import from @lib/subs:
Raf (Animation Frame)
For smooth, frame-based updates. Returns an unsubscribe function.
const unsubscribe = Raf.add(({ deltaTime, time }) => {
element.style.transform = `rotate(${time * 50}deg)`;
});
onDestroy(unsubscribe);
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?