Vision

The frontend development practice. Prove visual design with vanilla HTML, CSS, and JavaScript before committing to production repos. Zero framework overhead. Immediate feedback on any device. Lucas iterates here personally — agents don't ship frontend without visual approval.

Rule: vanilla HTML, CSS, and JavaScript only. No npm, no SvelteKit, no build step. If it can't be opened directly in a browser, it doesn't belong in a playground. SvelteKit and framework concerns live in production repos (pal-e-app, westside-app).

User Stories

• As Lucas, I want to prototype a page layout on my phone in minutes, so that I can lock the visual design before any agent writes framework code.
• As Lucas, I want to save an HTML file and immediately see it on my phone via the Tailscale funnel, so that iteration is instant with zero build steps.
• As a new project, I want a clear SOP for creating my own playground repo that follows the established CSS philosophy.
• As a dev agent, I want a proven HTML/CSS prototype to copy-paste into a SvelteKit production app, so that I know exactly what CSS to port.

Architecture

Linked-Repo Model

Each product project owns its own -playground repo. The pal-e-playground repo is the hub — it contains the CSS philosophy guide and landing page, not project prototypes. Project playground repos are listed under both their own project AND under this project as references.

pal-e-playground/              ← hub repo (CSS guide + landing page only)
  index.html                   ← landing page with guide link
  guide/                       ← canonical CSS philosophy reference
    index.html

westside-playground/           ← separate repo, Westside prototypes
mcd-tracker-playground/        ← separate repo, mcd-tracker prototypes (future)

How It Works

Each playground repo is served via nginx hostPath + Tailscale funnel. Save a file locally, refresh the browser on any device — instant. No build, no deploy, no CI.

Frontend Development Workflow

Layer	Tool	Who	Purpose
CSS reference	pal-e-playground/guide/	Agents + Lucas	Canonical CSS philosophy — 3 systems, 5 properties, 10 rules, debugging playbook
Visual design	[project]-playground repo	Lucas	Prove the look, mobile-first, iterate fast
Backend / API	pal-e-docs, basketball-api, etc.	Agents	Data model, endpoints, business logic
Production frontend	pal-e-app, westside-app (SvelteKit)	Agents → Lucas verifies	Marry proven CSS with real data + interactivity

Promotion Path

1. Playground — iterate on HTML+CSS in the project's own playground repo until it looks right on phone
2. The HTML/CSS IS the spec — no screenshots as intermediary
3. Agent ports to production — dev agent copy-pastes the proven CSS into the SvelteKit repo
4. Lucas verifies on device — production result checked on phone before merge

Project Onboarding

When a new project needs a frontend, follow sop-frontend-experiment:

1. Create a [project]-playground Forgejo repo
2. Read convention-frontend-css and the pal-e-playground/guide/ before writing any CSS
3. Prototype with hardcoded/fake data — prove the look, not the data
4. Set up nginx hostPath + Tailscale funnel for phone verification
5. When approved, create Forgejo issue on the production repo referencing the prototype

Status

• pal-e-playground repo: LIVE. Hub + CSS guide. PR #2 merged (2026-03-16).
• westside-playground: Existing, stays as its own repo.
• html-playground: ARCHIVED. Guide content recreated in pal-e-playground.
• Convention + SOP: Updated with linked-repo model, debugging playbook, 3 layout systems, 5 core properties.

Milestones

• 2026-03 (original) — html-playground created. 5 SvelteKit experiments. Experiment #3 promoted to westside-app.
• 2026-03-15 — Philosophy reset: vanilla HTML/CSS/JS only.
• 2026-03-15 — Linked-repo model established. pal-e-playground = hub + CSS guide. Each project owns its own -playground repo. Convention and SOP updated with debugging playbook, 3 layout systems, 5 core properties.

Repos

Hub Repo

Repo	Platform	Role
forgejo_admin/pal-e-playground	Forgejo	CSS philosophy guide + landing page (hub only — no project prototypes)

Project Playground Repos

Repo	Platform	Product Project	Production Repo
forgejo_admin/westside-playground	Forgejo	Westside Basketball	westside-app

Archived

Repo	Platform	Status
forgejo_admin/playground	Forgejo	ARCHIVED — replaced by pal-e-playground

Key Conventions

• convention-frontend-css — the CSS rules, layout systems, debugging playbook
• sop-frontend-experiment — how to create playground repos and onboard projects

Board

No board yet. Work tracked via plan-pal-e-agency Phase 14. Board created when sustained execution begins.