← ClaudeAtlas

prosa-panel-renderinglisted

Panel behavior and rendering conventions for prosa. Use when changing internal/panel templates, HTMX partials, Alpine state, inline SVG charts, CSS tokens, or OAuth flow.
c3-oss/prosa · ★ 1 · Data & Documents · score 57
Install: claude install-skill c3-oss/prosa
# Prosa Panel Rendering Use this skill before changing the panel's HTML, templates, or client-side behavior. ## Stack - **Go + `html/template` + `embed.FS`** — server-rendered, single binary, no build step. - **HTMX** — partial swaps for the sidepanel and raw transcript pagination today; chart filter swaps as the panel grows. - **Alpine.js (~15 KB)** — local UI state only: toggles, modals, hover, filter pill open/close, command palette. Not for data fetching. - **Inline SVG charts generated in Go** (`internal/panel/charts/`) — sparkline, bar row, donut, heatmap, trend. Deterministic; tested against golden SVGs. - **CSS in modules** under `internal/panel/templates/assets/css/`, imported via native `@import`. No bundler. - **SSE** at `/events` — live badge of new sessions; future live KPI ticks. The full surface is documented in `docs/architecture/panel.md`. The design contract is in `docs/panel/screens.md` and `docs/panel/components.md`. ## Rules - **No build step.** No esbuild, no vite, no `npm install`. Everything ships via `embed.FS`. - **No SPA patterns.** No client-side router. No global store. No hydration. - **Server-first state.** Data state lives on the server; UI state lives on the client. The dividing line is HTMX (server data) versus Alpine (UI toggles). - **Charts in Go, not JS.** Reach for `internal/panel/charts/` helpers, not Chart.js / D3 / similar. - **Design tokens are the only colors.** `tokens.css` defines `--bg`, `--text-*`,