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.

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

Step 1: Check for Existing 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.

Step 2: Write the CLAUDE.md Content

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

Content to write

# CLAUDE.md

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:

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

| 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

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

## Environment

Platform configuration lives in `iblai.env` (`DOMAIN`, `PLATFORM`, `TOKEN`, and optionally `VERCEL_TOKEN` for mobile dev builds). 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.

`VERCEL_TOKEN` in `iblai.env` enables `iblai deploy vercel` — builds, deploys to Vercel, disables auth protection, and updates `devUrl` in `tauri.conf.json` automatically. If missing when the user wants to deploy, ask once for their token ([https://vercel.com/account/tokens](https://vercel.com/account/tokens)).

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

## 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`)

## Commands

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

---

## Step 3: Add Frontend Design Skill

After writing the CLAUDE.md, use the AskUserQuestion tool to ask:

**Question:** "Add the Anthropic frontend design skill? It helps produce higher-quality UI with consistent design patterns, responsive layouts, and accessibility."

**Options:**

- Yes
- No

If the user selects Yes, run the following command (do not print it):

npx skills add https://github.com/anthropics/skills --skill frontend-design

## Step 4: Confirm

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.