Agent skill

Headless Mode

by live-codes in live-codes/livecodes

Run playground without visible UI using SDK methods directly.

MITAuto-check passedDevelopment

Install Headless Mode

skills CLI
$ npx skills add live-codes/livecodes --skill headless-mode -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install live-codes/livecodes headless-mode --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/live-codes/livecodes.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/livecodes/headless-mode .claude/skills/headless-mode && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
headless-mode
GitHub stars
1.5k
Token cost
~1.1k tokens
SKILL.md length
110 words
Files
1
Skills in repo
15
Repo updated
First seen
Licence
MIT

At a glance

Run playground without visible UI using SDK methods directly.

  • Tasks that involve Linting and formatting
  • SKILL.md covers Setup, Core Patterns, Common Mistakes and Headless vs Visible Mode, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Tasks that involve Markdown

What it does

Headless Mode is an agent skill from live-codes/livecodes. Run playground without visible UI using SDK methods directly. Load this skill when building Markdown compilers, code formatters, or tools that need compiled output without display.

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Development, covering Linting and formatting and Markdown. It works with Prettier, JavaScript and TypeScript. The repository describes itself as: A Code Playground That Just Works! The licence is MIT.

When your agent uses it

  • Tasks that involve Linting and formatting
  • Tasks that involve Markdown

Example prompts

  • “/headless-mode”

Requirements

  • Python 3

What it can do on your machine

Read from SKILL.md and the folder at commit 5754e89. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are javascript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Headless Mode loads about 1.1k tokens when it runs. Until then it costs about 49 tokens; SKILL.md has 110 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~49
When it runs · the whole SKILL.md, loaded when a task matches
~1.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from live-codes/livecodes at commit 5754e89, republished under its MIT licence (© live-codes). 110 words, ~1,107 tokens.

