Open SWE is an open-source software factory that gives coding tasks to an asynchronous agent, which investigates repositories, changes code, validates the results, and delivers pull requests. Engineering teams use it to automate code changes, reviews, CI follow-up, and related repository work from dashboards and connected tools.
Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add langchain-ai/open-swe --skill html-artifactsgit clone --depth 1 https://github.com/langchain-ai/open-sweWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/langchain-ai/open-swe/html-artifacts)<a href="https://agentmods.dev/skills/langchain-ai/open-swe/html-artifacts"><img src="https://agentmods.dev/badge/skills/langchain-ai/open-swe/html-artifacts/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/langchain-ai/open-swe/html-artifacts"><img src="https://agentmods.dev/badge/skills/langchain-ai/open-swe/html-artifacts.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- Snyk pass
- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00051 | $0.01238 |
| Opus 5.5 | $0.00020 | $0.00495 |
| Sonnet 5.5 | $0.00010 | $0.00248 |
| Haiku 4.5 | $0.00005 | $0.00124 |
Grade A, and why
html-artifacts scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 13d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 67 lines — stays where its author put it; the contents beside it link to each section on GitHub.
HTML artifacts
save_plan, output_iframe, and slack_attach_html all publish a self-contained HTML artifact, and one contract covers all three.
Write the page content directly. When you omit <html>, <head>, and <body>, the tool wraps your content in that skeleton with a minimal CSS reset. Write a <title> yourself — a specific 2–4 word name for this page, not a summary or a category label. A Slack attachment is opened as a standalone file, so include the full skeleton there.
Design plan first
Sketch a compact plan before writing HTML, then follow it:
- Color: 4–6 named hex values grounded in the subject, including deliberately tinted neutrals. A pure mid-grey reads as unconsidered; a grey biased toward the accent reads as chosen.
- Type: at least a display and a body role, plus a utility/data face when useful. Google Fonts may be linked directly; every face needs a real fallback stack.
- Layout: the layout concept in one or two sentences. A plan or memo is polished and utilitarian — most pages need no oversized landing-page hero.
Derive every color and type decision in the page from that plan.
Runtime
Inline CSS and JavaScript, Canvas, WebGL, and inline SVG all run — prefer Canvas or WebGL over hand-authored SVG path data for generative graphics. Google Fonts stylesheets are the only permitted external resource; inline or data-URI every other asset.
Assume no network at runtime: no CDN scripts, fetch, or XHR. The viewer frames have an opaque origin, so localStorage, sessionStorage, and cookies throw on access — wrap any use in try/catch and render correctly with no stored value.
Theming
Default user-facing HTML to the viewer's system light/dark preference using prefers-color-scheme; provide both palettes unless the user explicitly requests a single theme. Honor an explicit viewer theme supplied by the dashboard over the system preference.
The dashboard stamps data-theme="light" or data-theme="dark" on <html>, so :root[data-theme="dark"] is the authoritative dark layer and must be complete on its own.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 13d ago Changed · +2 lines bfdf1994941e
- 1mo ago First seen · 65 lines · 51 tokens per session scan A 81ab344c9baf
html-artifacts is a skill published in the GitHub repository langchain-ai/open-swe (11,030 stars, last pushed today), licensed MIT. It adds 51 tokens to every session and 1,238 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
generative-ui
Use when presenting information already in hand as a small, static structured panel in the conversation — status, results, comparisons, or a compact summary — rather than prose, a markdown table, a widget, or an app.
pr-screenshot-comparison
Create clear, polished before-and-after screenshots from the actual running product for a GitHub pull request. Use when a UI change needs visual proof: capture matching product states, crop to the relevant UI, stitch and caption one comparison image, attach it natively to the PR, and keep the image out of the…
typography
Apply professional typography principles to create readable, hierarchical, and aesthetically refined interfaces. Use when setting type scales, choosing fonts, adjusting spacing, designing text-heavy layouts, implementing dark mode typography, or when asked about readability, font pairing, line height, measure…
st-widget-builder
Use when the user asks to render, build, visualise, mock up, or show a widget (chart, dashboard, card, table, graph) in the Mewbo Console. Teaches how to delegate the work to the st-widget-builder sub-agent instead of writing HTML or inline code yourself.
frontend-design
Guidance for distinctive, intentional visual design when building or reshaping UI, HTML/React artifacts, dashboards, charts, and visual reports. Use before implementation to choose a content-specific structure, typography, and visual system that does not read as a templated default.
design-impeccable
Always-on visual quality gate and progressive skill router for HTML, dashboards, charts, decks, documents, UI mockups, and other styled artifacts. It keeps universal anti-template rules in context and tells MOZI which specialist design skill to activate before planning visual work.