agentmods.dev

portable-html-port

portable-html-port is a skill for Claude Code from ZachArticulateV/designer-pro-and-seo. It costs 127 tokens per session (852 once invoked), scanned A, original, MIT.

A converter that packages a multi-file website into one self-contained HTML file. It places the CSS and JavaScript inside the file and embeds small local images, while flagging large images for CDN hosting.

In plain words
What is it for?
Use it to prepare a site for WordPress, GoHighLevel, Webflow, Wix, Framer, Squarespace, Carrd, or another platform that accepts custom HTML.
Why use it?
It removes the need to manage several files when placing a site into a content management system or page builder's custom-HTML area.

Skill for Claude Code

Written for Claude Code: ${CLAUDE_PLUGIN_ROOT} variable.

Runs only inside its plugin — its command needs a path that Claude Code sets for a plugin’s own hooks and for nothing else. Install the plugin, not this.

Part of the designer-pro-and-seo plugin — 41 skills, 14 agents, 1 MCP server shipped together

not rated 8repo 2mo ago A scan 127 tokens original MIT

Good fit Use it to prepare a site for WordPress, GoHighLevel, Webflow, Wix, Framer, Squarespace, Carrd, or another platform that accepts custom HTML.

Compare 6 skills from other repositories ↓
View source ↗ ZachArticulateV/designer-pro-and-seo
Install

Getting it into your agent

This one installs as part of its plugin. Adding the marketplace and installing the plugin brings it with everything else the plugin ships.

Claude Code
/plugin marketplace add ZachArticulateV/designer-pro-and-seo
Claude Code
/plugin install designer-pro-and-seo

Made for: Claude Code.

Or install designer-pro-and-seo, the plugin that ships this one along with the rest of its 41 skills, 14 agents, 1 MCP server.

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

agentmods badge for portable-html-port

README.md
[![agentmods](https://agentmods.dev/badge/skills/zacharticulatev/designer-pro-and-seo/portable-html-port/github.svg)](https://agentmods.dev/skills/zacharticulatev/designer-pro-and-seo/portable-html-port)
Your own site
<a href="https://agentmods.dev/skills/zacharticulatev/designer-pro-and-seo/portable-html-port"><img src="https://agentmods.dev/badge/skills/zacharticulatev/designer-pro-and-seo/portable-html-port/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.

agentmods 80×15 button for portable-html-port

Your own site · 80×15
<a href="https://agentmods.dev/skills/zacharticulatev/designer-pro-and-seo/portable-html-port"><img src="https://agentmods.dev/badge/skills/zacharticulatev/designer-pro-and-seo/portable-html-port.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 127 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 852 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00127 $0.00852
Opus 5 $0.00063 $0.00426
Sonnet 5 $0.00025 $0.00170
Haiku 4.5 $0.00013 $0.00085

Measured 12d ago against content hash c0512b145d15, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-12, from the pricing page.

Security

Grade A, and why

portable-html-port 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 12d 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.

skills/portable-html-port/SKILL.md · 75 lines

How it starts

The opening of the file, as written. The whole thing — 75 lines — stays where its author put it; the contents beside it link to each section on GitHub.

portable-html-port

Family: build-and-qa Status: Stable

Purpose

Convert a multi-file build (HTML + external CSS + external JS + local images) into a single self-contained HTML file that pastes into any CMS/page-builder custom-HTML surface with no per-platform tweaks. CSS and JS are inlined, small local images are base64-embedded, large ones are flagged for CDN hosting, and dev artifacts (source maps) are stripped.

Triggers

  • "port to wordpress" / "wp port"
  • "put this in ghl"
  • "single-file html" / "portable html"
  • "make this embed-ready"
  • "embed in webflow"

Inputs

  • Source build entry file (the HTML to port) and its asset folder
  • Target platform hint (wordpress / ghl / webflow / wix / framer / squarespace / carrd / generic)
  • Inline-image size threshold (KB) — images larger stay external

Steps

  1. Locate the entry HTML and confirm its CSS/JS/images are local (remote http(s):// assets are left untouched on purpose).
  2. Run the porter (try python3, then py on Windows): 
    python3 "${CLAUDE_PLUGIN_ROOT}/scripts/workflow/portable_html.py" \
  --in <path/to/index.html> --out <portable.html> \
  --target <platform> --inline-img-kb 50 --human
  3. Read the report. It returns the output size, target-specific paste instructions, and warnings — including any images/JS left external and whether the file exceeds the target platform's inline-code limit.
  4. Handle warnings. If the file exceeds a platform cap (e.g. Webflow ~50KB, GHL ~5MB/element) or large images were left external, recommend CDN-hosting those assets and re-run, or switch to a mixed strategy.
  5. Verify the output renders standalone (open it / spot-check), then deliver it with the target-specific paste instructions from the report.

Outputs

  • portable.html — the single-file bundle
  • A size + warnings report (JSON, or --human text) with paste instructions
  • A list of any assets left external (to host on a CDN)

Dependencies

Read the full file on GitHub · 75 lines

Changes

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.

  1. 12d ago First seen · 75 lines · 127 tokens per session scan A c0512b145d15

Subscribe to this mod's changes

portable-html-port is a skill published in the GitHub repository ZachArticulateV/designer-pro-and-seo (8 stars, last pushed 2mo ago), licensed MIT. It adds 127 tokens to every session and 852 once invoked, about $0.0006 per session on Opus 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-31.

Claude CodeFrontendclaude-code-plugindesign-systemseoweb-design
Related

Other skills, from other repositories

designlang-tokens

Use when styling UI for cal.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.

Manavarya09/design-extract · 30 tokens

codemod-generator

Generate codemods (automated code transformation scripts) for design system migrations — token renames, component API changes, prop deprecations, and import path updates. Produces ready-to-run jscodeshift or custom AST transform scripts that safely apply changes across consuming codebases. Trigger when someone says…

murphytrueman/design-system-ops · 162 tokens

component-api-validator

Audit component APIs for consistency, breaking changes, TypeScript coverage, and contract compliance across a component library. Trigger when someone says: component prop review, verify component types are exported, component API audit, check our component interfaces, are our props consistent, API consistency check…

murphytrueman/design-system-ops · 83 tokens

web-design

A web design workflow for turning a brief, reference website, screenshot, or keywords into a design specification and then web code. It covers visual style, page structure, interaction, responsive layouts, and motion.

xiaopu-ai/web-design · 151 tokens

design-to-code-check

Check alignment between a specific design specification and its code implementation — a focused, single-component or single-screen comparison. Trigger when someone says: does this match the design, check implementation, design code alignment, what's different between the design and the build, spec check…

murphytrueman/design-system-ops · 95 tokens

kit-montar

Monta um site novo combinando peças já validadas do acervo pessoal do usuário — templates, design systems, componentes, animações, menus, prompts e receitas — em vez de gerar tudo do zero. Acervo vazio: constrói do zero e oferece guardar. Recebe o briefing, decide cor e tipografia antes da identidade, pergunta que…

harebeats/cannonball · 245 tokens