skills.rest
jiushiwon
jiushiwonCOMMUNITY
Explore all skills by this author →
GitHub

uniapp-design-skill

Standardize design tokens, SCSS styling, and component patterns for uniapp WeChat mini-programs.

44|11|Updated Jun 1, 2026
Search Tags:#responsive design#design tokens#scss#uniapp#theme configuration#component standards#wechat mini-program
One-click install
npx skills add https://github.com/jiushiwon/wg-skills --skill uniapp-design-skill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: uniapp-design-skill
Source: https://github.com/jiushiwon/wg-skills/tree/main/uniapp-design-skill
Command: npx skills add https://github.com/jiushiwon/wg-skills --skill uniapp-design-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents inconsistent styling, hardcoded design values, fragile component patterns, and platform-specific layout issues in uniapp WeChat mini-program projects.

Core Features & Use Cases

  • Design Tokens: Establishes a four-layer token architecture for themes, primitive values, semantic variables, and shared styling.
  • Component Standards: Defines TypeScript prop patterns, typed emits, scoped SCSS, naming conventions, and reusable button component structures.
  • Responsive Adaptation: Provides guidance for navigation bars, bottom safe areas, and HarmonyOS capability fallbacks.
  • SCSS Utilities: Supplies color-scale functions and mixins for layouts, text truncation, cards, buttons, borders, and safe-area handling.
  • Use Case: Apply the Skill when creating or refactoring a uniapp mini-program that needs centralized theming, maintainable components, and reliable device adaptation.

Quick Start

Ask the AI to apply the uniapp design system to a mini-program by defining its theme tokens, component conventions, and screen adaptation rules.

Frequently Asked Questions about uniapp-design-skill

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

FAQPage Schema
How do I manage uniapp WeChat mini-program theme configuration and prevent hardcoded design values?▼

Manage uniapp WeChat mini-program theme configuration by establishing a four-layer Design Tokens architecture for themes, primitive values, semantic variables, and shared styling to prevent inconsistent styling and hardcoded values in SCSS.

What are the component standards for building reusable uniapp mini-program interfaces?▼

Component standards for reusable uniapp mini-program interfaces require TypeScript prop patterns, typed emits, scoped SCSS, and naming conventions to standardize reusable button component structures and prevent fragile component patterns.

How do I handle responsive screen adaptation and safe areas in uniapp WeChat mini-programs?▼

Handle responsive screen adaptation in uniapp WeChat mini-programs by applying SCSS utilities and mixins for navigation bars, bottom safe areas, and screen adaptation rules to ensure reliable device adaptation.

Does uniapp responsive design support HarmonyOS fallback scenarios for WeChat mini-programs?▼

Yes, uniapp responsive design supports HarmonyOS fallback scenarios for WeChat mini-programs by applying platform capability checks alongside safe-area handling and navigation bar adaptation guidance.

What SCSS utilities are available for uniapp mini-program layout and component styling?▼

Available SCSS utilities for uniapp mini-program styling include color-scale functions and mixins for layouts, text truncation, cards, buttons, borders, and safe-area handling to ensure consistent component development.

Related Skills

Explore More Software Engineering Skills→
neitui-coderneitui-coder

miniprogram-development

Develop, debug, and publish WeChat Mini Program projects.

Community
Advanced
xianmingyaoxianmingyao
1

auth-wechat-miniprogram

Initialize CloudBase and retrieve OPENID, APPID, and UNIONID via cloud.getWXContext().

Community
Advanced
gjwrootgjwroot

wechat-mini-program-development

Scaffold WeChat mini-program projects with standardized structure and API integration.

Community
Intermediate
wesweetwesweet
1

微信小程序使用小技巧

Provides tips for WeChat Mini Program development using WXML, WXSS, and JavaScript.

Community
Intermediate