Journey Frontend

Orchestrates the frontend deployment stage of a Butterbase app build. It reads your plan from 02-plan.md, delegates to deploy-frontend to scaffold or build your React/Vue/Svelte app, injects VITE_API_URL and VITE_APP_ID environment variables, and kicks off the deployment. The skill enforces use of @butterbase/sdk rather than raw fetch calls, which is smart since the SDK handles auth headers and realtime reconnection. If your plan says API-only, this stage gets skipped entirely. Logs the live URL to your build log and updates state so the journey orchestrator knows to move on to verification. One gotcha: it won't run if your preflight check is stale or missing an app_id.

GitHub stars: 532
last updated: Jun 11, 2026

View on GitHub

Install

$ npx -y skills add butterbase-ai/butterbase-skills --skill journey-frontend --agent claude-code

Installs into .claude/skills of the current project.

Files

Journey: Frontend

Stage 3j of the guided journey. Build (or adopt) and deploy the frontend.

When to use

Dispatched by journey when current_stage: frontend.
Directly via /butterbase-skills:journey-frontend.
Skipped (annotated (n/a)) if frontend_stack: none in 00-state.md.

Preflight

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.

Inputs

docs/butterbase/02-plan.md — the Frontend section.
docs/butterbase/00-state.md — for app_id, api_base, frontend_stack.

Procedure

Refresh docs. Call butterbase_docs with topic: "frontend". For framework-specific deploy patterns, also WebFetch https://docs.butterbase.ai/frontend. Skip if cache is fresh.