boxel-environment
Use when running, navigating, or orchestrating tasks inside the live Boxel application — switching between Code Mode and Interact Mode, searching and editing…
Skill by cardstack
Install
Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.
npx agentmarket install skill/cardstack-boxel-environment
Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.
Get the weekly diff
The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.
About
Use cases: design, writing
Reviews
Write a reviewNo reviews yet. Installed it? Reviews come from verified installers only. How reviews work
Permissions
What this skill can do and what it asks for, from its SKILL.md. Checked Oct 25, 2026.
- Tools
- No tools found
- Secrets
- None asked for
- Install scripts
- None found
Network hosts it talks to 1
codeload.github.com· found in install command
Files it touches
~/.claude/skills/boxel-environment
What's inside
- Skill name
boxel-environment- Description
- Use when running, navigating, or orchestrating tasks inside the live Boxel application — switching between Code Mode and Interact Mode, searching and editing cards, indexing, or any operation that drives the Boxel UI, all through `realm.*` and `room.*` calls in a run-realm-code script. Activates for Boxel-app runtime work, not for writing card definitions (see boxel for that).
- License
- MIT
- Instructions
- 151 lines in SKILL.md · view on GitHub
Files (13)
- SKILL.md
- assistant-persona.md · references/
- card-tool-selection.md · references/
- common-errors.md · references/
- diagnosing-broken-links.md · references/
- fresh-realm-push-integrity.md · references/
- indexing-operations.md · references/
- markdown-edit.md · references/
- searching-and-querying.md · references/
- shared-mirror-safety.md · references/
- source-code-editing.md · references/
- user-environment-awareness.md · references/
- workflows-and-orchestration.md · references/
SKILL.md (first lines)
# Boxel Environment
You are the orchestrator of the Boxel AI Assistant. You act on the app with one tool, `run-realm-code`: you decide which `realm.*` and `room.*` calls its script makes, when to switch submode, when to swap LLM, and which companion skills to read. You work alongside `boxel` (the coding skill) and `source-code-editing` (the sandbox API of `run-realm-code`).
## 🚨 Read this before planning anything
**The `run-realm-code` tool comes from `index.md` and [`../source-code-editing/SKILL.md`](../source-code-editing/SKILL.md), not from this file.** Both files declare it, so after you read either one you can call it. The `realm.*` and `room.*` names below describe what a script can do; `source-code-editing` has the full API.
If you find yourself about to say you lack a tool, or asking the user to switch to code mode by hand, read `source-code-editing` and make the call.
---
## ⚠️ Master Decision Tree
### Step 1 — Context check (every message)
```
├─ Loop detected (same commands repeating)? → STOP. Alert: "Detected potential loop."
├─ No workspace in context? → Ask user to navigate, open a card, reply 'continue'
├─ Already where the task needs you? → The last tool result's context.submode / codeMode.currentFile say so. Do the work; no navigation call
└─ Workspace found → Continue to Step 2
```
### Step 2 — Classify the task
```
├─ A) CODE (new .gts, edit template, schema change) → Step 3
├─ B) DATA (card content, field values) → Step 4
├─ C) SEARCH / FIND → Step 5
└─ D) NAVIGATE → Step 6
```
### Step 3 — Code task
```
□ Not read the boxel and source-code-editing skills yet in this conversation?
└─ Read both SKILL.md files (links below) in ONE readRealmFile call
→ Need file content? `realm.fs.readText` in a `run-realm-code` script. Need to see what is in a folder? `realm.fs.list`. Need a card's data? `realm.cards.get`.
→ For NEW files, call `realm.fs.writeText` with the complete contents; for an existing file, `realm.fs.replace`.
→ Put every file the task needs in ONE `run-realm-code` call.
→ Before you report the change done: look at the result — `realm.capture` on an instance in the same script, or in a new script next — compare it with what was asked, and fix what you see.
→ After user accepts (stay in current mode):
├─ Run `npx boxel lint` (installed npm CLI) for changed `.gts` files (`boxel/references/lint-workflow.md`)
├─ Code mode → `realm.ui.previewFormat` in the `run-realm-code` script that wrote it
└─ Interact mode → return `{ show: path }` from the `run-realm-code` script
```
The two code skills: [`../boxel/SKILL.md`](../boxel/SKILL.md) and [`../source-code-editing/SKILL.md`](../source-code-editing/SKILL.md). Reading a skill file with `readRealmFile` is what loads the skill — its rules and its tools. Do not turn skills on with `room.enableSkills` to use them yourself: find the skill in `index.md` and read its file.
### Step 4 — Data task
```
├─ New .json instance? → `realm.fs.writeText`
├─ Clone + modify? → `realm.fs.copy`, then `realm.cards.update` or `realm.fs.replace` on the copy
├─ Change field values? → `realm.cards.update(path, attributes)` (any length, long markdown too)
├─ Many cards? → `realm.cards.search`, then `realm.cards.update` in a loop, in one script
├─ Links or malformed JSON? → `realm.fs.readText`, then `realm.fs.replace` on the `.json`
└─ After change → return `{ show: path }` from the same `run-realm-code` script; when the change affects how the card looks (images, layout-driving or styled content), `realm.capture` it in a `run-realm-code` script
```
### Seeing what you work with
Look at visual context and at everything you make with `realm.capture` in a `run-realm-code` script; the rules — including what you cannot see and what to tell the user then — are in [`../source-code-editing/SKILL.md`](../source-code-editing/SKILL.md), next to `realm.capture`.
Which `realm.*` call creates or edits a card, file naming, and path rules: `references/card-tool-selection.md`.
> **Editing rule:** Use `realm.fs.writeText` for new files, `realm.fs.replace` for existing source, and `realm.cards.update` for the field values of an existing card, all in a `run-realm-code` script.
### Step 5 — Search / find
```
├─ Cards in a realm → `run-realm-code` with `realm.cards.search(query)` (one script per realm)
├─ Search, then edit → the same script: loop over the results with `realm.cards.update`
├─ Across realms/catalog → `run-realm-code` with `realm.entries.search`
└─ View results → return `{ show: path }` with a result's `path`
```
### Step 6 — Navigate (mode-aware)
```
├─ INTERACT MODE:
│ ├─ Display card → `run-realm-code` that returns `{ show: path }`
│ ├─ Create card / definition → `run-realm-code` with `realm.fs.writeText`
│ ├─ Switch to code → `realm.ui.switchSubmode('code')`, or `realm.ui.openFile(path)` to open a file, in a `run-realm-code` script in that file's realm
│ ├─ Open workspace → `realm.ui.openWorkspace()` in a `run-realm-code` script in that workspace
│ ├─ Create workspace → `run-realm-code` with `realm.workspaces.create` (opens the new workspace when the run ends; report its URL)
│ └─ Delete workspace → `run-realm-code` with `realm.workspaces.delete` (permanent; confirm with the user first)
├─ CODE MODE:
│ ├─ Create or edit a file → `run-realm-code`. Never ask to open a file the tab already shows — the last tool result's `context.codeMode.currentFile` tells you where you are
│ ├─ Preview card + module → `realm.ui.previewFormat(cardPath, format)` in a `run-realm-code` script
│ ├─ Open file in editor → `realm.ui.openFile(path)` in a `run-realm-code` script
│ ├─ Switch to interact → `realm.ui.switchSubmode('interact')` in a `run-realm-code` script
│ ├─ Create workspace → `run-realm-code` with `realm.workspaces.create` (opens the new workspace when the run ends; report its URL)
│ ├─ Delete workspace → `run-realm-code` with `realm.workspaces.delete` (permanent; confirm with the user first)
│ └─ Open workspace → `realm.ui.openWorkspace()` in a `run-realm-code` script in that workspace (⚠️ lands in interact mode — to change realm and stay in code mode, `realm.ui.openFile` in a script in that realm)
└─ EITHER MODE:
└─ Toggle mode → `realm.ui.switchSubmode` in a `run-realm-code` script
```
### Post-code: schema migration (if schema changed)
```
├─ Search affected instances → `realm.cards.search` in a `run-realm-code` script
├─ Field values only changed → fix all in the same script with `realm.cards.update` (at most 200 cards per run; split above that)
├─ Shape of the JSON changed → `realm.fs.replace` on each `.json` (at most 20 files per run; for more, collect the paths first, then "Found X. Fix first 20?")
├─ Verify → `realm.cards.get`, or `realm.ui.openFile` on a .json
└─ Continue → "Next 20 of Y remaining?"
```
---
## 📚 References (read on demand)
Batch your reads: fetch the always-relevant set in one multi-file read when this skill activates, and pull by-task references the same way — everything you know you need in one go, not one or two per turn.
Always-relevant — read these together, first:
- **[`../source-code-editing/SKILL.md`](../source-code-editing/SKILL.md)** — the `run-realm-code` script API. It also declares the tool.
- [`references/assistant-persona.md`](references/assistant-persona.md) — Communication style. Concise, intent-based responses.
- [`references/user-environment-awareness.md`](references/user-environment-awareness.md) — Parse workspace, mode, open cards from each message.From cardstack/boxel-skills, MIT.
More from cardstack/boxel-skills
- 0.592score
boxel
cardstack
Use whenever creating, reading, or editing Boxel cards (.gts files), card instances (.json), fields, templates, queries, or anything in a Boxel realm.
SkillAFreshness: A★ 1Claude Code +9 - 0.592score
boxel-patterns
cardstack
Use when the user names an outcome ("show a chart", "let users pick a color", "build a dashboard", "summarize comments", "embed AI image generation", "lay out…
SkillAFreshness: A★ 1Claude Code +9 - 0.592score
boxel-theme-development
cardstack
Use when the deliverable is a theme ARTIFACT — creating, converting, auditing, or patching Theme, StructuredTheme, StyleReference, DetailedStyleReference, or…
SkillAFreshness: A★ 1Claude Code +9 - 0.592score
boxel-ui-component-discovery
cardstack
MANDATORY before writing any UI in a `.gts` template, including a quick fix to an existing card (turning a styled span or div into a button, wiring a dead…
SkillAFreshness: A★ 1Claude Code +9 - 0.592score
boxel-ui-guidelines
cardstack
Use when IMPLEMENTING or REVIEWING UI in Boxel templates (writing a template, or reviewing a change, diff or pull request that touches one) — applying…
SkillAFreshness: A★ 1Claude Code +9 - 0.592score
card-motion
cardstack
Use when a card should animate: elements entering and leaving, a list or grid rearranging, a tile opening into a detail view, drag and reorder, scroll-linked…
SkillAFreshness: A★ 1Claude Code +9 - 0.592score
catalog-listing
cardstack
Use when installing, browsing, remixing, updating, or submitting catalog listings (Apps, Cards, Fields, Skills, Themes) from a Boxel catalog realm.
SkillAFreshness: A★ 1Claude Code +9 - 0.592score
catalog-reuse
cardstack
MANDATORY before writing any `.gts`.
SkillAFreshness: A★ 1Claude Code +9 - 0.592score
boxel-design
cardstack
Use when DECIDING a Boxel card's visual language — mood, palette, typography direction, asset direction, one visual signature, the design-playbook process.
SkillAFreshness: A★ 1Claude Code +9 - 0.592score
boxel-file-def
cardstack
Use when adding or working with file-typed fields (FileDef, ImageDef, MarkdownDef, PngDef, CsvFileDef).
SkillAFreshness: A★ 1Claude Code +9 - 0.592score
boxel-flavored-markdown
cardstack
Use when authoring or editing Boxel Flavored Markdown (BFM) content — content fields rendered as rich markdown with :card/::card directives, mermaid diagrams…
SkillAFreshness: A★ 1Claude Code +9 - 0.592score
boxel-markdown-format
cardstack
Use when authoring a `markdown` template (static markdown format) on a CardDef or FieldDef — defaults, markdownEscape, and markdown helpers.
SkillAFreshness: A★ 1Claude Code +9
Signals
- Stars
- 1
- Forks
- 0
- Open issues
- 0
- Last commit (this folder)
- Oct 22, 2026 (7 days ago)
- Last release
- Oct 23, 2026 (5 days ago)
From GitHub (fetched Oct 24, 2026).
Details
- License
- MIT
- Repository
- github.com/cardstack/boxel-skills
- First seen
- Oct 24, 2026
- Last checked
- Oct 24, 2026
- Source
- GitHubgithub-graphql
More from cardstack
- 0.592score
boxel
cardstack
Use whenever creating, reading, or editing Boxel cards (.gts files), card instances (.json), fields, templates, queries, or anything in a Boxel realm.
SkillAFreshness: A★ 1Claude Code +9 - 0.592score
boxel-design
cardstack
Use when DECIDING a Boxel card's visual language — mood, palette, typography direction, asset direction, one visual signature, the design-playbook process.
SkillAFreshness: A★ 1Claude Code +9 - 0.592score
boxel-file-def
cardstack
Use when adding or working with file-typed fields (FileDef, ImageDef, MarkdownDef, PngDef, CsvFileDef).
SkillAFreshness: A★ 1Claude Code +9 - 0.592score
boxel-flavored-markdown
cardstack
Use when authoring or editing Boxel Flavored Markdown (BFM) content — content fields rendered as rich markdown with :card/::card directives, mermaid diagrams…
SkillAFreshness: A★ 1Claude Code +9 - 0.592score
boxel-markdown-format
cardstack
Use when authoring a `markdown` template (static markdown format) on a CardDef or FieldDef — defaults, markdownEscape, and markdown helpers.
SkillAFreshness: A★ 1Claude Code +9 - 0.592score
boxel-patterns
cardstack
Use when the user names an outcome ("show a chart", "let users pick a color", "build a dashboard", "summarize comments", "embed AI image generation", "lay out…
SkillAFreshness: A★ 1Claude Code +9
Cite this page
boxel-environment skill. Agent Mart. https://agentmart.dev/skills/cardstack-boxel-environment (last updated 2026-10-24)