# Theme Lab

A playground of self-contained HTML files for experimenting with unique website skins — especially ones AI generates well when given strong visual rules.

## Quick start

```bash
cd theme-lab
python3 -m http.server 8787
```

Open [http://localhost:8787](http://localhost:8787). A local server is required so `themes.json` loads in the gallery.

**Live:** [https://themes.uft1.com](https://themes.uft1.com) · [pages.dev mirror](https://theme-lab-6vn.pages.dev)

`themes.uft1.com` routes through the Mac mini Cloudflare tunnel (`mac-mini-local`) to the Pages deployment. Content is hosted on **Cloudflare Pages**; the tunnel provides the custom hostname on `uft1.com`.

## Deploy (Cloudflare Pages)

```bash
cd theme-lab
nvm use 20   # wrangler needs Node 20+
wrangler pages deploy . --project-name=theme-lab
```

After deploy, `themes.uft1.com` picks up changes automatically (tunnel proxies to Pages). To update tunnel ingress, sync [`mac-mini-infra/cloudflared/config.yml`](../mac-mini-infra/cloudflared/config.yml) to `~/.cloudflared/config.yml` and restart `com.jo.cloudflared`.

## Structure

```text
theme-lab/
├── index.html          # gallery launcher
├── themes.json         # full catalog (built + planned)
├── _scaffold/          # optional shared demo content + copy-prompt.js
├── _prompts/           # AI prompt recipes by tier
└── themes/<id>/        # one index.html per built theme
```

## Add a theme

1. Create `themes/<id>/index.html` (self-contained, inline CSS).
2. Add or update the entry in `themes.json` — set `"status": "built"`.
3. Include a back link: `<a href="../../index.html">← gallery</a>`.
4. Add a **Copy AI prompt** button (`data-theme-id="<id>"`) and load `_scaffold/copy-prompt.js` — see any built theme for the pattern.

For fair comparisons, copy sections from `_scaffold/content.html` before styling.

Each built theme page includes a **Copy AI prompt** button that copies the same recipe the gallery uses for planned themes.

## Generate a theme with AI

1. Pick a catalog entry (Tier **S** for best results).
2. Copy `_scaffold/content.html` into your prompt.
3. Copy the recipe from `_prompts/tier-s.md` or `tier-a.md`.
4. Use this template:

```text
Create a single self-contained index.html for theme-lab.
Use this content structure: [paste scaffold]
Visual style: [theme title]
Rules (must follow all): [paste rules from themes.json]
Constraints: inline CSS only, no external frameworks, include back link to ../../index.html
```

## Tier guide

| Tier | Reliability | When to use |
|------|-------------|-------------|
| **S** | 95–100% | terminal, pixel, Win95, DOS, blueprint, newspaper |
| **A** | 85–95% | CRT, mission control, cyberdeck, brutalism, Swiss |
| **B** | Variable | library, explorer, VHS, radio, lab notebook, whiteboard, RPG sheet, parchment, rolodex, arcade, shipping |

All **22** catalog themes are built. Use the gallery to open any skin.

## Rules

- One HTML file per theme. No bundler, no npm.
- No shared theme CSS — each skin is isolated.
- Gallery stays neutral and boring on purpose.