dips

name: dips description: | Use this whenever a response could benefit from richer visualization, guided interaction, or a touch of fun — pickers, calculators, sliders, mini explorers, charts, animated demos, choose-your-own-adventure prompts, anything that lands better as a hydrating widget than as plain prose. Dips are ephemeral shtml code blocks rendered inline in chat (no state persistence, lick-only). Reach for them generously: every interactive moment the user gets is a moment they don't have to type a clarifying message. For persistent dashboards, editors, or multi-page apps use sprinkles instead. allowed-tools: bash

Dips

Dips are inline shtml code blocks in chat that hydrate into sandboxed interactive widgets. Ephemeral — no state persistence, no readFile. Only slicc.lick(event) is available for agent communication; always pack payloads as { action, data: { ... } } for a predictable shape on the cone side.

Use them generously. A dip is the right answer any time a response could benefit from visualization, interaction, or a moment of delight. Don't reserve them for "complex" tasks — a slider that lets the user feel a number, a chart that beats a paragraph of stats, a button that's faster than typing "yes" all earn their keep.

For a gallery of 10 ready-to-adapt patterns (drag-on-canvas, slider→DOM reflow, paste→tree, ...) read the companion file: read_file /workspace/skills/dips/patterns.md.

Card structure

Always wrap interactive content in .sprinkle-action-card for visual containment. Don't output bare HTML — cards need a visible boundary.

<div class="sprinkle-action-card">
  <div class="sprinkle-action-card__header">Title <span class="sprinkle-badge sprinkle-badge--notice">Status</span></div>
  <div class="sprinkle-action-card__body">Description text</div>
  <div class="sprinkle-action-card__actions">
    <button class="sprinkle-btn sprinkle-btn--secondary" onclick="slicc.lick('cancel')">Cancel</button>
    <button class="sprinkle-btn sprinkle-btn--primary" onclick="slicc.lick('confirm')">Confirm</button>
  </div>
</div>

When the user clicks a button, you receive the lick as a message. Respond conversationally, with another dip, or by spawning a scoop.

Use existing components inside cards

• Progress → .sprinkle-progress-bar with --progress CSS variable. Not raw colored divs.
• Status indicators → .sprinkle-status-light with --positive / --negative / --notice variants.
• Stats → .sprinkle-stat-card grid.
• Tables → .sprinkle-table with .sprinkle-badge for severity.
• Badges → .sprinkle-badge variants (--positive, --negative, --notice, --informative).

Multiple cards in one message: each is a separate .sprinkle-action-card. The iframe padding handles spacing. Don't wrap multiple cards in a single container.

Pre-styled form elements

Inside dips, bare HTML form elements are pre-styled to match S2:

• <input type="range"> — 4px track, 18px accent thumb.
• <input type="text">, <textarea> — S2 layer-2 background, accent focus ring. rows is fine as an initial size; never add overflow:auto or a fixed pixel height — the dip auto-sizes (see "Sizing").
• <select> — S2 styled with focus ring.
• <button> — pill-rounded, 28px height, hover state. Use .sprinkle-btn--primary class for the accent fill.
• <canvas> — full-width, rounded corners.
• <mark> — accent-tinted highlight.

No custom CSS needed for basic widgets. Just write bare HTML.

Sizing

The dip iframe auto-sizes to its content via ResizeObserver on document.body. Your content's natural height becomes the iframe height. Don't fight it.

Never set height, max-height, min-height, overflow: auto, or overflow: scroll on dip containers. The outer iframe has overflow: hidden, so any internal scroller or fixed height clips content instead of growing the iframe. Let content flow and grow.

The one exception is <canvas>: canvases need explicit pixel width/height for the drawing buffer. That's a drawing surface, not a scrollable container — set the pixel dimensions you need.

If content is long enough that it would want to scroll, it belongs in a sprinkle.

Light & dark mode

