Use as the frontend build stage of the Butterbase journey. An agent skill from butterbase-ai/butterbase-skills.
$ npx skills add butterbase-ai/butterbase-skills --skill journey-frontend -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install butterbase-ai/butterbase-skills journey-frontend --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/butterbase-ai/butterbase-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/journey-frontend .claude/skills/journey-frontend && 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 "journey-frontend" agent skill from https://github.com/butterbase-ai/butterbase-skills/tree/main/skills/journey-frontend into .claude/skills/journey-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "journey-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.
$skill-installer install https://github.com/butterbase-ai/butterbase-skills/tree/main/skills/journey-frontendType 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 butterbase-ai/butterbase-skills --skill journey-frontend -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install butterbase-ai/butterbase-skills journey-frontend --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/butterbase-ai/butterbase-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/journey-frontend .agents/skills/journey-frontend && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "journey-frontend" agent skill from https://github.com/butterbase-ai/butterbase-skills/tree/main/skills/journey-frontend into .agents/skills/journey-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "journey-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.
$ npx skills add butterbase-ai/butterbase-skills --skill journey-frontend -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install butterbase-ai/butterbase-skills journey-frontend --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/butterbase-ai/butterbase-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/journey-frontend .cursor/skills/journey-frontend && 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 "journey-frontend" agent skill from https://github.com/butterbase-ai/butterbase-skills/tree/main/skills/journey-frontend into .cursor/skills/journey-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "journey-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.
$ gemini skills install https://github.com/butterbase-ai/butterbase-skills.git --path skills/journey-frontend--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 butterbase-ai/butterbase-skills --skill journey-frontend -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install butterbase-ai/butterbase-skills journey-frontend --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/butterbase-ai/butterbase-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/journey-frontend .gemini/skills/journey-frontend && 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 "journey-frontend" agent skill from https://github.com/butterbase-ai/butterbase-skills/tree/main/skills/journey-frontend into .gemini/skills/journey-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "journey-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.
$ gh skill install butterbase-ai/butterbase-skills journey-frontendInstalls 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 butterbase-ai/butterbase-skills --skill journey-frontend -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/butterbase-ai/butterbase-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/journey-frontend .github/skills/journey-frontend && 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 "journey-frontend" agent skill from https://github.com/butterbase-ai/butterbase-skills/tree/main/skills/journey-frontend into .github/skills/journey-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "journey-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.
$ npx skills add butterbase-ai/butterbase-skills --skill journey-frontend -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install butterbase-ai/butterbase-skills journey-frontend --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/butterbase-ai/butterbase-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/journey-frontend .opencode/skills/journey-frontend && 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 "journey-frontend" agent skill from https://github.com/butterbase-ai/butterbase-skills/tree/main/skills/journey-frontend into .opencode/skills/journey-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "journey-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.
journey-frontendUse as the frontend build stage of the Butterbase journey. An agent skill from butterbase-ai/butterbase-skills.
Journey Frontend is an agent skill from butterbase-ai/butterbase-skills. Use as the frontend build stage of the Butterbase journey. Implements the Frontend section of 02-plan.md by delegating to deploy-frontend. Scaffolds (if needed) and deploys via createfrontenddeployment + managefrontend (startdeployment). Sets VITEAPIURL and VITEAPPID env. Skipped if the plan is API-only.
Its SKILL.md is about 890 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 Project scaffolding and Deployment. The repository describes itself as: Plugin for Butterbase.ai. The licence is MIT.
7 steps, taken from the first numbered list 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.
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:
npmFrom the folder's file list and the shell code blocks in SKILL.md.
Hosts in commands or code, which the agent is likely to contact:
docs.butterbase.aiFrom 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.
Journey Frontend loads about 887 tokens when it runs. Until then it costs about 83 tokens; SKILL.md has 357 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 butterbase-ai/butterbase-skills at commit aa8ae69, republished under its MIT licence (© butterbase-ai). 357 words, ~887 tokens.
.claude/skills/journey-frontend/SKILL.md (or your agent's skills folder).Stage 3j of the guided journey. Build (or adopt) and deploy the frontend.
journey when current_stage: frontend./butterbase-skills:journey-frontend.(n/a)) if frontend_stack: none in 00-state.md.If docs/butterbase/03-preflight.md is missing, older than 24 hours, or 00-state.md has app_id: null, invoke butterbase-skills:journey-preflight first. Wait for it to return successfully before proceeding.
docs/butterbase/02-plan.md — the Frontend section.docs/butterbase/00-state.md — for app_id, api_base, frontend_stack.butterbase_docs with topic: "frontend". For framework-specific deploy patterns, also WebFetch https://docs.butterbase.ai/frontend. Skip if cache is fresh.@butterbase/sdkAny frontend that talks to the deployed Butterbase app should use @butterbase/sdk:
npm install @butterbase/sdk inside the frontend project.import { createClient } from '@butterbase/sdk'; const bb = createClient({ apiUrl: import.meta.env.VITE_API_URL, appId: import.meta.env.VITE_APP_ID });bb.auth.signInWithOAuth({ provider: 'google' }), bb.auth.signOut(), bb.auth.getSession().bb.db.from('posts').select('*').eq('user_id', userId).bb.storage.upload(file), persist the returned object_id, resolve download URLs via the SDK at render time.bb.realtime.from('posts').on('insert', cb).subscribe().Do NOT hand-roll fetch() against the REST API in a Butterbase frontend — the SDK handles auth headers, presigned URL refresh, realtime reconnection, and type-narrowing. The MCP tools are not for runtime code.
For framework-specific patterns (Next.js Server Components, SvelteKit load functions, etc.), call butterbase_docs with topic: "sdk".
frontend_stack from 00-state.md. Print: "About to deploy a <stack> frontend for app_id <id>. Proceed?". Wait for yes.butterbase-skills:deploy-frontend via the Skill tool with the frontend spec, app_id, and api_base. The wrapped skill scaffolds (if no package.json exists in ./web or chosen path), sets VITE_API_URL and VITE_APP_ID, builds, calls create_frontend_deployment, then manage_frontend action: start_deployment.docs/butterbase/04-build-log.md:
<ISO timestamp> frontend manage_frontend <live-url> okdeployed_url: field in 00-state.md front-matter.- [x] frontend in 00-state.md, set current_stage: deploy.journey orchestrator (or ask "Continue to deploy verification? (yes/no)").deployed_url: in 00-state.md.04-build-log.md.VITE_API_URL and VITE_APP_ID — frontend will load blank.deploy-frontend handle the bundling; do not hand-roll.© butterbase-ai, MIT. 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 skills/journey-frontend of butterbase-ai/butterbase-skills.
Open the folder on GitHubat commit aa8ae69
Journey 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Journey Frontend this skillbutterbase-ai/butterbase-skills | 534 | — | ~887 | Automated safety check: Pass | MIT | |
| Google Agents CLI Adk Codepifferologo/cloud-agents-cli | 129 | 1 repos | ~768 | Automated safety check: Pass | Apache-2.0 | |
| Senior FrontendOhh-889/skyroc | 795 | 2 repos | ~1.1k | Automated safety check: Notes | MIT | |
| Pinmeglitternetwork/pinme | 3.8k | — | ~3.8k | Automated safety check: Notes | MIT | |
| Rtdfany-tdf/any-tdf | 778 | — | ~1.1k | Automated safety check: Pass | MIT | |
| Stdfany-tdf/any-tdf | 778 | — | ~1.1k | Automated safety check: Pass | MIT |
pifferologo/cloud-agents-cli
This skill should be used when the user wants to "write agent code", "build an agent with ADK", "add a tool", "create a callback", "define an agent", "use state management", or needs ADK (Agent…
Ohh-889/skyroc
Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS.
glitternetwork/pinme
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…
any-tdf/any-tdf
Build, review, and troubleshoot RTDF React applications using exact component APIs, themes, icons, localization, and scaffolding.
any-tdf/any-tdf
Build, review, and troubleshoot STDF Svelte 5 applications using exact component APIs, themes, icons, localization, and scaffolding.
hiyeshu/trip-map-builder
End-to-end trip planning: gather user constraints, build a reference itinerary, research locations and dining signals via 大众点评 + 小红书, then generate an interactive mobile-first map page (Leaflet +…
butterbase-ai/butterbase-skills
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
butterbase-ai/butterbase-skills
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
butterbase-ai/butterbase-skills
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
butterbase-ai/butterbase-skills
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
butterbase-ai/butterbase-skills
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
butterbase-ai/butterbase-skills
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
Categories
Use as the frontend build stage of the Butterbase journey. An agent skill from butterbase-ai/butterbase-skills. Journey Frontend is an agent skill from butterbase-ai/butterbase-skills. Use as the frontend build stage of the Butterbase journey.
Journey Frontend fits situations like: tasks that involve Project scaffolding; tasks that involve Deployment.
Run `npx skills add butterbase-ai/butterbase-skills --skill journey-frontend -a claude-code`. Or copy the skill folder (skills/journey-frontend in butterbase-ai/butterbase-skills) into .claude/skills/journey-frontend in your project. Claude Code loads it when a task matches its description.
Run `npx skills add butterbase-ai/butterbase-skills --skill journey-frontend -a codex`. Or copy the skill folder (skills/journey-frontend in butterbase-ai/butterbase-skills) into .agents/skills/journey-frontend 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 butterbase-ai/butterbase-skills --skill journey-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/journey-frontend, .gemini/skills/journey-frontend, .github/skills/journey-frontend and .opencode/skills/journey-frontend in your project.
Going by SKILL.md and its folder, Journey Frontend needs the command-line tools its instructions call (npm). Our summary lists: Node.js.
SKILL.md names 1 domain. In commands or code: docs.butterbase.ai; the agent is likely to contact it when it follows the instructions. 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.
Journey Frontend is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 887 tokens (SKILL.md is roughly 3.5k 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 Journey Frontend: Google Agents CLI Adk Code (pifferologo/cloud-agents-cli, 129 stars), Senior Frontend (Ohh-889/skyroc, 795 stars), Pinme (glitternetwork/pinme, 3.8k stars) and Rtdf (any-tdf/any-tdf, 778 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
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.
Source: butterbase-ai/butterbase-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.
