skyline-wxss

Q: How do I install skyline-wxss?

Run npx skills add https://github.com/wechat-miniprogram/skyline-skills --skill skyline-wxss in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/skyline-wxss/ (personal) or .claude/skills/skyline-wxss/ (project).

by wechat-miniprogramFrontend & Design

Skyline WXSS 样式支持技能。提供 Skyline 支持的 CSS 属性、值和限制信息。触发关键词：WXSS、CSS 支持、样式兼容性、属性支持、不支持的属性、display grid、position sticky、overflow、filter、渐变、gradient、linear-gradient、radial-gradient、conic-gradient、border-style、white-space、font-weight、text-decoration、text-overflow、aspect-ratio、will-change、calc、env、mask、mask-image、background-image、transition、animation、transform、font-feature-settings。

Installs: 954
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/wechat-miniprogram/skyline-skills --skill skyline-wxss

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads skyline-wxss automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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 属性

以下属性设置后不生效：

属性	分类	替代方案
`float`	布局	使用 flex 布局
`contain`	布局	使用 `-wx-contain`
`resize`	布局	无替代
`writing-mode`	文本	无替代
`text-indent`	文本	使用 padding-left 模拟
`overflow-wrap`	文本	使用 word-break
`text-decoration-thickness`	文本	无替代
`background-attachment`	背景	无替代
`background-clip`	背景	无替代
`background-origin`	背景	无替代
`mask-origin / mask-clip / mask-mode`	遮罩	无替代
`justify-items`	Flex	无替代
`list-style-type / list-style-image / list-style-position`	列表	无替代

MUST: 使用支持的属性值

部分属性可用但特定值不支持，会被静默忽略：

Incorrect:

.container {
  display: grid;           /* grid 不支持 */
  position: sticky;        /* sticky 不支持 */
  overflow: auto;          /* auto 不支持 */
}

Correct:

.container {
  display: flex;           /* 使用 flex 替代 grid */
  position: relative;      /* sticky 需使用 sticky-header 组件 */
  overflow: hidden;        /* 使用 hidden，滚动用 scroll-view */
}

MUST: 注意渐变限制

渐变限制汇总：

radial-gradient 仅支持 circle 形状（不支持 ellipse），尺寸仅支持 px，颜色停止仅支持 %
linear-gradient 停止位置仅支持 % 和固定长度单位（px、rpx 等）
conic-gradient 完全支持（无额外限制）

MUST: 注意背景/遮罩多值限制

background-image / mask-image 最多支持 2 个值
background-position 最多支持 2 组值
background-repeat / background-size 不支持多组值

MUST: calc() 不支持角度类型

calc() 支持长度计算，但不支持角度计算，需直接写角度值。

MUST: text-overflow 仅在 text 组件生效

text-overflow: ellipsis 在 Skyline 下仅在 <text> 组件上生效，在 <view> 上不生效。推荐使用 <text> 组件的 overflow 和 max-lines 属性。

⚠️ 详见 skyline-components 技能了解 text 组件的属性限制。

NEVER: 使用 filter 的 url() 和 drop-shadow()

filter/backdrop-filter 不支持 url() 和 drop-shadow()，也不支持多个函数组合。用 box-shadow 替代 drop-shadow。

支持的函数：blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia()。

MUST: text-decoration-line 仅支持单值

仅支持单个值（none, underline, overline, line-through），不支持多值组合如 underline line-through。

MUST: mask-image 渐变不可用

mask-image 的 linear-gradient() 和 radial-gradient() 不支持，仅 url() 形式可用。

MUST: 注意简写属性的部分有效行为

以下 CSS 简写属性在展开后，部分子属性不生效：

简写属性	不生效的子属性
`background`	`background-attachment`, `background-origin`, `background-clip`
`text-decoration`	`text-decoration-thickness`
`mask`	`mask-origin`, `mask-clip`

💡 mask-position 简写有效：会自动展开为 mask-position-x + mask-position-y（类似 background-position 的机制）。

Quick Reference

布局属性速查

