Adom UI Design System

@@ -18,7 +18,10 @@ description: >-   server-sent events, show app in native browser, show app in pup, webview vs pup, auto-click,   auto click buttons, toast, ui toast, app header, 44px header, tooltip, mobile tooltip, responsive,   mobile layout, on-brand, color tokens, theme tokens, cli design, hints, 3d viewer, hero image,-  ui linter, make my app a joy to use.+  ui linter, make my app a joy to use, html, static page, static html, write html, css, style a page,+  page styling, cheat sheet, landing page, prefers-color-scheme, dark mode, dark by default,+  light mode toggle. NOTE: applies even to a single throwaway .html file, not just full apps —+  Adom is a dark system, so ANY page you write defaults to dark (see the bundled dark-default skill). ---  # Adom UI Design System

@@ -15,6 +15,7 @@ install_skill responsive-ui    skills/responsive-ui/SKILL.md install_skill app-shell        skills/app-shell/SKILL.md install_skill ai-driven-apps   skills/ai-driven-apps/SKILL.md install_skill clickable-paths  skills/clickable-paths/SKILL.md+install_skill dark-default     skills/dark-default/SKILL.md -echo "OK: Installed the Adom UI Design System plus 7 bundled skills to $DEST/."+echo "OK: Installed the Adom UI Design System plus 8 bundled skills to $DEST/." echo "Hint: Ask Claude 'what are the Adom color tokens', 'great tooltips', or 'make my app a joy to use'."

@@ -1,8 +1,8 @@ {   "slug": "adom-ui-design",-  "version": "1.4.2",+  "version": "1.4.3",   "type": "skill",-  "description": "The Adom UI Design System plus a bundle of focused UI skills (tooltips, floating-windows, toasts, responsive-ui, app-shell, ai-driven-apps, clickable-paths). One install drops the whole set of skill files onto your container.",+  "description": "The Adom UI Design System plus a bundle of focused UI skills (tooltips, floating-windows, toasts, responsive-ui, app-shell, ai-driven-apps, clickable-paths, dark-default). One install drops the whole set of skill files onto your container.",   "dependencies": {},   "files": [     "SKILL.md",@@ -18,7 +18,8 @@     "skills/responsive-ui/SKILL.md",     "skills/app-shell/SKILL.md",     "skills/ai-driven-apps/SKILL.md",-    "skills/clickable-paths/SKILL.md"+    "skills/clickable-paths/SKILL.md",+    "skills/dark-default/SKILL.md"   ],   "scripts": {     "install": "./install.sh",@@ -53,7 +54,14 @@     "path link",     "walkthrough",     "toggle button",-    "master toggle"+    "master toggle",+    "dark mode",+    "dark by default",+    "light mode",+    "html page",+    "static html",+    "page theme",+    "off-brand white"   ],   "discovery_pitch": "The Adom UI design system: how to build app UIs that are beautiful, self-explaining, responsive, and a joy for an AI to drive - headers, tooltips (viewport-clamped, ralph-tested), toasts, floating HUDs, touch.",   "sample_prompts": [@@ -77,5 +85,8 @@       "label": "make this UI responsive for mobile",       "prompt": "make this UI responsive for mobile"     }-  ]+  ],+  "hero": {+    "path": "screenshots/hero.png"+  } }

