pal-e-docs

html-playground — Frontend Prototyping Space

doc-html-playground Doc

active reference
Project

Purpose

Prove visual design with raw HTML+CSS before committing to production repos. Zero framework overhead. Immediate feedback on any device.

Philosophy

  • HTML+CSS first. New experiments start as index.html files. No npm, no build step, no SvelteKit. Open in browser, iterate, refresh.
  • Mobile-first. If it doesn't look right on your phone, it's not ready.
  • Prove the look, not the data. Use fake/hardcoded content. The API integration happens in the production repo (pal-e-app), not here.
  • SvelteKit only when needed. If an experiment requires interactivity (drag-and-drop, auth flows, live API data), SvelteKit is justified. Otherwise, raw HTML.
  • User in the loop. Lucas iterates on design personally. Agents don't ship frontend without visual approval.

Infra

Detail Value
Repo <code>forgejo_admin/playground</code>
Local path <code>~/html-playground</code>
Deployment k8s namespace <code>playground</code>, served on port 80
Public URL Tailscale funnel: <code>playground-funnel</code>
Access Any device on the tailnet

Convention

Experiments are numbered folders in the repo root:
Going forward: new experiments should default to raw index.html unless interactivity is explicitly required.

Promotion Path

  • Playground — iterate on HTML+CSS until it looks right on phone
  • Screenshot = spec — capture the approved look
  • Agent ports to production — dev agent takes the proven CSS into pal-e-app (or whichever SvelteKit repo)
  • User verifies — Lucas checks the production result on device before merge

History

  • 3-westside-dashboard → successfully promoted to westside-app (production SvelteKit app)
  • 4-sprint-board → kanban concept that informed pal-e-app board implementation
  • 5-pal-e-docs → attempted live API integration in playground, hit complexity wall. Lesson: playground proves look, not data integration.
  • plan-pal-e-docs — playground-first is an organizing principle
  • feedback_playground_first — original feedback that established the convention
  • doc-network-traffic-map — shows playground namespace + funnel in cluster topology