feat: add stitch uview-plus components skill

.claude-plugin/marketplace.json

@@ -461,7 +461,7 @@
     },
     {
       "name": "stitch-skills",
-      "description": "Stitch MCP 扩展技能（28个技能）：design-md、mcp、react-components、remotion、shadcn-ui、ui-design-spec、uview/uviewpro/vue 组件等。与 skill-group-mapping 一致。",
+      "description": "Stitch MCP 扩展技能（29个技能）：design-md、mcp、react-components、remotion、shadcn-ui、ui-design-spec、uview/uviewpro/uview-plus/vue 组件等。与 skill-group-mapping 一致。",
       "source": "./",
       "strict": false,
       "skills": [
@@ -489,6 +489,7 @@
         "./skills/stitch-skills/stitch-ui-prompt-architect",
         "./skills/stitch-skills/stitch-uview-components",
         "./skills/stitch-skills/stitch-uviewpro-components",
+        "./skills/stitch-skills/stitch-uview-plus-components",
         "./skills/stitch-skills/stitch-vue-bootstrap-components",
         "./skills/stitch-skills/stitch-vue-element-components",
         "./skills/stitch-skills/stitch-vue-layui-components",

skills/stitch-skills/README.md

@@ -6,7 +6,7 @@
 
 ![Version](https://img.shields.io/badge/Version-1.0.0-blue)
 ![License](https://img.shields.io/badge/License-Apache%202.0-green)
-![Skills](https://img.shields.io/badge/Skills-25-orange)
+![Skills](https://img.shields.io/badge/Skills-29-orange)
 ![Plugins](https://img.shields.io/badge/Plugins-3-brightgreen)
 
 </div>
@@ -88,7 +88,7 @@ This repo **subsumes and strengthens** [google-labs-code/stitch-skills](https://
 - **stitch-ui-design-spec-generator**: Structured spec (theme, device, style) from vague requests.
 - **stitch-skill-creator**: Factory for new scenario skills.
 - **stitch-ued-guide**: UED guidelines and visual vocabulary.
-- **Stitch → Framework Components**: Six conversion skills (Vue 3 + Element/Bootstrap/Layui/Vant, uni-app + uView/uView Pro) that turn Stitch screens into runnable projects.
+- **Stitch → Framework Components**: Seven conversion skills (Vue 3 + Element/Bootstrap/Layui/Vant, uni-app + uView/uView Pro/uview-plus) that turn Stitch screens into runnable projects.
 - **agents/stitch-ui-designer.md**: Dedicated agent for Stitch UI workflows.
 
 ### When to Use Which
@@ -188,6 +188,7 @@ stitch-skills/
 *   **`stitch-vue-vant-components`**: Convert Stitch screens to Vue 3 + Vant 4 (Vite, .vue SFC, mobile-first).
 *   **`stitch-uview-components`**: Convert Stitch screens to uni-app + Vue 2 + uView 2.0 (pages/, u-* components).
 *   **`stitch-uviewpro-components`**: Convert Stitch screens to uni-app + Vue 3 + uView Pro (pages/, u-* components, rpx).
+*   **`stitch-uview-plus-components`**: Convert Stitch screens to uni-app + Vue 3 + `uview-plus` (pages/, `up-*` components, theme variables, safe-area-aware shells, and stronger popup/upload/tabbar guidance).
 
 ### Knowledge Skills
 *   **`stitch-ued-guide`**: Design guidelines, visual vocabulary, and prompt strategies used by other skills.
@@ -230,8 +231,10 @@ Example:
 > "Use Stitch and Bootstrap style to design a landing page."
 > "Use Stitch and Element Plus style to design a CRM dashboard."
 > "Use Stitch and uView Pro style to design a mobile app home screen."
+> "Use Stitch and uview-plus style to design a mobile commerce home screen."
 > "Convert the Stitch login screen to a Vue 3 + Element Plus project."
 > "Convert the Stitch dashboard to a uni-app + uView Pro project."
+> "Convert the Stitch product publish screen to a uni-app + uview-plus project."
 
 Expected tool chain:
 

skills/stitch-skills/README_CN.md

@@ -6,7 +6,7 @@
 
 ![Version](https://img.shields.io/badge/Version-1.0.0-blue)
 ![License](https://img.shields.io/badge/License-Apache%202.0-green)
-![Skills](https://img.shields.io/badge/Skills-25-orange)
+![Skills](https://img.shields.io/badge/Skills-29-orange)
 ![Plugins](https://img.shields.io/badge/Plugins-3-brightgreen)
 
 </div>
@@ -52,7 +52,7 @@
 - **stitch-ui-design-spec-generator**：从模糊需求生成结构化规范（主题、设备、风格）。
 - **stitch-skill-creator**：新场景技能的工厂。
 - **stitch-ued-guide**：UED 指南与视觉词汇。
-- **Stitch → 框架组件**：六个转换技能（Vue 3 + Element/Bootstrap/Layui/Vant，uni-app + uView/uView Pro），将 Stitch 屏幕转为可运行项目。
+- **Stitch → 框架组件**：七个转换技能（Vue 3 + Element/Bootstrap/Layui/Vant，uni-app + uView/uView Pro/uview-plus），将 Stitch 屏幕转为可运行项目。
 - **agents/stitch-ui-designer.md**：Stitch UI 工作流专用 agent。
 
 ### 何时用哪个
@@ -151,6 +151,7 @@ stitch-skills/
 *   **`stitch-vue-vant-components`**: 将 Stitch 屏幕转为 Vue 3 + Vant 4（Vite、.vue SFC、移动优先）。
 *   **`stitch-uview-components`**: 将 Stitch 屏幕转为 uni-app + Vue 2 + uView 2.0（pages/、u-* 组件）。
 *   **`stitch-uviewpro-components`**: 将 Stitch 屏幕转为 uni-app + Vue 3 + uView Pro（pages/、u-* 组件、rpx）。
+*   **`stitch-uview-plus-components`**: 将 Stitch 屏幕转为 uni-app + Vue 3 + `uview-plus`（pages/、`up-*` 组件、主题变量、安全区页壳，以及更强的 popup/upload/tabbar 约束）。
 
 ### 知识技能
 *   **`stitch-ued-guide`**: 被其他技能引用的设计指南、视觉词汇和提示词策略。
@@ -239,6 +240,7 @@ Trae 的 MCP 配置文件路径：
 - “使用 Stitch 和 Bootstrap 风格设计一个响应式的登录页”
 - “使用 Stitch 和 Element Plus 风格设计一个企业级后台管理系统”
 - “使用 Stitch 和 uView Pro 风格设计一个电商首页”
+- “使用 Stitch 和 uview-plus 风格设计一个移动电商首页”
 
 ### 端到端示例：使用 Stitch 实现 登录_PRD.md
 

skills/stitch-skills/stitch-uview-plus-components/LICENSE.txt

@@ -0,0 +1 @@
+Apache-2.0. See repository LICENSE.

skills/stitch-skills/stitch-uview-plus-components/SKILL.md

@@ -0,0 +1,151 @@
+---
+name: stitch-uview-plus-components
+description: "Convert Stitch designs into uni-app + Vue 3 + uview-plus pages and components. Use when the user mentions Stitch, uview-plus, up- components, or uni-app Vue 3 conversion targeting uview-plus. Retrieves screen HTML via Stitch MCP get_screen, rewrites Tailwind structure into up-* components, and enforces stronger setup, theme, safe-area, tabbar, popup, upload, and dark-mode rules than the generic uView Pro conversion skill."
+allowed-tools: "stitch*:*, Bash, Read, Write, web_fetch"
+---
+
+# Stitch to uni-app + uview-plus Components
+
+**Constraint**: Only use this skill when the user explicitly mentions **Stitch** and wants conversion to **uni-app + Vue 3 + uview-plus** with **`up-*`** components.
+
+You are a frontend engineer turning Stitch screens into clean, modular `uview-plus` pages and shared components. Use Stitch MCP (or **stitch-mcp-get-screen**) to retrieve metadata and HTML, then rebuild the screen with `up-*` components, `rpx`, and the current `uview-plus` theme/runtime model.
+
+## What makes this skill different
+
+This is not a rename of `stitch-uviewpro-components`.
+
+It is a stronger `uview-plus`-specific skill that:
+- defaults to **`up-*`** instead of `u-*`
+- aligns with current `uview-plus` docs, setup, and theme guidance
+- covers **`up-status-bar`**, **`up-safe-bottom`**, **`up-popup`**, **`up-upload`**, **`up-subsection`**, **`up-tabbar`**, **`up-empty`**, **`up-gap`**, and **`up-line`**
+- prefers CSS variables like **`--up-*`** and runtime theme config over hardcoded colors
+- requires stronger page-shell, safe-area, and bottom-CTA handling than the generic uView Pro skill
+
+## Prerequisites
+
+- Stitch MCP Server: https://stitch.withgoogle.com/docs/mcp/guide/
+- `uni-app` / HBuilderX or Vue CLI project using **Vue 3**
+- `uview-plus` installed and wired for Vue 3
+- Stitch project and screen IDs, resolved in one of two ways:
+  1. Parse a **Stitch design URL**: `projectId` from the `/projects/{id}` path and `screenId` from the `node-id` query
+  2. Browse with **stitch-mcp-list-projects** and **stitch-mcp-list-screens**
+
+## Official Documentation
+
+- **uview-plus docs**: https://ijry.github.io/uview-plus/
+- **Quick start**: https://ijry.github.io/uview-plus/components/quickstart.html
+- **Install / setup**: https://ijry.github.io/uview-plus/components/setting.html
+- **Setup rationale**: https://ijry.github.io/uview-plus/components/settingDesc.html
+- **Theme**: https://ijry.github.io/uview-plus/guide/theme.html
+- **Dark mode**: https://ijry.github.io/uview-plus/guide/darkMode.html
+- **Root bridge**: https://ijry.github.io/uview-plus/guide/root.html
+- Full links and key component docs: [references/official.md](references/official.md)
+
+## Retrieval and Networking
+
+1. **Discover Stitch MCP prefix**: inspect tools to find the Stitch namespace.
+2. **Resolve projectId and screenId**:
+   - If the user supplied a Stitch URL, parse both IDs directly
+   - Otherwise use **stitch-mcp-list-projects** and **stitch-mcp-list-screens**
+3. **Fetch screen metadata**: call **get_screen** to obtain design JSON, `htmlCode.downloadUrl`, `screenshot.downloadUrl`, dimensions, and device type.
+4. **Download HTML reliably**:
+   ```bash
+   bash scripts/fetch-stitch.sh "<htmlCode.downloadUrl>" "temp/source.html"
+   ```
+5. **Use the screenshot as the visual source of truth** when the exported HTML is structurally noisy.
+
+## Architectural Rules
+
+- **Use `up-*` only** when a `uview-plus` component exists. Do not generate `u-*` tags in this skill.
+- **Prefer modular output**: page shell, shared components, and extracted mock/static data instead of one large page file.
+- **Prefer framework-native rebuilds** over literal HTML translation. Reconstruct the page with `up-*` semantics.
+- **Prefer theme-aware styles**: use `var(--up-xxx)` and `setConfig({ color })` guidance instead of hardcoded colors when a theme token exists.
+- **Prefer runtime-safe page shells**:
+  - `up-navbar` for normal headers
+  - `up-status-bar` for custom branded headers
+  - `up-safe-bottom` for fixed bottom CTAs
+- **Read these before drafting code**:
+  - [references/component-index.md](references/component-index.md)
+  - [references/contract.md](references/contract.md)
+  - [references/stitch-html-patterns.md](references/stitch-html-patterns.md)
+  - [references/tailwind-to-uview-plus.md](references/tailwind-to-uview-plus.md)
+
+## Execution Steps
+
+1. **Environment**
+   - ensure `uview-plus` is installed
+   - ensure Vue 3 project wiring is valid
+   - ensure `App.vue`, `main.js`, and `uni.scss` follow current `uview-plus` guidance
+2. **Data layer**
+   - extract repeated text, options, tabs, and upload/demo lists into data modules or page state
+3. **Page drafting**
+   - start from [resources/page-template.vue](resources/page-template.vue)
+   - keep the page shell theme-aware and safe-area-aware
+4. **Component selection**
+   - use `up-tabs` or `up-subsection` for switching UI
+   - use `up-picker` / `up-popup` instead of raw `select`
+   - use `up-upload` instead of raw upload boxes
+   - use `up-tabbar` for bottom nav
+   - use `up-empty` for empty states
+5. **Quality check**
+   - verify against [resources/architecture-checklist.md](resources/architecture-checklist.md)
+   - make sure the final output is clearly stronger and more framework-native than a raw HTML rewrite
+
+## Official API alignment and common Stitch corrections
+
+When converting Stitch HTML, verify against [references/contract.md](references/contract.md) and the official `uview-plus` docs. Common corrections:
+
+| Design element | Wrong from Stitch / generic UI | Correct for uview-plus |
+|---|---|---|
+| Top tabs | custom `<view>` pills or button row | **`<up-tabs :list="..." :current="current" @change="...">`** or `v-model:current` |
+| Segmented filters | custom capsule buttons | **`<up-subsection :list="..." :current="..." @change="...">`** |
+| Picker/select | native `<select>` or raw popup list | **`<up-picker v-model:show="show" :columns="columns" @confirm="...">`** |
+| Popup/sheet | fixed custom overlay + absolute panel | **`<up-popup v-model:show="show" mode="bottom">`** |
+| Upload | dashed custom upload box + hidden file input | **`<up-upload :fileList="..." @afterRead="...">`** |
+| Bottom navigation | fixed footer buttons manually styled as nav | **`<up-tabbar :value="value" @change="...">`** |
+| Empty state | plain text "No data" | **`<up-empty text="No data">`** |
+| Divider / spacing | manual border and margin blocks | **`<up-line>`**, **`<up-divider>`**, **`<up-gap>`** |
+| Safe area | fixed bottom CTA without inset handling | **`<up-safe-bottom>`** wrapper |
+| Custom header | hardcoded spacer height | **`<up-status-bar>`** when not using `up-navbar` |
+| Theme | hex colors everywhere | `var(--up-*)`, theme tokens, and runtime color config |
+
+## Engineering guidance specific to uview-plus
+
+- `uview-plus` current docs favor **`up-*`** naming in examples. This skill should output that convention by default.
+- For `.vue` / `.uvue` pages, prefer CSS variables such as `var(--up-primary)` and `var(--up-bg-color)`.
+- For runtime theme customization, use `setConfig({ color })` guidance when the page needs explicit theme sync.
+- Keep `@import 'uview-plus/theme.scss';` semantics in mind when describing project wiring.
+- If the project uses the **Root bridge**, global calls like `uni.$u.toast()` can replace manually placing `up-toast` in every page.
+
+## Testing trigger
+
+Testing is command-triggered by the user, not by directly calling MCP for no reason.
+
+- **Example test command**:
+  ```text
+  Use the Stitch skill to convert https://stitch.withgoogle.com/projects/3492931393329678076?node-id=375b1aadc9cb45209bee8ad4f69af450 into a uview-plus page
+  ```
+- **Expected result**:
+  - parse `projectId` and `screenId`
+  - call Stitch MCP `get_screen`
+  - fetch the HTML
+  - output a `uni-app + Vue 3 + uview-plus` page using `up-*` components, safe-area-aware structure, and current theme guidance
+
+## Keywords
+
+**English:** Stitch, uview-plus, up-button, up-tabs, up-tabbar, up-popup, up-upload, uni-app, Vue 3.  
+**中文关键词：** Stitch、uview-plus、up 组件、uni-app、Vue3、页面转换。
+
+## References
+
+- [examples/usage.md](examples/usage.md)
+- [references/official.md](references/official.md)
+- [references/contract.md](references/contract.md)
+- [references/component-index.md](references/component-index.md)
+- [references/stitch-html-patterns.md](references/stitch-html-patterns.md)
+- [references/tailwind-to-uview-plus.md](references/tailwind-to-uview-plus.md)
+- [resources/architecture-checklist.md](resources/architecture-checklist.md)
+- [resources/page-template.vue](resources/page-template.vue)
+- [api/component-api.md](api/component-api.md)
+- [scripts/fetch-stitch.sh](scripts/fetch-stitch.sh)
+- [Stitch API / MCP](https://stitch.withgoogle.com/docs/mcp/guide/)

skills/stitch-skills/stitch-uview-plus-components/api/component-api.md

@@ -0,0 +1,72 @@
+# uview-plus Component API (Stitch conversion reference)
+
+Use this file as a quick contract reference when generating `up-*` output.
+
+## up-tabs
+
+| Concern | Contract |
+|---|---|
+| Basic usage | `<up-tabs :list="tabList" :current="current" @change="handleChange" />` |
+| Two-way option | `v-model:current` |
+| Data shape | list items are objects, commonly with `name` |
+| Use case | top tab switching, category tabs |
+
+## up-subsection
+
+| Concern | Contract |
+|---|---|
+| Basic usage | `<up-subsection :list="list" :current="current" @change="handleChange" />` |
+| Styling | `activeColor`, `inactiveColor` |
+| Use case | compact segmented control |
+
+## up-form
+
+| Concern | Contract |
+|---|---|
+| Basic usage | `<up-form :model="form" ref="formRef">` |
+| Field wrapper | `up-form-item` |
+| Typical children | `up-input`, `up-textarea`, `up-switch`, `up-radio-group`, `up-picker` trigger |
+| Notes | keep page model explicit; use Vue 3 slot syntax where needed |
+
+## up-picker
+
+| Concern | Contract |
+|---|---|
+| Visibility | `v-model:show="showPicker"` or `:show="showPicker"` |
+| Data | `:columns="columns"` |
+| Events | `@confirm`, `@change` |
+| Optional selection binding | `v-model="selected"` |
+| Notes | this skill follows the current `uview-plus` `columns` API |
+
+## up-popup
+
+| Concern | Contract |
+|---|---|
+| Visibility | `v-model:show="showPopup"` |
+| Position | `mode="bottom"`, `mode="center"`, etc. |
+| Events | `@open`, `@close` |
+| Notes | default fix for exported custom sheets and overlays |
+
+## up-upload
+
+| Concern | Contract |
+|---|---|
+| Basic usage | `<up-upload :fileList="fileList" @afterRead="afterRead" @delete="onDelete" />` |
+| Common props | `multiple`, `maxCount`, `previewFullImage`, `name` |
+| Notes | prefer component-managed upload UX over custom dashed boxes |
+
+## up-tabbar
+
+| Concern | Contract |
+|---|---|
+| Basic usage | `<up-tabbar :value="value" @change="name => value = name">` |
+| Items | `<up-tabbar-item name="home" text="首页" icon="home" />` |
+| Notes | use `name` for route/app section identity |
+
+## up-safe-bottom and up-status-bar
+
+| Concern | Contract |
+|---|---|
+| Bottom CTA | wrap fixed action bars with `up-safe-bottom` |
+| Top custom inset | use `up-status-bar` when not relying on `up-navbar` |
+| Notes | these two components are part of the stronger page-shell guidance of this skill |

skills/stitch-skills/stitch-uview-plus-components/examples/usage.md

@@ -0,0 +1,50 @@
+# stitch-uview-plus-components Usage
+
+## When to use
+
+- The user explicitly mentions **Stitch** and wants a **uni-app + Vue 3 + uview-plus** page or component set.
+- The target output should default to **`up-*`** tags, not `u-*`.
+- The page needs stronger `uview-plus` engineering guidance: theme variables, safe area, dark mode, popup/upload/tabbar, or bottom CTA handling.
+
+## Typical workflow
+
+1. Resolve `projectId` and `screenId` from a Stitch URL or from project/screen browsing.
+2. Call Stitch MCP `get_screen`.
+3. Download `htmlCode` with `scripts/fetch-stitch.sh`.
+4. Use the screenshot as the layout truth source.
+5. Rebuild the page with `up-*` components and current `uview-plus` conventions.
+6. Use the checklist in `resources/architecture-checklist.md`.
+
+## Example user prompts
+
+### Direct URL → page conversion
+
+> Use the Stitch skill to convert `https://stitch.withgoogle.com/projects/123?node-id=abc` into a `uview-plus` page with `up-*` components.
+
+### Browse project then convert one screen
+
+> Use Stitch to list my screens, pick the order detail screen, and convert it into a uni-app Vue 3 `uview-plus` page.
+
+### Login / register form flow
+
+> Convert this Stitch auth screen into a `uview-plus` login page using `up-form`, `up-input`, `up-button`, and bottom safe-area handling.
+
+### Home page with bottom navigation
+
+> Convert this Stitch mobile home screen into `uview-plus` with `up-navbar`, `up-tabs`, cards, and `up-tabbar`.
+
+### Popup + upload interaction
+
+> Convert this Stitch product publish screen into `uview-plus`, using `up-picker`, `up-popup`, and `up-upload` instead of raw HTML controls.
+
+### Dark-mode-aware page
+
+> Convert this Stitch profile screen into a `uview-plus` page that uses `var(--up-*)` theme variables and respects dark mode.
+
+## What good output looks like
+
+- Uses `up-*` consistently
+- Rebuilds structure instead of preserving Tailwind classes
+- Uses `up-status-bar` / `up-safe-bottom` where the layout needs them
+- Uses `up-tabbar`, `up-popup`, `up-upload`, `up-empty`, `up-gap`, and `up-line` when those patterns appear in the design
+- Extracts repeated data into state or data modules rather than hardcoding everything inline

skills/stitch-skills/stitch-uview-plus-components/references/component-index.md

@@ -0,0 +1,74 @@
+# uview-plus Component Index
+
+Use framework components when available. For this skill, prefer **`up-*`** over raw HTML and over older `u-*` examples.
+
+## Navigation and structure
+
+| Need | Component | Notes |
+|---|---|---|
+| standard mobile header | `up-navbar` | default page header |
+| custom top inset / branded header | `up-status-bar` | when not using navbar |
+| top tab switching | `up-tabs` | full-width switching UI |
+| short segmented switching | `up-subsection` | compact pills or mode switch |
+| bottom app navigation | `up-tabbar` + `up-tabbar-item` | use `value` + `name` |
+| section spacing | `up-gap` | vertical block spacing |
+| separators | `up-line`, `up-divider` | semantic divider components |
+| empty state | `up-empty` | empty list / no-result states |
+
+## Cards and list rows
+
+| Need | Component | Notes |
+|---|---|---|
+| marketing/info card | `up-card` | primary card container |
+| settings rows | `up-cell-group` + `up-cell` | dense row content |
+| swipe row actions | `up-swipe-action` | delete/archive/etc. |
+| image or carousel section | `up-swiper`, `up-image` | visual display |
+
+## Forms and input
+
+| Need | Component | Notes |
+|---|---|---|
+| form shell | `up-form` + `up-form-item` | model + rules |
+| single-line text | `up-input` | default input |
+| multi-line content | `up-textarea` | long text |
+| option selection | `up-picker` | uses `columns` |
+| popup-based selector | `up-popup` | richer custom option UI |
+| radio choices | `up-radio-group` + `up-radio` | current docs use `name` + `label` |
+| toggle | `up-switch` | boolean switch |
+| quantity | `up-number-box` | plus/minus stepper |
+| search | `up-search` | search field |
+| upload | `up-upload` | images/files |
+
+## Feedback and overlays
+
+| Need | Component | Notes |
+|---|---|---|
+| bottom sheet | `up-popup` | standard panel overlay |
+| action menu | `up-action-sheet` | simple action list |
+| confirm dialog | `up-modal` | destructive / confirm flows |
+| toast / notify | `uni.$u.toast()` or `up-toast` | depends on Root bridge |
+| loading | `up-loading-icon`, `up-overlay` | loading affordances |
+
+## Safe-area and runtime helpers
+
+| Need | Component / pattern | Notes |
+|---|---|---|
+| bottom CTA inset | `up-safe-bottom` | fixed submit/action bar |
+| top safe-area inset | `up-status-bar` | custom top header alignment |
+| dark-mode styling | `var(--up-*)` | prefer theme variables |
+| runtime theme sync | `setConfig({ color })` | use when explicit runtime sync is needed |
+
+## Design element → component mapping
+
+| Design element | Use this | Do not use |
+|---|---|---|
+| button | `up-button` | raw `<button>` |
+| tab row | `up-tabs` | custom button strip |
+| segmented pills | `up-subsection` | custom rounded filter chips |
+| select field | `up-picker` or `up-popup` + list | native `<select>` |
+| card panel | `up-card` | styled `<view class="card">` |
+| setting row | `up-cell` | custom flex row everywhere |
+| upload box | `up-upload` | dashed box + hidden file input |
+| fixed submit footer | `up-safe-bottom` + `up-button` | fixed footer without inset handling |
+| empty state | `up-empty` | plain text placeholder |
+| divider | `up-line`, `up-divider` | anonymous border block |

skills/stitch-skills/stitch-uview-plus-components/references/contract.md

@@ -0,0 +1,165 @@
+# uview-plus Design Contract (Stitch HTML → uni-app Page Mapping)
+
+This file defines how to turn Stitch-generated HTML into **uni-app + Vue 3 + uview-plus** output. The target convention is **`up-*`** components, theme-aware styles, and a safe-area-aware page shell.
+
+## 1. Framework assumptions
+
+- Use **Vue 3**
+- Use **`uview-plus`**
+- Default generated tags to **`up-*`**
+- Use **`rpx`** for spacing and typography
+- Prefer **`<script setup>`**
+- Register pages in `pages.json`
+
+## 2. Theme and runtime rules
+
+### Prefer current uview-plus theme guidance
+
+- In `.vue` / `.uvue` pages, prefer CSS variables such as:
+  - `var(--up-primary)`
+  - `var(--up-bg-color)`
+  - `var(--up-border-color)`
+  - `var(--up-content-color)`
+  - `var(--up-navbar-bg-color)`
+- When the generated page needs explicit runtime color sync, describe or use `setConfig({ color })`.
+- Keep legacy `uni.scss` bridge guidance compatible with `@import 'uview-plus/theme.scss';`.
+
+### Page shell rules
+
+- Normal page header: use **`up-navbar`**
+- Custom branded header: use **`up-status-bar`** plus a custom header view
+- Fixed bottom CTA: wrap it with **`up-safe-bottom`**
+- Empty page state: use **`up-empty`**
+- Vertical spacing between large sections: use **`up-gap`**
+- Divider line: use **`up-line`** or **`up-divider`**
+
+## 3. Output structure rules
+
+- Prefer:
+  - page shell
+  - shared components
+  - extracted data lists / tabs / options
+  - theme-aware styles
+- Avoid a single huge page file when the design naturally splits into cards, upload zones, or repeated list rows.
+
+## 4. Component mapping
+
+| Stitch / generic pattern | Use in uview-plus | Notes |
+|---|---|---|
+| sticky mobile header | `up-navbar` | use `autoBack` for back flows |
+| custom branded top spacer | `up-status-bar` | for custom top chrome, not ordinary pages |
+| top tabs / category tabs | `up-tabs` | do not keep custom `<view>` tab bars |
+| segmented filter pills | `up-subsection` | for short mutually exclusive option sets |
+| card block with title/content | `up-card` | use card slots for richer content |
+| dense settings rows | `up-cell-group` + `up-cell` | better than ad hoc rows |
+| form wrapper | `up-form` + `up-form-item` | use page model and rules where appropriate |
+| text input | `up-input` | use inside form item |
+| multi-line field | `up-textarea` | prefer component over raw textarea |
+| picker / option sheet | `up-picker` | use `v-model:show` and `columns` |
+| popup / bottom sheet | `up-popup` | use for custom content containers |
+| destructive / confirm dialog | `up-modal` or `up-popup` | do not hand-roll overlays |
+| upload area | `up-upload` | use component events and file list |
+| radio choices | `up-radio-group` + `up-radio` | in `uview-plus`, radio examples use `name` + `label` |
+| switch / boolean toggle | `up-switch` | instead of peer checkbox UI |
+| bottom navigation | `up-tabbar` + `up-tabbar-item` | use `value` + `name` |
+| empty state | `up-empty` | not plain text |
+| section spacing | `up-gap` | avoid random spacer views |
+| separators | `up-line` / `up-divider` | avoid raw border divs |
+
+## 5. Strong API expectations
+
+### Tabs
+
+- Use:
+  ```vue
+  <up-tabs :list="tabList" :current="current" @change="handleTabChange" />
+  ```
+  or `v-model:current` where appropriate.
+- `up-tabs` is the default for broad mobile top tab switching.
+- Do not implement tabs with raw views/buttons.
+
+### Subsection
+
+- Use `up-subsection` for short segmented switches where `up-tabs` would be visually too heavy.
+- Good fit for two-to-four mode toggles or filter capsules.
+
+### Picker
+
+- Use:
+  ```vue
+  <up-picker v-model:show="showPicker" :columns="columns" @confirm="onConfirm" />
+  ```
+- Prefer `v-model:show` when possible.
+- `uview-plus` picker uses **`columns`**, not the `:range` convention from the other skill.
+- When the design is really a full bottom sheet, use `up-popup` and put a richer selection UI inside it instead of abusing picker.
+
+### Popup
+
+- Use:
+  ```vue
+  <up-popup v-model:show="showPopup" mode="bottom" :round="16" />
+  ```
+- This is the default fix for custom fixed overlays, action drawers, and sheet panels exported from Stitch.
+
+### Upload
+
+- Use:
+  ```vue
+  <up-upload :fileList="fileList" @afterRead="afterRead" @delete="onDelete" />
+  ```
+- Prefer component-provided preview/add/delete behavior over hand-built dashed boxes.
+
+### Radio
+
+- Follow current `uview-plus` examples:
+  ```vue
+  <up-radio-group v-model="value">
+    <up-radio :name="item.name" :label="item.label" />
+  </up-radio-group>
+  ```
+- Do not carry over the `value`-based radio rule from `stitch-uviewpro-components`.
+
+### Tabbar
+
+- Use:
+  ```vue
+  <up-tabbar :value="currentTab" @change="name => currentTab = name">
+    <up-tabbar-item name="home" text="首页" icon="home" />
+  </up-tabbar>
+  ```
+- Use for app-level bottom navigation only, not ordinary page actions.
+
+### Safe bottom
+
+- Fixed submit bars, purchase bars, or footer CTAs should use:
+  ```vue
+  <up-safe-bottom>
+    <view class="footer-bar">
+      <up-button type="primary">提交</up-button>
+    </view>
+  </up-safe-bottom>
+  ```
+
+## 6. Anti-patterns
+
+- Do not generate `u-*` tags in this skill. Use `up-*`.
+- Do not leave Tailwind classes in the final template unless the project explicitly uses Tailwind.
+- Do not keep native `<button>`, `<input>`, `<select>`, or raw popup overlays when `up-*` components exist.
+- Do not hardcode top spacer heights when `up-navbar` or `up-status-bar` solves the problem.
+- Do not create bottom fixed CTAs without `up-safe-bottom`.
+- Do not render "No data" as plain text if `up-empty` is a fit.
+- Do not hand-build separators if `up-line`, `up-divider`, or `up-gap` expresses the intent.
+- Do not assume the `uView Pro` picker/radio API. This skill must follow **current `uview-plus` docs**.
+- In Vue 3 output, prefer named template slots such as `#suffix`, `#foot`, or `#body` over legacy `slot="..."` syntax.
+
+## 7. Root bridge guidance
+
+- If the consuming project has the Root bridge enabled, global methods like `uni.$u.toast()` are preferred over placing `up-toast` on every page.
+- If the consuming project does not use the Root bridge, add the required feedback component explicitly.
+
+## 8. Before writing code
+
+Read:
+- [component-index.md](component-index.md)
+- [stitch-html-patterns.md](stitch-html-patterns.md)
+- [tailwind-to-uview-plus.md](tailwind-to-uview-plus.md)

skills/stitch-skills/stitch-uview-plus-components/references/official.md

@@ -0,0 +1,36 @@
+# uview-plus Official References
+
+- **Official docs**: https://ijry.github.io/uview-plus/
+- **Quick start**: https://ijry.github.io/uview-plus/components/quickstart.html
+- **Install / setup**: https://ijry.github.io/uview-plus/components/setting.html
+- **Setup details**: https://ijry.github.io/uview-plus/components/settingDesc.html
+- **Theme guide**: https://ijry.github.io/uview-plus/guide/theme.html
+- **Dark mode guide**: https://ijry.github.io/uview-plus/guide/darkMode.html
+- **Root bridge**: https://ijry.github.io/uview-plus/guide/root.html
+
+## Key component docs
+
+| Component | Doc |
+|---|---|
+| Button | https://ijry.github.io/uview-plus/components/button.html |
+| Form | https://ijry.github.io/uview-plus/components/form.html |
+| Picker | https://ijry.github.io/uview-plus/components/picker.html |
+| Popup | https://ijry.github.io/uview-plus/components/popup.html |
+| Upload | https://ijry.github.io/uview-plus/components/upload.html |
+| Tabs | https://ijry.github.io/uview-plus/components/tabs.html |
+| Subsection | https://ijry.github.io/uview-plus/components/subsection.html |
+| Tabbar | https://ijry.github.io/uview-plus/components/tabbar.html |
+| Card | https://ijry.github.io/uview-plus/components/card.html |
+| Cell | https://ijry.github.io/uview-plus/components/cell.html |
+| Gap | https://ijry.github.io/uview-plus/components/gap.html |
+| Line | https://ijry.github.io/uview-plus/components/line.html |
+| Empty | https://ijry.github.io/uview-plus/components/empty.html |
+| Navbar | https://ijry.github.io/uview-plus/components/navbar.html |
+| Radio | https://ijry.github.io/uview-plus/components/radio.html |
+| Safe area / status bar | https://ijry.github.io/uview-plus/components/safeAreaInset.html |
+
+## Usage in this skill
+
+1. Prefer the official `uview-plus` docs over older `uView Pro` assumptions whenever APIs differ.
+2. Use the setup, theme, dark-mode, and root-bridge guides when generating project wiring notes.
+3. Use the component docs when mapping Stitch structures to `up-*` components.

skills/stitch-skills/stitch-uview-plus-components/references/stitch-html-patterns.md

@@ -0,0 +1,99 @@
+# Stitch HTML → uview-plus Patterns
+
+Stitch exports Tailwind-heavy HTML. Rebuild the layout into `uni-app + Vue 3 + uview-plus`; do not preserve the HTML literally.
+
+## 1. Page shell
+
+| Stitch pattern | uview-plus pattern |
+|---|---|
+| sticky mobile header with back icon and title | `up-navbar` |
+| branded custom top bar with manual padding | `up-status-bar` + branded header view |
+| full-page content area with large vertical spacing | `scroll-view` + `up-gap` + themed content container |
+| fixed bottom button row | `up-safe-bottom` + footer bar + `up-button` |
+
+## 2. Top switching UI
+
+| Stitch pattern | uview-plus pattern |
+|---|---|
+| wide tab strip | `up-tabs` |
+| short filter pill switch | `up-subsection` |
+| custom underline tab bar | `up-tabs` with current/change binding |
+
+## 3. Cards and lists
+
+| Stitch pattern | uview-plus pattern |
+|---|---|
+| rounded shadow card with title/content | `up-card` |
+| multiple dense settings or detail rows | `up-cell-group` + `up-cell` |
+| list row with slide actions | `up-swipe-action` |
+| empty list | `up-empty` |
+
+## 4. Forms
+
+| Stitch pattern | uview-plus pattern |
+|---|---|
+| label + input | `up-form-item` + `up-input` |
+| label + multiline input | `up-form-item` + `up-textarea` |
+| label + segmented mode selection | `up-subsection` or `up-radio-group` |
+| label + option chooser | `up-picker` or `up-popup` |
+| label + switch | `up-switch` |
+| label + upload area | `up-upload` |
+
+## 5. Popup and sheet interactions
+
+| Stitch pattern | uview-plus pattern |
+|---|---|
+| bottom sheet panel | `up-popup mode="bottom"` |
+| center dialog | `up-popup mode="center"` or `up-modal` |
+| action list | `up-action-sheet` |
+
+## 6. Tailwind-heavy visual blocks
+
+When Stitch gives you combinations like:
+- `rounded-xl shadow-soft bg-white`
+- `sticky bottom-0`
+- `space-y-4`
+- `divide-y`
+
+Translate them into:
+- `up-card`
+- `up-safe-bottom`
+- `up-gap`
+- `up-line` / `up-divider`
+
+The goal is a semantic `uview-plus` page, not a Tailwind page rewritten into Vue.
+
+## 7. Common conversions
+
+### Auth screen
+
+- header → `up-navbar`
+- form → `up-form`
+- fields → `up-input`
+- CTA → `up-safe-bottom` + `up-button`
+
+### Settings / profile screen
+
+- page sections → `up-card` or `up-cell-group`
+- boolean rows → `up-cell` + right-side content or `up-switch`
+- navigation rows → `up-cell` with link affordance
+
+### Publish / create screen
+
+- type switch → `up-subsection`
+- category / option selection → `up-picker`
+- media area → `up-upload`
+- bottom submit bar → `up-safe-bottom`
+
+### Home / dashboard screen
+
+- top switching → `up-tabs`
+- content cards → `up-card`
+- bottom app nav → `up-tabbar`
+
+## 8. Anti-patterns
+
+- Do not keep Tailwind utility classes in the final template.
+- Do not use raw HTML form controls when a `up-*` component exists.
+- Do not manually simulate safe areas with magic numbers.
+- Do not hand-roll upload, popup, or tabbar behavior.

skills/stitch-skills/stitch-uview-plus-components/references/tailwind-to-uview-plus.md

@@ -0,0 +1,67 @@
+# Tailwind → uview-plus Mapping
+
+Convert Tailwind-heavy Stitch HTML into `uview-plus` structure, `rpx`, and theme variables. Do not emit Tailwind classes in the final page unless the target project explicitly uses Tailwind.
+
+## 1. Spacing
+
+| Tailwind | Approx px | Use in output |
+|---|---:|---|
+| `p-2` | 8 | `16rpx` |
+| `p-3` | 12 | `24rpx` |
+| `p-4` | 16 | `32rpx` |
+| `p-5` | 20 | `40rpx` |
+| `px-4` | 16 | `padding-left/right: 32rpx` |
+| `py-3` | 12 | `padding-top/bottom: 24rpx` |
+| `gap-2` | 8 | `16rpx` or `up-gap` |
+| `gap-4` | 16 | `32rpx` or `up-gap` |
+| `space-y-4` | 16 | child margin or `up-gap` |
+
+## 2. Typography
+
+| Tailwind | Approx px | Use in output |
+|---|---:|---|
+| `text-xs` | 12 | `24rpx` |
+| `text-sm` | 14 | `28rpx` |
+| `text-base` | 16 | `30rpx` |
+| `text-lg` | 18 | `36rpx` |
+| `font-medium` | 500 | `font-weight: 500` |
+| `font-bold` | 700 | `font-weight: 700` |
+
+Prefer `var(--up-content-color)` / `var(--up-main-color)` / related theme variables instead of hardcoded text colors.
+
+## 3. Colors
+
+| Tailwind / Stitch token | Prefer in output |
+|---|---|
+| `bg-white` | card/container background or `up-card` |
+| `bg-gray-50` | `var(--up-bg-color)` or a themed container |
+| `text-primary` / brand blue | `var(--up-primary)` when applicable |
+| `text-gray-500` | `var(--up-tips-color)` or `var(--up-content-color)` |
+| `border-gray-200` | `var(--up-border-color)` |
+
+## 4. Radius and shadows
+
+| Tailwind | Use in output |
+|---|---|
+| `rounded` | `8rpx` |
+| `rounded-lg` | `16rpx` |
+| `rounded-xl` | `20rpx` |
+| `rounded-full` | pill / circle |
+| `shadow-sm` / `shadow-soft` | prefer `up-card`, otherwise a lightweight box shadow |
+
+## 5. Structural conversions
+
+| Tailwind pattern | uview-plus rewrite |
+|---|---|
+| `sticky top-0` | `up-navbar` or `up-status-bar` + custom header |
+| `sticky bottom-0` | `up-safe-bottom` |
+| `grid grid-cols-2` | `up-row` + `up-col` or explicit flex grid |
+| `divide-y` | `up-line` / `up-divider` |
+| dashed upload box | `up-upload` |
+| tab strip | `up-tabs` / `up-subsection` |
+
+## 6. Theme guidance
+
+- Prefer `var(--up-*)` in page styles.
+- If the generated output needs a note about runtime theming, reference `setConfig({ color })`.
+- If the design contains dark-mode intent, keep the page styles token-based so they naturally follow the active theme.

skills/stitch-skills/stitch-uview-plus-components/resources/architecture-checklist.md

@@ -0,0 +1,35 @@
+# Architecture Quality Gate (uni-app + uview-plus)
+
+## Structural integrity
+
+- [ ] Page shell uses `up-navbar` or `up-status-bar` intentionally.
+- [ ] Fixed bottom CTA uses `up-safe-bottom`.
+- [ ] Repeated blocks are extracted into shared components when appropriate.
+- [ ] Large option lists, tab lists, and upload state are not hardcoded everywhere.
+
+## uview-plus usage
+
+- [ ] Output uses **`up-*`** consistently, not `u-*`.
+- [ ] Top switching uses `up-tabs` or `up-subsection`, not custom view/button tabs.
+- [ ] Picker/select behavior uses `up-picker` or `up-popup`, not native `<select>`.
+- [ ] Upload zones use `up-upload`.
+- [ ] Empty states use `up-empty`.
+- [ ] Bottom navigation uses `up-tabbar` when the screen is app-level navigation.
+- [ ] Divider / spacing uses `up-line`, `up-divider`, or `up-gap` where appropriate.
+
+## Theme and runtime
+
+- [ ] Styles prefer `var(--up-*)` tokens when a theme variable exists.
+- [ ] Dark-mode-aware pages avoid baking every color into raw hex values.
+- [ ] Runtime guidance matches current `uview-plus` setup expectations.
+
+## Stitch conversion quality
+
+- [ ] Tailwind classes are not copied into the final template by default.
+- [ ] Raw HTML controls are not left behind when `up-*` equivalents exist.
+- [ ] The page looks like a `uview-plus` page, not a stitched HTML wrapper.
+
+## Validation
+
+- [ ] Discovery surfaces reference the new skill.
+- [ ] `git diff --check` passes.

skills/stitch-skills/stitch-uview-plus-components/resources/page-template.vue

@@ -0,0 +1,92 @@
+<template>
+  <view class="page-shell">
+    <up-status-bar v-if="useCustomStatusBar" />
+    <up-navbar
+      v-if="showNavbar"
+      :title="pageTitle"
+      :autoBack="true"
+      placeholder
+      bgColor="var(--up-navbar-bg-color)"
+    />
+
+    <scroll-view scroll-y class="page-shell__scroll">
+      <view class="page-shell__content">
+        <up-card :title="pageTitle" :border="false">
+          <template #body>
+            <view class="page-shell__body">
+              <up-text
+                text="Replace this scaffold with Stitch-derived content."
+                color="var(--up-content-color)"
+                size="28"
+              />
+            </view>
+          </template>
+        </up-card>
+
+        <up-gap height="24" bgColor="transparent" />
+      </view>
+    </scroll-view>
+
+    <view v-if="showBottomBar" class="page-shell__footer">
+      <up-safe-bottom>
+        <view class="page-shell__footer-inner">
+          <up-button
+            type="primary"
+            :loading="submitting"
+            shape="circle"
+            @click="handlePrimaryAction"
+          >
+            {{ primaryActionText }}
+          </up-button>
+        </view>
+      </up-safe-bottom>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const pageTitle = ref('Page Title')
+const showNavbar = ref(true)
+const useCustomStatusBar = ref(false)
+const showBottomBar = ref(true)
+const submitting = ref(false)
+const primaryActionText = ref('Submit')
+
+function handlePrimaryAction() {
+  uni.$u.toast('Wire the primary action for this page')
+}
+</script>
+
+<style lang="scss" scoped>
+.page-shell {
+  min-height: 100vh;
+  background: var(--up-bg-color);
+}
+
+.page-shell__scroll {
+  min-height: 100vh;
+}
+
+.page-shell__content {
+  padding: 24rpx 24rpx 0;
+}
+
+.page-shell__body {
+  display: flex;
+  flex-direction: column;
+  gap: 24rpx;
+}
+
+.page-shell__footer {
+  position: sticky;
+  bottom: 0;
+}
+
+.page-shell__footer-inner {
+  padding: 16rpx 24rpx 24rpx;
+  background: var(--up-bg-color);
+  border-top: 1px solid var(--up-border-color);
+}
+</style>

skills/stitch-skills/stitch-uview-plus-components/scripts/fetch-stitch.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+# High-reliability fetch for Stitch HTML (handles redirects and TLS).
+# Usage: ./fetch-stitch.sh "<htmlCode.downloadUrl>" "temp/source.html"
+set -e
+URL=$1
+OUTPUT=$2
+if [ -z "$URL" ] || [ -z "$OUTPUT" ]; then
+  echo "Usage: $0 <url> <output_path>" >&2
+  exit 1
+fi
+echo "Fetching Stitch HTML for uview-plus conversion..." >&2
+curl -L -f -sS --connect-timeout 10 --compressed "$URL" -o "$OUTPUT"
+echo "Saved to: $OUTPUT" >&2