slide-shell · v0.3.0+

SlideTerminal

Hands-on con TerminalWindow a la izquierda + narración paso a paso a la derecha + Pro tip Callout al final. Renderiza markdown inline (**strong** y `code`) en steps y lead.

Preview (escala 0.55)

Hands-on 1 · 25-30 min ⭐

Setup + primera ejecución sobre el starter

Output del hands-on: graph.json real, reporte leído, y ojo entrenado.

narración paso a paso
1
Prerequisitos: Node ≥ 20 y uv.
2
Instala Graphify globalmente.
3
Clona el starter. Verifica con tests + typecheck.
4
Predice antes de ejecutar — papel y boli.
5
Lanza el pipeline. ~$0.30-0.50, 4-5 subagentes en paralelo.
6
Lee GRAPH_REPORT.md → graph.html → contrasta predicción.
Pro tip
El paso 4 (predecir) es no-negociable. Si saltas a ejecutar, pierdes el músculo crítico que el taller entrena.

Uso

invocación
<SlideTerminal
  eyebrow="Hands-on 1 · 25-30 min ⭐"
  eyebrowAccent="ok"
  title="Setup + primera ejecución"
  titleHighlight="primera ejecución"
  lead="Output: <code>graph.json</code> real."
  terminalTitle="~/taller-graphify-starter · zsh"
  lines={[
    { type: 'cmd', text: 'uv tool install graphifyy' },
    { type: 'ok',  text: '✓ installed graphifyy 0.8.2' }
  ]}
  steps={[
    'Prerequisitos: Node ≥ 20 y `uv`.',
    '**Predice antes de ejecutar** — papel y boli.'
  ]}
  tip="El paso 4 es no-negociable."
/>

Props

PropTipoDefaultDescripción
eyebrowstring''Texto del eyebrow.
eyebrowAccent'electrico' | 'ok' | 'warn' | 'err''ok'Color del bar del eyebrow.
titlestring''Título.
titleHighlightstring''Substring a destacar.
leadstring''Párrafo intro (acepta <code> y <strong>).
terminalTitlestring'~ · zsh'Caption de la titlebar del terminal.
lines{ type; text }[][]Líneas del terminal.
stepsstring[][]Pasos numerados (markdown inline: **strong**, `code`).
tipstring''Pro-tip al final (Callout info, opcional).
tipTitlestring'Pro tip'Título del Pro-tip Callout.