# Journey Frontend

Use as the frontend build stage of the Butterbase journey.

- Repository: https://github.com/butterbase-ai/butterbase-skills (535 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-31
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add butterbase-ai/butterbase-skills --skill journey-frontend -g -a claude-code -y`
Codex: `npx skills add butterbase-ai/butterbase-skills --skill journey-frontend -g -a codex -y`
Cursor: `npx skills add butterbase-ai/butterbase-skills --skill journey-frontend -g -a cursor -y`
Gemini CLI: `npx skills add butterbase-ai/butterbase-skills --skill journey-frontend -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add butterbase-ai/butterbase-skills`

## Description

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 create_frontend_deployment + manage_frontend (start_deployment). Sets VITE_API_URL and VITE_APP_ID env. Skipped if the plan is API-only.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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

0. **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.

### Use `@butterbase/sdk`

Any frontend that talks to the deployed Butterbase app should use `@butterbase/sdk`:

- Install: `npm install @butterbase/sdk` inside the frontend project.
- Initialize: `import { createClient } from '@butterbase/sdk'; const bb = createClient({ apiUrl: import.meta.env.VITE_API_URL, appId: import.meta.env.VITE_APP_ID });`
- Auth: `bb.auth.signInWithOAuth({ provider: 'google' })`, `bb.auth.signOut()`, `bb.auth.getSession()`.
- Data: `bb.db.from('posts').select('*').eq('user_id', userId)`.
- Storage: `bb.storage.upload(file)`, persist the returned `object_id`, resolve download URLs via the SDK at render time.
- Realtime: `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"`.

### Build and deploy

The rest: https://github.com/butterbase-ai/butterbase-skills/blob/HEAD/skills/journey-frontend/SKILL.md