Journey Frontend
Use as the frontend build stage of the Butterbase journey.
Install
npx skills add butterbase-ai/butterbase-skills --skill journey-frontend -g -a claude-code -y- Repository
- butterbase-ai/butterbase-skills535
- Category
- Design
- Updated
- 4d ago
- License
- MIT
- Context cost
- Lightabout 797 tokens
- Runs scripts
- No, instructions only
What it does
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.
Journey: Frontend
Stage 3j of the guided journey. Build (or adopt) and deploy the frontend.
When to use
- Dispatched by
journeywhencurrent_stage: frontend. - Directly via
/butterbase-skills:journey-frontend. - Skipped (annotated
(n/a)) iffrontend_stack: nonein00-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, forapp_id,api_base,frontend_stack.
Procedure
- Refresh docs. Call
butterbase_docswithtopic: "frontend". For framework-specific deploy patterns, also WebFetchhttps://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/sdkinside 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 returnedobject_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".
