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 agentmods add skills/wechat-miniprogram/skyline-skills/skyline-componentsnpx skills add wechat-miniprogram/skyline-skills --skill skyline-componentsgit 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-components)<a href="https://agentmods.dev/skills/wechat-miniprogram/skyline-skills/skyline-components"><img src="https://agentmods.dev/badge/skills/wechat-miniprogram/skyline-skills/skyline-components.svg" alt="Measured on agentmods" height="20"></a>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.00081 | $0.02976 |
| Opus 5 | $0.00041 | $0.01488 |
| Sonnet 5 | $0.00016 | $0.00595 |
| Haiku 4.5 | $0.00008 | $0.00298 |
Grade A, and why
skyline-components 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 6d 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 — 443 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Skyline 组件开发指南
适用场景
- 开发滚动列表/瀑布流/网格布局
- 实现下拉刷新、下拉二级功能
- 使用嵌套滚动模式
- 开发轮播图、卡片切换效果
- 处理表单输入（input/textarea）
- 实现共享元素/页面转场动画
- 开发半屏可拖拽面板
组件支持概览
完全支持的高频组件
| 组件 | Skyline 特性增强 |
|---|---|
| scroll-view | type 模式、worklet 回调、嵌套滚动、下拉二级 |
| swiper | layout-type 堆叠/卡片、indicator 动画类型 |
| text | overflow 文本溢出处理、max-lines |
| image | fade-in 渐显、默认懒加载 |
| input/textarea | worklet 键盘回调、输入法事件 |
| view/button | 完全支持 |
Skyline 新增组件
| 组件 | 说明 |
|---|---|
| list-view | 列表布局容器 |
| grid-view | 网格/瀑布流容器 |
| sticky-section/sticky-header | 吸顶布局 |
| nested-scroll-header/body | 嵌套滚动 |
| draggable-sheet | 半屏可拖拽 |
| share-element | 共享元素动画 |
| snapshot | 截图组件 |
| span | 内联混排 |
文档索引
根据需求快速定位（路径相对于 references/）：
| 我想要... | 查阅文档 |
|---|---|
| 实现长列表/虚拟列表 | scroll/scroll-view.md |
| 下拉刷新/下拉二级 | scroll/scroll-view.md#下拉刷新 |
| 嵌套滚动 | scroll/nested-scroll.md |
| 列表/网格布局 | scroll/list-grid-view.md |
| 吸顶效果 | scroll/sticky.md |
| 半屏拖拽面板 | scroll/draggable-sheet.md |
| 轮播图/卡片效果 | layout/swiper.md |
| 文本处理 | media/text.md |
| 图片显示 | media/image.md |
| 输入框开发 | form/input.md |
| 共享元素动画 | special/share-element.md |
| 截图功能 | special/snapshot.md |
强制规则
MUST（必须遵守）
-
scroll-view 必须指定 type：Skyline 下使用 scroll-view 必须设置
type属性<!-- ✅ 正确 --> <scroll-view type="list" scroll-y>...</scroll-view> <!-- ❌ 错误：缺少 type --> <scroll-view scroll-y>...</scroll-view> -
横向滚动需 enable-flex：横向滚动需同时开启
enable-flex以兼容 WebView<scroll-view scroll-x enable-flex style="flex-direction: row;"> -
文本必须用 text 组件：内联文本只能用
<text>组件<!-- ✅ 正确 --> <text>Hello <text>World</text></text> <!-- ❌ 错误：内联文本不能用 view --> <view>Hello <view>World</view></view> -
list-view/grid-view 必须在 custom 模式：
<scroll-view type="custom" scroll-y> <list-view>...</list-view> </scroll-view> -
嵌套滚动必须使用 nested 模式：
<scroll-view type="nested" scroll-y> <nested-scroll-header>...</nested-scroll-header> <nested-scroll-body>...</nested-scroll-body> </scroll-view>
What ships with it
13 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/form/input.md 7.4 KB
- references/gesture/gesture-negotiation.md 6.5 KB
- references/gesture/gesture-system.md 6.6 KB
- references/layout/swiper.md 8.4 KB
- references/media/image.md 6.2 KB
- references/media/text.md 5.9 KB
- references/scroll/draggable-sheet.md 7.2 KB
- references/scroll/list-grid-view.md 7.8 KB
- references/scroll/nested-scroll.md 8.6 KB
- references/scroll/scroll-view.md 11 KB
- references/scroll/sticky.md 7.1 KB
- references/special/share-element.md 7.8 KB
- references/special/snapshot.md 9.0 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.
- 6d ago First seen · 443 lines · 81 tokens per session scan A d030aadc090f
skyline-components is a skill published in the GitHub repository wechat-miniprogram/skyline-skills (53 stars, last pushed 3mo ago), licensed MIT. It adds 81 tokens to every session and 2,976 once invoked, about $0.0004 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
uniwind
Uniwind — Tailwind CSS v4 styling for React Native. Use when adding, building, or debugging components in a React Native project that uses Uniwind classNames. Covers setup, Metro config, global.css, theming, className props, accent- color props, platform/data/state/responsive variants, CSS variables, custom utilities…
weapp-tailwindcss-react-native
为 Expo/React Native 配置 @weapp-tailwindcss/react-native 0.2.5 的 Tailwind CSS 4 编译器、Metro virtual module、Babel JSX transform、style manifest、tw runtime、dark/ios/android/native variants。Use for Expo SDK 54+, React Native 0.81+, Metro, native className, Android/iOS style compilation；不用于 uni-app App、ReactLynx 或普通小程序构建。.
ionic
Ionic development guidelines for building cross-platform mobile applications with Angular, Cordova, and Firebase integration.
mobile-ux-optimizer
Mobile-first UX optimization for touch interfaces, responsive layouts, and performance. Use for viewport handling, touch targets, gestures, mobile navigation. Activate on mobile, touch, responsive, dvh, viewport, safe area, hamburger menu. NOT for native app development (use React Native skills), desktop-only…
expo-tailwind-setup
Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling.
flutter-development
Cross-platform development with Flutter and Dart for iOS, Android, Web, Desktop, and embedded. Use when building Flutter apps, implementing Material/Cupertino design, or optimizing Dart code.