属性	支持的值	不支持的值
`display`	`none`, `block`, `inline`, `inline-block`, `flex`, `inline-flex`	`grid`, `flow-root`
`position`	`static`, `relative`, `absolute`, `fixed`	`sticky`
`overflow`	`visible`, `hidden`	`auto`, `scroll`, `overflow-x`, `overflow-y`
`visibility`	`visible`, `hidden`	`collapse`
`box-sizing`	`content-box`, `border-box`	`padding-box`
`aspect-ratio`	`auto`, `<number>`, `<number>/<number>`	—
`content`	`none`, `normal`, `<string>`, `<url>`	—
`direction`	—	不支持

文本属性速查

属性	支持的值	不支持的值
`white-space`	`normal`, `nowrap`	`pre`, `pre-wrap`, `pre-line`
`font-weight`	`normal`, `bold`, 数值(100-900)	`bolder`, `lighter`
`font-style`	`normal`, `italic`	`oblique`
`word-break`	`normal`, `break-all`, `keep-all`	`break-word`（映射为 normal）
`vertical-align`	`baseline`, `top`, `middle`, `bottom`	`text-top`, `text-bottom`
`text-align`	`left`, `center`, `right`, `justify`, `start`, `end`	`justify-all`, `match-parent`
`text-decoration-line`	`none`, `underline`, `overline`, `line-through`（仅单值）	多值组合, `blink`
`text-overflow`	`clip`, `ellipsis`（⚠️ 仅 text 组件生效）	—

边框与背景速查

属性	支持的值	不支持的值
`border-*-style`	`none`, `solid`, `dashed`, `dotted`	`hidden`, `double`, `groove`, `ridge`, `inset`, `outset`
`background-repeat`	`repeat`, `repeat-x`, `repeat-y`, `no-repeat`	`space`, `round`

Flex 属性（全部支持）

以下 Flex 属性的所有定义值完全支持： flex-direction, flex-wrap, align-items, align-self, align-content, justify-content, flex-grow, flex-shrink, flex-basis, order

非标准默认值

以下属性的默认值与 Web 标准不同，需注意：

属性	Skyline 默认值	Web 标准默认值	条件
`display`	`flex`	`inline`	`defaultDisplayBlock: true` 时为 `block`
`position`	`relative`	`static`	—
`box-sizing`	`border-box`	`content-box`	`defaultContentBox: true` 时为 `content-box`
`flex-direction`	`column`	`row`	`defaultDisplayBlock: true` 时为 `row`
`align-items`	`stretch`	`normal`	`defaultDisplayBlock: true` 时为 `normal`
`text-align`	`start`	`left`	—
`mask-repeat`	`no-repeat`	`repeat`	—

完全支持的其他属性

pointer-events, text-decoration-style, background-size, transform, opacity, transition-*, animation-*, border-radius, box-shadow, text-shadow, color, font-size, font-family, font-feature-settings, line-height, letter-spacing, word-spacing, z-index, aspect-ratio, content, will-change（仅 auto/contents）, conic-gradient

场景	推荐技能	说明
Skyline JSON 配置	`skyline-config`	rendererOptions 影响默认 display/flex-direction/align-items/box-sizing
组件使用	`skyline-components`	scroll-view 替代 overflow:auto
Worklet 动画	`skyline-worklet`	transform/opacity 动画最佳实践
Skyline 概览	`skyline-overview`	渲染引擎概览与迁移指南

References 目录结构

references/
├── animation.md
├── basics.md
├── flex.md
├── layout.md
├── text.md
└── visual.md

FAQ

What does the skyline-wxss skill do?

How do I install skyline-wxss?

Run npx skills add https://github.com/wechat-miniprogram/skyline-skills --skill skyline-wxss in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/skyline-wxss/ (personal) or .claude/skills/skyline-wxss/ (project).

Which AI agents can use skyline-wxss?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is skyline-wxss safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains skyline-wxss?

It is published by wechat-miniprogram in wechat-miniprogram/skyline-skills. It has 954 recorded installs.