<!-- unified-payment-template: 1.0.4 -->

支付依赖与恢复 / Payment runtime and recovery

运行时需要 Node.js 20+ 和宿主的支付宝官方 alipay-payment-skill、alipay-bot。宿主不同不代表钱包授权可以搬运。正常第一条支付宝业务命令是官方 buyer-pay 或原单查询，不能加通用 check-wallet 前检。

只有真实业务命令无法找到/执行 alipay-bot 时，才加载官方技能的 references/command-recovery.md：取得外部安装授权，核对指定版本 @alipay/agent-payment@1.0.23 的官方完整性后安装，再重试原命令一次。不能每次调用都安装 latest，不能把卖家部署工具当作买方依赖；已启动但业务失败时原样展示并停止。

English: Use the current host's official Alipay buyer runtime. Only an actual command-not-found failure enters the official pinned-version installation recovery. Do not reinstall on every call, precheck wallets generically, or install merchant tooling in the buyer path.

仅在上述恢复条件成立且已获外部安装授权时执行下列两步。先查询完整性，必须逐字符等于下面的指定值；不一致或查不到则停止，不能继续安装：

npm view '@alipay/agent-payment@1.0.23' dist.integrity --registry 'https://registry.npmjs.org'

sha512-7OGSHhPnuKsyENpivpY60NgE77ktKtWTP8UBtmizeB1Et44KHFFIjDcSRIFpitEdKAC7uMBx3Mp1Zg/wbYmYCQ==

核对一致后才执行安装，并仅重试原先无法执行的命令一次：

npx -y --registry=https://registry.npmjs.org @alipay/agent-payment@1.0.23 install

这里的命令是依赖恢复说明，不是正常付款前置；官方技能版本更新时须重新对照其 command-recovery.md，不沿用过期完整性值。

本包现行支付流程 / Registered checkout

本包支付配置为 payment-contract.json：资源 ui-styling-free、单价 ¥0.10 / CNY、支付宝服务 ID API_FC3B91AF109D47C8、完整服务地址 https://fwskillpay-api.cn/v1/pay/skills/ui-styling-free/invoke。配置与 SKILL/助手哈希不符即停止。平台展示价须在提交后单独回读，不能从本包检查推定平台价已经一致。

1. 调用前披露输入范围、接收方、用途、留存及 ¥0.10，取得本次数据传输和该金额的付款授权。已有授权不再二次询问；价格一致也不能代替授权。
2. 在包外私有目录准备 payload.json，按本 Skill 的输入契约执行 probe。400、503、429、未知网络状态或未付款的 200 都停止，不能本地代做付费结果。
3. 只核对网关公开 JSON 摘要中的金额、币种、商户订单号、资源 ID、服务 ID 和有效期；任一字段缺失、类型错误、过期或与登记不符都停止，不进入 pay。不解码 Payment-Needed 或 amtPaymentLink，不自行验签；公开摘要不能证明签名、实际付款或到账。
4. 本次唯一非空 amtPaymentLink 优先，并原样交给官方 --amt-payment-link，不写付款材料文件；链接缺失才使用原值保存的 Payment-Needed 文件。空、多个或歧义链接停止，两种参数互斥，不能补造或从历史输出补齐。
5. 已有该金额授权时立即准备 pay，宿主在返回的 workingDirectory 实际用 executable 与参数数组运行官方 buyer-pay。参数 JSON 不算弹码。会话按下表取值，保持本次原请求与幂等键。
6. 原样输出当前官方对客文本一次，完整展示全部 MEDIA 图片；不复用旧图、不绘制替代二维码。链接生成、success:true、OPEN_LINK_CREATED 不代表付款或交付。
7. 宿主把刚执行的官方对客文本保存在包外私有文件，用本次 handoffId 执行 record-official。只从“订单号/查询单号/交易号”标签提取标识；拒绝原始 JSON、其他交接或冲突标识。观察分类由宿主依据真实输出选择，不是 helper 验付。
8. 用户表示付好或要求查询时，complete 按已绑定标识查询原单：有效 32 位、11–14 位为 8282 的查询号优先；否则用本次交易号。查询不附加 session-id、账单文件或付款链接。未绑定原单停止，不能猜测。
9. 只交付官方实际返回的非空验付后资源。成功交付、业务失败、资源为空、身份不符或查询失败后停止；仅命令超时/网络失败允许按官方规则重试原命令一次。不能从 success 字样认定收款。

