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
Add skill-authoring as a bundled skill (the make-a-skill skill); gallia untouched
6 files changed
+111−9
README.md+3−2@@ -304,7 +304,7 @@ Fix every FAIL (the hint tells you exactly what to do), address relevant WARNs, ## 13. The skill map -This whole system ships as **one installable skill**. `adompkg install adom-ui-design` drops the design-system skill **plus all six UI skills below** onto your container as separate skill files, so the AI loads each by its own trigger words. The first six live as files in **this** repo; click to read them. The rest are existing platform skills.+This whole system ships as **one installable skill**. `adompkg install adom-ui-design` drops the design-system skill **plus all seven skills below** onto your container as separate skill files, so the AI loads each by its own trigger words. The first seven live as files in **this** repo; click to read them. The rest are existing platform skills. | Skill | Governs | |---|---|@@ -314,6 +314,7 @@ This whole system ships as **one installable skill**. `adompkg install adom-ui-d | [**responsive-ui**](https://wiki.adom.inc/john/adom-ui-design/files/skills/responsive-ui/SKILL.md) | Phone-to-desktop layouts, touch targets, and tooltips on touch where hover does not exist | | [**app-shell**](https://wiki.adom.inc/john/adom-ui-design/files/skills/app-shell/SKILL.md) | The full-height single-page app shell, the footer / status bar, and the sizing traps | | [**ai-driven-apps**](https://wiki.adom.inc/john/adom-ui-design/files/skills/ai-driven-apps/SKILL.md) | The build-show-drive-ralph loop, the live SSE/WebSocket channel, the three display surfaces |+| [**skill-authoring**](https://wiki.adom.inc/john/adom-ui-design/files/skills/skill-authoring/SKILL.md) | How to author a new Adom skill set as a bundle: many skill files in one repo, never a repo per skill | | [human-ui-patterns](https://wiki.adom.inc/adom/human-ui-patterns) | The broader user-first interaction primitives these were extracted from | | [app-creator](https://wiki.adom.inc/adom/app-creator) | Scaffolding a webview app: two-way comms, proxy URL, favicon, publish flow | | `adom-app-header` | The 44px three-zone header and the app-info popover |@@ -328,7 +329,7 @@ This whole system ships as **one installable skill**. `adompkg install adom-ui-d | `adom-wiki-hero` | Rendering a billboard-grade hero image | | [adom-ui-linter](https://wiki.adom.inc/adom/adom-ui-linter) | The deterministic check suite that enforces this page | -*(The first six are files in this repo and install together with the design system. The other linked skills are existing platform skills with their own pages; plain-text ones have no standalone page yet.)*+*(The first seven are files in this repo and install together with the design system. The other linked skills are existing platform skills with their own pages; plain-text ones have no standalone page yet.)* ---
SKILL.md+3−2@@ -327,7 +327,7 @@ Fix every FAIL (the hint tells you exactly what to do), address relevant WARNs, ## 13. The skill map -This whole system ships as **one installable skill**. `adompkg install adom-ui-design` drops the design-system skill **plus all six UI skills below** onto your container as separate skill files, so the AI loads each by its own trigger words. The first six live as files in **this** repo; click to read them. The rest are existing platform skills.+This whole system ships as **one installable skill**. `adompkg install adom-ui-design` drops the design-system skill **plus all seven skills below** onto your container as separate skill files, so the AI loads each by its own trigger words. The first seven live as files in **this** repo; click to read them. The rest are existing platform skills. | Skill | Governs | |---|---|@@ -337,6 +337,7 @@ This whole system ships as **one installable skill**. `adompkg install adom-ui-d | [**responsive-ui**](https://wiki.adom.inc/john/adom-ui-design/files/skills/responsive-ui/SKILL.md) | Phone-to-desktop layouts, touch targets, and tooltips on touch where hover does not exist | | [**app-shell**](https://wiki.adom.inc/john/adom-ui-design/files/skills/app-shell/SKILL.md) | The full-height single-page app shell, the footer / status bar, and the sizing traps | | [**ai-driven-apps**](https://wiki.adom.inc/john/adom-ui-design/files/skills/ai-driven-apps/SKILL.md) | The build-show-drive-ralph loop, the live SSE/WebSocket channel, the three display surfaces |+| [**skill-authoring**](https://wiki.adom.inc/john/adom-ui-design/files/skills/skill-authoring/SKILL.md) | How to author a new Adom skill set as a bundle: many skill files in one repo, never a repo per skill | | [human-ui-patterns](https://wiki.adom.inc/adom/human-ui-patterns) | The broader user-first interaction primitives these were extracted from | | [app-creator](https://wiki.adom.inc/adom/app-creator) | Scaffolding a webview app: two-way comms, proxy URL, favicon, publish flow | | `adom-app-header` | The 44px three-zone header and the app-info popover |@@ -351,7 +352,7 @@ This whole system ships as **one installable skill**. `adompkg install adom-ui-d | `adom-wiki-hero` | Rendering a billboard-grade hero image | | [adom-ui-linter](https://wiki.adom.inc/adom/adom-ui-linter) | The deterministic check suite that enforces this page | -*(The first six are files in this repo and install together with the design system. The other linked skills are existing platform skills with their own pages; plain-text ones have no standalone page yet.)*+*(The first seven are files in this repo and install together with the design system. The other linked skills are existing platform skills with their own pages; plain-text ones have no standalone page yet.)* ---
install.sh+2−1@@ -13,6 +13,7 @@ install_skill toasts skills/toasts/SKILL.md 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 skill-authoring skills/skill-authoring/SKILL.md -echo "OK: Installed the Adom UI Design System plus 6 bundled UI skills to $DEST/."+echo "OK: Installed the Adom UI Design System plus 7 bundled skills to $DEST/." echo "Hint: Ask Claude 'what are the Adom color tokens', 'great tooltips', or 'make my app a joy to use'."
package.json+3−2@@ -1,6 +1,6 @@ { "slug": "adom-ui-design",- "version": "1.2.1",+ "version": "1.3.0", "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). One adompkg install drops the whole set of skill files onto your container.", "dependencies": {},@@ -17,7 +17,8 @@ "skills/toasts/SKILL.md", "skills/responsive-ui/SKILL.md", "skills/app-shell/SKILL.md",- "skills/ai-driven-apps/SKILL.md"+ "skills/ai-driven-apps/SKILL.md",+ "skills/skill-authoring/SKILL.md" ], "scripts": { "install": "./install.sh",
skills/skill-authoring/SKILL.mdadded+98@@ -0,0 +1,98 @@+---+name: skill-authoring+user-invocable: true+description: >-+ How to author a new set of Adom skills as a standalone wiki package, the right way. A wiki repo on+ wiki.adom.inc is a full git repo that holds MANY skill files; bundle related skills as separate+ files in ONE repo and let the package install deploy them all, never create a separate wiki repo+ (page) per skill. Read BEFORE creating any new skill or skill set so you never spin up a repo per+ small skill. Covers the bundle layout (root SKILL.md plus skills/<sub>/SKILL.md), an install.sh+ that copies every skill, the package.json files whitelist, frontmatter conventions, and publishing+ with adompkg. Trigger words: make a skill, create a skill, new skill, author a skill, skill file,+ SKILL.md, skill bundle, bundle skills, wiki package, adompkg package, install.sh skills, publish a+ skill, set of skills, how do skills work, one repo many skills, do not make a repo per skill.+---++# Authoring an Adom skill set++A skill is a Markdown file (SKILL.md) that teaches the AI to do a specialized task. The AI loads a+skill by matching its frontmatter `description` to what the user is doing, then reads the body.++The rule that matters most, and the one that gets broken: **a wiki repo is a full git repo that+holds many skill files. Bundle related skills as separate files in ONE repo. Never make a separate+wiki repo, or page, per skill.**++> **THE MISTAKE TO NEVER MAKE.** Do not create one wiki page per small skill. A skill as small as a+> tooltip spec is a file in a bundle, not its own repo. Spinning up a page per skill pollutes the+> owner's namespace, and wiki pages **cannot be hard-deleted**: a `DELETE` only soft-deletes and+> reserves the slug for good. If you catch yourself looping `POST /pages` to create many small+> skills, stop. You want one package with many files under `skills/`.++## The bundle layout++One wiki repo equals one installable package that can carry a whole set of skills:++```+my-set/ (one wiki repo, one adompkg package)+ SKILL.md # the main skill (REQUIRED at repo root by the registry)+ README.md # rendered on the page Overview tab+ page.json # page metadata (title, brief, hero, visibility)+ package.json # version, files[] lists EVERY skill file, scripts.install/uninstall+ install.sh # copies the main skill AND every sub-skill to ~/.claude/skills/<name>/+ uninstall.sh # removes them all+ skills/+ sub-skill-a/SKILL.md # each sub-skill: its own folder and SKILL.md+ sub-skill-b/SKILL.md+ sub-skill-c/SKILL.md+```++A single `adompkg install my-set` then drops the main skill plus every sub-skill onto the user's+container as separate skill files, each loadable by its own trigger words.++## install.sh deploys every skill, explicitly++The publish linter rejects an `install.sh` that misses any bundled sub-skill, so list each one. Do+not rely on a glob.++```bash+#!/usr/bin/env bash+set -e+DEST="$HOME/.claude/skills"+install_skill() { mkdir -p "$DEST/$1"; cp "$2" "$DEST/$1/SKILL.md"; }++install_skill my-set SKILL.md+install_skill sub-skill-a skills/sub-skill-a/SKILL.md+install_skill sub-skill-b skills/sub-skill-b/SKILL.md+install_skill sub-skill-c skills/sub-skill-c/SKILL.md+echo "OK: Installed my-set plus 3 bundled skills to $DEST/."+```++`uninstall.sh` removes the same set. `package.json` `files[]` must list `SKILL.md`, `README.md`,+`package.json`, `install.sh`, `uninstall.sh`, and every `skills/<sub>/SKILL.md`, plus+`scripts.install` and `scripts.uninstall` pointing at the two scripts.++## Frontmatter++```yaml+---+name: my-sub-skill # kebab-case, matches the folder name+user-invocable: true # set if the user can trigger it with /name+description: >- # third person, what + when, with quoted trigger phrases at the end+ What this skill does and when to use it. Read BEFORE doing X. Trigger words: ...+---+```++Only `name` and `description` are pre-loaded, so the description must carry enough signal for the AI+to pick the skill, and a generous list of trigger phrases. Keep the body focused; one skill, one job.+If a skill is growing past one purpose, split it into another file in the same bundle.++## Publishing++Publish the whole package with the Adom Wiki (`adom-wiki-v2`) workflow: create the page once, push+all files to the git layer (text as plain content, binaries base64), then `adompkg publish` for the+installable tarball. `adompkg publish` resets the page title and brief to the package values, so+re-PUT the title, brief, and hero afterward. Always verify the page renders, and that+`adompkg install` deploys every skill, before calling it done.++The live example of this whole pattern is the `adom-ui-design` package, which bundles this skill+alongside the UI skills.
uninstall.sh+2−2@@ -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; do+for n in adom-ui-design tooltips floating-windows toasts responsive-ui app-shell ai-driven-apps skill-authoring; do rm -rf "$DEST/$n" done-echo "OK: Removed the Adom UI Design System and its 6 bundled UI skills."+echo "OK: Removed the Adom UI Design System and its 7 bundled skills."