skyline

Skyline Rendering Engine Skills

A complete development guide for the WeChat Mini Program Skyline rendering engine, covering components, styles, animations, routing, scroll APIs, and configuration migration.

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 — Overview and Migration Guide

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 Configuration Specification

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 — Component Development Guide

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 — Style Support

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 — Animation System

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 — Custom Routing and Transitions

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 — Scroll Control 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.

About this skill