Agent skill

UI Harness

by ship-studio in ship-studio/ship-studio

Look at Ship Studio's actual UI. An agent skill from ship-studio/ship-studio.

MITAuto-check passed

Install UI Harness

skills CLI

$ npx skills add ship-studio/ship-studio --skill ui-harness -a claude-code

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

GitHub CLI

$ gh skill install ship-studio/ship-studio ui-harness --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/ship-studio/ship-studio.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/ui-harness .claude/skills/ui-harness && 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/

Paste into Claude Code

Install the "ui-harness" agent skill from https://github.com/ship-studio/ship-studio/tree/main/.claude/skills/ui-harness into .claude/skills/ui-harness/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-harness", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/ship-studio/ship-studio/tree/main/.claude/skills/ui-harness

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add ship-studio/ship-studio --skill ui-harness -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install ship-studio/ship-studio ui-harness --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/ship-studio/ship-studio.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/ui-harness .agents/skills/ui-harness && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "ui-harness" agent skill from https://github.com/ship-studio/ship-studio/tree/main/.claude/skills/ui-harness into .agents/skills/ui-harness/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-harness", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add ship-studio/ship-studio --skill ui-harness -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install ship-studio/ship-studio ui-harness --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/ship-studio/ship-studio.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/ui-harness .cursor/skills/ui-harness && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "ui-harness" agent skill from https://github.com/ship-studio/ship-studio/tree/main/.claude/skills/ui-harness into .cursor/skills/ui-harness/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-harness", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/ship-studio/ship-studio.git --path .claude/skills/ui-harness

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add ship-studio/ship-studio --skill ui-harness -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install ship-studio/ship-studio ui-harness --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/ship-studio/ship-studio.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/ui-harness .gemini/skills/ui-harness && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "ui-harness" agent skill from https://github.com/ship-studio/ship-studio/tree/main/.claude/skills/ui-harness into .gemini/skills/ui-harness/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-harness", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install ship-studio/ship-studio ui-harness

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add ship-studio/ship-studio --skill ui-harness -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/ship-studio/ship-studio.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/ui-harness .github/skills/ui-harness && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "ui-harness" agent skill from https://github.com/ship-studio/ship-studio/tree/main/.claude/skills/ui-harness into .github/skills/ui-harness/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-harness", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add ship-studio/ship-studio --skill ui-harness -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install ship-studio/ship-studio ui-harness --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/ship-studio/ship-studio.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/ui-harness .opencode/skills/ui-harness && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "ui-harness" agent skill from https://github.com/ship-studio/ship-studio/tree/main/.claude/skills/ui-harness into .opencode/skills/ui-harness/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-harness", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: ui-harness
GitHub stars: 285
Token cost: ~1.4k tokens
SKILL.md length: 652 words
Files: 1
Skills in repo: 1
Repo updated: Sep 24, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Look at Ship Studio's actual UI. An agent skill from ship-studio/ship-studio.

You need to check what a screen looks like
SKILL.md covers Run it, The two modes, Check the screenshots are of… and Give every new scenario a…, plus 5 more sections
Calls node, pnpm and cargo
Verify a UI change

What it does

UI Harness is an agent skill from ship-studio/ship-studio. Look at Ship Studio's actual UI. Boots the real frontend in headless Chrome against a fixture backend and captures screenshots of any app state — dashboard, onboarding, workspace, modals, deploy states — without a Tauri build, a real machine state, or any third-party account. Use whenever you need to check what a screen looks like, verify a UI change, reproduce a state that is awkward to reach for real, or answer "does this look right" instead of guessing from code.

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

It works with Tauri, React and Rust. The repository describes itself as: The professional studio for modern development — build it, ship it, host it without leaving the app. Free, local-first, works with any CLI based coding agent, including Claude… The licence is MIT.

When your agent uses it

You need to check what a screen looks like
Verify a UI change
Reproduce a state that is awkward to reach for real
Answer does this look right instead of guessing from code

Example prompts

“does this look right”
“/ui-harness”

What it can do on your machine

Read from SKILL.md and the folder at commit 13cccf3. 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:
- node
- pnpm
- cargo
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use pnpm, 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

UI Harness loads about 1.4k tokens when it runs. Until then it costs about 120 tokens; SKILL.md has 652 words of instructions outside code blocks.

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

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 ship-studio/ship-studio at commit 13cccf3, republished under its MIT licence (© ship-studio). 652 words, ~1,404 tokens.

