What is Contract Selection JSON V1?

A structured JSON payload that specifies which contracts and states to include when using the selector mode.

When should I use Prefix mode vs Selector mode?

Use Prefix mode for a ready-to-paste hard constraints prefix. Use Selector mode to produce a JSON contract selection plus a final prompt for selective component/state injection.

What triggers this skill?

Any request that mentions Stitch and uView Pro design specs triggers the skill; triggers include keywords like 'uview-pro', 'uview pro', and explicit Stitch references.

stitch-ui-design-spec-uviewpro

npx machina-cli add skill partme-ai/stitch-skills/stitch-ui-design-spec-uviewpro --openclaw

Files (1)

SKILL.md

2.8 KB

uView Pro Design Spec (uView Pro / Vue 3)

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

Purpose

This skill makes the uView Pro design spec executable in two modes:

Prefix mode: output a paste-ready Hard constraints prefix for Stitch [Context].
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:

uview-pro, uviewpro, uview pro

Chinese trigger keywords (only for triggering):

uview pro
uview 3.0

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:

[Hard constraints prefix]
- Framework: uView Pro (uni-app / Vue 3).
- Design Tokens:
  - Colors: Primary=#3c9cff, Success=#5ac725, Warning=#f9ae3d, Danger=#f56c6c, Info=#909399.
  - Typography: Unit rpx. Main Title 32rpx. Content 28rpx.
  - Radius: Base 8rpx, Card 16rpx, Circle 9999px.
- Component Contracts (Prefix: u-; uView Pro uses same tag prefix as uView 2, package uview-pro):
  - Buttons: <u-button type="primary" shape="circle">.
  - Layout: <u-row>, <u-col span="...">, <u-gap>.
  - Forms: <u-form :model="form">, <u-form-item>, <u-input border="none">, <u-code>.
  - Navbar: <u-navbar title="..." :autoBack="true">.
  - List: <u-swipe-action>, <u-index-list>, <u-waterfall>, <u-list>, <u-grid>.
  - Icons: <u-icon name="photo">.
- JS Utilities:
  - Use uni.$u.toast(), uni.$u.route(), uni.$u.http.post().
  - Use <script setup lang="ts">.

Selector mode

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

Contract selection JSON:

{
  "version": "CONTRACT_SELECTION_JSON_V1",
  "designSystem": "uview-pro",
  "mode": "selector",
  "contracts": { "include": [] },
  "states": { "include": [] }
}

Final Stitch prompt:

[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

Source

git clone https://github.com/partme-ai/stitch-skills/blob/main/skills/stitch-ui-design-spec-uviewpro/SKILL.mdView on GitHub

Overview

This skill generates Stitch outputs tailored to uView Pro design specs. It operates in two modes: a paste-ready hard constraints prefix for quick integration, or a selector mode that yields a CONTRACT_SELECTION_JSON_V1 followed by a final Stitch prompt. It helps designers and developers enforce consistent UI constraints when working with Stitch.

How This Skill Works

When invoked with a Stitch context, the skill detects user intent to choose between Prefix mode or Selector mode. Prefix mode returns a single hard constraints prefix ready to paste into Stitch, while Selector mode outputs two blocks: a contract selection JSON and a final Stitch prompt that injects only the necessary component/state snippets. Trigger keywords like uview-pro or Stitch guide the mode selection and output formatting.

When to Use It

You want a paste-ready Hard constraints prefix for Stitch (Prefix mode).
You request a selector output with CONTRACT_SELECTION_JSON_V1 for refining a screen (Selector mode).
You are building a uView Pro-based UI and need exact design tokens enforced in Stitch.
You are refining an existing Stitch screen and need a two-block output (JSON + final prompt).
You explicitly mention Stitch or uView Pro in your request and want mode-determined output.

Quick Start

Step 1: Mention Stitch and, if possible, uView Pro in your request.
Step 2: Choose Prefix (single hard constraints block) or Selector (JSON + final prompt) mode.
Step 3: Copy the generated content and paste into your Stitch workflow.

Best Practices

Clearly mention Stitch and uView Pro in your request to trigger the correct mode.
Decide Prefix vs Selector upfront to speed up output generation.
Ensure design tokens (colors, typography, radii) match your project specs in the prefix.
In selector mode, include only the contracts/states necessary for your target screen.
Review the final Stitch prompt to verify correct component/state injection and layout intent.

Example Use Cases

Request a hard constraints prefix for a Stitch login screen (Prefix mode).
Ask for a selector output with CONTRACT_SELECTION_JSON_V1 for a dashboard screen (Selector mode).
Refine an existing Stitch screen by generating a two-block output (JSON + final prompt).
Specify uView Pro design tokens (colors, typography, radii) in the prefix for a consistent look.
Prompt to inject components like <u-navbar> and <u-button> into the final Stitch prompt.

Frequently Asked Questions

Add this skill to your agents