English: Obtain data-transfer and price authorization before probe. Compare the public checkout summary while passing payment material unchanged to the official runtime. A unique amtPaymentLink takes priority over an opaque Payment-Needed file. Actually execute the returned argument array, show all current official media, then bind the current official customer-facing output to its handoff. Query only the bound original order. Deliver only actual nonempty official resources. Offline helper checks and host observations are not proof of payment or settlement.

当前会话 / Current session

取首个非空来源，高优先级不能被低优先级覆盖：

不能生成会话 ID，不能用订单号、交易号、用户/钱包 ID、URL、测试名或历史会话代替；陈旧环境变量不能覆盖当前显式会话。官方订单号形状（32 位数字且第 11–14 位为 8282）只用于查询，任何符合该形状的串都不是会话，宿主号码仍按逐级取值。全部为空则停止。The current runtime identity takes precedence over inherited environment values.

助手调用 / Helper calls

node scripts/skill-paid.mjs probe --state-dir "<包外私有目录>" --payload-file "<包外私有目录>/payload.json" --confirm-data-transfer
node scripts/skill-paid.mjs pay --state-dir "<同一目录>" --session-id "<当前真实会话>" --intent-summary "原始请求：<本次业务目的摘要>" --confirm-payment
node scripts/skill-paid.mjs record-official --state-dir "<同一目录>" --handoff-id "<刚输出的交接ID>" --official-output-file "<刚执行的官方对客文本文件>" --confirm-current-output --outcome pending
node scripts/skill-paid.mjs complete --state-dir "<同一目录>"

链接分支 pay 额外带 --amt-payment-link "<本次 probe 原样返回的值>"；不能从扫码图片或用户操作链接取替代值。每次实际官方命令后都记录本次 handoff。官方资源文件只存私有目录；资源已交付时可记录 resource_delivered。ack_failed 还须同次真实输出明确回执失败、非空资源文件和已交付确认。无把握时记录 unknown 并停止。

大输入、中断及回执 / Large inputs and recovery

大载荷只走同域 /stage 短引用，失败停止，不把大 JSON 塞回命令行。原文恢复副本存在包外私有目录。只有绑定的本次官方输出明确报告引用过期，用户在后续要求恢复并同意再次传输时，才可 restage --confirm-ref-expired --confirm-data-transfer --confirm-recovery-requested 一次；核对原文 SHA-256，保留原订单和幂等键，之后只恢复原单。

正常官方资源交付会自动处理回执。独立 ACK 只恢复已绑定的同次回执失败，且用户后续要求恢复；不重新请求资源。助手使用单次交接标记和锁拒绝重复/并发 ACK。没有真实证据不填确认标志。

付款启动未知不能删状态、换幂等键或再付一笔。已付款但业务失败保留原单，联系运营者核对恢复或退款；退款没有公开命令时不能自行构造。需要官方反馈时加载 alipay-payment-skill 的 references/feedback.md，先向用户确认脱敏内容后提交，不自动发送。

Windows 的文件 mode 不能保证 ACL；宿主须使用当前用户私有目录并核对访问范围。付款材料、当前官方文本、业务原文、资源文件、Cookie 和钱包凭据都不进入发布包或跨宿主同步。

• Service URL：https://fwskillpay-api.cn/v1/pay/skills/ui-styling-free/invoke

依赖技能 / Dependencies

中文：买方侧的 402 支付由支付宝官方能力处理。使用前先确认宿主是否已具备；缺少时通过宿主自带的官方 Skill 安装器补齐——不要自行实现支付逻辑、不要手写 402 客户端、不要在本包内安装任何组件：

• alipay-payment-skill —— 官方买家支付技能：发起请求、解析 402 账单、唤起支付宝付款、携 Payment-Proof 重试并完成履约
• @alipay/agent-payment —— 官方买家侧安装包，由宿主提供，用于得到上述官方能力（本包不含安装命令）
• alipay-bot —— 官方买方命令行工具，随官方买家侧安装包提供

旧版兼容名（宿主仍是旧版组件时使用，能力等价）：
- alipay-pay-for-402-service —— 解析账单、发起支付、携凭证重试、发送履约回执
- alipay-authenticate-wallet —— 钱包未授权时完成授权
- alipay-payment-feedback —— 支付流程异常时的兜底反馈

English: The buyer side of the 402 flow is handled by Alipay's official capability. Confirm the host already provides it; if not, the host's own official Skill installer supplies it — never hand-roll payment logic or a 402 client, and never install components from inside this package:

