skill
Adom UI Design System
Public Made by Adomby adom
How the AI builds and tests interfaces people love to use in Adom. Ships as one installable skill that bundles focused skills (tooltips, floating-windows, toasts, responsive-ui, app-shell, ai-driven-apps, clickable-paths).
← Commit history
1.10.2: test icons through img src not inline (an inline test cannot fail); count bright pixels
2 files changed
+21−6
package.json+1−1@@ -1,6 +1,6 @@ { "slug": "adom-ui-design",- "version": "1.10.1",+ "version": "1.10.2", "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, dark-default, input-feedback, settings-layout). One install drops the whole set of skill files onto your container, plus shared icon assets (the settings cog) so every Adom app draws the same glyph.", "dependencies": {},
skills/icons/SKILL.md+20−5@@ -104,8 +104,23 @@ grep -nE '<rect[^>]*(width="24"|width="100%")' path/to/icon.svg # background ls path/to/icon.png 2>/dev/null # a raster where an SVG belongs ``` -Then LOOK at it: render the icon at 16px on `#161b22` next to two other Adom app icons. If-yours is the one that stands out, it is wrong, however nice it is on its own. Look for the-invisible case too: an icon that inherited black on a dark strip reads as "no icon", which-is easy to miss when you are checking whether it looks RIGHT rather than whether it is-THERE.+Then LOOK at it, and **test it through the SAME LOAD PATH production uses**:++```html+<!-- CORRECT test: the icon loads as its own document, exactly like a favicon does -->+<div style="background:#161b22;padding:8px"><img src="./dock-yourapp.svg" width="16" height="16"></div>+```++**Testing it INLINE proves nothing.** Pasting the SVG markup into a host page that sets a+color means `currentColor` resolves against that host, so the icon renders happily white no+matter what the file says, and the production failure is structurally impossible to+reproduce. kicad hit exactly this on 2026-08-24: its 16px check passed while the shipped+favicon was invisible. If your test cannot fail, it is not a test.++Then judge two things, in this order:++1. **Is it THERE?** Invisibility is the failure mode and the eye skips absence. Count bright+ pixels in the icon's cell: a healthy 16px line mark lands in the high hundreds to low+ thousands; an inherited-black icon on a dark ground is near zero.+2. **Does it belong?** Render it beside two other Adom app icons. If yours is the one that+ stands out, it is wrong, however nice it is on its own.