Download SKILL.mdSave it as .claude/skills/headless-mode/SKILL.md (or your agent's skills folder).
name
headless-mode
description
Run playground without visible UI using SDK methods directly. Load this skill when building Markdown compilers, code formatters, or tools that need compiled output without display.
metadata.type
core
metadata.library
livecodes
metadata.library_version
0.13.0
requires
sdk-embedding, sdk-methods
sources
live-codes/livecodes:docs/docs/sdk/headless.mdx

This skill builds on sdk-embedding and sdk-methods. Read them first for foundational concepts.

LiveCodes — Headless Mode

Headless mode runs LiveCodes without any visible UI. Use SDK methods to compile code, get output, and react to events.

Setup

javascript
import { createPlayground } from 'livecodes';

// Create headless playground - container is optional
const playground = await createPlayground({
  headless: true,
  config: {
    markup: { language: 'markdown', content: '# Hello World' },
  },
});

// Use SDK methods
const code = await playground.getCode();
console.log(code.markup.compiled); // "<h1>Hello World</h1>"
console.log(code.result); // Result page HTML

Core Patterns

Markdown compiler
javascript
import { createPlayground } from 'livecodes';

let playground;

async function compileMarkdown(markdown) {
  if (!playground) {
    playground = await createPlayground({
      headless: true,
      config: { autoupdate: false },
    });
  }

  await playground.setConfig({
    markup: { language: 'markdown', content: markdown },
  });

  const code = await playground.getCode();
  return code.markup.compiled;
}

// Usage
const html = await compileMarkdown('# Hello\n\nWorld');
console.log(html); // "<h1>Hello</h1>\n<p>World</p>"
React/JSX compiler
javascript
import { createPlayground } from 'livecodes';

let playground;

async function compileJSX(jsxCode) {
  if (!playground) {
    playground = await createPlayground({
      headless: true,
      config: { autoupdate: false },
    });
  }

  await playground.setConfig({
    script: { language: 'react', content: jsxCode },
  });

  const code = await playground.getCode();
  return code.script.compiled;
}

const compiled = await compileJSX(`
  function App() {
    return <h1>Hello</h1>;
  }
`);
Python interpreter
javascript
import { createPlayground } from 'livecodes';

let playground;

async function runPython(code) {
  if (!playground) {
    playground = await createPlayground({
      headless: true,
      config: { autoupdate: true },
    });
  }

  // Set up console listener before running
  const outputs = [];
  playground.watch('console', ({ method, args }) => {
    outputs.push({ method, args });
  });

  await playground.setConfig({
    script: { language: 'python', content: code },
  });

  // Python runs automatically with autoupdate: true
  // Or: await playground.run();

  return outputs;
}

// Usage
const outputs = await runPython('print("Hello from Python!")');
// [{ method: 'log', args: ['Hello from Python!'] }]
Get result HTML
javascript
async function getResultHTML(config) {
  const playground = await createPlayground({
    headless: true,
    config: { ...config, autoupdate: false },
  });

  await playground.setConfig(config);

  const code = await playground.getCode();
  return code.result; // Result page HTML
}
Watch for changes
javascript
const playground = await createPlayground({
  headless: true,
  config: { autoupdate: false },
});

// Watch for compiled code changes
playground.watch('code', ({ code, config }) => {
  console.log('Compiled:', code.script.compiled);
});

// Change config - watch callback fires
await playground.setConfig({
  script: { language: 'typescript', content: 'const x: number = 1;' },
});

Common Mistakes

Headless vs Visible Mode

AspectVisibleHeadless
ContainerRequiredOptional
UIShownHidden
Use caseUser interactionProgrammatic compilation

When to Use Headless

  • Markdown/MDX compiler — Get compiled HTML without display
  • Code formatter — Use Prettier via LiveCodes
  • Language transpiler — TypeScript → JavaScript, SCSS → CSS
  • Testing pipelines — Run and verify code programmatically
  • Python/Ruby/Go interpreter — Execute WASM languages and capture output

© live-codes, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/livecodes/headless-mode of live-codes/livecodes.

Open the folder on GitHubat commit 5754e89

Compare with similar skills

Headless Mode next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Headless Mode compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Headless Mode this skilllive-codes/livecodes1.5k—~1.1kAutomated safety check: PassMIT
Code Qualityredis/RedisInsight8.9k—~1.2kAutomated safety check: PassCustom licence
Migrate Oxfmtdxos/dxos5253 repos~2.2kAutomated safety check: PassCustom licence
Typescript Tooling MigrationArize-ai/phoenix12k—~2.8kAutomated safety check: PassApache-2.0
AntfuJetBrains/skills3634 repos~1kAutomated safety check: PassNone
Flowmark Markdown Formatterjlevy/repren374—~631Automated safety check: PassMIT

Similar skills

  • Code Quality

    redis/RedisInsight

    Official

    Code-quality standards for RedisInsight: TypeScript strictness, naming conventions (camelCase, PascalCase, UPPERSNAKECASE), linting rules, no any without reason, no !important in styles, and…

    8.9k GitHub stars~1.2k tokensUpdated 2 days ago
    DevelopmentAuto-check passed
  • Migrate Oxfmt

    dxos/dxos

    Guide for migrating a project from Prettier or Biome to Oxfmt.

    525 GitHub starsUsed in 3 repos~2.2k tokens
    DevelopmentAuto-check passed
  • Migrate or upgrade TypeScript tooling in the Phoenix monorepo.

    12k GitHub stars~2.8k tokensUpdated today
    DevelopmentAuto-check passed
  • Antfu

    JetBrains/skills

    Official

    Anthony Fu's opinionated tooling and conventions for JavaScript/TypeScript projects.

    363 GitHub starsUsed in 4 repos~1k tokens
    DevelopmentAuto-check passed
  • Formats Markdown with the Flowmark auto-formatter for typographic cleanup and semantic line breaks, and helps adopt it across a repository.

    374 GitHub stars~631 tokensUpdated 1 mo ago
    DevelopmentAuto-check passed
  • Installs, updates or migrates the vendored anti-slop Oxlint plugin in a repository, keeping local rule changes and the plugin's license and provenance files.

    5.2k GitHub stars~2.2k tokensUpdated 27 days ago
    DevelopmentAuto-check passed

More from live-codes/livecodes

All 15 skills in this repo
  • Language Support

    live-codes/livecodes

    Work with 90+ supported languages, compilers, CSS processors, and WASM-compiled languages for markup, style, and script editors.

    1.5k GitHub stars~1.6k tokensUpdated today
    Auto-check passed
  • Configuration

    live-codes/livecodes

    Configure playground behavior through Config object, query parameters, EmbedOptions, editor settings, processors, external resources, and custom settings.

    1.5k GitHub stars~4.5k tokensUpdated today
    Auto-check passed
  • Display Modes

    live-codes/livecodes

    Configure how the playground is displayed: full, focus, simple, lite, editor, codeblock, and result modes.

    1.5k GitHub stars~1.7k tokensUpdated today
    Auto-check passed
  • Framework Wrappers

    live-codes/livecodes

    Use SDK with React, Vue, Svelte, Solid, Preact, and Web Components.

    1.5k GitHub stars~2.8k tokensUpdated today
    Auto-check passed
  • Getting Started

    live-codes/livecodes

    Quick start for standalone app at livecodes.io, embedding playgrounds with CDN or npm, and self-hosting basics.

    1.5k GitHub stars~1.6k tokensUpdated today
    Auto-check passed
  • Gh Action

    live-codes/livecodes

    Use the "Preview in LiveCodes" GitHub Action to generate preview playground links for pull request code changes.

    1.5k GitHub stars~1.8k tokensUpdated today
    Auto-check passed

Questions about Headless Mode

What does Headless Mode do?

Run playground without visible UI using SDK methods directly. Headless Mode is an agent skill from live-codes/livecodes. Run playground without visible UI using SDK methods directly.

When should I use Headless Mode?

Headless Mode fits situations like: tasks that involve Linting and formatting; tasks that involve Markdown.

How do I install Headless Mode in Claude Code?

Run `npx skills add live-codes/livecodes --skill headless-mode -a claude-code`. Or copy the skill folder (.agents/skills/livecodes/headless-mode in live-codes/livecodes) into .claude/skills/headless-mode in your project. Claude Code loads it when a task matches its description.

How do I install Headless Mode in Codex?

Run `npx skills add live-codes/livecodes --skill headless-mode -a codex`. Or copy the skill folder (.agents/skills/livecodes/headless-mode in live-codes/livecodes) into .agents/skills/headless-mode in your project. Codex loads it when a task matches its description.

Can I use Headless Mode in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add live-codes/livecodes --skill headless-mode -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/headless-mode, .gemini/skills/headless-mode, .github/skills/headless-mode and .opencode/skills/headless-mode in your project.

What does Headless Mode need to run?

SKILL.md names no scripts, command-line tools or credentials: Headless Mode is instructions for the agent only. Our summary lists: Python 3.

Does Headless Mode access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Headless Mode safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Headless Mode use?

Headless Mode is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Headless Mode use?

About 1.1k tokens (SKILL.md is roughly 4.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Headless Mode?

Skills that share tags, products or a category with Headless Mode: Code Quality (redis/RedisInsight, 8.9k stars), Migrate Oxfmt (dxos/dxos, 525 stars), Typescript Tooling Migration (Arize-ai/phoenix, 12k stars) and Antfu (JetBrains/skills, 363 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Headless Mode?

live-codes (a GitHub organization) maintains it in live-codes/livecodes, which has 1,512 GitHub stars. The repository holds 15 skills in this directory. The repository was last updated on October 6, 2026.

Source: live-codes/livecodes on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.