メニュー
Fullstack development with bkend.ai BaaS — authentication, database, API integration. Triggers: fullstack, BaaS, login, signup, database, web app
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/popup-studio-ai/bkit-claude-code --skill dynamicコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
bkend.ai authentication — email/social login, JWT tokens, RBAC, session management. Triggers: bkend auth, bkend login, bkend signup, bkend JWT, bkend RBAC
bkend.ai project tutorials (todo to SaaS) and common error troubleshooting. Triggers: bkend tutorial, bkend cookbook, bkend troubleshooting
bkend.ai database — CRUD, column types, filtering, sorting, relations, indexing. Triggers: bkend table, bkend CRUD, bkend column, bkend relation, bkend data
SKILL.md を表示中
| name | dynamic |
| classification | capability |
| classification-reason | Pattern guidance may overlap with model's built-in knowledge as it improves |
| deprecation-risk | medium |
| effort | medium |
| description | Fullstack development with bkend.ai BaaS — authentication, database, API integration. Triggers: fullstack, BaaS, login, signup, database, web app |
| argument-hint | [init|guide|help] |
| agent | bkit:bkend-expert |
| allowed-tools | ["Read","Write","Edit","Glob","Grep","Bash","mcp__bkend__*"] |
| user-invocable | true |
| imports | ["${PLUGIN_ROOT}/templates/design.template.md"] |
| next-skill | phase-1-schema |
| pdca-phase | plan |
| task-template | [Init-Dynamic] {feature} |
| Action | Description | Example |
|---|---|---|
init | Project initialization (/init-dynamic feature) | /dynamic init my-saas |
guide | Display development guide | /dynamic guide |
help | BaaS integration help | /dynamic help |
Frontend:
- React / Next.js 14+
- TypeScript
- Tailwind CSS
- TanStack Query (data fetching)
- Zustand (state management)
Backend (BaaS):
- bkend.ai
- Auto REST API
- MongoDB database
- Built-in authentication (JWT)
- Real-time features (WebSocket)
Deployment:
- Vercel (frontend)
- bkend.ai (backend)
Recommended: Tier 1-2 languages
Dynamic level supports full-stack development with strong AI compatibility.
| Tier | Allowed | Reason |
|---|---|---|
| Tier 1 | ✅ Primary | Full AI support |
| Tier 2 | ✅ Yes | Mobile (Flutter/RN), Modern web (Vue, Astro) |
| Tier 3 | ⚠️ Limited | Platform-specific needs only |
| Tier 4 | ❌ No |
| Migration recommended |
Mobile Development:
project/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── (auth)/ # Auth-related routes
│ │ │ ├── login/
│ │ │ └── register/
│ │ ├── (main)/ # Main routes
│ │ │ ├── dashboard/
│ │ │ └── settings/
│ │ ├── layout.tsx
│ │ └── page.tsx
│ │
│ ├── components/ # UI components
│ │ ├── ui/ # Basic UI (Button, Input...)
│ │ └── features/ # Feature-specific components
│ │
│ ├── hooks/ # Custom hooks
│ │ ├── useAuth.ts
│ │ └── useQuery.ts
│ │
│ ├── lib/ # Utilities
│ │ ├── bkend.ts # bkend.ai client
│ │ └── utils.ts
│ │
│ ├── stores/ # State management (Zustand)
│ │ └── auth-store.ts
│ │
│ └── types/ # TypeScript types
│ └── index.ts
│
├── docs/ # PDCA documents
│ ├── 01-plan/
│ ├── 02-design/
│ │ ├── data-model.md # Data model
│ │ └── api-spec.md # API specification
│ ├── 03-analysis/
│ └── 04-report/
│
├── .mcp.json # bkend.ai MCP config (type: http)
├── .env.local # Environment variables
├── package.json
└── README.md
// lib/bkend.ts - REST Service API Client
const API_BASE = process.env.NEXT_PUBLIC_BKEND_API_URL || 'https://api.bkend.ai/v1';
const PROJECT_ID = process.env.NEXT_PUBLIC_BKEND_PROJECT_ID!;
const ENVIRONMENT = process.env.NEXT_PUBLIC_BKEND_ENV || 'dev';
async function bkendFetch(path: string, options: RequestInit = {}) {
const token = localStorage.getItem('bkend_access_token');
const res = await fetch(`${API_BASE}${path}`, {
...options,
headers: {
'Content-Type': 'application/json',
'x-project-id': PROJECT_ID,
'x-environment': ENVIRONMENT,
...(token && { Authorization: `Bearer ${token}` }),
...options.headers,
},
});
if (!res.ok) throw new Error(await res.text());
return res.json();
}
export const bkend = {
auth: {
signup: (body: {email: string; password: string}) => bkendFetch('/auth/email/signup', {method: 'POST', body: JSON.stringify(body)}),
signin: (body: {email: string; password: string}) => bkendFetch('/auth/email/signin', {method: 'POST', body: JSON.stringify(body)}),
me: () => bkendFetch('/auth/me'),
refresh: (refreshToken: string) => bkendFetch('/auth/refresh', {method: 'POST', body: JSON.stringify({refreshToken})}),
signout: () => bkendFetch('/auth/signout', {method: 'POST'}),
},
data: {
list: (table: string, params?: Record<string,string>) => bkendFetch(`/data/${table}?${new URLSearchParams(params)}`),
get: (table: string, id: string) => bkendFetch(`/data/${table}/${id}`),
create: (table: string, body: any) => bkendFetch(`/data/${table}`, {method: 'POST', body: JSON.stringify(body)}),
update: (table: string, id: string, body: any) => bkendFetch(`/data/${table}/${id}`, {method: 'PATCH', body: JSON.stringify(body)}),
delete: (table: string, id: string) => bkendFetch(`/data/${table}/${id}`, {method: 'DELETE'}),
},
};
// hooks/useAuth.ts
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import { bkend } from '@/lib/bkend';
interface AuthState {
user: User | null;
isLoading: boolean;
login: (email: string, password: string) => Promise<void>;
logout: () => void;
}
export const useAuth = create<AuthState>()(
persist(
(set) => ({
user: null,
isLoading: false,
login: async (email, password) => {
set({ isLoading: true });
const { user, token } = await bkend.auth.login({ email, password });
set({ user, isLoading: false });
},
logout: () => {
bkend.auth.logout();
set({ user: null });
},
}),
{ name: 'auth-storage' }
)
);
// List query
const { data, isLoading, error } = useQuery({
queryKey: ['items', filters],
queryFn: () => bkend.collection('items').find(filters),
});
// Single item query
const { data: item } = useQuery({
queryKey: ['items', id],
queryFn: () => bkend.collection('items').findById(id),
enabled: !!id,
});
// Create/Update (Mutation)
const mutation = useMutation({
mutationFn: (newItem) => bkend.collection('items').create(newItem),
onSuccess: () => {
queryClient.invalidateQueries(['items']);
},
});
// components/ProtectedRoute.tsx
'use client';
import { useAuth } from '@/hooks/useAuth';
import { redirect } from 'next/navigation';
export function ProtectedRoute({ children }: { children: React.ReactNode }) {
const { user, isLoading } = useAuth();
if (isLoading) return <LoadingSpinner />;
if (!user) redirect('/login');
return <>{children}</>;
}
// Base fields (auto-generated)
interface BaseDocument {
_id: string;
createdAt: Date;
updatedAt: Date;
}
// User reference
interface Post extends BaseDocument {
userId: string; // Author ID (reference)
title: string;
content: string;
tags: string[]; // Array field
metadata: { // Embedded object
viewCount: number;
likeCount: number;
};
}
claude mcp add bkend --transport http https://api.bkend.ai/mcp
{
"mcpServers": {
"bkend": {
"type": "http",
"url": "https://api.bkend.ai/mcp"
}
}
}
## Environment Variables (.env.local)
NEXT_PUBLIC_BKEND_API_URL=https://api.bkend.ai/v1 NEXT_PUBLIC_BKEND_PROJECT_ID=your-project-id NEXT_PUBLIC_BKEND_ENV=dev
Note: Project ID is found in bkend console (console.bkend.ai).
Via MCP: "Show my project list" -> backend_project_list
## Limitations
❌ Complex backend logic (serverless function limits) ❌ Large-scale traffic (within BaaS limits) ❌ Custom infrastructure control ❌ Microservices architecture
## When to Upgrade
Move to **Enterprise Level** if you need:
→ "Traffic will increase significantly" → "I want to split into microservices" → "I need my own server/infrastructure" → "I need complex backend logic"
## bkit Features for Dynamic Level (v1.5.1)
### Output Style: bkit-pdca-guide (Recommended)
For optimal PDCA workflow experience, activate the PDCA guide style:
/output-style bkit-pdca-guide
This provides:
- PDCA status badges showing current phase progress
- Gap analysis suggestions after code changes
- Automatic next-phase guidance with checklists
### Agent Teams (2 Teammates)
Dynamic projects support Agent Teams for parallel PDCA execution:
| Role | Agents | PDCA Phases |
|------|--------|-------------|
| developer | bkend-expert | Do, Act |
| qa | qa-monitor, gap-detector | Check |
**To enable:**
1. Set environment: `CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS=1`
2. Start team mode: `/pdca team {feature}`
3. Monitor progress: `/pdca team status`
### Agent Memory (Auto-Active)
All bkit agents automatically remember project context across sessions.
No setup needed — agents use `project` scope memory for this codebase.
---
## Common Mistakes
| Mistake | Solution |
|---------|----------|
| CORS error | Register domain in bkend.ai console |
| 401 Unauthorized | Token expired, re-login or refresh token |
| Data not showing | Check collection name, query conditions |
| Type error | Sync TypeScript type definitions with schema |