@@ -1,8 +1,8 @@ {   "slug": "adom-ui-design",-  "version": "1.4.2",+  "version": "1.4.3",   "type": "skill",-  "description": "The Adom UI Design System plus a bundle of focused UI skills (tooltips, floating-windows, toasts, responsive-ui, app-shell, ai-driven-apps, clickable-paths). One install drops the whole set of skill files onto your container.",+  "description": "The Adom UI Design System plus a bundle of focused UI skills (tooltips, floating-windows, toasts, responsive-ui, app-shell, ai-driven-apps, clickable-paths, dark-default). One install drops the whole set of skill files onto your container.",   "dependencies": {},   "files": [     "SKILL.md",@@ -18,7 +18,8 @@     "skills/responsive-ui/SKILL.md",     "skills/app-shell/SKILL.md",     "skills/ai-driven-apps/SKILL.md",-    "skills/clickable-paths/SKILL.md"+    "skills/clickable-paths/SKILL.md",+    "skills/dark-default/SKILL.md"   ],   "scripts": {     "install": "./install.sh",@@ -64,7 +65,14 @@     "path link",     "walkthrough",     "toggle button",-    "master toggle"+    "master toggle",+    "dark mode",+    "dark by default",+    "light mode",+    "html page",+    "static html",+    "page theme",+    "off-brand white"   ],   "discovery_pitch": "The Adom UI design system: how to build app UIs that are beautiful, self-explaining, responsive, and a joy for an AI to drive - headers, tooltips (viewport-clamped, ralph-tested), toasts, floating HUDs, touch.",   "sample_prompts": [

@@ -0,0 +1,77 @@+---+name: dark-default+user-invocable: true+description: >-+  Adom is a DARK system, so every page, panel, webview, artifact, and one-off .html file the AI+  writes defaults to dark mode — light is the opt-in override, never the base. Read this the instant+  you are about to write ANY HTML or CSS, even a throwaway cheat sheet or a two-minute static page+  that does not feel like "an app". The classic mistake is styling :root light and adding dark as a+  prefers-color-scheme override — that is BACKWARDS for Adom, whose surfaces (wv tabs, hd panels)+  render dark by default, so a light-base page flashes white and reads as off-brand. This is the+  30-second rule; the parent adom-ui-design skill is the full design system (tokens, header, linter).+  Read BEFORE writing any HTML/CSS. Trigger words: html, write html, static page, static html, css,+  style a page, page styling, cheat sheet, landing page, webview page, wv page, dark mode,+  dark by default, light mode, prefers-color-scheme, theme, background color, off-brand, white flash,+  quick page, one-off html.+---++# dark-default — every page starts dark++**Adom is a dark system.** wv tabs and hd panels render dark by default, so **every** surface the+AI produces — a full app, a Hydrogen webview, an artifact, or a single throwaway `.html` file —+uses a **dark base**. Light is an opt-in override, never the default.++This is the 30-second rule. For the full system (tokens, the 44px header, interaction rules, the+linter) read the parent **adom-ui-design** skill — this one just fixes the thing people get backwards.++## The one rule++> Style `:root` **dark**. If you support light at all, make **light** the `prefers-color-scheme`+> override — not the other way around. Never ship a page whose base (no media query) is light.++## ✅ Correct — dark is the base++```css+:root{                       /* dark IS the default */+  --bg:#0d1117; --surface:#161b22; --ink:#e6edf3;+  --line:#30363d; --muted:#8b949e; --accent:#00b8b0; --purple:#8c6bf7;+}+@media (prefers-color-scheme: light){   /* light is the OPT-IN override */+  :root{ --bg:#ffffff; --surface:#f6f8fa; --ink:#1f2328;+    --line:#d0d7de; --muted:#59636e; }+}+body{ background:var(--bg); color:var(--ink); }+```++## Wrong — what NOT to do (light base, dark bolted on)++```css+:root{ --bg:#ffffff; --ink:#111; }                            /* base is light — off-brand */+@media (prefers-color-scheme: dark){ :root{ --bg:#0d1117; } }  /* backwards */+```++A dark-by-default surface showing a light-base page flashes white before the media query resolves+(or when the surface reports no preference), and reads as not-ours.++## Canonical dark tokens (from adom-ui-design)++| Token | Value | Use |+|---|---|---|+| `--bg` | `#0d1117` | Page, deepest background |+| `--surface` | `#161b22` | Cards, panels, raised areas |+| `--ink` | `#e6edf3` | Primary text |+| `--line` | `#30363d` | Borders, dividers |+| `--muted` | `#8b949e` | Secondary text |+| `--accent` | `#00b8b0` | The one teal accent — interactive/important only |+| `--purple` | `#8c6bf7` | Group labels, secondary accent |++Use the teal accent sparingly, so it always means "this is interactive or important". No emoji,+no em-dashes (see adom-ui-design section 11).++## Also applies to++- **Babylon / 3D viewers** — dark vertical-gradient background, light mode is a toggle+  (adom-ui-design section 7). Never a flat pure-black background (it hides black IC bodies).+- **Artifacts** — same rule: dark base, light as the `prefers-color-scheme` / `data-theme` override.+- **Throwaway pages** — yes, even the two-minute cheat sheet. Especially those, since that is where+  the light-base habit sneaks back in.

@@ -1,7 +1,7 @@ #!/usr/bin/env bash set -e DEST="$HOME/.claude/skills"-for n in adom-ui-design tooltips floating-windows toasts responsive-ui app-shell ai-driven-apps clickable-paths skill-authoring; do+for n in adom-ui-design tooltips floating-windows toasts responsive-ui app-shell ai-driven-apps clickable-paths dark-default skill-authoring; do   rm -rf "$DEST/$n" done-echo "OK: Removed the Adom UI Design System and its 7 bundled skills."+echo "OK: Removed the Adom UI Design System and its 8 bundled skills."