• alipay-payment-skill — the official buyer payment skill: send the request, parse the 402 bill, trigger the Alipay payment, retry with Payment-Proof, complete fulfillment
• @alipay/agent-payment — the official buyer-side package the host provides (no install command is shipped here)
• alipay-bot — the official buyer CLI, provided with the official buyer-side package

Legacy names (equivalent capability, for hosts still on older components):
- alipay-pay-for-402-service — parse the bill, pay, retry with proof, send the fulfillment receipt
- alipay-authenticate-wallet — authorize the wallet when required
- alipay-payment-feedback — fallback feedback when the payment flow fails

请不要把商户私钥、买家凭证或长期 Token 写入本 Skill；服务端验付也不得以「客户端是否安装组件」为前提。

Never embed merchant private keys, buyer credentials, or long-lived tokens in this skill; server-side verification must not depend on whether the client installed any component.

<!-- buyer-prerequisites v3 -->

前置检查 / Prerequisites

中文：本技能除编排示例 买方宿主的支付宝官方组件 外不分发其他可执行文件，且不含任何安装脚本与安装命令。调用前只做能力确认，不做本地安装动作：

1. 宿主须已具备官方支付宝买方支付能力（见「依赖技能 / Dependencies」列出的三个官方技能）；缺少时由宿主自身的官方 Skill 安装器补齐，本包不提供安装命令。
2. 钱包须处于已授权状态；未授权时先完成授权，再发起业务请求。
3. 若宿主既无法提供买方支付组件，也无法完成钱包授权，在支付前停止并如实向用户说明限制，不得改用本地生成结果。

English: Apart from the orchestration example 买方宿主的支付宝官方组件, this package ships no executables, install scripts, or install commands. Before calling, only confirm capability:

1. The host must already provide the official Alipay buyer-side payment capability (see Dependencies); if missing, the host's own official Skill installer supplies it — this package provides no install commands.
2. The wallet must be authorized; complete authorization first if it is not.
3. If the host can neither provide the buyer components nor authorize the wallet, stop before payment and tell the user the limitation honestly — never fall back to local generation.

<!-- payment-flow v2 -->

触发与调用摘要 / Triggers & usage summary

可访问 UI 组件与响应式样式设计 / Accessible UI Components & Responsive Styling

一句话结果承诺 / Outcome promise

中文：给出能落地的组件与样式方案，并保证键盘可达、对比度达标、断点表现正常。
English: Deliver an implementable component and styling plan that stays keyboard-reachable, contrast-compliant, and correct across breakpoints.

输入示例 / Input example

中文

技术栈：React + Tailwind（已有 shadcn/ui 基础组件）
需求：实现一组带表单校验的登录界面，需支持深色模式
约束：键盘可完整操作；对比度满足 WCAG AA

English

Stack: React + Tailwind (shadcn/ui base components available)
Goal: implement a login screen set with form validation, dark mode supported
Constraint: fully keyboard-operable; contrast meets WCAG AA

处理步骤 / Processing steps

中文
1. 确定组件层（shadcn/ui 等）与样式层（Tailwind 等）的分工。
2. 建立主题与设计令牌（颜色、间距、圆角、字体）。
3. 实现组件与布局，覆盖状态：默认、悬停、聚焦、禁用、错误、加载、空。
4. 逐项落实可访问性：语义标签、焦点顺序、焦点可见、对比度、表单错误关联。
5. 在主要断点上验证响应式行为。

English
1. Fix the split between the component layer (shadcn/ui et al.) and the styling layer (Tailwind et al.).
2. Establish theme and design tokens (colour, spacing, radius, type).
3. Implement components and layout covering states: default, hover, focus, disabled, error, loading, empty.
4. Apply accessibility item by item: semantic markup, focus order, visible focus, contrast, form-error association.
5. Verify responsive behaviour at the main breakpoints.

输出文件 / 字段示例 / Output example

中文
- 组件与样式方案：选型说明 + 目录组织
- 主题令牌表：令牌名 / 亮色值 / 暗色值 / 用途
- 可访问性核对表：逐项结果
- 响应式断点表：断点 / 布局变化 / 需要注意的边界

English
- Component and styling plan: selection rationale plus directory layout
- Theme token table: token / light value / dark value / purpose
- Accessibility checklist: per-item result
- Breakpoint table: breakpoint / layout change / edge cases to watch

成功验收标准 / Acceptance criteria

