bootstrap
Adom Hydrogen (platform base)
Public Made by Adomby adom
Layer Hydrogen's workspace onto a standard Adom workstation.
← Commit history
package.json+1−1@@ -4,7 +4,7 @@ "type": "bootstrap", "title": "Hydrogen Desktop Bootstrap (apps + skills)", "brief": "Layer Hydrogen Desktop's workspace onto a standard Adom workstation.",- "version": "0.2.29",+ "version": "0.2.30", "description": "Hydrogen Desktop's PLATFORM-GENERIC workspace layer on top of adom/core. Installs adom/core for the full Adom ecosystem, then adds everything common to running inside Hydrogen Desktop on ANY platform: the platform-generic hd-* skills (BUNDLED in this package by design; wsl2 skills ride adom/hd-windows-bootstrap, mac skills ride adom/hd-mac-bootstrap) and the generic HD editor configuration (Claude Code CLI + extension, VS Code settings, trusted domains). Platform-specific layers depend on THIS: adom/hd-windows-bootstrap, adom/hd-mac-bootstrap.", "org": "adom", "tags": [
page.json+1−1@@ -4,7 +4,7 @@ "type": "bootstrap", "title": "Hydrogen Desktop Bootstrap (apps + skills)", "brief": "Layer Hydrogen Desktop's workspace onto a standard Adom workstation.",- "version": "0.2.29",+ "version": "0.2.30", "description": "Hydrogen Desktop's PLATFORM-GENERIC workspace layer on top of adom/core. Installs adom/core for the full Adom ecosystem, then adds everything common to running inside Hydrogen Desktop on ANY platform: the platform-generic hd-* skills (BUNDLED in this package by design; wsl2 skills ride adom/hd-windows-bootstrap, mac skills ride adom/hd-mac-bootstrap) and the generic HD editor configuration (Claude Code CLI + extension, VS Code settings, trusted domains). Platform-specific layers depend on THIS: adom/hd-windows-bootstrap, adom/hd-mac-bootstrap.", "org": "adom", "tags": [
skills/hd-avatar/SKILL.md+39−1@@ -70,7 +70,8 @@ PNG comes from it. Design rules that actually matter for an avatar: - **Square canvas, centered composition**, safe margin — it gets clipped to a circle everywhere. - **Legible at 32px.** This is the real constraint. Two shapes and one accent survive; fine- linework and long text do not. Zoom out and check before you ship.+ linework and long text do not. Zoom out and check before you ship. If it fails at 32px, the fix+ is usually a TIGHTER CROP (below), not a simpler drawing. - **High contrast**, and it must hold on both dark and light chrome. - Brand teal `#00b8b0` sits naturally in Adom surfaces, but a personal avatar may deliberately differ from the platform palette — this is *their* identity, not a UI chrome element.@@ -78,6 +79,43 @@ Design rules that actually matter for an avatar: Keep the SVG in their container, e.g. `~/project/avatars/<name>-v1.svg`, so it's editable later. +### Frame the AVATAR tight — the master and the upload are NOT the same crop++The single most common mistake: author a lovely full composition — a character with a+background, a scene, a full-body mark — render it as-is, and upload it. In a 26px circle the+subject is now an unreadable speck (John hit exactly this: *"you need to zoom to the face for+the actual rendering of the avatar, it shows in a little circle in all the UI"*).++So separate the two jobs:++- **Master SVG** — keep the full composition. It's the artwork, the thing worth archiving.+- **Avatar export** — a **tight crop on the subject**: the face, the monogram, the mark. It+ should fill roughly **70–85% of the frame**, centered, with a small safe margin.++Vector makes this free — you do not need a second drawing. Export the avatar with a **viewBox+that frames just the subject**:++```xml+<!-- master: the whole scene -->+<svg viewBox="0 0 1000 1000"> … </svg>++<!-- avatar export: same artwork, zoomed to the face at 300,220 -->+<svg viewBox="300 220 260 260"> … </svg>+```++Sizes it will actually be seen at — check the crop at the SMALLEST, not the largest:++| Surface | Rendered size |+|---|---|+| HD title bar | ~26–36px |+| Profile menu (Identity Card) | 44px |+| Identity Card, large | 64px |+| Profile page picture | ~224px |++**It is clipped to a circle everywhere**, so keep the subject centered and put nothing that+matters in the corners. Before uploading, look at the PNG scaled down to 32px: if you can't tell+what it is, re-crop tighter — don't just redraw.+ ## 4. Render → upload → repaint ```bash