Agent skill

Ade Web

by arul28 in arul28/ADE

Launch the ADE desktop app's renderer as a standalone web app (Vite-only preview) seeded with real data from the ADE database.

AGPL-3.0Auto-check passedDevelopment

Install Ade Web

skills CLI
$ npx skills add arul28/ADE --skill ade-web -a claude-code

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

GitHub CLI
$ gh skill install arul28/ADE ade-web --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/arul28/ADE.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/ade-web .claude/skills/ade-web && 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
ade-web
GitHub stars
114
Token cost
~1.2k tokens
SKILL.md length
526 words
Files
1
Skills in repo
28
Repo updated
First seen
Licence
AGPL-3.0

At a glance

Launch the ADE desktop app's renderer as a standalone web app (Vite-only preview) seeded with real data from the ADE database.

  • Works in 5 steps: Resolve the workspace root → Kill any stale Vite on port 5173 → Seed the database snapshot → …
  • Preview the ADE desktop web renderer
  • SKILL.md covers When to use, Procedure, Important constraints and Cleanup, plus 1 more section
  • Calls npm and node

What it does

Ade Web is an agent skill from arul28/ADE. Launch the ADE desktop app's renderer as a standalone web app (Vite-only preview) seeded with real data from the ADE database. Works from any lane worktree without interfering with running ADE sockets or runtimes. Use when asked to start, run, or preview the ADE desktop web renderer, open the ADE web app, or view ADE UI in a browser.

Its SKILL.md is about 1.2k 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 Git worktrees. It works with Vite. The licence is AGPL-3.0.

When your agent uses it

  • Preview the ADE desktop web renderer
  • Open the ADE web app
  • View ADE UI in a browser

Example prompts

  • “/ade-web”

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Resolve the workspace root
  2. Kill any stale Vite on port 5173
  3. Seed the database snapshot
  4. Start the Vite dev server
  5. Open in the ADE browser (optional)

What it can do on your machine

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

    • npm
    • node

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

  • Network

    No URLs in SKILL.md. Its commands use 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

Ade Web loads about 1.2k tokens when it runs. Until then it costs about 86 tokens; SKILL.md has 526 words of instructions outside code blocks.

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

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 arul28/ADE at commit fbbd974, republished under its AGPL-3.0 licence (© arul28). 526 words, ~1,187 tokens.

