journey-frontend

Name: journey-frontend
Author: butterbase-ai

533stars40forks

How to install journey-frontend?

butterbase-ai/butterbase-skills/journey-frontend

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

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# Journey: Frontend
2
3	Stage 3j of the guided journey. Build (or adopt) and deploy the frontend.
4
5	## When to use
6
7	- Dispatched by `journey` when `current_stage: frontend`.
8	- Directly via `/butterbase-skills:journey-frontend`.
9	- Skipped (annotated `(n/a)`) if `frontend_stack: none` in `00-state.md`.
10
11	## Preflight
12
13	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.
14
15	## Inputs
16
17	- `docs/butterbase/02-plan.md` — the Frontend section.
18	- `docs/butterbase/00-state.md` — for `app_id`, `api_base`, `frontend_stack`.
19
20	## Procedure
21
22	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.
23
24	### Use `@butterbase/sdk`
25
26	Any frontend that talks to the deployed Butterbase app should use `@butterbase/sdk`:
27
28	- Install: `npm install @butterbase/sdk` inside the frontend project.
29	- Initialize: `import { createClient } from '@butterbase/sdk'; const bb = createClient({ apiUrl: import.meta.env.VITE_API_URL, appId: import.meta.env.VITE_APP_ID });`
30	- Auth: `bb.auth.signInWithOAuth({ provider: 'google' })`, `bb.auth.signOut()`, `bb.auth.getSession()`.
31	- Data: `bb.db.from('posts').select('*').eq('user_id', userId)`.
32	- Storage: `bb.storage.upload(file)`, persist the returned `object_id`, resolve download URLs via the SDK at render time.
33	- Realtime: `bb.realtime.from('posts').on('insert', cb).subscribe()`.
34
35	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.
36
37	For framework-specific patterns (Next.js Server Components, SvelteKit load functions, etc.), call `butterbase_docs` with `topic: "sdk"`.
38
39	### Build and deploy
40
41	1. Read the Frontend section and `frontend_stack` from `00-state.md`. Print: `"About to deploy a <stack> frontend for app_id <id>. Proceed?"`. Wait for `yes`.
42	2. Invoke `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`.
43	3. Capture the live URL from the response. Show it to the user.
44	4. Append one line to `docs/butterbase/04-build-log.md`:
45	`<ISO timestamp> frontend manage_frontend <live-url> ok`
46	5. Also write the live URL into a new `deployed_url:` field in `00-state.md` front-matter.
47	6. Tick `- [x] frontend` in `00-state.md`, set `current_stage: deploy`.
48	7. Return to `journey` orchestrator (or ask `"Continue to deploy verification? (yes/no)"`).
49
50	## Outputs
51
52	- Live deployed frontend URL.
53	- `deployed_url:` in `00-state.md`.
54	- One line in `04-build-log.md`.
55
56	## Anti-patterns
57
58	- ❌ Forgetting to set `VITE_API_URL` and `VITE_APP_ID` — frontend will load blank.
59	- ❌ Wrong MIME types — let `deploy-frontend` handle the bundling; do not hand-roll.

People who liked this also viewed

6 picks

Type

journey-frontend

533stars40forks

View on GitHub

How to install journey-frontend?

butterbase-ai/butterbase-skills/journey-frontend

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Journey: Frontend
2
3	Stage 3j of the guided journey. Build (or adopt) and deploy the frontend.
4
5	## When to use
6
7	- Dispatched by `journey` when `current_stage: frontend`.
8	- Directly via `/butterbase-skills:journey-frontend`.
9	- Skipped (annotated `(n/a)`) if `frontend_stack: none` in `00-state.md`.
10
11	## Preflight
12
13	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.
14
15	## Inputs
16
17	- `docs/butterbase/02-plan.md` — the Frontend section.
18	- `docs/butterbase/00-state.md` — for `app_id`, `api_base`, `frontend_stack`.
19
20	## Procedure
21
22	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.
23
24	### Use `@butterbase/sdk`
25
26	Any frontend that talks to the deployed Butterbase app should use `@butterbase/sdk`:
27
28	- Install: `npm install @butterbase/sdk` inside the frontend project.
29	- Initialize: `import { createClient } from '@butterbase/sdk'; const bb = createClient({ apiUrl: import.meta.env.VITE_API_URL, appId: import.meta.env.VITE_APP_ID });`
30	- Auth: `bb.auth.signInWithOAuth({ provider: 'google' })`, `bb.auth.signOut()`, `bb.auth.getSession()`.
31	- Data: `bb.db.from('posts').select('*').eq('user_id', userId)`.
32	- Storage: `bb.storage.upload(file)`, persist the returned `object_id`, resolve download URLs via the SDK at render time.
33	- Realtime: `bb.realtime.from('posts').on('insert', cb).subscribe()`.
34
35	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.
36
37	For framework-specific patterns (Next.js Server Components, SvelteKit load functions, etc.), call `butterbase_docs` with `topic: "sdk"`.
38
39	### Build and deploy
40
41	1. Read the Frontend section and `frontend_stack` from `00-state.md`. Print: `"About to deploy a <stack> frontend for app_id <id>. Proceed?"`. Wait for `yes`.
42	2. Invoke `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`.
43	3. Capture the live URL from the response. Show it to the user.
44	4. Append one line to `docs/butterbase/04-build-log.md`:
45	`<ISO timestamp> frontend manage_frontend <live-url> ok`
46	5. Also write the live URL into a new `deployed_url:` field in `00-state.md` front-matter.
47	6. Tick `- [x] frontend` in `00-state.md`, set `current_stage: deploy`.
48	7. Return to `journey` orchestrator (or ask `"Continue to deploy verification? (yes/no)"`).
49
50	## Outputs
51
52	- Live deployed frontend URL.
53	- `deployed_url:` in `00-state.md`.
54	- One line in `04-build-log.md`.
55
56	## Anti-patterns
57
58	- ❌ Forgetting to set `VITE_API_URL` and `VITE_APP_ID` — frontend will load blank.
59	- ❌ Wrong MIME types — let `deploy-frontend` handle the bundling; do not hand-roll.

People who liked this also viewed

6 picks

Type