# Acryl Add UI

> Use when an ACRYL extension needs UI in the Web or Desktop app (a button, panel, sidebar tab, settings section, dashboard).

- Skill: `acryldev/acryl-add-ui` (Agent Skill)
- Install (CLI): `npx skillmds@latest add acryldev/acryl-add-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/acryldev/acryl-add-ui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: acryldev (https://skillmd.com/u/acryldev)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/acryldev/acryl-add-ui

---

# Add UI to ACRYL (web and desktop)

First read {{pack}}/docs/maps/mount-points.md to choose the mount point and check the surface: Web and Desktop use client
slots (header actions, sidebar tab, settings, composer, tool and message renderers, and on Desktop the `desktop.main` frame); the
CLI has only terminal overlays (`tuiCommands`, see {{pack}}/docs/extending/tui-command.md), so a UI request from a terminal user
means an overlay, not a slot. Then read {{pack}}/docs/extending/ui-components.md (build from the app's own Button, Modal, Input, Switch, Tag via require, not hand styles) and {{pack}}/docs/extending/client-slot.md completely, then the example
{{pack}}/example-plugins/packages/client-slot-header-action/ (index.js and client.js).

Key facts: the package has a host half (empty apply) and a browser half client.js exported as "./client" with
"dsh.client" in package.json. There is no build step: write client.js by hand inside the
window.__ModuleLoader__.load wrapper, use React.createElement (no JSX, no import), and pick a slot from the
table in the doc. Decide where state lives first ({{pack}}/docs/extending/state-and-persistence.md): localStorage is per browser and per surface (Web and Desktop never share it), so
when the data must be the same in both, or survive clearing the browser, keep it on the host behind an RPC channel (example state-host-store); tell the user which you chose. Deliver with acryl_install_plugin and
tell the user to reload the page or window.