Move all three skills into skills/; add root README; fix paths

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

skills/rpa-dashboard-no-ai/templates/themes.md

@@ -0,0 +1,99 @@
+# Theme presets
+
+The theme lives **only** in the two token blocks at the top of `dashboard.html`:
+`body{...}` (light) and `body.dark{...}` (dark). To apply a theme, replace both
+blocks. Never edit component CSS, layout or script to restyle. Every palette
+ships with both blocks, so dark mode never looks broken.
+
+Status colours `--ok`, `--warn` and `--bad` are semantic (done / in progress or
+attention / failed). Keep them unless the user gives their own.
+
+Component tokens say where a preset puts its brand:
+`--header-bg`, `--header-ink`, `--header-muted` (top bar), `--primary-bg`
+(primary buttons), `--nav-active-bg` (active nav row and avatar),
+`--progress-bg` (progress fill), `--blur` (glass blur, or `none` for flat),
+`--font` (body) and `--font-display` (headings, figures, buttons).
+
+## 1. Tebra Sky (the template default)
+
+Blue glass cards on a sky gradient. Segoe UI. Accent `#3d9bd0`.
+
+```css
+body{
+  --bg-top:#8fc9e8; --bg-mid:#bfe3f2; --bg-bottom:#eaf6fb;
+  --glass:rgba(255,255,255,.60); --glass-strong:rgba(255,255,255,.78); --border:rgba(255,255,255,.9);
+  --ink:#1c2b33; --muted:#5c7382; --accent-dark:#16202a;
+  --accent:#3d9bd0; --accent-2:#5cb2e2; --accent-soft:#d4edfa; --accent-soft-2:#a9d8ee;
+  --ok:#1f9d57; --ok-bg:#e6f6ec; --warn:#b7791f; --warn-bg:#fbf1dd; --bad:#c0392b; --bad-bg:#fdecea;
+  --font:'Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif; --font-display:var(--font);
+  --header-bg:var(--glass-strong); --header-ink:var(--ink); --header-muted:var(--muted);
+  --primary-bg:linear-gradient(180deg,var(--accent-2),var(--accent));
+  --nav-active-bg:linear-gradient(135deg,var(--accent),var(--accent-dark));
+  --progress-bg:var(--ok); --blur:blur(14px);
+}
+body.dark{
+  --bg-top:#0f1b26; --bg-mid:#13212e; --bg-bottom:#182a38;
+  --glass:rgba(22,34,44,.72); --glass-strong:rgba(30,45,58,.85); --border:rgba(120,160,190,.22);
+  --ink:#e6eef4; --muted:#8fa6b4; --accent-dark:#2e5d80;
+  --accent-soft:#2e5d90; --accent-soft-2:#1d3d5e;
+  --ok:#2fbf72; --ok-bg:rgba(31,157,87,.16); --warn:#d9a13c; --warn-bg:rgba(183,121,31,.16);
+  --bad:#e05a4b; --bad-bg:rgba(192,57,43,.16);
+}
+```
+
+## 2. Superbill Ember
+
+Flat surfaces. The brand gradient `#ff3049` → `#f26b21` appears **only** on the
+top bar, primary buttons, the active nav row and the progress fill. Nothing else
+gets it. Sora for display, IBM Plex Sans for body.
+
+Also add this line inside `<head>`, before `<style>`. Offline (for example in a
+PyQt app with no internet), the fonts fall back to Segoe UI, which is fine.
+
+```html
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Sora:wght@600;700;800&display=swap">
+```
+
+```css
+body{
+  --bg-top:#f4f3f7; --bg-mid:#f4f3f7; --bg-bottom:#f4f3f7;
+  --glass:#ffffff; --glass-strong:#f7f6fa; --border:#e2dfe9;
+  --ink:#18151f; --muted:#66607a; --accent-dark:#18151f;
+  --accent:#ff3049; --accent-2:#f26b21; --accent-soft:#f7f6fa; --accent-soft-2:#e2dfe9;
+  --ok:#1f9d57; --ok-bg:#e6f6ec; --warn:#b7791f; --warn-bg:#fbf1dd; --bad:#c0392b; --bad-bg:#fdecea;
+  --font:'IBM Plex Sans','Segoe UI',-apple-system,sans-serif; --font-display:'Sora','Segoe UI',sans-serif;
+  --header-bg:linear-gradient(100deg,#ff3049,#f26b21); --header-ink:#ffffff; --header-muted:rgba(255,255,255,.85);
+  --primary-bg:linear-gradient(115deg,#ff3049,#f26b21);
+  --nav-active-bg:linear-gradient(100deg,#ff3049,#f26b21);
+  --progress-bg:linear-gradient(90deg,#ff3049,#f26b21); --blur:none;
+}
+body.dark{
+  --bg-top:#0a0912; --bg-mid:#0a0912; --bg-bottom:#0a0912;
+  --glass:#151220; --glass-strong:#1b1727; --border:#2a2438;
+  --ink:#f3f1f8; --muted:#8d87a0; --accent-dark:#100e1a;
+  --accent-soft:#1b1727; --accent-soft-2:#2a2438;
+  --ok:#2fbf72; --ok-bg:rgba(31,157,87,.16); --warn:#d9a13c; --warn-bg:rgba(183,121,31,.16);
+  --bad:#e05a4b; --bad-bg:rgba(192,57,43,.16);
+}
+```
+
+## 3. Custom (one brand hex)
+
+Start from the Tebra Sky blocks above, then derive the accent family from the
+user's brand colour:
+
+```
+python <skill>/templates/palette.py "#7a3cff"
+```
+
+It prints the `--accent`, `--accent-2`, `--accent-dark`, `--accent-soft` and
+`--accent-soft-2` values for both blocks, then a contrast table for light and dark:
+- white button text on the accents, at least 3:1;
+- accent-coloured text on the page, at least 3:1;
+- ink on the soft buttons, at least 4.5:1;
+- log text on the log box, at least 4.5:1.
+
+If the brand colour is too light or too dark to read, the script nudges it until
+every check passes. Paste the printed tokens over the same tokens in both blocks.
+Show the user the contrast table, and say so if their colour was nudged.
+Keep ok/warn/bad unless the user gives their own.