Web Artifacts Builder
anthropics/skills
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
Verify MQTT Viewer stays smooth under heavy broker load using the local flood harness.
$ npx skills add mqtt-viewer/mqtt-viewer --skill perf-check -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install mqtt-viewer/mqtt-viewer perf-check --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/mqtt-viewer/mqtt-viewer.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/perf-check .claude/skills/perf-check && rm -rf skills-srcUse ~/.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/
Install the "perf-check" agent skill from https://github.com/mqtt-viewer/mqtt-viewer/tree/develop/.claude/skills/perf-check into .claude/skills/perf-check/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "perf-check", 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 install https://github.com/mqtt-viewer/mqtt-viewer/tree/develop/.claude/skills/perf-checkType 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.
$ npx skills add mqtt-viewer/mqtt-viewer --skill perf-check -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install mqtt-viewer/mqtt-viewer perf-check --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/mqtt-viewer/mqtt-viewer.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/perf-check .agents/skills/perf-check && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "perf-check" agent skill from https://github.com/mqtt-viewer/mqtt-viewer/tree/develop/.claude/skills/perf-check into .agents/skills/perf-check/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "perf-check", 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.
$ npx skills add mqtt-viewer/mqtt-viewer --skill perf-check -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install mqtt-viewer/mqtt-viewer perf-check --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/mqtt-viewer/mqtt-viewer.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/perf-check .cursor/skills/perf-check && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "perf-check" agent skill from https://github.com/mqtt-viewer/mqtt-viewer/tree/develop/.claude/skills/perf-check into .cursor/skills/perf-check/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "perf-check", 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 https://github.com/mqtt-viewer/mqtt-viewer.git --path .claude/skills/perf-check--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add mqtt-viewer/mqtt-viewer --skill perf-check -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install mqtt-viewer/mqtt-viewer perf-check --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/mqtt-viewer/mqtt-viewer.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/perf-check .gemini/skills/perf-check && rm -rf skills-srcUse ~/.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/
Install the "perf-check" agent skill from https://github.com/mqtt-viewer/mqtt-viewer/tree/develop/.claude/skills/perf-check into .gemini/skills/perf-check/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "perf-check", 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.
$ gh skill install mqtt-viewer/mqtt-viewer perf-checkInstalls 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).
$ npx skills add mqtt-viewer/mqtt-viewer --skill perf-check -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/mqtt-viewer/mqtt-viewer.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/perf-check .github/skills/perf-check && rm -rf skills-srcUse ~/.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/
Install the "perf-check" agent skill from https://github.com/mqtt-viewer/mqtt-viewer/tree/develop/.claude/skills/perf-check into .github/skills/perf-check/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "perf-check", 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.
$ npx skills add mqtt-viewer/mqtt-viewer --skill perf-check -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install mqtt-viewer/mqtt-viewer perf-check --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/mqtt-viewer/mqtt-viewer.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/perf-check .opencode/skills/perf-check && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "perf-check" agent skill from https://github.com/mqtt-viewer/mqtt-viewer/tree/develop/.claude/skills/perf-check into .opencode/skills/perf-check/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "perf-check", 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.
perf-checkVerify MQTT Viewer stays smooth under heavy broker load using the local flood harness.
Perf Check is an agent skill from mqtt-viewer/mqtt-viewer. Verify MQTT Viewer stays smooth under heavy broker load using the local flood harness. Use before merging changes to message handling, the topic tree, history, or the graph view, or when the user says "check performance", "run the flood test", or reports the app lagging on busy brokers.
Its SKILL.md is about 1.6k 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 Frontend & Design. The repository describes itself as: The modern and open-source MQTT debugging and visualisation tool for Windows, Mac and Linux. The licence is GPL-3.0.
Read from SKILL.md and the folder at commit 5a43d7c. It shows what the files ask for, not the result of running them.
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.
Shell commands in SKILL.md call:
justpythonbrewFrom the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Perf Check loads about 1.6k tokens when it runs. Until then it costs about 75 tokens; SKILL.md has 894 words of instructions outside code blocks.
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.
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.
The full file from mqtt-viewer/mqtt-viewer at commit 5a43d7c, republished under its GPL-3.0 licence (© mqtt-viewer). 894 words, ~1,597 tokens.
.claude/skills/perf-check/SKILL.md (or your agent's skills folder).Two brokers, each flooded at around 2000 msg/s across a wide topic tree, with the app connected to both. The UI must stay responsive: topic tree updates, panel interactions, and the graph view must not stutter or leak memory over several minutes. This reproduces what heavy public brokers like test.mosquitto.org do to the app.
# local brokers (macOS)
brew install mosquitto
# python env for the harness (and the rest of the checkout setup)
just setupscripts/.venv is gitignored, so it does not exist in a fresh agent
worktree. just setup (scripts/setup-worktree.sh) creates it with
paho-mqtt, or symlinks the main checkout's venv if it cannot, and is
safe to re-run. Check scripts/.venv/bin/python -c 'import paho.mqtt'
before backgrounding a flood: a missing interpreter fails silently and
looks like a broker with no traffic.
Terminals 1 and 2, one broker each:
mosquitto -p 1883
mosquitto -p 1884Ports 1883/1884 are often taken on this machine (OrbStack binds 1883,
other sessions leave mosquitto on 1884). Check with
lsof -i :1883 -i :1884 and fall back to 11883/11884; the flood script
and the app both accept any port. When running the flood scripts in the
background, note their stdout is block-buffered (no tty), so verify
throughput with timeout 3 mosquitto_sub -p <port> -t '#' | wc -l
instead of reading their output.
Terminals 3 and 4, one flood each (each prints achieved msg/s once per second; confirm it holds the target rate):
scripts/.venv/bin/python scripts/mqtt-flood.py --port 1883 --rate 2000
scripts/.venv/bin/python scripts/mqtt-flood.py --port 1884 --rate 2000A single flood process tops out around 1,700 msg/s on this machine
(paho's python client is the ceiling, not the broker). To hold a true
2,000, run two floods per broker at --rate 1000 rather than trusting
the target. Each mqtt-flood.py process connects with its own client id
(flood-<port>-<pid>), so two on one broker do not knock each other off.
For sparkplug-flood.py, also give each its own --group (for example
--group PlantA and --group PlantB; the default is Plant): two floods
in the same group publish as the same edge nodes, and their interleaved
seq numbers show up as false sequence gaps.
Add --topics 200000 to one of them when the change touches history,
the topic tree or memory: high topic cardinality is a separate axis from
throughput and several bounds only bite there.
Then run the app (just dev), connect to both brokers
(localhost:1883 and localhost:1884), and exercise it for at least a few
minutes.
scripts/mqtt-sim.py is the companion script for realistic varied
cadences rather than sustained flood; use it when debugging behavior
rather than throughput.
Report concrete observations (achieved msg/s, where it stuttered, memory trend), not just "seems fine".
Two things make RSS misleading, so judge growth only while the floods are still running:
DefaultMemoryBudgetBytes, 512 MB per
connection, so two connections climb toward ~1 GB of retained messages
by design. With Go's default GOGC the process sits well above that.
Rising toward the budget is the eviction working, not a leak. What
would be a leak is growth that keeps going after the budget is full.If the change is to ingest itself, a Go benchmark pins it down faster than watching the UI. Two traps:
receiveMessage debug-logs every message. That logging is off in
production builds (backend/app/startup.go), but on in tests, where
it costs roughly as much as the work itself: ingest measures ~700-800
ns per message with it off, ~1200 ns with it formatting to a discard
handler, and ~4000 ns writing to the console handler. Swap in a
discard handler with slog.SetDefault for the benchmark, or you are
timing the logger.b.StopTimer(), otherwise deferring work looks like a speedup.
runtime.NumGoroutine() sampled during the run is worth reporting
too, since a backlog shows up there first.scripts/serve-browser.sh runs the real backend and is drivable from
any browser, including one your harness drives, which is usually easier
than the native window. Two
things to know: live message events already flow with no changes to the
page, because the runtime loads /wails/custom.js itself. Do not inject
that script tag by hand: it opens a second event WebSocket and every
message count and rate reads double (see AGENTS.md).
On SIGTERM or Ctrl+C it waits up to 5 seconds for in-flight HTTP
requests, then exits. Further signals during that wait are ignored, so
give it the 5 seconds before reaching for kill -9. The open event
WebSocket does not hold it up.
An agent-embedded browser or hidden tab can throttle
requestAnimationFrame to about 2 fps (frames 1000 ms apart, zero long
tasks), so rAF frame timing there means nothing
and layout read straight after a resize can be stale. Measure main-thread
load with a MessageChannel or setTimeout event-loop-lag sampler plus
a longtask PerformanceObserver, and wait about a second after a
resize before measuring.
© mqtt-viewer, GPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Just SKILL.md in .claude/skills/perf-check of mqtt-viewer/mqtt-viewer.
Open the folder on GitHubat commit 5a43d7c
Perf Check 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Perf Check this skillmqtt-viewer/mqtt-viewer | 134 | — | ~1.6k | Automated safety check: Pass | GPL-3.0 | |
| Web Artifacts Builderanthropics/skills | 180k | 41 repos | ~769 | Automated safety check: Pass | Apache-2.0 | |
| React Doctormakeplane/plane | 61k | 12 repos | ~657 | Automated safety check: Pass | AGPL-3.0 | |
| Impeccablebestofjs/bestofjs | 3.1k | 27 repos | ~2.6k | Automated safety check: Pass | MIT | |
| Figma Design System Builderwarpdotdev/warp | 65k | 2 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Web Interface Guidelines Reviewervercel-labs/openreview | 1.7k | 97 repos | ~308 | Automated safety check: Pass | None |
anthropics/skills
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
makeplane/plane
Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.
bestofjs/bestofjs
A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…
warpdotdev/warp
Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.
vercel-labs/openreview
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…
anonaddy/anonaddy
Always invoke when the user's message includes 'tailwind' in any form.
mqtt-viewer/mqtt-viewer
Add or update the in-app "What's new" changelog for MQTT Viewer.
mqtt-viewer/mqtt-viewer
Diff the Figma component library against the MQTT Viewer frontend and produce a handover doc listing exactly what code needs to change.
mqtt-viewer/mqtt-viewer
Publish a MQTT Viewer release end to end. An agent skill from mqtt-viewer/mqtt-viewer.
mqtt-viewer/mqtt-viewer
Add a new component to the design-system library, or formalize an existing one — scaffold its colocated .spec.json, classify its tier, author a Storybook story, and link it to Figma.
mqtt-viewer/mqtt-viewer
Implement a Figma→code handover doc — apply the listed changes to Svelte components, update their colocated .spec.json and stories, and get pnpm ds:validate green.
Categories
Verify MQTT Viewer stays smooth under heavy broker load using the local flood harness. Perf Check is an agent skill from mqtt-viewer/mqtt-viewer. Verify MQTT Viewer stays smooth under heavy broker load using the local flood harness.
Perf Check fits situations like: says check performance; run the flood test; reports the app lagging on busy brokers.
Run `npx skills add mqtt-viewer/mqtt-viewer --skill perf-check -a claude-code`. Or copy the skill folder (.claude/skills/perf-check in mqtt-viewer/mqtt-viewer) into .claude/skills/perf-check in your project. Claude Code loads it when a task matches its description.
Run `npx skills add mqtt-viewer/mqtt-viewer --skill perf-check -a codex`. Or copy the skill folder (.claude/skills/perf-check in mqtt-viewer/mqtt-viewer) into .agents/skills/perf-check in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add mqtt-viewer/mqtt-viewer --skill perf-check -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/perf-check, .gemini/skills/perf-check, .github/skills/perf-check and .opencode/skills/perf-check in your project.
Going by SKILL.md and its folder, Perf Check needs the command-line tools its instructions call (just, python and brew). Our summary lists: Python 3.
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.
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.
Perf Check is published under the GPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 1.6k tokens (SKILL.md is roughly 6.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Perf Check: Web Artifacts Builder (anthropics/skills, 180k stars), React Doctor (makeplane/plane, 61k stars), Impeccable (bestofjs/bestofjs, 3.1k stars) and Figma Design System Builder (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
mqtt-viewer (a GitHub organization) maintains it in mqtt-viewer/mqtt-viewer, which has 134 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on October 8, 2026.
Source: mqtt-viewer/mqtt-viewer on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.