skills.rest
mymx2
mymx2COMMUNITY
Explore all skills by this author →
GitHub

skyline-route

Implement custom page transitions and gesture routing in WeChat Skyline.

4|Updated Jun 10, 2026
Search Tags:#routing#animation#gesture#wechat#worklet#skyline
One-click install
npx skills add https://github.com/mymx2/foreman --skill skyline-route-mymx2
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: skyline-route
Source: https://github.com/mymx2/foreman/tree/main/.qoder/skills.collected/skills/skyline-route
Command: npx skills add https://github.com/mymx2/foreman --skill skyline-route-mymx2

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill addresses the complexity of implementing high-performance, native-feeling page transitions and custom routing logic within the WeChat Skyline rendering engine, which requires specific worklet-based animation handling.

Core Features & Use Cases

  • Custom Route Builders: Create bespoke transition animations like zooms, slides, or custom modal effects using the routeBuilder API.
  • Gesture-Driven Navigation: Implement complex return gestures (horizontal, vertical, or multi-directional) that feel native to the OS.
  • Container Transitions: Use the open-container component to create seamless, shared-element transitions between list items and detail pages.
  • Use Case: Build a high-end card-based UI where clicking a card expands it into a full-screen detail page with a custom spring-based animation and a swipe-to-dismiss gesture.

Quick Start

Use the skyline-route skill to register a custom slide-in transition and apply it to a navigation call.

Frequently Asked Questions about skyline-route

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

FAQPage Schema
How do I implement custom page transition animations in WeChat Skyline?▼

Custom page transition animations in WeChat Skyline are implemented using the routeBuilder API to create bespoke effects like zooms, slides, or custom modal transitions. This approach uses worklet-based animation logic for high-performance rendering.

Can I build gesture-driven routing and swipe-to-dismiss behaviors in Skyline?▼

Yes, gesture-driven routing in Skyline allows you to implement complex return gestures including horizontal, vertical, or multi-directional swipes. This enables native-feeling swipe-to-dismiss behaviors and custom navigation interactions.

What is the best way to create shared-element transitions between list items and detail pages?▼

Shared-element transitions between list items and detail pages are best created using the open-container component in Skyline. This facilitates seamless container transitions for UI patterns like card expansions into full-screen detail pages.

Do I need worklet-based logic for half-screen modals and custom routing in Skyline?▼

Yes, worklet-based animation logic is required for half-screen modals and custom routing in Skyline. Proper lifecycle management of route contexts is also necessary to ensure stable and performant complex UI patterns.

How does route context lifecycle management affect Skyline page transitions?▼

Proper lifecycle management of route contexts ensures that custom page transition animations and gesture-controlled routing remain stable. Failing to manage these contexts can break complex UI patterns like card expansions during navigation.

Related Skills

Explore More Software Engineering Skills→
TugoukezhangTugoukezhang
8

Skyline

Configure Skyline rendering for WeChat Mini Programs with worklet animations and custom routes.

Community
Advanced
shawnlivermoreshawnlivermore

cleen-ui-component-selector

Select the appropriate @cleen/ui component for UI elements using component-index.md and decision-guide.md.

Community
Intermediate
yyds-xyyds-x

skyline-worklet

Execute worklet-based animation logic on the UI thread for interactive effects.

Community
Advanced
dafangdafang
1

react-to-wx-miniprogram-migrator

Migrate React and TailwindCSS web apps into native WeChat Mini Programs.

Community
Intermediate