Skyline Wxss

If you're working with WeChat mini-programs and migrating from WebView to Skyline rendering, this maps out exactly which CSS properties work and which don't. It covers the gotchas like text-overflow only working on text components, gradients having weird unit restrictions, and display:grid just being ignored. The CLI integration is smart, letting you validate WXSS files before deployment. Most useful when you're debugging why styles aren't rendering or planning a Skyline migration, since it documents non-standard defaults like display:flex and position:relative. Saves you from trial-and-error testing against Skyline's partial CSS support.

skills.sh installs: 999
GitHub stars: 56
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add wechat-miniprogram/skyline-skills --skill skyline-wxss --agent claude-code

Installs into .claude/skills of the current project.

Files

Skyline WXSS 样式支持

适用场景

检查某个 CSS 属性/值在 Skyline 下是否可用
排查 WXSS 样式在 Skyline 下不生效的问题
从 WebView 迁移到 Skyline 时评估样式兼容性
使用渐变、滤镜、遮罩等高级样式时了解限制
查阅 Skyline 支持的 CSS 属性语法

文档索引

我想要...	查阅文档
查看基础数据类型与语法符号	`references/basics.md`
查看布局/定位/盒模型语法	`references/layout.md`
查看 Flex 布局语法	`references/flex.md`
查看背景/边框/滤镜/遮罩语法	`references/visual.md`
查看文本/字体语法	`references/text.md`
查看动画/过渡/变换语法	`references/animation.md`
查看某属性是否支持	本文档 Quick Reference
了解渐变/滤镜的具体限制	本文档「渐变与滤镜限制」规则
检查 WXSS 语法	本文档「WXSS CLI」

WXSS CLI

请务必调用 skyline CLI 对 WXSS 进行检查，确保用法正确。

npx skyline-cli --help

列出所有支持的 WXSS 属性

npx skyline-cli wxss list

从 stdin 读取 WXSS 文本并检查语法

echo "view { color: red;  }" | npx skyline-cli wxss check --json

检查小程序工程内的 WXSS 文件

npx skyline-cli wxss check --json --miniprogram-root ${PROJECT_ROOT} --files pages/index/index.wxss pages/list/list.wxss

强制规则

NEVER: 使用不支持的 CSS 属性

以下属性设置后不生效：

SKILL.md on GitHub

Details

Repository: github.com/wechat-miniprogram/skyline-skills
Categories: Frontend Development, Code Review & Quality, Design & UI/UX
First seen: Jun 3, 2026

More from wechat-miniprogram/skyline-skills

All 7