Agent skill

stitch-ui-design-spec-vant

Vant 4 (Vue 3/Mobile) design spec for Stitch screen generation. Use when the user mentions Vant, vant4, or vant-ui in a Stitch design request. Outputs a hard-constraints prefix with Vant tokens (Primary #1989fa, van-button/van-field/van-nav-bar components, mobile-first 375px) or a CONTRACT_SELECTION_JSON_V1 selector.

View SKILL.md on GitHub Repository
Stars 254
Forks 41

Install this agent skill to your Project

npx add-skill https://github.com/partme-ai/full-stack-skills/tree/main/skills/stitch-skills/stitch-ui-design-spec-vant

SKILL.md

Vant Design Spec (Vant 4 / Vue 3)

Constraint: Only use this skill when the user explicitly mentions "Stitch".

Purpose

This skill makes the Vant 4 design spec executable in two modes:

  1. Prefix mode: output a paste-ready Hard constraints prefix for Stitch [Context].
  2. Selector mode: output CONTRACT_SELECTION_JSON_V1 and then an assembled Stitch prompt that injects only the required component/state snippets.

Trigger Keywords

Prefer this skill when the user request includes any of:

  • vant, vant4, vant-ui, vant ui

Chinese trigger keywords (only for triggering):

  • vant 风格
  • vant 组件库

Source of Truth

  • references/contract.md
  • references/examples.md
  • references/official.md

Output (STRICT)

Decide the mode by the user intent:

  • If the user asks for beautify/polish/refine an existing screen, or asks for selector / JSON / contracts.include / states.include → use Selector mode.
  • Otherwise → use Prefix mode.

Prefix mode

Return exactly one code block:

text
[Hard constraints prefix]
- Framework: Vant 4 (Vue 3 / Mobile).
- Design Tokens:
  - Colors: Primary=#1989fa (Blue), Success=#07c160, Warning=#ff976a, Danger=#ee0a24.
  - Background: Page=#f7f8fa, Card=#ffffff.
  - Typography: Base 14px.
  - Radius: sm=2px, md=4px, lg=8px.
- Component Contracts:
  - Layout: Use <van-row>, <van-col span="...">. Container: <van-config-provider>.
  - List/Card: Use <van-cell-group inset> for card style groups.
  - Buttons: Use <van-button type="primary" round block>.
  - Forms: Use <van-form>, <van-field>, <van-search>, <van-picker>, <van-date-picker>.
  - Business: <van-card> (Product), <van-submit-bar>, <van-address-list>, <van-coupon-list>.
  - Navigation: <van-nav-bar>, <van-tabbar>, <van-sidebar>, <van-tabs>.
  - Feedback: <van-action-sheet>, <van-swipe-cell>, <van-empty>.
- Layout Invariants:
  - Mobile First (375px base).
  - Use Flexbox for alignment.
  - Respect Safe Area.

Selector mode

Return exactly two code blocks, in this order, with no extra prose:

  1. Contract selection JSON:
json
{
  "version": "CONTRACT_SELECTION_JSON_V1",
  "designSystem": "vant4",
  "mode": "selector",
  "contracts": { "include": [] },
  "states": { "include": [] }
}
  1. Final Stitch prompt:
text
[Context]
(Paste Hard Constraints Prefix here)
(Add "Layout Invariants" from contract.md if beautifying)

[Layout]
(Describe the macro layout structure, e.g., "Mobile Column Layout with Navbar")

[Components]
(Inject component snippets matching the JSON selection above)

References

  • Contract
  • Examples
  • Official Docs

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

partme-ai/full-stack-skills

ocrmypdf-batch

OCRmyPDF batch processing skill — process multiple PDFs, Docker automation, shell scripting, and CI/CD integration. Use when the user needs to OCR many PDFs, set up automated OCR pipelines, or integrate OCR into workflows.

254 41
Explore
partme-ai/full-stack-skills

ocrmypdf-optimize

OCRmyPDF optimization skill — compress PDFs, configure PDF/A output, JBIG2 encoding, and lossless optimization. Use when the user needs to reduce PDF file size, create archival PDF/A files, or optimize OCR output.

254 41
Explore
partme-ai/full-stack-skills

ocrmypdf-image

OCRmyPDF image processing skill — deskew, rotate, clean, despeckle, remove border from scanned documents. Use when the user needs to improve scanned PDF quality, fix skewed pages, remove noise, or clean up scanned documents before OCR.

254 41
Explore
partme-ai/full-stack-skills

ocrmypdf-api

OCRmyPDF Python API and plugin skill — use OCRmyPDF programmatically from Python, integrate with applications, and extend with plugins (EasyOCR, PaddleOCR, AppleOCR). Use when the user needs to call OCRmyPDF from Python code, build OCR pipelines, or use alternative OCR engines.

254 41
Explore
partme-ai/full-stack-skills

ocrmypdf

OCRmyPDF core skill — add searchable OCR text layer to scanned PDFs, convert images to searchable PDFs, support 100+ languages via Tesseract. Use when the user needs to OCR a PDF, make a scanned PDF searchable, or extract text from scanned documents.

254 41
Explore
partme-ai/full-stack-skills

svelte

Guides Svelte and SvelteKit development including reactive components, stores, transitions, lifecycle hooks, SSR, file-based routing, and deployment. Use when the user needs to build Svelte components, create SvelteKit applications, implement reactivity patterns, or configure Svelte with Vite.

254 41
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results