About this skill

Problem it solves

WeChat Mini Program UI work often fails when web habits are copied directly: px/rem, CSS Grid, remote fonts, missing dark mode, small touch targets, and unclear visual hierarchy. This skill turns those platform constraints into a practical checklist: define layout and component patterns first, then implement WXSS styling and accessibility acceptance.

How it works

rpx and layout: use a 375px design baseline, px * 2 = rpx, prefer Flexbox, and avoid CSS Grid.
Style and interaction: animate only transform and opacity, and use hover-class, skeleton screens, and state changes for immediate feedback.
Design tokens: standardize spacing, typography, color, and component states, with light and dark themes.
Accessibility: body text contrast >= 4.5:1, touch targets >= 88rpx, and no single-color-only meaning.
Pre-build checks: verify units, font stack, safe area, interaction states, and anti-patterns.

Boundaries

Best for Mini Program page, component, and style review. It does not cover business APIs or guarantee identical WXSS behavior across base libraries. Validate support for @font-face, backdrop-filter, and similar capabilities on target devices.

Screenshots

Use Cases

Designing a Mini Program home page with rpx, Flexbox, and safe-area layout rules.
Reviewing design files for contrast, 88rpx touch targets, dark mode, and interaction states.
Building shared components from WXML+WXSS patterns, design tokens, and empty states.
Auditing pre-release WXSS compatibility for CSS Grid, web fonts, and deep view nesting.

Best For

Mini Program front-end engineers who need to convert designs into rpx/Flexbox WXSS.
UI designers reviewing product experience against contrast, touch targets, and dark mode.
Component library engineers who need consistent design tokens, states, and anti-pattern checks.
product managers validating accessibility for contrast, touch size, and color dependence.

Related Skills

Video Material Finder

@user_e6122faf/video-material-finder

Enter a material name to get preview and download links for free, commercially usable video assets, with paid platform options, pricing, and search suggestions when results are limited.

Design & Media 2026.08.30 ↓ 2K

AI Video Restyler and Style Transfer

@user_87b8e34f/ai-video-restyler

Restyle a short video into a new visual style while preserving core elements such as characters, actions, and composition, suitable for various creative conversions like anime, illustration, ink wash, etc.

Design & Media 2026.08.30 ↓ 4.4K