A skill your agent uses when deploying a frontend (React, Next.js, or static HTML) to a live URL on Butterbase, or when troubleshooting deployment issues like MIME type errors or blank pages
Install the "deploy-frontend" agent skill from https://github.com/butterbase-ai/butterbase-skills/tree/main/skills/deploy-frontend into .claude/skills/deploy-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "deploy-frontend", 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.
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 butterbase-ai/butterbase-skills --skill deploy-frontend -a codex
Project install goes to .agents/skills/; add -g for ~/.codex/skills/.
Install the "deploy-frontend" agent skill from https://github.com/butterbase-ai/butterbase-skills/tree/main/skills/deploy-frontend into .agents/skills/deploy-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "deploy-frontend", 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 butterbase-ai/butterbase-skills --skill deploy-frontend -a cursor
Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.
Install the "deploy-frontend" agent skill from https://github.com/butterbase-ai/butterbase-skills/tree/main/skills/deploy-frontend into .cursor/skills/deploy-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "deploy-frontend", 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.
--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 butterbase-ai/butterbase-skills --skill deploy-frontend -a gemini-cli
Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.
Install the "deploy-frontend" agent skill from https://github.com/butterbase-ai/butterbase-skills/tree/main/skills/deploy-frontend into .gemini/skills/deploy-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "deploy-frontend", 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.
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 butterbase-ai/butterbase-skills --skill deploy-frontend -a github-copilot
Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.
Install the "deploy-frontend" agent skill from https://github.com/butterbase-ai/butterbase-skills/tree/main/skills/deploy-frontend into .github/skills/deploy-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "deploy-frontend", 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 butterbase-ai/butterbase-skills --skill deploy-frontend -a opencode
OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
Install the "deploy-frontend" agent skill from https://github.com/butterbase-ai/butterbase-skills/tree/main/skills/deploy-frontend into .opencode/skills/deploy-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "deploy-frontend", 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
deploy-frontend
GitHub stars
534
Token cost
~2.8k tokens
SKILL.md length
973 words
Files
1
Skills in repo
39
Repo updated
First seen
Licence
MIT
At a glance
A skill your agent uses when deploying a frontend (React, Next.js, or static HTML) to a live URL on Butterbase, or when troubleshooting deployment issues like MIME type errors or blank pages
Works in 7 steps: Set Environment Variables → Build → Configure CORS → …
Deploying a frontend (React
SKILL.md covers Overview, Framework Reference Table, Step 1: Set Environment… and Step 2: Build, plus 8 more sections
Calls node, npm and curl; reaches api.butterbase.ai
What it does
Deploy Frontend is an agent skill from butterbase-ai/butterbase-skills. Use when deploying a frontend (React, Next.js, or static HTML) to a live URL on Butterbase, or when troubleshooting deployment issues like MIME type errors or blank pages
Its SKILL.md is about 2.8k 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, covering Deployment. It works with Next.js, React and Vite. The repository describes itself as: Plugin for Butterbase.ai. The licence is MIT.
When your agent uses it
Deploying a frontend (React
Static HTML) to a live URL on Butterbase
Troubleshooting deployment issues like MIME type errors
Example prompts
“/deploy-frontend”
Requirements
Node.js
Workflow steps
7 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit aa8ae69. 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
npm
curl
npx
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
api.butterbase.ai
Also links to:
npmjs.com
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
Deploy Frontend loads about 2.8k tokens when it runs. Until then it costs about 47 tokens; SKILL.md has 973 words of instructions outside code blocks.
Always· name and description, kept in context so the agent knows when to use it
~47
When it runs· the whole SKILL.md, loaded when a task matches
~2.8k
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.
Download SKILL.mdSave it as .claude/skills/deploy-frontend/SKILL.md (or your agent's skills folder).
name
deploy-frontend
description
Use when deploying a frontend (React, Next.js, or static HTML) to a live URL on Butterbase, or when troubleshooting deployment issues like MIME type errors or blank pages
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.
uploadUrl — the presigned S3 URL for uploading the zip (expires in 15 minutes)
Free plan: 1 deployment per app. Deploying again automatically replaces the previous deployment — no need to delete first.
Step 5: Create Zip (Node archiver — the only supported method)
⚠️ Do not use Compress-Archive, File Explorer, or zip -r from outside the build dir. Windows built-in tools write backslash (\) path separators, which makes the platform serve every file as text/html and breaks JS/CSS with MIME errors. Zipping from the parent dir nests dist/ inside the archive and ships a blank page.
Butterbase's recommended cross-platform method is the archiver Node package. It always writes POSIX / separators (works identically on macOS, Linux, Windows PowerShell, cmd, Git Bash, WSL) and zips from inside the source dir so index.html lands at the zip root.
One-time setup in the project being deployed:
bash
npm install --save-dev archiver
mkdir -p scripts
Then save this as scripts/make-zip.mjs (copy verbatim):
js
#!/usr/bin/env node
/**
* Butterbase frontend zipper — the only supported way to compress a build
* for `create_frontend_deployment` / `create_from_source`.
*
* Usage:
* node scripts/make-zip.mjs <sourceDir> <outZip> [--exclude=glob,glob,...]
*
* Examples:
* node scripts/make-zip.mjs dist frontend.zip # Vite
* node scripts/make-zip.mjs out frontend.zip # Next.js static export
* node scripts/make-zip.mjs . source.zip \ # source-build flow
* --exclude=node_modules,.next,dist,out,.git,.turbo,.cache
*/
import { createWriteStream } from "node:fs";
import { stat } from "node:fs/promises";
import { resolve } from "node:path";
import archiver from "archiver";
const [, , srcArg, outArg, ...rest] = process.argv;
if (!srcArg || !outArg) {
console.error(
"usage: node make-zip.mjs <sourceDir> <outZip> [--exclude=glob,glob,...]"
);
process.exit(2);
}
const src = resolve(srcArg);
const out = resolve(outArg);
const excludeFlag = rest.find((a) => a.startsWith("--exclude="));
const excludes = excludeFlag
? excludeFlag
.slice("--exclude=".length)
.split(",")
.map((s) => s.trim())
.filter(Boolean)
.flatMap((g) => [g, `${g}/**`])
: [];
const srcStat = await stat(src).catch(() => null);
if (!srcStat?.isDirectory()) {
console.error(`error: source is not a directory: ${src}`);
process.exit(1);
}
const output = createWriteStream(out);
const archive = archiver("zip", { zlib: { level: 9 }, forceLocalTime: true });
output.on("close", () => {
const mb = (archive.pointer() / (1024 * 1024)).toFixed(2);
console.log(`wrote ${out} (${mb} MB, ${archive.pointer()} bytes)`);
});
archive.on("warning", (err) => {
if (err.code === "ENOENT") console.warn(err);
else throw err;
});
archive.on("error", (err) => {
throw err;
});
archive.pipe(output);
// cwd: src + glob('**/*') ⇒ entries are relative to src, so index.html
// sits at the zip root. archiver normalises separators to '/' on every OS.
archive.glob("**/*", { cwd: src, dot: true, ignore: excludes });
await archive.finalize();
Do not use zip -r ../source.zip . -x ... — it has the same Windows-separator hazard as Step 5.
curl -X PUT "{uploadUrl}" -H "Content-Type: application/zip" --data-binary @source.zip
manage_frontend action start_from_source with deployment_id, lockfile_hash (sha256 of package-lock.json), optional build_command, output_dir, package_manager, user_env
Same lockfile_hash across deploys = cached node_modules for faster rebuilds.
Edge SSR (Next.js / Remix with server-side rendering)
Static deploys can't run server-side code. For Next.js (App Router with SSR/middleware) or Remix on Cloudflare Workers, use manage_edge_ssr instead of create_frontend_deployment + manage_frontend. Same shape, separate tool:
Action
Purpose
create
Returns presigned URL for a pre-built Workers zip (framework default nextjs-edge)
If a docs/butterbase/00-state.md exists in the working directory, prefer invoking via /butterbase-skills:journey-frontend so the journey orchestrator stays in sync.
Deploy Frontend 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.
Deploy Frontend compared with similar skills
Skill
Stars
Used in
Tokens
Auto-check
Licence
Repo updated
Deploy Frontend this skillbutterbase-ai/butterbase-skills
A skill your agent uses when the user mentions "pinme", or needs to upload files, store to IPFS, create/publish/deploy websites or full-stack services (including frontend pages, backend APIs…
Community skill for applying the Geist design system to Vercel-inspired rendered frontend UI across React/Next.js/Vite/Astro/Svelte/Vue/HTML/CSS, Tailwind, shadcn, and Radix.
Builds Next.js 14+ apps on the App Router with server components, server actions, explicit caching, SEO metadata, loading and error boundaries and Vercel deployment.
A skill your agent uses when calling the app's AI gateway from agent tools — chat completions, embeddings, listing models, configuring defaults or BYOK, reading token/cost usage
A skill your agent uses when configuring OAuth providers (Google/GitHub/Apple/X/etc.), setting up post-login auth hooks, tuning JWT lifetimes, or generating service API keys
A skill your agent uses when building a new Butterbase app from scratch, creating a full-stack application, or when the user asks to set up a complete backend with database, auth, and deployment
A skill your agent uses when contributing to the Butterbase codebase, adding new MCP tools, creating API routes, writing migrations, or understanding the monorepo architecture
A skill your agent uses when users report access denied errors, see wrong data, RLS policies are not working, or when troubleshooting Row-Level Security issues in Butterbase
A skill your agent uses when building stateful per-key actors — chat rooms, multiplayer rooms, rate limiters, long-running agents, leaderboards — that need persistent in-memory + storage state…
A skill your agent uses when deploying a frontend (React, Next.js, or static HTML) to a live URL on Butterbase, or when troubleshooting deployment issues like MIME type errors or blank pages. Deploy Frontend is an agent skill from butterbase-ai/butterbase-skills.
When should I use Deploy Frontend?
Deploy Frontend fits situations like: deploying a frontend (React; static HTML) to a live URL on Butterbase; troubleshooting deployment issues like MIME type errors.
How do I install Deploy Frontend in Claude Code?
Run `npx skills add butterbase-ai/butterbase-skills --skill deploy-frontend -a claude-code`. Or copy the skill folder (skills/deploy-frontend in butterbase-ai/butterbase-skills) into .claude/skills/deploy-frontend in your project. Claude Code loads it when a task matches its description.
How do I install Deploy Frontend in Codex?
Run `npx skills add butterbase-ai/butterbase-skills --skill deploy-frontend -a codex`. Or copy the skill folder (skills/deploy-frontend in butterbase-ai/butterbase-skills) into .agents/skills/deploy-frontend in your project. Codex loads it when a task matches its description.
Can I use Deploy Frontend 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 butterbase-ai/butterbase-skills --skill deploy-frontend -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/deploy-frontend, .gemini/skills/deploy-frontend, .github/skills/deploy-frontend and .opencode/skills/deploy-frontend in your project.
What does Deploy Frontend need to run?
Going by SKILL.md and its folder, Deploy Frontend needs the command-line tools its instructions call (node, npm, curl and npx). Our summary lists: Node.js.
Does Deploy Frontend access the network?
SKILL.md names 2 domains. In commands or code: api.butterbase.ai; the agent is likely to contact it when it follows the instructions. As links in the text: npmjs.com. This is read from the text; nothing was executed.
Is Deploy Frontend 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 Deploy Frontend use?
Deploy Frontend 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 Deploy Frontend use?
About 2.8k tokens (SKILL.md is roughly 11k 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 Deploy Frontend?
Skills that share tags, products or a category with Deploy Frontend: Convex Self Hosting (waynesutton/markdown-site, 628 stars), Pinme (glitternetwork/pinme, 3.7k stars), Vercel Geist Design System (syhily/kobato, 114 stars) and React Best Practices (ryokun6/ryos, 1.3k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Deploy Frontend?
butterbase-ai (a GitHub organization) maintains it in butterbase-ai/butterbase-skills, which has 534 GitHub stars. The repository holds 39 skills in this directory. The repository was last updated on October 5, 2026.
