uniapp
installsforks
How to install uniapp?
youlaitech/youlai-skills/uniapp
$npx -y skills add youlaitech/youlai-skills --skill uniappUniApp + Vue3 mobile development standards. Use this skill when developing UniApp mobile apps, using wot-design-uni components, implementing mobile UI/UX, or handling mini-program compatibility.
SKILL.md
| 1 | # UniApp 移动端开发规范 |
| 2 | |
| 3 | ## 触发条件 |
| 4 | |
| 5 | - Develop UniApp mobile projects |
| 6 | - Use wot-design-uni components |
| 7 | - Implement mobile UI/UX |
| 8 | - Handle mini-program compatibility issues |
| 9 | - Use UnoCSS atomic classes |
| 10 | |
| 11 | --- |
| 12 | |
| 13 | ## Part 0: 强制规则 |
| 14 | |
| 15 | ### 核心分层原则 |
| 16 | |
| 17 | **BEM 定义语义，UnoCSS 补充微调，SCSS 只做脏活。** |
| 18 | |
| 19 | | 层级 | 职责 | 示例 | |
| 20 | |------|------|------| |
| 21 | | **BEM** | 组件语义锚点 | `profile-card`、`profile-card__avatar` | |
| 22 | | **UnoCSS** | 简单布局微调（≤3 个属性） | `flex items-center gap-16rpx` | |
| 23 | | **SCSS** | 伪类/动画/穿透等原子类做不了的事 | `@keyframes`、复杂选择器 | |
| 24 | |
| 25 | ### 选型决策 |
| 26 | |
| 27 | | 场景 | 方案 | 示例 | |
| 28 | |------|------|------| |
| 29 | | 简单布局（1-2 个属性） | 原子类 | `class="flex items-center"` | |
| 30 | | 组件样式（3+ 属性） | BEM | `class="profile-card"` | |
| 31 | | 重复出现的组合 | Shortcuts 收敛 | `class="flex-center"` | |
| 32 | | 主题相关 | CSS 变量 + BEM | `background: var(--color-primary)` | |
| 33 | |
| 34 | ```vue |
| 35 | <!-- ✅ 组件样式归 BEM，微调用原子类 --> |
| 36 | <view class="profile-card"> |
| 37 | <image class="profile-card__avatar" :src="user.avatar" /> |
| 38 | <text class="profile-card__name">{{ user.name }}</text> |
| 39 | </view> |
| 40 | |
| 41 | <!-- ✅ 简单间距直接用原子类 --> |
| 42 | <view class="mt-16rpx p-4"> |
| 43 | <wd-search v-model="keywords" placeholder="搜索" /> |
| 44 | </view> |
| 45 | |
| 46 | <!-- ❌ 同一元素混用过多原子类 + BEM --> |
| 47 | <view class="profile-card flex flex-col p-28rpx bg-white rounded-28rpx shadow-sm"> |
| 48 | </view> |
| 49 | ``` |
| 50 | |
| 51 | ### 0.1 组件优先原则 |
| 52 | |
| 53 | **能用 wot-design-uni 官方组件，绝不自定义** |
| 54 | |
| 55 | | 需求 | 使用 | 避免 | |
| 56 | | ------ | -------------------------------- | --------------- | |
| 57 | | 按钮 | `<wd-button>` | 自定义 `.btn` | |
| 58 | | 输入框 | `<wd-input>` | 自定义 `.input` | |
| 59 | | 卡片 | `<wd-card>` / `<wd-cell-group>` | 自定义 `.card` | |
| 60 | | 弹窗 | `<wd-popup>` / `<wd-dialog>` | 自定义弹窗 | |
| 61 | | 列表 | `<wd-cell>` / `<wd-grid>` | 自定义列表 | |
| 62 | | 加载 | `<wd-loading>` / `<wd-skeleton>` | 自定义动画 | |
| 63 | | 空状态 | `<wd-status>` | 自定义空状态 | |
| 64 | |
| 65 | ### 0.2 CSS 统一原则 |
| 66 | |
| 67 | **禁止重复定义相同样式，必须复用** |
| 68 | |
| 69 | ```scss |
| 70 | // ❌ 错误：每个组件都定义一遍 |
| 71 | .user-card { |
| 72 | padding: 24rpx; |
| 73 | background: var(--color-bg); |
| 74 | } |
| 75 | .role-card { |
| 76 | padding: 24rpx; |
| 77 | background: var(--color-bg); |
| 78 | } |
| 79 | |
| 80 | // ✅ 正确：统一基础类 |
| 81 | .base-card { |
| 82 | padding: 24rpx; |
| 83 | background: var(--color-bg); |
| 84 | border-radius: 16rpx; |
| 85 | } |
| 86 | ``` |
| 87 | |
| 88 | ### 0.3 暗黑模式强制要求 |
| 89 | |
| 90 | **所有颜色必须使用 CSS 变量，禁止硬编码** |
| 91 | |
| 92 | ```scss |
| 93 | // ❌ 错误：硬编码颜色 |
| 94 | .card { |
| 95 | background: #ffffff; |
| 96 | color: #333333; |
| 97 | } |
| 98 | |
| 99 | // ✅ 正确：使用 CSS 变量 |
| 100 | .card { |
| 101 | background: var(--color-bg); |
| 102 | color: var(--color-text); |
| 103 | } |
| 104 | ``` |
| 105 | |
| 106 | --- |
| 107 | |
| 108 | ## Part 1: 技术栈 |
| 109 | |
| 110 | - **Vue** - 前端框架 |
| 111 | - **Uni-app** - 跨平台框架 |
| 112 | - **wot-design-uni** - UI 组件库 |
| 113 | - **TypeScript** - 类型安全 |
| 114 | - **UnoCSS** - 原子 CSS |
| 115 | - **Pinia** - 状态管理 |
| 116 | |
| 117 | --- |
| 118 | |
| 119 | ## Part 2: 目录结构 |
| 120 | |
| 121 | ``` |
| 122 | src/ |
| 123 | ├── api/ # API 请求 |
| 124 | │ ├── system/ # 系统模块 |
| 125 | │ │ ├── user.ts |
| 126 | │ │ └── role.ts |
| 127 | │ └── index.ts |
| 128 | ├── components/ # 全局组件 |
| 129 | │ ├── UserCard/ |
| 130 | │ │ └── index.vue |
| 131 | │ └── CustomTree/ |
| 132 | │ └── index.vue |
| 133 | ├── composables/ # 组合式函数 |
| 134 | │ ├── useList.ts # 列表逻辑 |
| 135 | │ ├── useForm.ts # 表单逻辑 |
| 136 | │ └── useAuth.ts # 认证逻辑 |
| 137 | ├── enums/ # 枚举定义 |
| 138 | │ ├── ResultCode.ts |
| 139 | │ └── Status.ts |
| 140 | ├── pages/ # 页面 |
| 141 | │ ├── index/ # 首页 |
| 142 | │ │ └── index.vue |
| 143 | │ ├── login/ # 登录 |
| 144 | │ │ └── index.vue |
| 145 | │ ├── mine/ # 我的 |
| 146 | │ │ └── index.vue |
| 147 | │ └── work/ # 工作台 |
| 148 | │ ├── menu/ |
| 149 | │ │ └── index.vue |
| 150 | │ └── user/ |
| 151 | │ └── index.vue |
| 152 | ├── static/ # 静态资源 |
| 153 | │ ├── images/ |
| 154 | │ └── icons/ |
| 155 | ├── stores/ # Pinia 状态 |
| 156 | │ ├── modules/ |
| 157 | │ │ ├── user.ts |
| 158 | │ │ └── app.ts |
| 159 | │ └── index.ts |
| 160 | ├── styles/ # 全局样式 |
| 161 | │ ├── variables.scss # CSS 变量 |
| 162 | │ ├── index.scss # 入口 |
| 163 | │ └── uno.scss # UnoCSS 配置 |
| 164 | ├── utils/ # 工具函数 |
| 165 | │ ├── request.ts # 请求封装 |
| 166 | │ ├── auth.ts # Token 管理 |
| 167 | │ ├── permission.ts # 权限判断 |
| 168 | │ └── format.ts # 格式化 |
| 169 | ├── App.vue # 根组件 |
| 170 | ├── main.ts # 入口 |
| 171 | ├── manifest.json # 应用配置 |
| 172 | ├── pages.json # 页面配置 |
| 173 | └── uni.scss # UniApp 样式变量 |
| 174 | ``` |
| 175 | |
| 176 | --- |
| 177 | |
| 178 | ## Part 3: CSS 使用边界 |
| 179 | |
| 180 | ### UnoCSS 原子类 + BEM 混合方案 |
| 181 | |
| 182 | | 原子类数量 | 方案 | |
| 183 | | ---------- | ------------- | |
| 184 | | ≤3 个 | UnoCSS 原子类 | |
| 185 | | >3 个 | BEM CSS 类 | |
| 186 | |
| 187 | ### 合并原则（元素已有类名时） |
| 188 | |
| 189 | ```vue |
| 190 | <!-- ❌ 错误：类名 + 原子类混用 --> |
| 191 | <view class="filter-bar flex items-center mt-12rpx"> |
| 192 | |
| 193 | <!-- ✅ 正确：原子类合并到 CSS 类 --> |
| 194 | <view class="filter-bar"> |
| 195 | ``` |
| 196 | |
| 197 | ```scss |
| 198 | .filter-bar { |
| 199 | display: flex; // 合并 flex |
| 200 | align-items: center; // 合并 items-center |
| 201 | margin-top: 12rpx; // 合并 mt-12rpx |
| 202 | } |
| 203 | ``` |
| 204 | |
| 205 | ### 使用预设快捷类 |
| 206 | |
| 207 | | 原子类组合 | 预设 | 减少 | |
| 208 | | ----------------------------------- | -------------- | ---- | |
| 209 | | `flex items-center` | `flex-start` | 2→1 | |
| 210 | | `flex justify-between items-center` | `flex-between` | 3→1 | |
| 211 | | `flex justify-center items-center` | `flex-center` | 3→1 | |
| 212 | |
| 213 | --- |
| 214 | |
| 215 | ## Part 4: 命名规范 |
| 216 | |
| 217 | ### 文件命名 |
| 218 | |
| 219 | | 类型 | 规范 | 示例 |
People who liked this also viewed
6 picksType
- find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 2026
- grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026
- vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026
- improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026
- setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026
- triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026
