Agent skill

Livewire

by Artexis10 in Artexis10/endstate-gui

Drive the real GUI against the real engine via the standalone dev HTTP bridge (npm run dev:bridge).

Apache-2.0Auto-check passedTesting & QA

Install Livewire

skills CLI
$ npx skills add Artexis10/endstate-gui --skill livewire -a claude-code

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

GitHub CLI
$ gh skill install Artexis10/endstate-gui livewire --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/Artexis10/endstate-gui.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/livewire .claude/skills/livewire && 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
livewire
GitHub stars
116
Token cost
~2.9k tokens
SKILL.md length
1,197 words
Files
1
Skills in repo
5
Repo updated
First seen
Licence
Apache-2.0

At a glance

Drive the real GUI against the real engine via the standalone dev HTTP bridge (npm run dev:bridge).

  • Works in 2 steps: Check sibling engine version. The bridge… → Direct envelope check (smoke mode only —…
  • Does the wiring test actually hold up against real code? matters — smoke verification
  • SKILL.md covers Pre-flight (always), Launch the bridge, Tool choice — chrome-devtools… and Open the GUI in Chromium…, plus 5 more sections
  • Calls git, curl and npm

What it does

Livewire is an agent skill from Artexis10/endstate-gui. Drive the real GUI against the real engine via the standalone dev HTTP bridge (npm run dev:bridge). Use whenever "does the wiring test actually hold up against real code?" matters — smoke verification, UI development with live engine state, real-engine bug repro, exploratory debugging with Chrome DevTools instruments.

Its SKILL.md is about 2.9k 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 Testing & QA, covering Browser testing. It works with Chrome DevTools, npm, Tauri and Vite. The repository describes itself as: Endstate desktop app: reinstall your apps and restore your settings on a fresh Windows PC, from one portable file. Free, open source. Built with Tauri (React + Rust). The licence is Apache-2.0.

When your agent uses it

  • Does the wiring test actually hold up against real code? matters — smoke verification
  • UI development with live engine state
  • Real-engine bug repro
  • Exploratory debugging with Chrome DevTools instruments

Example prompts

  • “does the wiring test actually hold up against real code?”
  • “/livewire”

Requirements

  • Python 3

Workflow steps

2 steps, taken from the first numbered list in SKILL.md.

  1. Check sibling engine version. The bridge speaks to whatever
  2. Direct envelope check (smoke mode only — cheap ground truth, no

What it can do on your machine

Read from SKILL.md and the folder at commit 4bcd1ac. 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

    Shell commands in SKILL.md call:

    • git
    • curl
    • npm
    • node
    • python
    • cargo

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

  • Network

    No URLs in SKILL.md. Its commands use git, curl and npm, which can reach the network depending on how they are called.

    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

Livewire loads about 2.9k tokens when it runs. Until then it costs about 83 tokens; SKILL.md has 1,197 words of instructions outside code blocks.

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

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 Artexis10/endstate-gui at commit 4bcd1ac, republished under its Apache-2.0 licence (© Artexis10). 1,197 words, ~2,870 tokens.

Download SKILL.mdSave it as .claude/skills/livewire/SKILL.md (or your agent's skills folder).
name
livewire
description
Drive the real GUI against the real engine via the standalone dev HTTP bridge (`npm run dev:bridge`). Use whenever "does the wiring test actually hold up against real code?" matters — smoke verification, UI development with live engine state, real-engine bug repro, exploratory debugging with Chrome DevTools instruments.

Real Chromium ↔ real HTTP bridge ↔ real engine. No mocks, no fixtures. The GUI runs in a regular Chrome tab; every invoke() / listen() goes over the bridge to the bundled endstate.exe binary. The same DevTools you'd use on a webapp (network panel, console, evaluate, snapshots) work on the real production code path.

Input: short description of what to do. Examples:

  • /livewire smoke the backup subscribe flow
  • /livewire drive setup with dry-run and confirm no UAC fires
  • /livewire hot-iterate on the subscription banner — change copy, see it live

Modes (pick before driving)

  • Smoke — verify a flow works end-to-end against the real engine. Order: curl envelope checks first (cheap, proves protocol), then UI drive. Section Smoke below.
  • Dev — iterate on the GUI with the real engine wired up. Vite HMR hot-reloads frontend changes; the bridge persists. Section Dev below.
  • Debug — reproduce a real-engine bug. Drive to the failure, inspect state via evaluate, scrub network/console panels. Section Debug below.

All three share the same launch + watcher + hazard handling.


Pre-flight (always)

  1. Check sibling engine version. The bridge speaks to whatever endstate.exe is bundled in src-tauri/binaries/. If a recent engine command is needed, pull the sibling and force a rebuild:
    git -C ../endstate fetch --tags
    git -C ../endstate checkout v<X.Y.Z>
    rm -f src-tauri/binaries/endstate-x86_64-pc-windows-msvc.exe
    node scripts/rebuild-engine.cjs
    Verify the binary has what you need: ./src-tauri/binaries/endstate-x86_64-pc-windows-msvc.exe <cmd> --help
  2. Direct envelope check (smoke mode only — cheap ground truth, no Tauri): ./src-tauri/binaries/endstate-x86_64-pc-windows-msvc.exe backup subscribe --json Treat those bytes as the assertion target.

Launch the bridge

  1. Clear orphan listeners on 1420 + 9876 first. Earlier crashed runs often leave Vite still listening on 1420 (npm doesn't reap it) or stranded sockets on 9876. Without this check, the launch fails silently: Vite errors with "Port 1420 is already in use" and exits via beforeDevCommand, OR the Tauri bridge fails to bind and keeps running without it (no crash signal, no success signal — watcher waits forever).
    bash
    for P in $(netstat -ano | grep "LISTENING" | grep -E ":(1420|9876) " | awk '{print $NF}' | sort -u); do
      taskkill //F //PID "$P" 2>/dev/null || true
    done
    sleep 1
    netstat -ano | grep "LISTENING" | grep -E ":(1420|9876) " || echo "ports clear"
    The awk '{print $NF}' is load-bearing — $5 is LISTENING, not the PID. On Git Bash, //F //PID (double-slash) prevents Msys from mangling the args into paths.
  2. Run SKIP_ENGINE_BUILD=1 npm run dev:bridge in the background. This starts Vite (1420) + the standalone endstate-dev-bridge binary (9876) — a non-Tauri process that links none of the native GUI stack. (npm run tauri:dev:browser is now an alias for dev:bridge.) First run compiles the bridge crate (fast; usually already built). ENDSTATE_ROOT defaults to the sibling ../endstate repo; override via env if needed.
  3. Arm a single-shot watcher that emits when ANY of these signals land:
    bash
    until grep -qE "Browser bridge listening|Browser bridge failed to bind|error\[|panicked|exited" /tmp/dev-bridge.log; do
      sleep 2
    done
    Run that in run_in_background:true with a 5-minute timeout. The bind-failure literal is Browser bridge failed to bind port 9876 — match the prefix so it works across OS-error wording.

STABILITY — the dev bridge no longer runs inside Tauri. The intermittent ~12% 0xc0000374 heap corruption (see memory/project_tauri_dev_server_crash.md) lived in the native GUI layer (tao/wry/webview2-com) that the in-process bridge dragged in. The standalone endstate-dev-bridge binary links none of it (cargo tree -p endstate-dev-bridge shows no tao/wry/webview2-com), so that crash surface is structurally gone. If the bridge process dies now, it's a real bug in our (safe) Rust or the engine subprocess — investigate it, don't write it off as "the known Tauri flake."

Response policy:

  • In smoke mode, curl is enough for envelope-shape verification. Do the curl pass first so you have protocol proof regardless of whether the UI drive lands.
  • In dev mode, if the bridge dies mid-iteration, relaunch — Vite HMR and engine/keychain state persist. But also capture the stderr: a standalone-bridge crash is now signal, not noise.

Tool choice — chrome-devtools MCP is primary

First check ToolSearch with +chrome devtools to see if the mcp__plugin_chrome-devtools-mcp_* tools are loaded. Use them by default (real DevTools artifacts: list_network_requests for the network panel, list_console_messages for console, take_snapshot for uid-based a11y trees, evaluate_script for arbitrary JS, get_network_request for request/response bodies). If chrome-devtools isn't connected this session, use mcp__plugin_playwright_playwright__* as fallback and note that in the report. Don't mix the two in one session. (See [feedback-chrome-devtools-over-playwright].)

Open the GUI in Chromium (separate from Tauri's webview)

  1. mcp__plugin_chrome-devtools-mcp_chrome-devtools__new_page(url="http://127.0.0.1:1420")
    Don't drive the Tauri webview window itself — chrome-devtools MCP can't attach to WebView2. Both webviews talk to the same bridge, so a separate Chromium is fine and gives you full DevTools access.

Smoke mode

The verification flow. Order matters — curl first, drive after.

  1. Curl engine_is_running through the bridge:
    bash
    curl -sS -X POST http://127.0.0.1:9876/api/invoke \
      -H 'Content-Type: application/json' \
      -d '{"cmd":"engine_is_running","args":{}}'
    Expect {"ok":true,"data":false}.
  2. Curl the engine command itself. Dispatch goes through endstate_exec — exe is __bundled__ in bundled mode, args are the engine subcommand flags. The response embeds the engine envelope in data.stdout as a JSON string:
    bash
    curl -sS -X POST http://127.0.0.1:9876/api/invoke \
      -H 'Content-Type: application/json' \
      -d '{"cmd":"endstate_exec","args":{"exe":"__bundled__","args":["backup","--json","subscribe"]}}' \
      | python -c "import sys,json; print(json.dumps(json.loads(json.load(sys.stdin)['data']['stdout']), indent=2))"
    Compare to step 2's ground-truth bytes — they should match.
  3. Drive Chromium through the flow. Use the command palette (Ctrl+K → "Go to <pane>") — sidebar is hidden on landing/save/setup (intent pages). Take a snapshot, click the target, then immediately check list_network_requests({resourceTypes: ["fetch"]}) for the POST(s) to 127.0.0.1:9876/api/invoke — that's proof the click round-tripped through the real bridge.
  4. Capture screenshot for the report:
    take_screenshot({filePath: ".claude/scratch/livewire-<step>.png", fullPage: false})
Show full SKILL.md (487 more words)Show less

Dev mode

Hot-iterate on the GUI while everything stays live.

  • Vite HMR is on. Edit src/**/*.tsx, save, and the running Chromium tab updates immediately. The bridge connection persists. You can keep the Tauri dev process running across many edits.
  • No reload needed for most changes. If a change does require a full reload (route changes, mount-time effects), use navigate_page({type:"reload"}).
  • Inspect/seed local state with evaluate_script. Examples:
    ts
    // Read all endstate-related localStorage
    () => Object.fromEntries(
      Object.entries(localStorage)
        .filter(([k]) => k.includes('endstate'))
        .map(([k, v]) => [k, JSON.parse(v)])
    )
    
    // Force advanced UI mode
    () => {
      localStorage.setItem('web:endstate-ui-mode', 'advanced');
      localStorage.setItem('web:endstate-sidebar-visible', 'true');
    }
    
    // Flip dryRunEnabled to test the apply path
    () => {
      const k = 'web:endstate-gui-settings';
      const s = JSON.parse(localStorage.getItem(k));
      s.dryRunEnabled = false;
      localStorage.setItem(k, JSON.stringify(s));
    }
    Hit navigate_page({type:"reload"}) after seeding state if the app reads settings at mount.
  • Watch the network panel. list_network_requests({resourceTypes: ["fetch"]}) shows every bridge call as you interact. Filter to 9876 mentally; everything else is HMR / asset traffic.
  • Console panel for errors. list_console_messages({types: ["error", "warn"]}) surfaces React errors, prop-type warnings, etc., the same as opening DevTools in a normal browser.

Debug mode

When you're reproducing a real-engine bug:

  • Diff direct-invoke vs bridge-invoke. Step 2 (binary directly) and step 8 (binary through bridge) should produce identical envelopes. If they don't, the bridge is the culprit (rare).
  • Look at the engine's own debug dump if the bug involves apply / capture / verify. The engine writes per-run logs to C:\Users\<user>\AppData\Local\Endstate\debug\ — ts-parsed-envelope-<cmd>-<ts>.json has the structured envelope including counters and the dryRun flag. Useful for confirming the CLI received the args you think it did.
  • Use get_network_request(reqid) to inspect a specific bridge request body — that's how you confirm a flag like --dry-run was actually sent (the request body contains the full args array).

Teardown

  1. Stop the background dev:bridge task. Note TaskStop does NOT reap the detached child processes — kill the orphan listeners on 1420 + 9876 with the step-3 command, and if a cargo/endstate-dev-bridge process sticks, taskkill //F //IM endstate-dev-bridge.exe.
  2. If the sibling engine was checked out to a specific tag, switch it back: git -C ../endstate switch <previous-branch>.

Report (smoke mode)

End with a tight summary:

  • What was verified (bridge round-trip; envelope shape; click triggered network POST(s) to :9876; final DOM state; any engine flags confirmed via the debug dump)
  • What was not verified, with the reason (e.g. "Tauri host crashed before click — see memory/project_tauri_dev_server_crash.md")
  • Screenshot paths

Anti-patterns

  • Don't mock anything. This skill exists because the wiring e2e already covers mocks. If your assertions need mocks, write a Playwright spec instead.
  • Don't drive the Tauri webview window. chrome-devtools MCP can't attach to WebView2. Use a separate Chromium against the same Vite URL.
  • Don't loop-retry on Tauri crashes beyond one restart — the crash is intermittent, not transient. Report the gap.
  • Don't cd in Bash on this Windows box — PowerShell cwd resets fight it. Use absolute paths with git -C / yadm -C style flags.
  • Don't conflate dev and smoke. In dev you're iterating and tolerate flakiness; in smoke you're producing a verifiable report. Pick the mode up front so the report writes itself.

© Artexis10, Apache-2.0. 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 .claude/skills/livewire of Artexis10/endstate-gui.

Open the folder on GitHubat commit 4bcd1ac

Compare with similar skills

Livewire 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.

Livewire compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Livewire this skillArtexis10/endstate-gui116—~2.9kAutomated safety check: PassApache-2.0
Conductor Rewrite Performanceboraoztunc/skills397—~2.3kAutomated safety check: PassApache-2.0
Chrome Devtoolseinverne/dotfiles1211 repos~1.6kAutomated safety check: NotesApache-2.0
Agent Browser Automationwithkynam/vibecode-pro-max-kit1.1k—~2.6kAutomated safety check: PassApache-2.0
Electron Devtools Testingankitvgupta/exo496—~2.4kAutomated safety check: PassCustom licence
Flowfile Build and Environment SetupEdwardvaneechoud/Flowfile375—~7.3kAutomated safety check: NotesMIT

Similar skills

  • A skill your agent uses when building or optimizing a local-first desktop app with React, dealing with excessive re-renders during navigation, slow chat/list UIs with streaming content, or profiling…

    397 GitHub stars~2.3k tokensUpdated 1 mo ago
    Testing & QAAuto-check passed
  • Chrome Devtools

    einverne/dotfiles

    Browser automation, debugging, and performance analysis using Puppeteer CLI scripts.

    121 GitHub starsUsed in 1 repo~1.6k tokens
    Data & AnalyticsAuto-check: notes
  • Agent Browser Automation

    withkynam/vibecode-pro-max-kit

    Drives a browser through the agent-browser CLI, using compact snapshots with element refs to keep context small in long sessions, plus video recording and cloud browsers.

    1.1k GitHub stars~2.6k tokensUpdated 3 mo ago
    Productivity & AutomationAuto-check passed
  • Test the Electron app interactively using Chrome DevTools Protocol.

    496 GitHub stars~2.4k tokensUpdated 1 mo ago
    Productivity & AutomationAuto-check passed
  • Flowfile Build and Environment Setup

    Edwardvaneechoud/Flowfile

    Recreates every Flowfile development and build environment from scratch, with exact version pins and an explanation of what each Makefile target really does.

    375 GitHub stars~7.3k tokensUpdated today
    DevelopmentAuto-check: notes
  • Connects an agent to a real Chrome instance through the Chrome DevTools MCP server, so it can inspect the DOM, read console errors and profile performance directly.

    103k GitHub starsUsed in 4 repos~3.5k tokens
    Testing & QAAuto-check: warnings

More from Artexis10/endstate-gui

  • Gen Test

    Artexis10/endstate-gui

    Generate unit tests following project conventions. An agent skill from Artexis10/endstate-gui.

    116 GitHub stars~661 tokensUpdated 2 days ago
    Auto-check passed
  • E2E Test

    Artexis10/endstate-gui

    Generate Playwright E2E tests following project conventions (Tauri fixture, storage isolation, helpers).

    116 GitHub stars~775 tokensUpdated 2 days ago
    Auto-check passed
  • New Component

    Artexis10/endstate-gui

    Scaffold a new React component with co-located test, shadcn/ui primitives, and barrel export registration.

    116 GitHub stars~524 tokensUpdated 2 days ago
    Auto-check passed
  • Tauri Command

    Artexis10/endstate-gui

    Scaffold a new Tauri command across Rust backend and TypeScript frontend with proper patterns.

    116 GitHub stars~606 tokensUpdated 2 days ago
    Auto-check passed

Questions about Livewire

What does Livewire do?

Drive the real GUI against the real engine via the standalone dev HTTP bridge (npm run dev:bridge). Livewire is an agent skill from Artexis10/endstate-gui. Drive the real GUI against the real engine via the standalone dev HTTP bridge (npm run dev:bridge).

When should I use Livewire?

Livewire fits situations like: does the wiring test actually hold up against real code? matters — smoke verification; UI development with live engine state; real-engine bug repro; exploratory debugging with Chrome DevTools instruments.

How do I install Livewire in Claude Code?

Run `npx skills add Artexis10/endstate-gui --skill livewire -a claude-code`. Or copy the skill folder (.claude/skills/livewire in Artexis10/endstate-gui) into .claude/skills/livewire in your project. Claude Code loads it when a task matches its description.

How do I install Livewire in Codex?

Run `npx skills add Artexis10/endstate-gui --skill livewire -a codex`. Or copy the skill folder (.claude/skills/livewire in Artexis10/endstate-gui) into .agents/skills/livewire in your project. Codex loads it when a task matches its description.

Can I use Livewire 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 Artexis10/endstate-gui --skill livewire -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/livewire, .gemini/skills/livewire, .github/skills/livewire and .opencode/skills/livewire in your project.

What does Livewire need to run?

Going by SKILL.md and its folder, Livewire needs the command-line tools its instructions call (git, curl, npm, node, python and cargo). Our summary lists: Python 3.

Does Livewire access the network?

SKILL.md contains no URLs. Its commands use git, curl and npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Livewire 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 Livewire use?

Livewire is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Livewire use?

About 2.9k tokens (SKILL.md is roughly 11k 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 Livewire?

Skills that share tags, products or a category with Livewire: Conductor Rewrite Performance (boraoztunc/skills, 397 stars), Chrome Devtools (einverne/dotfiles, 121 stars), Agent Browser Automation (withkynam/vibecode-pro-max-kit, 1.1k stars) and Electron Devtools Testing (ankitvgupta/exo, 496 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Livewire?

Artexis10 (a GitHub user) maintains it in Artexis10/endstate-gui, which has 116 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on October 6, 2026.

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