skills.rest
Tugoukezhang
TugoukezhangCOMMUNITY
Explore all skills by this author →
GitHub

skyline-worklet

Execute worklet animation code on the UI thread for responsive motion.

8|1|Updated Apr 13, 2026
Search Tags:#timing#gesture#spring#decay#ui-animation#worklet#sharedvalue
One-click install
npx skills add https://github.com/Tugoukezhang/workbuddy-skills --skill skyline-worklet
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: skyline-worklet
Source: https://github.com/Tugoukezhang/workbuddy-skills/tree/main/skills/skyline/references/worklet
Command: npx skills add https://github.com/Tugoukezhang/workbuddy-skills --skill skyline-worklet

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Worklet-based animation solves the latency gap between UI events and animation logic by executing motion code directly on the UI thread, enabling smoother, more responsive interactions.

Core Features & Use Cases

  • Worklet functions with the 'worklet' directive for UI-thread execution.
  • SharedValue and DerivedValue to synchronize state across threads and drive animations.
  • Animation primitives: timing, spring, decay, and composition helpers like sequence, repeat, and delay.
  • Easing controls and combination techniques to craft nuanced motion.
  • Safe inter-thread calls via runOnUI and runOnJS for triggering worklets or JS functions.
  • Real-world scenarios include draggable UI elements, gesture-driven motion, and spring-back effects.

Quick Start

Create a small draggable box that uses a SharedValue driven by a worklet to follow pointer movements.

Frequently Asked Questions about skyline-worklet

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix UI animation latency during drag-and-drop gestures?▼

To fix UI animation latency, you run worklet code directly on the UI thread. This closes the gap between UI events and animation logic, enabling smooth, responsive gesture following and drag-and-drop interactions.

How do I use SharedValue to drive spring and decay animations?▼

You use SharedValue to synchronize animation state across threads and drive spring, decay, or timing animations. Easing controls and composition helpers like sequence and repeat further craft the nuanced motion.

When should I use runOnUI and runOnJS for interactive animations?▼

Use runOnUI and runOnJS for safe inter-thread calls when triggering worklets or JS functions. This is necessary for interactive animations like gesture-driven motion and spring-back effects to maintain responsiveness.

What is a worklet function and how does it execute?▼

A worklet function uses the 'worklet' directive to execute motion code directly on the UI thread. This mechanism bypasses the JavaScript thread, preventing dropped frames during interactive scenarios.

Do I need DerivedValue and Easing for gesture-driven UI motion?▼

You need DerivedValue to synchronize state across threads and Easing to control motion curves. Both are required to implement smooth, nuanced, and responsive gesture-driven animations.

Related Skills

Explore More Software Engineering Skills→
JubaKitiashviliJubaKitiashvili
41

animate

Implement gesture-driven animations in React Native with Reanimated and Gesture Handler.

Community
Advanced
mymx2mymx2
4

skyline-worklet

Implement UI thread animations for Skyline Mini Programs using worklet functions and SharedValues.

Community
Advanced
mohamedgshoaibmohamedgshoaib
5

motion-advanced

Implement physics-based animation patterns for React and Next.js with motion/react.

Community
Advanced
takzobyetakzobye

flutter-native-interop

Scaffold Flutter bindings to native APIs across Android, iOS, and Web.

Community
Advanced