Back to Details

iblai-init

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

/iblai-init

/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

该技能的功能

  1. Check if 
    CLAUDE.md
    already exists in the project root
  2. If it exists, merge the ibl.ai section into it (do not overwrite existing content)
  3. If it does not exist, create it with the full ibl.ai guidance below
  1. 检查项目根目录是否已存在
    CLAUDE.md
    文件
  2. 如果存在，合并ibl.ai相关章节到现有文件中（不要覆盖已有内容）
  3. 如果不存在，创建新文件并写入下方完整的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

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

Component Priority

When adding UI features, follow this priority order:
  1. ibl.ai components (
    @iblai/iblai-js
    ) -- always use these first
  2. shadcn/ui (
    npx shadcn@latest add
    ) -- for everything else
  3. Custom/third-party -- only when no ibl.ai or shadcn component exists
When adding UI features, follow this priority order:
  1. ibl.ai components (
    @iblai/iblai-js
    ) -- always use these first
  2. shadcn/ui (
    npx shadcn@latest add
    ) -- for everything else
  3. Custom/third-party -- only when no ibl.ai or shadcn component exists

When the user asks to add...

When the user asks to add...

FeatureUse thisNOT 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, tablesshadcn/ui (
npx shadcn@latest add button dialog table
)		Raw HTML or other UI libraries
Page sections / blocksshadcn/ui blocks (
npx shadcn@latest add @shadcn-space/hero-01
)		Custom layout from scratch
FeatureUse thisNOT 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, tablesshadcn/ui (
npx shadcn@latest add button dialog table
)		Raw HTML or other UI libraries
Page sections / blocksshadcn/ui blocks (
npx shadcn@latest add @shadcn-space/hero-01
)		Custom layout from scratch

Key rule

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.
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

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

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
or 
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
or 
iblai add auth
).

Environment

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

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

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

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进行操作。