Diffuse

# Diffuse Facet > Create an interface or feature facet for Diffuse (diffuse.sh) - Skill: `icidasset/diffuse-facet` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add icidasset/diffuse-facet` - Raw SKILL.md: https://api.skillmd.com/api/skills/icidasset/diffuse-facet/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: icidasset (https://skillmd.com/u/icidasset) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/icidasset/diffuse-facet --- Create a [Diffuse](https://diffuse.sh) facet and produce the HTML ready to paste into the `create/` page. ## Step 1 — Read the docs Use the read tool to read these files: - `docs/architecture.txt` — system overview, facet rules, foundation API - `docs/elements.txt` — all available custom elements with code examples - `docs/foundation.js` — the foundation code mentioned throughout this document - `example/index.html` — a representative interface facet to use as a reference - Any specific definition you need (e.g. `docs/definitions/output/track.json` for the track schema) - `docs/definitions/index.ts` — TypeScript types for all data structures ## Step 2 — Clarify intent If the user hasn't described what the facet should do, ask one plain-language question before proceeding. ## Step 3 — Write the facet Facets are HTML fragments (no ``, ``, or ``). The loader injects them into `

` and sets a `` pointing at the Diffuse build root, so all relative URLs resolve from there. The import map exposes `~/` as the root alias. ### Mandatory rules - **`foundation.ready()`** must be called on every interface facet — it removes the loading spinner. Omitting it leaves the screen stuck on loading. - **`foundation.setup({ title })`** should be called to set the document title. - Always check the definitions fetched in Step 1 for the exact shape of any data you access — never assume top-level fields exist. For example, track metadata lives under `track.tags.*`, not at the top level. - Signal reader functions (`queue.now`, `queue.past`, `queue.future`, …) must be **called inside `effect()`** to be reactive. - Do **not** import modules with top-level `await` from Worker scripts — it causes RPC messages to be dropped. - Use **`@param` annotations above functions**, not inline `@type` in parameter lists. ### Skeleton ```html

``` ### Standard two-column layout ```html

``` For a centered or full-screen layout (player, dialog, etc.) override `body` and `main` in the facet's `

Title