Download SKILL.mdSave it as .claude/skills/ui-harness/SKILL.md (or your agent's skills folder).

name: ui-harness
description: Look at Ship Studio's actual UI. Boots the real frontend in headless Chrome against a fixture backend and captures screenshots of any app state — dashboard, onboarding, workspace, modals, deploy states — without a Tauri build, a real machine state, or any third-party account. Use whenever you need to check what a screen looks like, verify a UI change, reproduce a state that is awkward to reach for real, or answer "does this look right" instead of guessing from code.

Seeing Ship Studio

You can look at this app. Do that instead of reasoning about the UI from source.

Run it

bash

pnpm harness &                             # dev server on 127.0.0.1:1425
node scripts/harness-capture.mjs --all     # ~70 PNGs + harness/shots/report.md

Then read harness/shots/report.md and open the PNGs you care about. Narrow the sweep while iterating:

bash

node scripts/harness-capture.mjs hosting-        # id prefix filter
node scripts/harness-capture.mjs --commands      # palette sweep only
node scripts/harness-capture.mjs --out /tmp/a    # somewhere else

The runner exits non-zero if anything crashed, never settled, or asked for a Tauri command with no fixture.

The two modes

Scenarios (src/harness/scenarios/) are hand-written states that are slow or awkward to reach for real: an empty account, a fresh machine, 24 projects, a failed deploy, an expired token, merge conflicts. Each carries a looksRightWhen line saying what to check.

Commands (--commands) sweeps every action registered in the Cmd+K palette, one page load each. CLAUDE.md requires every user-facing feature to register there, so this list is the app's own inventory and tracks new features automatically.

Check the screenshots are of YOUR tree

The runner does this for you: the harness serves /__harness/identity and the capture aborts if the server on the port belongs to a different checkout. If you see that error, another worktree is holding the port — give yours its own:

bash

SHIPSTUDIO_HARNESS_PORT=1426 pnpm harness &
SHIPSTUDIO_HARNESS_PORT=1426 node scripts/harness-capture.mjs --all

Every report.md records the checkout path and HEAD it came from. When you cite a screenshot as evidence, that line is what makes it evidence rather than an image. This guard exists because a capture once attached to a neighbouring worktree's harness and produced a complete, confidently-labelled set of screenshots of the wrong tree.

Give every new scenario a `requires`

requires: '<selector>' fails the capture when nothing matches. Without it, a scenario whose surface stopped rendering still yields a clean screenshot of whatever else was on screen, under that scenario's name. Point it at the thing the scenario is actually about — the popover, the panel, the list — not at page chrome that is always present.

Read the "Text being cut off" section

report.md lists elements whose content is wider than the box drawn for it. Truncation is a few pixels of "…" in a screenshot — easy to read straight past, and easy to conclude a capture passes when a status line lost its informative half. Check what got cut, not just that something did. It never fails a run; some truncation is intended.

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

The rule you must not break

A Tauri command with no fixture is never given a plausible default. It is recorded, badged in the UI, and fails the capture run.

If a scenario reports unmocked commands, its screenshot is incomplete and is not evidence. Add the fixture first. Copy the shape from the invoke<...> type at the real call site — including its snake_case/camelCase inconsistency, which is not uniform across the backend. A fixture that tidies the casing tests a response the app never receives.

An empty array is fine — "nothing configured yet" is a real backend answer. A made-up value is not.

Adding a scenario

{
  id: 'branches-many',
  title: 'Branches — a busy repo',
  looksRightWhen: 'Long names truncate rather than overflow.',
  project: WORKSPACE_PROJECT,                    // open a workspace
  openSelector: '.source-control-push-button',   // click once settled
  clipSelector: '.publish-dropdown-menu',        // capture just this element
  storage: { 'shipstudio.onboardingMode': 'classic' },
  commands: { ...workspaceCommands, list_branches: [...] },
}

Use clipSelector for popovers and modals. The harness has no dev server and no PTY, so the surrounding workspace shows a permanent "Starting dev server…" spinner and an idle agent pane; clipping keeps those artifacts out of frame.

What it cannot tell you

Nothing about Rust. Backend logic, path validation, and the git/provider adapters have their own cargo test suites.
Chrome, not WebKit. Ship Studio ships in a WKWebView. WebKit-specific layout bugs will not appear — the CSP/terminal-font gotcha in CLAUDE.md is the standing example.
No real PTY, dev server, or network. External DNS is blocked so runs are hermetic.
It proves the UI renders a given backend answer correctly. It does not prove any backend ever sends that answer.

Reproducibility

Motion is frozen, storage is wiped per load, external DNS is blocked, and each capture shoots until two consecutive frames agree. Roughly 80% of captures are byte-identical across runs; the rest vary in async regions (terminal output, workspace panel toggles). report.json carries stable per capture. Do not treat a byte diff between runs as a regression on its own — look at the image.

Files

Just SKILL.md in .claude/skills/ui-harness of ship-studio/ship-studio.

Open the folder on GitHubat commit 13cccf3

Compare with similar skills

UI Harness 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.

UI Harness compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
UI Harness this skillship-studio/ship-studio	285	—	~1.4k	Automated safety check: Pass	MIT	12 days ago
Manage Skills Hubqufei1993/skills-hub	1.7k	—	~3.2k	Automated safety check: Pass	MIT	today
Cut Releasedelexw/claude-code-trace	376	1 repos	~1.4k	Automated safety check: Pass	MIT	3 days ago
Papr Rssl0ng-ai/papr	539	—	~1.1k	Automated safety check: Pass	MIT	14 days ago
Project StructureEynzof/Hermes-CN-Desktop	1.7k	—	~4.2k	Automated safety check: Notes	Custom licence	16 days ago
Reactflow Workflowveloxbase/veloxdb	646	—	~897	Automated safety check: Pass	MIT	7 days ago

Similar skills

Manage Skills Hub
qufei1993/skills-hub
A skill your agent uses whenever an Agent needs to query, find, install, deploy, update, tag, adopt, diagnose, or safely remove Skills Hub content, including natural-language requests to manage…
1.7k GitHub stars~3.2k tokensUpdated today
Agent WorkflowsAuto-check passed
Cut Release
delexw/claude-code-trace
Cuts a new versioned release of claude-code-trace end-to-end without asking any questions.
376 GitHub starsUsed in 1 repo~1.4k tokens
DevelopmentAuto-check passed
Papr Rss
l0ng-ai/papr
Read, search and triage the user's Papr RSS subscriptions from the shell via the papr CLI.
539 GitHub stars~1.1k tokensUpdated 14 days ago
Knowledge ManagementAuto-check passed
Project Structure
Eynzof/Hermes-CN-Desktop
A skill your agent uses when orienting within the Hermes Agent CN Desktop codebase, locating source files, understanding the Tauri+React architecture, finding Rust commands or frontend modules, or…
1.7k GitHub stars~4.2k tokensUpdated 16 days ago
DevelopmentAuto-check: notes
Reactflow Workflow
veloxbase/veloxdb
Build and harden React Flow diagram surfaces in VeloxDB using @xyflow/react patterns (nodes, edges, viewport, controls, interactions, performance).
646 GitHub stars~897 tokensUpdated 7 days ago
Frontend & DesignAuto-check passed
Release Version
GOODBOY008/r-shell
Release a new r-shell version and create a published GitHub release with contributor credits.
151 GitHub stars~4k tokensUpdated yesterday
DevelopmentAuto-check passed

Works with

Questions about UI Harness

What does UI Harness do?

Look at Ship Studio's actual UI. An agent skill from ship-studio/ship-studio. UI Harness is an agent skill from ship-studio/ship-studio. Look at Ship Studio's actual UI.

When should I use UI Harness?

UI Harness fits situations like: you need to check what a screen looks like; verify a UI change; reproduce a state that is awkward to reach for real; answer does this look right instead of guessing from code.

How do I install UI Harness in Claude Code?

Run `npx skills add ship-studio/ship-studio --skill ui-harness -a claude-code`. Or copy the skill folder (.claude/skills/ui-harness in ship-studio/ship-studio) into .claude/skills/ui-harness in your project. Claude Code loads it when a task matches its description.

How do I install UI Harness in Codex?

Run `npx skills add ship-studio/ship-studio --skill ui-harness -a codex`. Or copy the skill folder (.claude/skills/ui-harness in ship-studio/ship-studio) into .agents/skills/ui-harness in your project. Codex loads it when a task matches its description.

Can I use UI Harness 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 ship-studio/ship-studio --skill ui-harness -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ui-harness, .gemini/skills/ui-harness, .github/skills/ui-harness and .opencode/skills/ui-harness in your project.

What does UI Harness need to run?

Going by SKILL.md and its folder, UI Harness needs the command-line tools its instructions call (node, pnpm and cargo).

Does UI Harness 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 UI Harness 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 UI Harness use?

UI Harness 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 UI Harness use?

About 1.4k tokens (SKILL.md is roughly 5.6k 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 UI Harness?

Skills that share tags, products or a category with UI Harness: Manage Skills Hub (qufei1993/skills-hub, 1.7k stars), Cut Release (delexw/claude-code-trace, 376 stars), Papr Rss (l0ng-ai/papr, 539 stars) and Project Structure (Eynzof/Hermes-CN-Desktop, 1.7k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains UI Harness?

ship-studio (a GitHub organization) maintains it in ship-studio/ship-studio, which has 285 GitHub stars. The repository was last updated on September 24, 2026.

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

Install UI Harness

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Seeing Ship Studio

Run it

The two modes

Check the screenshots are of YOUR tree

Give every new scenario a requires

Read the "Text being cut off" section

The rule you must not break

Adding a scenario

What it cannot tell you

Reproducibility

Files

Compare with similar skills

Similar skills

Manage Skills Hub

Cut Release

Papr Rss

Project Structure

Reactflow Workflow

Release Version

Related

Questions about UI Harness

Give every new scenario a `requires`