Dips inherit the parent's theme automatically. The parent injects its S2 tokens and toggles a .theme-light class on the iframe's <html> whenever the user flips themes; every var(--s2-*) token swaps in lockstep. Never hard-code dark colors — always use S2 tokens, or light-dark() for one-off custom colors (set color-scheme: light dark on an ancestor). Do not use @media (prefers-color-scheme: ...) — the parent toggle is class-based, so media queries desync. See /workspace/skills/sprinkles/style-guide.md for the full S2 token reference and a light-dark() example.

Color palette for charts

Use these classes on chart elements, diagram nodes, or badges. Two or three colors per visualization, not six. Assign by meaning, not by sequence.

Layout & viewport

Dips render in the chat column. They are single-column by design — don't author multi-column or sidebar+main layouts. The chat column is narrow on iOS / Sliccstart and on the extension side panel; multi-column dips break visually in those floats. If you need multi-column, use a sprinkle and let the user pop it to full-screen.

Cheap interactions via agent

When a dip's lick handler needs to do real work (lookup, transformation, generation) but the cone or owning scoop should NOT be woken up, route the lick to a one-shot agent call.

The flow:

1. Dip emits a lick: slicc.lick({action: 'compute', data: {input: ...}}).
2. The lick reaches the cone (or scoop) as a message.
3. Instead of replying conversationally, the receiver shells out to agent with a tight allow-list and a self-contained prompt.
4. agent returns the answer on stdout. The receiver writes the result back to the dip via a follow-up dip or via sprinkle send (if the dip was the entry point to a sprinkle flow).

# Inside a feed_scoop reply to a dip lick:
result=$(agent /tmp "curl,jq" "Fetch <url>, return field 'price' as a number.")
# Render a fresh dip with `result` inline.

agent is the right tool here because it has no handoff: ephemeral scoops don't notify the cone on completion, so a busy cone or sprinkle-owning scoop isn't pre-empted by every dip click. See /workspace/skills/delegation/SKILL.md for the full agent reference.

Design rules

• Use S2 CSS variables for all colors (var(--s2-content-default), var(--s2-bg-layer-2), ...).
• Round all displayed numbers: Math.round(), .toFixed(2), .toLocaleString().
• Set step on range sliders for clean values.
• Show errors inline (not alert()).
• Sentence case always — never Title Case or ALL CAPS.
• One root render() / calc() function triggered by all inputs.
• Call render() on load with defaults so the widget is immediately interactive.

Don't

• Don't hardcode hex colors or theme-specific values — use S2 tokens or light-dark() (see "Light & dark mode").
• Don't use @media (prefers-color-scheme: ...) to swap colors — the parent's theme toggle is class-based and the media query desyncs.
• Don't set height, max-height, min-height, overflow: auto, or overflow: scroll on dip containers — the iframe auto-sizes to content; fixed heights and internal scrollers clip it. Canvases are the one exception (they need pixel dimensions for the drawing buffer). Long content belongs in a sprinkle.
• Don't build custom progress bars — use .sprinkle-progress-bar.
• Don't build custom status dots — use .sprinkle-status-light.
• Don't use numbered headings (1. File Operations) inside cards — the __header IS the heading.
• Don't put prose / markdown headings between cards — let cards stand alone.

Lick patterns

// Explicit "send to agent" button.
slicc.lick({ action: 'use-config', data: { config: getCurrentConfig() } });

// Lick on threshold crossing.
if (total > budget) {
  slicc.lick({ action: 'over-budget', data: { total, budget, breakdown } });
}

// Lick on completion.
slicc.lick({ action: 'sort-complete', data: { algorithm: algo, comparisons: n } });

Payload shape: slicc.lick(eventOrAction) accepts either a plain action string (slicc.lick('cancel')) or an { action, data? } object. Always pack extra fields inside data: { ... } — the cone reads event.data as the payload, so top-level extras either get dropped (sprinkle bridge) or folded into data as the whole event object (dip bridge), neither of which gives the cone a predictable shape. The canonical form works identically in both.

The agent receives the lick as a structured message and can respond with prose, another dip, or spawn a scoop.