中文
- 所有交互元素可通过键盘到达，且焦点样式可见。
- 文本与背景对比度满足声明的等级（如 WCAG AA 4.5:1）。
- 每个组件都定义了错误、加载、空三种状态的表现。
- 暗色模式下无对比度失配或不可读区域。
- 未引入未在依赖中声明的第三方库。

English
- All interactive elements are keyboard-reachable with a visible focus style.
- Text/background contrast meets the stated level (e.g. WCAG AA 4.5:1).
- Every component defines its error, loading, and empty states.
- No contrast mismatch or unreadable area in dark mode.
- No third-party library is introduced that is not declared in the dependencies.

适用场景与边界 / Scope and boundaries

中文
- 适用：中后台、产品界面的组件与样式实现。
- 不适用：品牌视觉设计；动效与交互动画工程；设计稿评审。
- 不评估信息架构与产品流程是否合理。

English
- In scope: component and styling implementation for dashboards and product UIs.
- Out of scope: brand visual design; motion and interaction animation engineering; design-file review.
- It does not assess whether the information architecture or product flow is sound.

依赖、隐私与失败处理 / Dependencies, privacy, failure handling

中文
- 依赖：无外部 API、无账号、无密钥；使用项目已有的组件库与样式工具。
- 隐私：界面代码仅在本地处理，不外传。
- 失败处理：技术栈未确定时先给出两套可选方案并标注取舍，不强行套用单一栈。

English
- Dependencies: no external API, no account, no key; uses the component library and styling tools already in the project.
- Privacy: UI code is processed locally and never transmitted.
- Failure handling: with no stack decided, present two options with their trade-offs rather than forcing a single stack.

版本与更新时间 / Version and update

中文：v1.0.1。组件与可访问性核对表自发布起未变。
English: v1.0.1. Component guidance and accessibility checklist unchanged since publication.

变更记录 / Changelog

1.0.1

• H1 改为中英双语；补齐验收标准与失败处理段落；复核并确认文中「敏感信息」命中为表单校验示例（非真实凭据）。

Comprehensive skill for creating beautiful, accessible user interfaces combining shadcn/ui components, Tailwind CSS utility styling, and canvas-based visual design systems.

Reference

• shadcn/ui: https://ui.shadcn.com/llms.txt
• Tailwind CSS: https://tailwindcss.com/docs

When to Use This Skill

Use when:
- Building UI with React-based frameworks (Next.js, Vite, Remix, Astro)
- Implementing accessible components (dialogs, forms, tables, navigation)
- Styling with utility-first CSS approach
- Creating responsive, mobile-first layouts
- Implementing dark mode and theme customization
- Building design systems with consistent tokens
- Generating visual designs, posters, or brand materials
- Rapid prototyping with immediate visual feedback
- Adding complex UI patterns (data tables, charts, command palettes)

Core Stack

Component Layer: shadcn/ui

• Pre-built accessible components via Radix UI primitives
• Copy-paste distribution model (components live in your codebase)
• TypeScript-first with full type safety
• Composable primitives for complex UIs
• CLI-based installation and management

Styling Layer: Tailwind CSS

• Utility-first CSS framework
• Build-time processing with zero runtime overhead
• Mobile-first responsive design
• Consistent design tokens (colors, spacing, typography)
• Automatic dead code elimination

Visual Design Layer: Canvas

• Museum-quality visual compositions
• Philosophy-driven design approach
• Sophisticated visual communication
• Minimal text, maximum visual impact
• Systematic patterns and refined aesthetics

Script Paths

Script paths in this skill and its references/ are relative to the directory that contains this SKILL.md, not to the project: scripts/<file> is this skill's own scripts/ folder, and ../<skill>/scripts/<file> is a sibling sub-skill installed alongside it. Build the full path from that directory (Claude Code reports it as the skill's base directory when the skill loads) and keep the working directory at the project root — the scripts read and write project files such as docs/brand-guidelines.md, assets/design-tokens.json or src/ relative to it.

Quick Start

Component + Styling Setup

Install shadcn/ui with Tailwind:

npx shadcn@latest init

CLI prompts for framework, TypeScript, paths, and theme preferences. This configures both shadcn/ui and Tailwind CSS.

Add components:

npx shadcn@latest add button card dialog form

Use components with utility styling:

import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"