Download SKILL.mdSave it as .claude/skills/ade-web/SKILL.md (or your agent's skills folder).
name
ade-web
description
Launch the ADE desktop app's renderer as a standalone web app (Vite-only preview) seeded with real data from the ADE database. Works from any lane worktree without interfering with running ADE sockets or runtimes. Use when asked to start, run, or preview the ADE desktop web renderer, open the ADE web app, or view ADE UI in a browser.
metadata.author
ADE
metadata.version
0.1.0

ade-web — Launch the ADE Desktop Web Renderer

Starts the ADE desktop renderer as a browser-accessible web app on http://localhost:5173, seeded with a snapshot of the real ADE database. Safe to run alongside the ADE beta or any other running ADE runtime — it does not touch sockets or start new runtimes.

When to use

  • User asks to run, start, preview, or open the ADE web app / desktop web renderer
  • User wants to visually inspect or iterate on ADE desktop UI changes in a browser
  • User asks to launch ADE web from a specific lane or worktree

Procedure

1. Resolve the workspace root

The web renderer must run from the current lane's worktree, not the main project checkout.

WORKTREE_ROOT="$(pwd)"

If pwd is not already inside .ade/worktrees/<lane>/, resolve it:

# If inside a worktree, pwd is already correct.
# If at the project root, there is no lane context — ask the user which lane.

Confirm the desktop app exists at $WORKTREE_ROOT/apps/desktop/package.json.

2. Kill any stale Vite on port 5173
bash
lsof -ti :5173 2>/dev/null | xargs kill 2>/dev/null

Do not kill processes on any other port. Do not touch ADE runtime sockets (/tmp/ade-runtime-dev.sock, ~/.ade-beta/sock/ade.sock, etc.).

3. Seed the database snapshot

Export real data from the global ADE database into the browser mock:

bash
cd "$WORKTREE_ROOT/apps/desktop" && node ./scripts/export-browser-mock-ade-snapshot.mjs

This reads .ade/ade.db from the primary project root (auto-detected even from worktrees) and writes src/renderer/browser-mock-ade-snapshot.generated.json.

If this fails with "No database", the user hasn't opened the project in ADE desktop yet. The renderer will still work with built-in demo data.

4. Start the Vite dev server
bash
cd "$WORKTREE_ROOT/apps/desktop" && npm run dev:vite

This runs vite --port 5173 --strictPort. The predev:vite hook re-exports the snapshot automatically, so step 3 is optional if you go straight here.

Wait for the VITE ready message confirming it's listening.

5. Open in the ADE browser (optional)

If the user wants it in ADE's built-in browser:

bash
ade actions run built_in_browser createTab --socket --text --arg url=http://localhost:5173/work

Or navigate an existing tab:

bash
ade actions run built_in_browser navigate --socket --text --arg url=http://localhost:5173/work

Use --socket to communicate with the running ADE instance. This does not start a new runtime or interfere with the existing socket.

Show full SKILL.md (231 more words)Show less

Important constraints

  • Never start a runtime or bridge. Do not run dev:vite:live, dev:browser-bridge, or ensureRuntime. These may detect version mismatches and restart the user's running ADE beta/dev runtime.
  • Never start or manage the ADE socket directly. The Vite-only preview uses browserMock.ts to stub window.ade — it does not need a runtime connection. The --socket flag on ade actions run above is fine; it connects to the running desktop instance rather than managing the socket itself.
  • Always run from the worktree. All cd commands, file reads, and file edits must target paths under $WORKTREE_ROOT, never the main project checkout. When grep or find returns absolute paths rooted at the main checkout, translate them to the worktree before editing.
  • Port 5173 only. Do not change the port. The desktop app's Vite config uses --strictPort so it will error if the port is taken rather than silently picking another.

Cleanup

When done, kill the Vite server:

bash
lsof -ti :5173 2>/dev/null | xargs kill 2>/dev/null

Troubleshooting

ProblemFix
Port 5173 is already in useKill the stale process: lsof -ti :5173 | xargs kill
No database at ...Run export-browser-mock-ade-snapshot.mjs with ADE_PROJECT_ROOT=/path/to/ADE pointing at the main checkout
ERR_CONNECTION_REFUSED in ADE browserVite died — restart with npm run dev:vite from the worktree
Mock data instead of real dataRe-run the export script, then restart Vite or hard-refresh the browser
proxy error: /health ECONNREFUSED 127.0.0.1:18765Expected — this is the browser bridge port. Vite-only mode doesn't use it. Ignore.

© arul28, AGPL-3.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 .agents/skills/ade-web of arul28/ADE.

Open the folder on GitHubat commit fbbd974

Compare with similar skills

Ade Web 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.

Ade Web compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Ade Web this skillarul28/ADE114—~1.2kAutomated safety check: PassAGPL-3.0
Run Dozzle Dev Instanceamir20/dozzle15k—~747Automated safety check: PassMIT
Using Git Worktreesaaddrick/claude-pipeline130—~1.3kAutomated safety check: PassMIT
Finishing a Development Branchobra/superpowers296k5 repos~1.9kAutomated safety check: PassMIT
Migrate Core Code to Submodulestinyhumansai/openhuman42k—~2.6kAutomated safety check: PassGPL-3.0
Finishing A Development Branchfarm-fe/farm5.6k34 repos~1.8kAutomated safety check: PassMIT

Similar skills

  • Starts a Dozzle dev server on a port derived from the current worktree so you can test by hand in a browser, without disturbing instances started elsewhere.

    15k GitHub stars~747 tokensUpdated today
    DevelopmentAuto-check passed
  • Using Git Worktrees

    aaddrick/claude-pipeline

    A skill your agent uses when starting feature work that needs isolation from current workspace or before executing implementation plans - creates isolated git worktrees in .worktrees/

    130 GitHub stars~1.3k tokensUpdated 7 mo ago
    Agent WorkflowsAuto-check passed
  • Walks the last step of a branch: confirm tests pass, detect the git environment, ask how to integrate, carry out your choice and clean up the worktree.

    296k GitHub starsUsed in 5 repos~1.9k tokens
    DevelopmentAuto-check passed
  • Migrate Core Code to Submodules

    tinyhumansai/openhuman

    Plans and carries out moving non-host-specific code and its tests from the OpenHuman core into vendored tiny submodule libraries, then releases the submodule and re-pins the host.

    42k GitHub stars~2.6k tokensUpdated today
    DevelopmentAuto-check passed
  • A skill your agent uses when implementation is complete, all tests pass, and you need to decide how to integrate the work - guides completion of development work by presenting structured options for…

    5.6k GitHub starsUsed in 34 repos~1.8k tokens
    DevelopmentAuto-check passed
  • Git Worktree Cleanup

    lobehub/lobehub

    Audits stale Git worktrees and branches with a bundled script, classifies each one, and deletes only after you approve the exact candidates.

    83k GitHub stars~2.8k tokensUpdated today
    DevelopmentAuto-check passed

More from arul28/ADE

All 28 skills in this repo
  • Ade App Control

    arul28/ADE

    A skill your agent uses when you need to run or drive a local Electron/desktop app and capture what it does — launch it or attach to a running renderer, read its logs or answer its terminal prompts…

    114 GitHub stars~3.4k tokensUpdated today
    Auto-check passed
  • Iteratively optimize an ADE tab's CPU/memory/IPC/render performance.

    114 GitHub stars~4.2k tokensUpdated today
    Auto-check passed
  • Ade Browser

    arul28/ADE

    A skill your agent uses for any browser behavior at all — opening a URL, checking a localhost page, clicking or filling a form, logging in, screenshotting, inspecting the DOM, or verifying a page…

    114 GitHub stars~3.3k tokensUpdated today
    Auto-check passed
  • Ade Deeplinks

    arul28/ADE

    A skill your agent uses when an agent needs to mint, share, or open ADE deeplinks (lane, work session, file, commit, artifact, branch, PR, Linear issue) so users — or the agent itself — can jump…

    114 GitHub stars~3.2k tokensUpdated today
    Auto-check passed
  • Ade Harnesses

    arul28/ADE

    A skill your agent uses when you need to run a chat, a CLI session, or a subagent on a specific setup — any model you pay for inside any harness (e.g.

    114 GitHub stars~1.6k tokensUpdated today
    Auto-check passed
  • Ade Lanes Git

    arul28/ADE

    A skill your agent uses when creating, inspecting, syncing, committing, pushing, archiving, or rebasing ADE lanes and lane worktrees through ade lanes and ade git.

    114 GitHub stars~594 tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Ade Web

What does Ade Web do?

Launch the ADE desktop app's renderer as a standalone web app (Vite-only preview) seeded with real data from the ADE database. Ade Web is an agent skill from arul28/ADE. Launch the ADE desktop app's renderer as a standalone web app (Vite-only preview) seeded with real data from the ADE database.

When should I use Ade Web?

Ade Web fits situations like: preview the ADE desktop web renderer; open the ADE web app; view ADE UI in a browser.

How do I install Ade Web in Claude Code?

Run `npx skills add arul28/ADE --skill ade-web -a claude-code`. Or copy the skill folder (.agents/skills/ade-web in arul28/ADE) into .claude/skills/ade-web in your project. Claude Code loads it when a task matches its description.

How do I install Ade Web in Codex?

Run `npx skills add arul28/ADE --skill ade-web -a codex`. Or copy the skill folder (.agents/skills/ade-web in arul28/ADE) into .agents/skills/ade-web in your project. Codex loads it when a task matches its description.

Can I use Ade Web 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 arul28/ADE --skill ade-web -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ade-web, .gemini/skills/ade-web, .github/skills/ade-web and .opencode/skills/ade-web in your project.

What does Ade Web need to run?

Going by SKILL.md and its folder, Ade Web needs the command-line tools its instructions call (npm and node).

Does Ade Web access the network?

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

Is Ade Web 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 Ade Web use?

Ade Web is published under the AGPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Ade Web use?

About 1.2k tokens (SKILL.md is roughly 4.7k 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 Ade Web?

Skills that share tags, products or a category with Ade Web: Run Dozzle Dev Instance (amir20/dozzle, 15k stars), Using Git Worktrees (aaddrick/claude-pipeline, 130 stars), Finishing a Development Branch (obra/superpowers, 296k stars) and Migrate Core Code to Submodules (tinyhumansai/openhuman, 42k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Ade Web?

arul28 (a GitHub user) maintains it in arul28/ADE, which has 114 GitHub stars. The repository holds 28 skills in this directory. The repository was last updated on October 8, 2026.

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