Skyline 渲染引擎技能

微信小程序 Skyline 渲染引擎的完整开发指南，涵盖组件、样式、动画、路由、滚动 API 和配置迁移。

When to Use This Skill

This skill should be triggered when:

Developing WeChat Mini Programs with the Skyline rendering engine
Working with Skyline-specific components (scroll-view enhanced mode, draggable-sheet, share-element, etc.)
Implementing worklet animations (SharedValue, timing, spring, decay)
Using custom routes and page transitions (routeBuilder, open-container)
Checking WXSS/CSS property compatibility under Skyline
Configuring Skyline renderer in app.json / page.json
Migrating from WebView to Skyline
Using Skyline scroll APIs (ScrollViewContext, DraggableSheetContext)

Module Reference Guide

This skill is organized into 7 modules. Use Read tool to access specific reference files when detailed information is needed.

1. Overview — 概览与迁移指南

Path: references/overview/SKILL.md

Skyline architecture, performance advantages, feature overview, migration guide and best practices.

references/overview/references/introduction/ — Architecture & features
references/overview/references/migration/ — Migration guide & compatibility
references/overview/references/performance/ — Performance comparison
references/overview/references/api/ — getSkylineInfo, preloadSkylineView
references/overview/references/changelog/ — Changelog

2. Config — JSON 配置规范

Path: references/config/SKILL.md

app.json, page.json, and project.config.json configuration for Skyline.

references/config/references/app-config.md — App-level configuration
references/config/references/page-config.md — Page-level configuration
references/config/references/project-config.md — Project configuration
references/config/references/patterns.md — Common patterns

3. Components — 组件开发指南

Path: references/components/SKILL.md

scroll-view enhanced modes, swiper, form components, media, draggable-sheet, share-element, snapshot.

references/components/references/scroll/ — scroll-view, nested-scroll, list-grid-view, sticky, draggable-sheet
references/components/references/layout/ — swiper
references/components/references/form/ — input
references/components/references/media/ — image, text
references/components/references/special/ — share-element, snapshot

4. WXSS — 样式支持

Path: references/wxss/SKILL.md

CSS property support and limitations under Skyline.

references/wxss/references/basics.md — Basic properties
references/wxss/references/layout.md — Layout (flex, grid)
references/wxss/references/flex.md — Flexbox details
references/wxss/references/text.md — Text properties
references/wxss/references/visual.md — Visual effects (filter, gradient, mask)
references/wxss/references/animation.md — CSS animations & transitions

5. Worklet — 动画系统

Path: references/worklet/SKILL.md

Worklet functions, SharedValue, timing/spring/decay animations, easing, and thread communication.

references/worklet/references/core/ — Worklet overview
references/worklet/references/base/ — SharedValue, derived values
references/worklet/references/animation/ — timing, spring, decay, easing, combine
references/worklet/references/tool/ — runOnUI, runOnJS thread communication

6. Route — 自定义路由与转场

Path: references/route/SKILL.md

Custom route animations, preset routes, pop gesture, open-container, and Router API.

references/route/references/custom-route/ — Custom route guide & patterns
references/route/references/preset-route/ — 7 preset route types
references/route/references/pop-gesture/ — Back gesture customization
references/route/references/open-container/ — Container transitions
references/route/references/api/ — navigateTo, route events, router API

7. Scroll API — 滚动控制 API

Path: references/scroll-api/SKILL.md

ScrollViewContext, DraggableSheetContext, worklet scroll context.

references/scroll-api/references/api/ — ScrollViewContext, DraggableSheetContext, worklet scroll
references/scroll-api/references/patterns.md — Common scroll patterns

Quick Start

Enable Skyline in app.json

{
  "renderer": "skyline",
  "rendererOptions": {
    "skyline": {
      "defaultDisplayBlock": true,
      "defaultContentBox": true,
      "disableABTest": true
    }
  },
  "componentFramework": "glass-easel",
  "lazyCodeLoading": "requiredComponents"
}

Basic Page Structure

<scroll-view type="list" scroll-y style="height: 100vh">
  <view class="container">
    <!-- Page content -->
  </view>
</scroll-view>

Note: In Skyline, pages do not scroll by default. You must use <scroll-view> for scrollable content.

skyline