export function Dashboard() {
  return (
    <div className="container mx-auto p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
      <Card className="hover:shadow-lg transition-shadow">
        <CardHeader>
          <CardTitle className="text-2xl font-bold">Analytics</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-muted-foreground">View your metrics</p>
          <Button variant="default" className="w-full">
            View Details
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}

Alternative: Tailwind-Only Setup

Vite projects:

npm install -D tailwindcss @tailwindcss/vite

// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
export default { plugins: [tailwindcss()] }

/* src/index.css */
@import "tailwindcss";

Component Library Guide

Comprehensive component catalog with usage patterns, installation, and composition examples.

See: references/shadcn-components.md

Covers:
- Form & input components (Button, Input, Select, Checkbox, Date Picker, Form validation)
- Layout & navigation (Card, Tabs, Accordion, Navigation Menu)
- Overlays & dialogs (Dialog, Drawer, Popover, Toast, Command)
- Feedback & status (Alert, Progress, Skeleton)
- Display components (Table, Data Table, Avatar, Badge)

Theme & Customization

Theme configuration, CSS variables, dark mode implementation, and component customization.

See: references/shadcn-theming.md

Covers:
- Dark mode setup with next-themes
- CSS variable system
- Color customization and palettes
- Component variant customization
- Theme toggle implementation

Accessibility Patterns

ARIA patterns, keyboard navigation, screen reader support, and accessible component usage.

See: references/shadcn-accessibility.md

Covers:
- Radix UI accessibility features
- Keyboard navigation patterns
- Focus management
- Screen reader announcements
- Form validation accessibility

Tailwind Utilities

Core utility classes for layout, spacing, typography, colors, borders, and shadows.

See: references/tailwind-utilities.md

Covers:
- Layout utilities (Flexbox, Grid, positioning)
- Spacing system (padding, margin, gap)
- Typography (font sizes, weights, alignment, line height)
- Colors and backgrounds
- Borders and shadows
- Arbitrary values for custom styling

Responsive Design

Mobile-first breakpoints, responsive utilities, and adaptive layouts.

See: references/tailwind-responsive.md

Covers:
- Mobile-first approach
- Breakpoint system (sm, md, lg, xl, 2xl)
- Responsive utility patterns
- Container queries
- Max-width queries
- Custom breakpoints

Tailwind Customization

Config file structure, custom utilities, plugins, and theme extensions.

See: references/tailwind-customization.md

Covers:
- @theme directive for custom tokens
- Custom colors and fonts
- Spacing and breakpoint extensions
- Custom utility creation
- Custom variants
- Layer organization (@layer base, components, utilities)
- Apply directive for component extraction

Visual Design System

Canvas-based design philosophy, visual communication principles, and sophisticated compositions.

See: references/canvas-design-system.md

Covers:
- Design philosophy approach
- Visual communication over text
- Systematic patterns and composition
- Color, form, and spatial design
- Minimal text integration
- Museum-quality execution
- Multi-page design systems

Utility Scripts

Python automation for component installation and configuration generation.

shadcn_add.py

Add shadcn/ui components with dependency handling:

python scripts/shadcn_add.py button card dialog

tailwind_config_gen.py

Generate tailwind.config.js with custom theme:

python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter

Best Practices

1. Component Composition: Build complex UIs from simple, composable primitives
2. Utility-First Styling: Use Tailwind classes directly; extract components only for true repetition
3. Mobile-First Responsive: Start with mobile styles, layer responsive variants
4. Accessibility-First: Leverage Radix UI primitives, add focus states, use semantic HTML
5. Design Tokens: Use consistent spacing scale, color palettes, typography system
6. Dark Mode Consistency: Apply dark variants to all themed elements
7. Performance: Leverage automatic CSS purging, avoid dynamic class names
8. TypeScript: Use full type safety for better DX
9. Visual Hierarchy: Let composition guide attention, use spacing and color intentionally
10. Expert Craftsmanship: Every detail matters - treat UI as a craft

Reference Navigation

Component Library
- references/shadcn-components.md - Complete component catalog
- references/shadcn-theming.md - Theming and customization
- references/shadcn-accessibility.md - Accessibility patterns

Styling System
- references/tailwind-utilities.md - Core utility classes
- references/tailwind-responsive.md - Responsive design
- references/tailwind-customization.md - Configuration and extensions

Visual Design
- references/canvas-design-system.md - Design philosophy and canvas workflows

Automation
- scripts/shadcn_add.py - Component installation
- scripts/tailwind_config_gen.py - Config generation

Common Patterns

Form with validation:

import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8)
})

