What is deploy-frontend?

A workflow for publishing React, Next.js static exports, or plain HTML frontends to a live Butterbase URL. It covers setting build-time environment variables, building the site, uploading it, and checking the deployed result.

Use it to deploy Vite React sites, static Next.js sites, or plain HTML projects, configure public API variables, upload build files, and troubleshoot deployment failures.

It helps avoid common deployment problems such as missing API settings, incorrect output folders, MIME-type errors, and blank pages. It also explains the build conventions expected by each supported frontend type.

deploy-frontend — Skill for Claude Code by butterbase-ai

Install

Getting it into your agent

It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.

Clone the repo

git clone --depth 1 https://github.com/butterbase-ai/butterbase-skills

agentmods

npx agentmods add skills/butterbase-ai/butterbase-skills/deploy-frontend

Made for: Claude Code.

Or install butterbase-skills, the plugin that ships this one along with the rest of its 23 skills, 33 commands.

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.

README.md

[![agentmods](https://agentmods.dev/badge/skills/butterbase-ai/butterbase-skills/deploy-frontend/github.svg)](https://agentmods.dev/skills/butterbase-ai/butterbase-skills/deploy-frontend)

Your own site

<a href="https://agentmods.dev/skills/butterbase-ai/butterbase-skills/deploy-frontend"><img src="https://agentmods.dev/badge/skills/butterbase-ai/butterbase-skills/deploy-frontend/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.

Your own site · 80×15

<a href="https://agentmods.dev/skills/butterbase-ai/butterbase-skills/deploy-frontend"><img src="https://agentmods.dev/badge/skills/butterbase-ai/butterbase-skills/deploy-frontend.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 39 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 2,906 The whole file, excluding the scripts and references it only reads on demand.

Security scan B 2 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits

NVIDIA SkillSpector warn 7 Sept 2026

SkillSpector: 4 findings, up to medium

These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →

medium Data Exfiltration · line 33
Data is being sent to an external URL. This could be legitimate telemetry or data exfiltration. Manual review is recommended.

Fix: Verify the destination URL is trusted and necessary. Remove or replace with documented APIs. Ensure no secrets, tokens, or PII are transmitted.
medium Data Exfiltration · line 215
Data is being sent to an external URL. This could be legitimate telemetry or data exfiltration. Manual review is recommended.

Fix: Verify the destination URL is trusted and necessary. Remove or replace with documented APIs. Ensure no secrets, tokens, or PII are transmitted.
medium Data Exfiltration · line 276
Data is being sent to an external URL. This could be legitimate telemetry or data exfiltration. Manual review is recommended.

Fix: Verify the destination URL is trusted and necessary. Remove or replace with documented APIs. Ensure no secrets, tokens, or PII are transmitted.
medium MCP Rug Pull · line 291
npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.

Fix: Pin the version: npx @scope/[email protected]

How audits are shown

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.

Model	Per session	Once invoked
Fable 5.1	$0.00039	$0.02906
Opus 5	$0.00019	$0.01453
Sonnet 5	$0.00008	$0.00581
Haiku 4.5	$0.00004	$0.00291

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

Security

Grade B, and why

deploy-frontend scanned grade B with 2 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 11d 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.

Sends data to an external URLmediumData exfiltration

A POST to an outside endpoint may be telemetry or may be exfiltration; either way the mod talks to somewhere, and you should know where.

3. `curl -X PUT "{uploadUrl}" -H "Content-Type: application/zip" --data-binary @source.zip`

Makes network callslowCapability

Not a fault in itself. Listed so you know the mod talks to something, and to what.

curl -X PUT "{uploadUrl}" \

skills/deploy-frontend/SKILL.md · 299 lines

How it starts

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

Overview

7-step workflow for deploying static frontends to Butterbase. Covers building, CORS, zipping, uploading, and verification.

Framework Reference Table

Framework	Build command	Output dir	Env prefix	Framework flag
React (Vite)	`npm run build`	`dist/`	`VITE_`	`react-vite`
Next.js (static)	`next build`	`out/`	`NEXT_PUBLIC_`	`nextjs-static`
Plain HTML	(none)	project root	N/A	`static`

Note: Next.js requires output: 'export' in next.config.js to produce a static export.

Step 1: Set Environment Variables

Use manage_frontend with action: "set_env" to configure the API URL and app ID before building. These variables are injected at build time by the framework.

{
  "app_id": "app_abc123",
  "action": "set_env",
  "vars": {
    "VITE_API_URL": "https://api.butterbase.ai/v1/app_abc123",
    "VITE_APP_ID": "app_abc123"
  }
}

For Vite, prefix all public variables with VITE_
For Next.js, prefix with NEXT_PUBLIC_
For Create React App, prefix with REACT_APP_

set_env upserts; you can call it again to add or change variables.

Step 2: Build

Run the framework-specific build command to produce the static output directory.

Framework	Command
React (Vite)	`npm run build`
Next.js (static)	`next build`
Plain HTML	(no build needed)

After building, verify the output directory contains index.html at its root:

# For Vite
ls dist/index.html

# For Next.js static export
ls out/index.html

If index.html is missing, check that the build completed without errors and that the framework is configured for static output.

Step 3: Configure CORS

Before deploying, configure CORS so the browser can make API requests from the deployment URL.

Read the full file on GitHub · 299 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.

11d ago First seen · 299 lines · 39 tokens per session scan B ba7f5f2f590d

Subscribe to this mod's changes

deploy-frontend is a skill published in the GitHub repository butterbase-ai/butterbase-skills (533 stars, last pushed 2mo ago), licensed MIT. It adds 39 tokens to every session and 2,906 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it B with 2 findings (sends data to an external url, makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Claude Code Cloud DevOps and cloud Frontend agent-skills ai-agents backend-as-a-service claude mcp

cli-ux

Use for packages/cli changes that affect command UX, prompts, help, output layout, progress, success, warnings, errors, JSON/stdout/stderr contracts, non-interactive/agent behavior, copy, or tests for those surfaces. Do not load for implementation-only refactors with unchanged CLI surface.

vercel/vercel · 65 tokens

nextjs-on-cloudflare

Build, migrate, and deploy Next.js apps on Cloudflare Workers with vinext. Use when starting a Next.js project on Cloudflare, moving an existing app to Workers, choosing between vinext and OpenNext, or setting up vinext for Workers. For setup, migration, or deployment, install vinext's upstream skills with npx skills…

cloudflare/skills · 96 tokens

x-lsof

Enhanced lsof (List Open Files) with interactive UI and structured output. View open files, network connections, and processes. Dependency: This is an x-cmd module. Install x-cmd first (see x-cmd skill for installation options). see x-cmd skill for installation.

x-cmd/x-cmd · 64 tokens

deploy-frontend