원클릭으로
wire
Connect the spec to behavior — wire up $context, $events, actions, effects, guards, and element bindings
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
메뉴
Connect the spec to behavior — wire up $context, $events, actions, effects, guards, and element bindings
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Add purposeful motion to a UXSpec — $animations, onEnter choreography, and timing tokens
Improve every piece of text in a UXSpec — descriptions, labels, error messages, empty states, and loading copy
Identify repeated patterns and consolidate them into $elements and shared tokens for systematic reuse
Collect design context, audience, intent, and requirements before writing any UXSpec JSON
Strengthen a UXSpec against real-world conditions — overflow, missing data, network failures, and accessibility
Run a systematic quality audit on a completed UXSpec — design intent, consistency, accessibility, and state coverage
| 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": "object" } } }
}
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.