export function LoginForm() {
  const form = useForm({
    resolver: zodResolver(schema),
    defaultValues: { email: "", password: "" }
  })

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(console.log)} className="space-y-6">
        <FormField control={form.control} name="email" render={({ field }) => (
          <FormItem>
            <FormLabel>Email</FormLabel>
            <FormControl>
              <Input type="email" {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )} />
        <Button type="submit" className="w-full">Sign In</Button>
      </form>
    </Form>
  )
}

Responsive layout with dark mode:

<div className="min-h-screen bg-white dark:bg-gray-900">
  <div className="container mx-auto px-4 py-8">
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <Card className="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
        <CardContent className="p-6">
          <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
            Content
          </h3>
        </CardContent>
      </Card>
    </div>
  </div>
</div>

Resources

• shadcn/ui Docs: https://ui.shadcn.com
• Tailwind CSS Docs: https://tailwindcss.com
• Radix UI: https://radix-ui.com
• Tailwind UI: https://tailwindui.com
• Headless UI: https://headlessui.com
• v0 (AI UI Generator): https://v0.dev

购买前先看 / Read before purchase

一次调用交付 / One-call delivery

• 中文：适用于中后台与产品界面的样式实现；输入设计意图与技术栈，输出组件选型、主题定制与可访问性实现方案，不替代设计评审 / Use for styling work on dashboards and product UIs; accept design intent and stack and return component selection, theme customization, and accessibility implementation, without substituting for design review.
• English: Accessible UI Components & Responsive Styling
• 输入与输出 / Input and output：按本技能定义提供结构化输入；输出为可执行的结构化结果、清单与验收提示。 / Provide the structured input defined by this skill; the output is an executable structured result, checklist, and acceptance cues.
• 适合 / Best for：需要明确产出、可复核边界、且不想为多个小步骤重复付款的任务。 / Tasks that need a clear, reviewable deliverable without paying separately for every small step.
• 不适合 / Not for：缺失必要字段、要求读取服务器本地路径、要求执行任意脚本或要求绕过平台的请求。 / Requests missing required fields, asking to access server paths, asking to execute arbitrary scripts, or asking to bypass the platform.
• 交付标准 / Acceptance：成功响应返回结构化结果、处理摘要与复核提示；输入不完整时先返回缺失项，不虚构结果。 / A successful response returns structured results, a summary, and review cues; incomplete input returns missing fields instead of invented output.

示例 / Example

POST /v1/pay/skills/ui-styling-free/invoke

{"component": "modal", "breakpoints": ["mobile", "tablet", "desktop"], "needsDarkMode": true}

使用契约 / Usage contract

售后与满意度 / Satisfaction & recovery

• 只有服务端实现同一订单的 retry_credit、幂等和补偿记录时，才能提供一次不重复计费的修正重试。
• 如果尚未实现补偿，只提供问题反馈和人工处理路径，不承诺免费再次调用或自动退款。
• 免费预览、基础能力和付费完整结果必须区分资源或端点；成功交付后可提供自愿打赏，但打赏不影响访问、验收或售后。

A free correction retry is allowed only when the server implements retry_credit, idempotency, and compensation records for the same order. Otherwise, provide support feedback without promising a free call or automatic refund.

线上收费 API 范围 / Hosted paid API scope

线上范围：按结构化请求产出本技能定义的结果、清单或报告；线上不读取服务器本地路径、不处理买家二进制文件、不执行买家脚本。

The hosted scope returns the result, checklist, or report defined by this skill from a structured request. It does not read server-local paths, process buyer binaries, or execute buyer scripts.

本次更新 / Version 1.0.6 update

中文：新增可选买方编排示例 买方宿主的支付宝官方组件（probe/pay/complete/retry/status；只输出支付宝官方 CLI 参数，不实现支付、不安装组件、不含密钥），并新增「买方支付操作示例」一节；同步修正「不含任何脚本」的自相矛盾表述。服务地址、Service ID、¥0.10 计费契约与 402 流程保持不变。

English: Added the optional buyer-side orchestration example 买方宿主的支付宝官方组件 (probe/pay/complete/retry/status; it only emits arguments for Alipay's official CLI — no payment implementation, no installs, no keys) and a buyer payment walkthrough section; fixed the self-contradictory "contains no scripts" wording. Service URL, service ID, ¥0.10 billing contract, and the 402 flow are unchanged.

已核对的输入示例 / Registered input example

{
  "brand": "示例产品",
  "style": "modern",
  "primaryColor": "#2563EB"
}