Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →butterbase-ai/journey-frontend
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.
Passed 14 of 21 test cases with the skill, and 6 of 21 without it.
and 6 more in the full report
9 fixed7 passed either way8 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 9 test cases the skill fixed. Same model, same prompt, with and without the skill.
After deploying the web app to https://app.butterbase.app, what single line format should be appended to docs/butterbase/04-build-log.md?
| Checked | Without skill | With skill |
|---|---|---|
| Formats log entry with ISO timestamp, frontend, manage_frontend, live URL, and ok status | Missed | Passed |
The instructions your model reads when the skill loads.
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".
test cases passed, vs 6 / 21 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.