Open Frame

Overview

How open-frame and your coding agent work together.

open-frame treats your coding agent as a first-class user. Decks are React, agents are great at React, the gap between "make frames about X" and a polished deck is mostly the runtime — which open-frame provides.

What ships in the workspace

npx @open-frame/cli init generates an AGENTS.md (and CLAUDE.md) at the root with the framework's hard rules, plus a skills/ folder with five skills the agent invokes by name:

The skills are kept inside the workspace (not the agent's global config) so they version with the project. open-frame sync:skills re-syncs them from the package if you upgrade.

The hard rules (AGENTS.md)

Short, intentional, machine-readable:

  • Frames go under frames/<kebab-case-id>/.
  • Entry is frames/<id>/index.tsx.
  • Assets sit in frames/<id>/assets/.
  • Don't touch package.json, open-frame.config.ts, or other frames.
  • Don't add dependencies. Use only React and standard web APIs.

These constraints protect the agent from itself: it can't accidentally install a UI library, rewrite global config, or stomp on another frame.

Bring your own agent

The framework is intentionally agent-agnostic. Any tool that can edit React files in a workspace can author frames. The community confirms with: Claude Code, Codex, Cursor, Gemini CLI, OpenCode, Windsurf, Zed.

To author cleanly, the agent needs to:

  1. Read the rules. AGENTS.md (and CLAUDE.md) at the workspace root define the file contract and constraints.
  2. Find the skills. /create-frame, /frame-authoring, /apply-comments, /create-theme, /current-frame live under skills/ (or wherever that agent looks for skills).
  3. Edit files. That's it. There is no per-agent SDK.

If your agent of choice doesn't have a skills system, you can paste the frame-authoring skill into context manually and ask the agent to follow its rules.

Mirroring AGENTS.md for Claude Code

AGENTS.md is the canonical rules file — it follows the cross-tool convention that Codex, Cursor, Gemini CLI, OpenCode, Windsurf, and Zed already look for. CLAUDE.md is generated alongside it so Claude Code picks the rules up automatically. The two files are kept in sync by the scaffolder; edit AGENTS.md and re-run open-frame sync:skills if you want the mirror refreshed.

On this page