iblai-init

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

/iblai-init

Update or create a

CLAUDE.md

in the user's current working directory with ibl.ai platform guidance. This file tells Claude Code how to work with the project -- which components to use, how to add features, and what patterns to follow.

在用户当前工作目录中更新或创建

CLAUDE.md

文件，内容为ibl.ai平台指南。该文件会告知Claude Code如何处理项目——使用哪些组件、如何添加功能，以及要遵循的开发模式。

What This Skill Does

该技能的功能

Check if
```
CLAUDE.md
```
already exists in the project root
If it exists, merge the ibl.ai section into it (do not overwrite existing content)
If it does not exist, create it with the full ibl.ai guidance below

检查项目根目录是否已存在
```
CLAUDE.md
```
文件
如果存在，合并ibl.ai相关章节到现有文件中（不要覆盖已有内容）
如果不存在，创建新文件并写入下方完整的ibl.ai指南内容

Step 1: Check for Existing CLAUDE.md

步骤1：检查是否存在已有CLAUDE.md

Read

CLAUDE.md

in the current working directory. If it exists, append the ibl.ai section below (under a

## ibl.ai Platform

heading) without duplicating content that's already there. If there's already an ibl.ai section, replace it with the updated version below.

读取当前工作目录下的

CLAUDE.md

文件。如果文件存在，在文件末尾追加下方的ibl.ai章节（放在

## ibl.ai Platform

标题下），不要重复已有内容。如果文件中已经存在ibl.ai章节，则用下方的更新版本替换原有章节。

Step 2: Write the CLAUDE.md Content

步骤2：编写CLAUDE.md内容

The CLAUDE.md should contain the following content. Adapt the heading level if merging into an existing file (e.g., use

##

if appending to a file that already has a top-level

heading).

CLAUDE.md应包含以下内容。如果是合并到现有文件中，请调整标题层级（例如，如果追加到已有一级

标题的文件中，则使用

##

作为本章标题）。

Content to write

要写入的内容

markdown

undefined

markdown

undefined

CLAUDE.md

This project is built on the ibl.ai platform using the

@iblai/iblai-js

SDK.

This project is built on the ibl.ai platform using the

@iblai/iblai-js

SDK.

Component Priority

When adding UI features, follow this priority order:

ibl.ai components (
```
@iblai/iblai-js
```
) -- always use these first
shadcn/ui (
```
npx shadcn@latest add
```
) -- for everything else
Custom/third-party -- only when no ibl.ai or shadcn component exists

When adding UI features, follow this priority order:

ibl.ai components (
```
@iblai/iblai-js
```
) -- always use these first
shadcn/ui (
```
npx shadcn@latest add
```
) -- for everything else
Custom/third-party -- only when no ibl.ai or shadcn component exists

When the user asks to add...

Feature	Use this	NOT this
Profile page / dropdown	`/iblai-profile` skill + `Profile` , `UserProfileDropdown` from SDK	Custom profile form
Account / org settings	`/iblai-account` skill + `Account` from SDK	Custom settings page
Analytics dashboard	`/iblai-analytics` skill + `AnalyticsOverview` , `AnalyticsLayout` from SDK	Chart library from scratch
Notifications	`/iblai-notification` skill + `NotificationDropdown` from SDK	Custom notification system
Chat / AI assistant	`/iblai-chat` skill + `<mentor-ai>` web component	Custom chat UI
Auth / login	`/iblai-auth` skill + `AuthProvider` , `SsoLogin` from SDK	Custom auth flow
Invite users	`/iblai-invite` skill + `InviteUserDialog` from SDK	Custom invite form
Workflow builder	`/iblai-workflow` skill + workflow components from SDK	Custom node editor
Onboarding flow	`/iblai-onboard` skill	Custom onboarding from scratch
Buttons, forms, modals, tables	shadcn/ui ( `npx shadcn@latest add button dialog table` )	Raw HTML or other UI libraries
Page sections / blocks	shadcn/ui blocks ( `npx shadcn@latest add @shadcn-space/hero-01` )	Custom layout from scratch

Feature	Use this	NOT this
Profile page / dropdown	`/iblai-profile` skill + `Profile` , `UserProfileDropdown` from SDK	Custom profile form
Account / org settings	`/iblai-account` skill + `Account` from SDK	Custom settings page
Analytics dashboard	`/iblai-analytics` skill + `AnalyticsOverview` , `AnalyticsLayout` from SDK	Chart library from scratch
Notifications	`/iblai-notification` skill + `NotificationDropdown` from SDK	Custom notification system
Chat / AI assistant	`/iblai-chat` skill + `<mentor-ai>` web component	Custom chat UI
Auth / login	`/iblai-auth` skill + `AuthProvider` , `SsoLogin` from SDK	Custom auth flow
Invite users	`/iblai-invite` skill + `InviteUserDialog` from SDK	Custom invite form
Workflow builder	`/iblai-workflow` skill + workflow components from SDK	Custom node editor
Onboarding flow	`/iblai-onboard` skill	Custom onboarding from scratch
Buttons, forms, modals, tables	shadcn/ui ( `npx shadcn@latest add button dialog table` )	Raw HTML or other UI libraries
Page sections / blocks	shadcn/ui blocks ( `npx shadcn@latest add @shadcn-space/hero-01` )	Custom layout from scratch

Key rule

Do NOT build custom components when an ibl.ai SDK component exists. Do NOT use raw HTML or third-party UI libraries when shadcn/ui has an equivalent. ibl.ai and shadcn share the same Tailwind theme -- they render in brand colors automatically.

SDK Imports

typescript

// Data layer
import { initializeDataLayer, mentorReducer } from "@iblai/iblai-js/data-layer";

