用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt;运行前请先检查来源。
npx skills add https://github.com/johnlindquist/uxspec --skill wire命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地?可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
| name | wire |
| description | Connect the spec to behavior — wire up $context, $events, actions, effects, guards, and element bindings |
Connect the spec to behavior — context, events, actions, effects, bindings, guards. This is where the state machine comes alive.
When adding $context, $events, $actions, $effects, or wiring binding, visibleWhen, enabledWhen, onPress, onChange on elements.
$context)Every piece of runtime state needs a typed field with a default:
"$context": {
"email": { "type": "string", "default": "" },
"submitting": { "type": "boolean", "default": false },
"error": { "type": "string", "default": null }
}
Decisions:
null as default for "not yet known" values (error messages, fetched data).[], {}) for "nothing yet" — distinct from null ("never fetched").error not errorBannerText.$events)Every trigger the machine responds to:
"$events": {
"SUBMIT": { "source": "user", "payload": {} },
"INPUT_CHANGED": { "source": "user", "payload": { "name": { "type": "string" }, "value": { "type": "string" } } },
"HTTP_OK": { "source": "network", "payload": { "data": { "type":
Decisions:
SUBMIT, HTTP_OK, TIMER_EXPIRED.user (clicks, input), network (API responses), timer, system (lifecycle), storage.binding — connects element props to expressions: { "content": ["var", "context.label"] }visibleWhen — show only when truthy: ["!=", ["var", "context.error"], null]enabledWhen — interactive only when truthy: ["==", ["var", "context.submitting"], false]onPress / onChange — actions/effects triggered by interactionDecisions:
visibleWhen over separate states when the difference is purely whether an element shows. Use separate states when the difference changes what the user can do.Guards control whether a transition fires:
"on": {
"SUBMIT": {
"target": "loading",
"guard": ["&&",
["!=", ["var", "context.email"], ""],
["==", ["var", "context.submitting"], false]
]
}
}
Decisions:
enabledWhen on the triggering element.always transitions (with guards) for automatic routing — e.g., skip a step if data already exists.Actions are pure state mutations (synchronous):
assign — update context: { "kind": "assign", "path": "context.error", "value": null }emit — raise an event: { "kind": "emit", "event": "FORM_RESET" }log — debug output: { "kind": "log", "level": "info", "message": "submitted" }Effects are side effects (async, external):
http — API calltimer.start / timer.cancel — delayed eventsnavigate — route changefocus — move focus to an elementstorage.write — persist to storageDecisions:
entry, clear them in exit.focus effects in onEnter for every state that changes the interactive surface.Runtime semantics exist to close the gap between "what this looks like" and "what this does." Every binding, guard, and action should make the spec more precise — not more complex. If wiring feels complicated, the state machine probably needs simplification first.
基于 SOC 职业分类