/glaze-app-dev

name: glaze-app-dev
description: Build, edit, run, and debug Glaze (Raycast) desktop apps directly from Claude Code, for free, using your own Claude subscription instead of Glaze's paid credits. Use whenever the user wants to create, modify, style, fix, or add features to a Glaze app, mentions Glaze, a Glaze app, or an app under Glaze's apps folder.

Developing Glaze apps from Claude Code (credit-free)

Glaze (by Raycast) builds macOS desktop apps with an AI agent. That built-in agent is what costs **Glaze credits**. But every Glaze app is an ordinary **Claude Code project on disk**, you own the code (Glaze states this explicitly). So you can edit, build and run it with your own Claude Code and local tooling and spend **zero Glaze credits**. Building/compiling is fully local and free.

This skill teaches you to do exactly that safely.

0. Locate Glaze, its apps, and its bundled Node

Run this once per task to set up the environment (works on any Mac):

# Find Glaze's data dir (handles profile-name variants)
GLAZE_BASE="$(for d in "$HOME/Library/Application Support/"app.glaze.macos.*; do [ -d "$d/apps" ] && echo "$d" && break; done)"
echo "BASE=$GLAZE_BASE"
ls "$GLAZE_BASE/apps"                 # each subfolder is one app

# Glaze bundles Node >= 24, REQUIRED for builds (system node is often too old)
NODE_BIN="$(ls -d "$GLAZE_BASE"/node/runtime/*/bin 2>/dev/null | head -1)"
export PATH="$NODE_BIN:$PATH"
node -v                                # should print v24.x
# Match Glaze's npm policy without editing its config:
[ -f "$GLAZE_BASE/.npmrc" ] && export NPM_CONFIG_USERCONFIG="$GLAZE_BASE/.npmrc"

An app lives at `"$GLAZE_BASE/apps/<app-folder>/"` and contains:

<app-folder>/
├── .glaze-sources/      ← EDIT HERE (the real source)
├── .glaze/              ← build output, NEVER touch
├── .claude/             ← project Claude config (settings.local.json)
└── <ProductName>.app    ← symlink to the installed app in /Applications/Glaze/

1. Read the version-matched guidance first (don't rely only on this skill)

Each Glaze install ships its own always-current guide + skills. Read them before coding:

• `"$GLAZE_BASE/agent-resources/current/GLAZE-APP-GUIDE.md"`, full structure guide

(backend/frontend layout, window/tray/notification/global-shortcut recipes, bundling, publishing, and an "SDK API Reference" section that tells you how to look up exact `@glaze/core` exports and `window.glazeAPI` symbols instead of enumerating `sdk/current`).

• `"$GLAZE_BASE/agent-resources/current/.claude/skills/"`, the task skills that ship with

the user's Glaze install (the set grows with each SDK release, so list the folder rather than trusting a fixed count). Core ones: `glaze-component-patterns`, `glaze-frontend-rules`, `glaze-backend-rules`, `glaze-ipc-communication`, `glaze-data-storage`, `glaze-external-api`, `glaze-browser-window-recipes`, `glaze-theming`, `glaze-oauth`. Newer ones you should know exist:

• `glaze-ai`: built-in AI via the user's Glaze account (see "Newer SDK capabilities" below).
• `glaze-claude-cli`: integrate the user's local Claude Code CLI via `claude -p` / `--print`.

Not the default AI path; only for users known to have Claude Code installed.

• `glaze-mcp-server`: expose an app's data/actions as an MCP server (standalone stdio by

default, in-app HTTP for live control) so the app is usable from Claude Code, Codex, etc.

• `glaze-native-images`: native app icons, file icons, and Quick Look thumbnails via

`getFileIconUrl()` / `getFileThumbnailUrl()` from `@glaze/core/utils`.

• The app's own `"$SRC/CLAUDE.md"` and `"$SRC/.glaze_memory/PROJECT-CONTEXT.md"`

(where `SRC="$GLAZE_BASE/apps/<app-folder>/.glaze-sources"`).

Newer SDK capabilities (read the matching skill before using)

• **AI**: apps declare `glaze.capabilities.ai` in `package.json` (grades + purpose + mode;

publish rejects apps that call AI without it), call `generateText` from the backend or the `useGlazeAI` hook in the renderer, and pick a grade (`"fast"`/`"smart"`/`"powerful"`), never a raw model id. Glaze owns consent/credits/blocked-state UI. Do not trigger AI calls just to verify a build. Details: `glaze-ai`. **Default for apps built with this plugin: give the end user an AI engine choice.** Whenever you add an AI feature, also implement the engine picker from this plugin's `glaze-byok-ai` skill (Glaze AI as default + the user's own free Gemini key, optionally OpenRouter), so users decide whether using the app costs them anything. Skip it only if the user building the app asks for Glaze-only AI, or the app targets Claude Code users (`glaze-claude-cli`).

• **Local Claude Code CLI**: an app can call the user's own Claude Code subscription via

`claude -p`. Backend only, no credential collection. Details: `glaze-claude-cli`.

• **App as MCP server**: give an app MCP tools so outside agents can read/write its data.

Details: `glaze-mcp-server`.

• **Native images**: display-density-aware icon/thumbnail URLs for the renderer; never spawn

JXA/`sips` or push base64 icons over IPC. Details: `glaze-native-images`.

Read the matching skill BEFORE writing code that touches: UI components, IPC handlers, data storage, external APIs, native permissions, windows/tray, CLI tools, or perf-sensitive code.

2. Architecture (quick model)

Frontend (React 19 + Vite + TanStack Router/Query + Tailwind v4, in `.glaze-sources/renderer/`) renders in a macOS WebView and talks over a JSON-RPC IPC bridge to the Backend (Node.js, in `.glaze-sources/main/`, which calls Swift host APIs). The SDK `@glaze/core` mirrors much of Electron's API surface, use Electron as a *starting point* but verify each API is actually exported here. Renderer calls the backend via `window.glazeAPI` (exposed through `renderer/preload.ts`); only `preload.ts` may import `ipcRenderer`.

3. Hard constraints (violating these breaks the app)

<critical>

• Edit **only** inside `.glaze-