// Auth & utilities
import { AuthProvider, TenantProvider, useChatV2 } from "@iblai/iblai-js/web-utils";

// Framework-agnostic components
import { Profile, AnalyticsLayout, NotificationDropdown } from "@iblai/iblai-js/web-containers";

// Next.js-specific components
import { SsoLogin, UserProfileDropdown, Account } from "@iblai/iblai-js/web-containers/next";

typescript

// Data layer
import { initializeDataLayer, mentorReducer } from "@iblai/iblai-js/data-layer";

// Auth & utilities
import { AuthProvider, TenantProvider, useChatV2 } from "@iblai/iblai-js/web-utils";

// Framework-agnostic components
import { Profile, AnalyticsLayout, NotificationDropdown } from "@iblai/iblai-js/web-containers";

// Next.js-specific components
import { SsoLogin, UserProfileDropdown, Account } from "@iblai/iblai-js/web-containers/next";

Adding Features

Use skills to add features. Each skill runs the CLI generator and guides you through the remaining manual steps:

/iblai-auth          # SSO authentication (run first)
/iblai-chat          # AI chat widget
/iblai-profile       # Profile dropdown + settings page
/iblai-account       # Account/org settings page
/iblai-analytics     # Analytics dashboard
/iblai-notification  # Notification bell
/iblai-invite        # User invitation dialogs
/iblai-workflow      # Workflow builder
/iblai-onboard       # Onboarding questionnaire flow
/iblai-build         # Desktop/mobile builds (Tauri v2)
/iblai-test          # Test before showing work
/iblai-component     # Browse all available components

All features require auth first (

/iblai-auth

iblai add auth

Use skills to add features. Each skill runs the CLI generator and guides you through the remaining manual steps:

/iblai-auth          # SSO authentication (run first)
/iblai-chat          # AI chat widget
/iblai-profile       # Profile dropdown + settings page
/iblai-account       # Account/org settings page
/iblai-analytics     # Analytics dashboard
/iblai-notification  # Notification bell
/iblai-invite        # User invitation dialogs
/iblai-workflow      # Workflow builder
/iblai-onboard       # Onboarding questionnaire flow
/iblai-build         # Desktop/mobile builds (Tauri v2)
/iblai-test          # Test before showing work
/iblai-component     # Browse all available components

All features require auth first (

/iblai-auth

iblai add auth

Environment

Platform configuration lives in

iblai.env

(3 vars:

DOMAIN

PLATFORM

TOKEN

). The CLI derives all

NEXT_PUBLIC_*

env vars into

.env.local

automatically. Do NOT edit

.env.local

directly for platform config -- update

iblai.env

and re-run a CLI command.

Platform configuration lives in

iblai.env

(3 vars:

DOMAIN

PLATFORM

TOKEN

). The CLI derives all

NEXT_PUBLIC_*

env vars into

.env.local

automatically. Do NOT edit

.env.local

directly for platform config -- update

iblai.env

and re-run a CLI command.

Brand

Primary:

#0058cc

, Gradient:

linear-gradient(135deg, #00b0ef, #0058cc)

Style: shadcn/ui new-york variant, system sans-serif, Lucide icons
SDK components ship with their own styles -- do NOT override them

Primary:

#0058cc

, Gradient:

linear-gradient(135deg, #00b0ef, #0058cc)

Style: shadcn/ui new-york variant, system sans-serif, Lucide icons
SDK components ship with their own styles -- do NOT override them

Layout Patterns

Page background:
```
var(--sidebar-bg, #fafbfc)
```

SDK wrappers: Wrap SDK components in

bg-white rounded-lg border border-[var(--border-color)] overflow-hidden

Responsive width:
```
w-full px-4
```
mobile,
```
md:w-[75vw] md:px-0
```
desktop
Mobile safe area:
```
globals.css
```
must have
```
padding-top: env(safe-area-inset-top)
```
(and bottom/left/right) on body, and
```
app/layout.tsx
```
metadata must include
```
viewport: "width=device-width, initial-scale=1, viewport-fit=cover"
```
-- prevents content from overlapping the iOS notch / Android status bar
Package manager: Use
```
pnpm
```
(fall back to
```
npm
```
)

Page background:
```
var(--sidebar-bg, #fafbfc)
```

SDK wrappers: Wrap SDK components in

bg-white rounded-lg border border-[var(--border-color)] overflow-hidden

Responsive width:
```
w-full px-4
```
mobile,
```
md:w-[75vw] md:px-0
```
desktop
Mobile safe area:
```
globals.css
```
must have
```
padding-top: env(safe-area-inset-top)
```
(and bottom/left/right) on body, and
```
app/layout.tsx
```
metadata must include
```
viewport: "width=device-width, initial-scale=1, viewport-fit=cover"
```
-- prevents content from overlapping the iOS notch / Android status bar
Package manager: Use
```
pnpm
```
(fall back to
```
npm
```
)

Commands

bash

pnpm dev             # Dev server
pnpm build           # Production build
iblai config show    # View configuration
iblai add <feature>  # Add a feature

---

bash

pnpm dev             # Dev server
pnpm build           # Production build
iblai config show    # View configuration
iblai add <feature>  # Add a feature

---

Step 3: Confirm

步骤3：确认

After writing the file, tell the user:

Updated
CLAUDE.md
with ibl.ai platform guidance. Claude Code will now prioritize ibl.ai SDK components over custom implementations and use the correct skills when adding features.

写入文件完成后，告知用户：

已使用ibl.ai平台指南更新
CLAUDE.md
。现在Claude Code在添加功能时会优先使用ibl.ai SDK组件而非自定义实现，并选择正确的skill进行操作。