Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add wechat-miniprogram/skyline-skills --skill skyline-workletgit clone --depth 1 https://github.com/wechat-miniprogram/skyline-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/wechat-miniprogram/skyline-skills/skyline-worklet)<a href="https://agentmods.dev/skills/wechat-miniprogram/skyline-skills/skyline-worklet"><img src="https://agentmods.dev/badge/skills/wechat-miniprogram/skyline-skills/skyline-worklet.svg" alt="Measured on agentmods" height="20"></a>- Socket pass
- Snyk pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00151 | $0.01815 |
| Opus 5 | $0.00076 | $0.00907 |
| Sonnet 5 | $0.00030 | $0.00363 |
| Haiku 4.5 | $0.00015 | $0.00181 |
Grade A, and why
skyline-worklet scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 7d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 208 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Worklet 动画系统
适用场景
- 实现手势跟随、拖拽等交互动画
- 使用 timing/spring/decay 创建动画效果
- 通过 SharedValue 驱动节点样式变化
- 组合多段动画（序列、重复、延迟）
- 在 UI 线程和 JS 线程间传递数据
核心概念
双线程架构与 Worklet 的意义
小程序双线程架构中，UI 事件需跨线程传递到 JS 线程再回传，交互动画会有明显延迟。Worklet 动画让动画逻辑直接运行在 UI 线程，实现类原生动画体验。
三大核心概念
| 概念 | 说明 | 关键 API |
|---|---|---|
| worklet 函数 | 可运行在 JS 或 UI 线程的函数，顶部声明 'worklet' 指令 |
runOnUI(), runOnJS() |
| 共享变量 | 跨线程同步的变量，通过 .value 读写 |
shared(), derived() |
| 动画驱动 | 将 SharedValue 绑定到节点样式 | applyAnimatedStyle() |
基本流程
const { shared, timing } = wx.worklet
// 1. 创建共享变量
const offset = shared(0)
// 2. 绑定到节点样式（updater 为 worklet 函数）
this.applyAnimatedStyle('#box', () => {
'worklet'
return { transform: `translateX(${offset.value}px)` }
})
// 3. 修改值驱动动画
offset.value = timing(300, { duration: 200 })
文档索引
根据需求快速定位（路径相对于 references/）：
| 我想要... | 查阅文档 |
|---|---|
| 了解 worklet 架构和完整概念 | core/worklet-overview.md |
| 使用 SharedValue 和 DerivedValue | base/shared-derived.md |
| 在 worklet 中操作 scroll-view | base/scroll-view-context.md |
| 使用 timing/spring/decay 动画 | animation/timing-spring-decay.md |
| 查看 Easing 缓动函数 | animation/easing.md |
| 使用序列/重复/延迟组合动画 | animation/combine-animation.md |
| 了解 runOnUI/runOnJS 线程通信 | tool/thread-communication.md |
强制规则
MUST: worklet 函数必须声明 'worklet' 指令
// ✅ Correct
function handleGesture(evt) {
'worklet'
offset.value += evt.deltaX
}
// ❌ Incorrect - 缺少 'worklet' 指令，无法在 UI 线程执行
function handleGesture(evt) {
offset.value += evt.deltaX
}
MUST: SharedValue 必须通过 .value 读写
// ✅ Correct
const offset = shared(0)
offset.value = 100
// ❌ Incorrect - 直接赋值会替换整个 SharedValue 对象
const offset = shared(0)
offset = 100
MUST: 访问非 worklet 函数必须使用 runOnJS
// ✅ Correct
function showModal(msg) {
wx.showModal({ title: msg })
}
function handleTap() {
'worklet'
const fn = this.showModal.bind(this)
runOnJS(fn)('hello')
}
// ❌ Incorrect - worklet 中直接调用普通函数
function handleTap() {
'worklet'
this.showModal('hello')
}
What ships with it
7 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- references/animation/combine-animation.md 3.3 KB
- references/animation/easing.md 3.4 KB
- references/animation/timing-spring-decay.md 5.2 KB
- references/base/scroll-view-context.md 1.4 KB
- references/base/shared-derived.md 3.7 KB
- references/core/worklet-overview.md 7.4 KB
- references/tool/thread-communication.md 4.4 KB
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 7d ago First seen · 208 lines · 151 tokens per session scan A 3e1355ed83a1
skyline-worklet is a skill published in the GitHub repository wechat-miniprogram/skyline-skills (53 stars, last pushed 3mo ago), licensed MIT. It adds 151 tokens to every session and 1,815 once invoked, about $0.0008 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
chakra-ui-builder
Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form…
frontend-visual-qa
Audits already-rendered web, landing-page, HTML deck/slide, browser tool/game, dashboard/admin, design-system, and desktop UIs using real-browser or native-app journeys, inspected screenshots, DOM geometry, responsive or projection viewports, and a bundled Playwright sweep. Use after UI implementation to find…
prototype-web
A clickable, high-fidelity web product prototype with navigation, a hero section, feature cards, steps, social proof, and optional pricing. It is designed to resemble a finished landing page while remaining a prototype.
waitlist-page
A simple waitlist page for collecting email addresses from people interested in a new product or early-access release.
animation-principles
Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use motion-system (design-systems); for a full interaction spec use micro-interaction-spec.
refactoring-ui
Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off" (or amateur/unprofessional), "fix the design", "Tailwind styling", "color palette", "visual hierarchy", "design system", "spacing scale", or "component styling". Also trigger when building consistent…