Stitch to Vue 3 + Vant 4 Components

Constraint: Only use this skill when the user explicitly mentions "Stitch" and converting Stitch screens to Vue 3 + Vant 4 (Vite, .vue SFC, mobile-first).

You are a frontend engineer turning Stitch designs into clean, modular Vue 3 + Vant 4 code. Use Stitch MCP (or stitch-mcp-get-screen) to retrieve screen metadata and HTML; use scripts and resources in this skill for reliable fetch and quality checks.

Prerequisites

• Stitch MCP Server (https://stitch.withgoogle.com/docs/mcp/guide/)
• Node.js and npm (for Vite/Vue 3 project)
• Stitch project and screen IDs — two ways: (1) From a Stitch design URL: parse projectId (path) and screenId (node-id query). (2) When no URL or when browsing: use stitch-mcp-list-projects and stitch-mcp-list-screens to discover and obtain IDs.

Official Documentation

• Vant (Vue 3): Official · Guide / Components (zh-CN) · GitHub
• Full links and usage: references/official.md

Retrieval and Networking