artifact-sandbox

OUTPUT CONTRACT

Produces ONE .html file. A sandbox is a single tunable demo of one CSS/JS technique. ALL of: the demo stage, the controls, the live source preview, and the documentation — in one file.

File extension is .html. File name typically <technique>-sandbox.html.

An interactive demo of one animation or CSS effect, with sliders to tune the parameters live, and the resulting CSS source updating in real time. Useful for "what should the easing be on this transition" conversations, or for capturing the agreed-upon timing for a motion spec.

Read artifact-css/SKILL.md first for the OUTPUT CONTRACT, design tokens, and the Interactivity layer documenting the jQuery + jQuery UI loader pattern. Sandboxes opt-in to that layer for the slider widgets.

When to reach for this skill

• User says "let me play with the easing", "tune this animation live", "show me different timings".
• User wants a motion spec they can hand to a designer or PM to converge on values.
• User wants to ship one effect with a "live preview" page attached.