bknd-client-setup
Use when setting up Bknd SDK in a frontend application. Covers Api class initialization, token storage, auth state handling, React integration with BkndBrowserApp and useApp hook, framework-specific setup (Vite, Next.js, standalone), and TypeScript type registration.
npx skills add majiayu000/claude-skill-registry --skill bknd-client-setup-cameronapak-freedom-stack-v3-2 --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Client Setup Set up the Bknd TypeScript SDK in your frontend application. ## Prerequisites - Bknd backend running (local or deployed) - Frontend project initialized (React, Vue, vanilla JS, etc.) - `bknd` package installed: `npm install bknd` ## When to Use UI Mode Not applicable - client setup is code-only. ## When to Use Code Mode - Always - SDK setup requires code configuration - Choose approach based on architecture: - **Standalone API client** - Connecting to separate Bknd backend - **Embedded (BkndBrowserApp)** - Bknd runs in browser (Vite/React) - **Framework adapter** - Next.js, Astro, etc. ## Approach 1: Standalone API Client Use when connecting to a separate Bknd backend server. ### Step 1: Basic Setup ```typescript import { Api } from "bknd"; const api = new Api({ host: "https://api.example.com", // Your Bknd backend URL }); // Make requests const { ok, data } = await api.data.readMany("posts"); ``` ### Step 2: Add Token Persistence Store auth tokens across page refreshes: ```typescript import { Api } from "bknd"; const api = new Api({ host: "https://api.example.com", storage: localStorage, // Persists token as "auth" key }); ``` Custom storage key: ```typescript const
- Prerequisites
- When to Use UI Mode
- When to Use Code Mode
- Approach 1: Standalone API Client
- Step 1: Basic Setup
- Step 2: Add Token Persistence
- Step 3: Handle Auth State Changes
- Step 4: Cookie-Based Auth (SSR)
- Step 5: Full Configuration
- Approach 2: React with BkndBrowserApp (Embedded)
- Step 1: Define Schema
- Step 2: Configure BkndBrowserApp
- Step 3: Use the useApp Hook
- Approach 3: React Standalone (External Backend)
What does the bknd-client-setup skill do?
Use when setting up Bknd SDK in a frontend application. Covers Api class initialization, token storage, auth state handling, React integration with BkndBrowserApp and useApp hook, framework-specific setup (Vite, Next.js, standalone), and TypeScript type registration.
How do I install it?
Run `npx skills add majiayu000/claude-skill-registry --skill bknd-client-setup-cameronapak-freedom-stack-v3-2 --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From majiayu000/claude-skill-registry, a repository with 534 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.