MrNhoiBong/WhiteBorad

Pizarra de Claude (whiteboard)

Pizarra local utilizada como bloc de notas compartido: el usuario dibuja ideas, Claude analiza en la máquina y luego responde y dibuja en la pizarra. El código se encuentra dentro del directorio de esta habilidad; a continuación, WB es la ruta al directorio que contiene este archivo.

Inicio

export WB_DATA="$PWD/.whiteboard"   # opcional: pizarra separada para el proyecto actual (por defecto: WB/data)
WB/wb start [--port 8765]           # crea automáticamente .venv (python3 -m venv --without-pip), no requiere paquetes externos

• Proporcione al usuario la URL (http://127.0.0.1:8765) y luego ejecute WB/wb wait --timeout 3300 en segundo plano (run_in_background).
• Si se establece WB_DATA, debe establecerse el mismo valor para todos los comandos wb posteriores (especifíquelo en el comando: WB_DATA=... WB/wb ...).
• Si se usa WB_DATA dentro de un repositorio git, agregue .whiteboard/ al .gitignore.

Ciclo de servicio

1. Cuando wait finaliza con código 0: lea la salida. La salida incluye la pregunta, el área seleccionada, los elementos dentro del área (contenido textual completo) y la ruta del PNG si lo hay.
2. Solo abra la imagen PNG cuando la salida la enumere (solo ocurre si el área contiene trazos a mano, marcos, flechas o formas). No lea toda la pizarra; si necesita más contexto, use wb look X Y W H o wb item ID.
3. Trabaje en la máquina si es necesario: lea archivos, ejecute scripts, realice cálculos.
4. Responda usando wb reply --file F --done y dibuje en la pizarra si es útil (consulte más abajo).
5. Vuelva a ejecutar wait en segundo plano. Código 2 significa que se agotó el tiempo de espera, no hay solicitud: solo vuelva a ejecutar wait, no es necesario notificar al usuario.

Cuando el usuario desee detener: WB/wb stop.

Reglas de respuesta

• Todas las fórmulas matemáticas deben escribirse en LaTeX ($…$ inline, $$…$$ display), tanto en el chat como en la pizarra. La página utiliza MathJax para renderizar, macros disponibles: \Adv.
• El texto de varias líneas o que contenga $ debe escribirse en un archivo en el directorio temporal y luego pasarse mediante --file para evitar errores de quoting del shell.
• El contenido es Markdown-lite: **negrita**, *cursiva*, `código`, listas, tablas |…|.
• Los elementos creados por Claude tienen por defecto color violeta y se colocan automáticamente junto al área que se está procesando; use --at x,y para colocarlos en otro lugar.

Comandos de dibujo

Comando	Uso
`wb note [TEXT	--file F] [--color C] [--at x,y] [--w W]`
`wb tex [TEXT	--file F] [--size N]`
wb svg --file F --title T [--w W --h H]	Diagramas, gráficos, ilustraciones (SVG)
wb rect X Y W H, wb arrow X Y DX DY	Marcos, flechas nativas de la pizarra
`wb patch ID [--text	--file
wb show [RID] [--pending], wb done [RID]	Revisar o cerrar solicitudes

Colores de notas: yellow, pink, sky, mint, violet. Colores de trazos (rect, arrow): ink, red, blue, green, amber, violet.

Dibujar SVG eficiente en tokens

• Las imágenes SVG se muestran a través de <img> (seguro, no ejecuta scripts), por lo tanto LaTeX dentro de SVG no se renderiza. Si necesita fórmulas, dibuje marcos y flechas con SVG y luego coloque elementos tex encima.
• Gráficos o figuras con muchos puntos: genere SVG con un script Python corto, no escriba las coordenadas a mano. El costo en ese caso es solo la longitud del script, no depende del número de puntos.
• Use <style>, <defs> y <marker>, redondee coordenadas. Si solo necesita unos pocos marcos y flechas, use rect/arrow.
• La lectura es casi gratuita: wait solo imprime una línea de descripción por cada imagen SVG, no imprime el código fuente.

Detalles de arquitectura y API: WB/docs/.