初心者（スターター）スキル

アクション

アクション	説明	例
`init`	プロジェクト初期化（/init-starter 機能）	`/starter init my-portfolio`
`guide`	開発ガイドを表示	`/starter guide`
`help`	初心者向けヘルプ	`/starter help`

init（プロジェクト初期化）

プロジェクトディレクトリ構造を作成（HTML/CSS/JS または Next.js）
package.json を生成（Next.js 選択時）
CLAUDE.md を作成（レベル: Starter 指定）
docs/ フォルダ構造を作成（PDCA ドキュメント用）
パイプラインストアを初期化 — lib/pdca/status.js 内の writeBkitMemory() が .bkit/state/memory.json（以前の .bkit-memory.json から移行）に書き込みます。これにはプロジェクトレベルと9フェーズの pipelineStatus が格納され、パイプラインの Stop フック（フェーズ5、6、9）から読み取られます。PDCA フェーズが存在するのは .bkit/state/pdca-status.json であり、ここではありません。

guide（開発ガイド）

現在のプロジェクトの状態を分析
Starter レベルに適した次のステップを提案
フェーズ1〜3に焦点を当てたパイプラインガイド

help（初心者向けヘルプ）

HTML/CSS/JS の基本概念を説明
よくある質問に回答
サンプルコードを提供

対象読者

初めてプログラミングを学ぶ方
シンプルなウェブサイトを作りたい方
ポートフォリオサイトが必要な方

技術スタック

オプションA: 純粋な HTML/CSS/JS（完全初心者向け）

HTML5        → ウェブページの構造
CSS3         → スタイリング
JavaScript   → 動的な機能（任意）

オプションB: Next.js（フレームワーク利用）

Next.js 14+  → React ベースのフレームワーク
Tailwind CSS → ユーティリティ CSS
TypeScript   → 型安全性（任意）

言語階層ガイダンス（v1.3.0）

推奨: Tier 1 言語のみ（Python、TypeScript、JavaScript）

Starter レベルでは、AI ツールの最大限のサポートを受ける AI ネイティブ開発に焦点を当てます。

階層	許可	理由
Tier 1	✅ はい	完全な AI サポート、Vibe Coding 最適化
Tier 2	⚠️ 制限付き	Dynamic レベルを検討してください
Tier 3-4	❌ いいえ	Dynamic/Enterprise にアップグレードしてください

プロジェクト構造

オプションA: HTML/CSS/JS

project/
├── index.html          # メインページ
├── about.html          # About ページ
├── css/
│   └── style.css       # スタイル
├── js/
│   └── main.js         # JavaScript
├── images/             # 画像ファイル
├── docs/               # PDCA ドキュメント
│   ├── 01-plan/
│   └── 02-design/
└── README.md

オプションB: Next.js

project/
├── src/
│   ├── app/
│   │   ├── layout.tsx      # 共通レイアウト
│   │   ├── page.tsx        # メインページ
│   │   └── about/
│   │       └── page.tsx    # About ページ
│   └── components/         # 再利用可能なコンポーネント
├── public/                 # 静的ファイル
├── docs/                   # PDCA ドキュメント
├── package.json
├── tailwind.config.js
└── README.md

コアコンセプトの説明

HTML（ウェブページの構造）

<!-- 基本構造 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Website</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>Header</header>
    <main>Main content</main>
    <footer>Footer</footer>
</body>
</html>

CSS（ウェブページのスタイリング）

/* 基本スタイル */
body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
}

/* 中央揃え */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* レスポンシブ（モバイル対応） */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
}

Next.js App Router（ページの作成）

// app/page.tsx - メインページ
export default function Home() {
  return (
    <main className="container mx-auto p-4">
      <h1 className="text-3xl font-bold">
        Welcome!
      </h1>
    </main>
  );
}

// app/about/page.tsx - About ページ
// URL: /about
export default function About() {
  return (
    <div className="container mx-auto p-4">
      <h1>About</h1>
      <p>I am ...</p>
    </div>
  );
}

Tailwind CSS（素早いスタイリング）

// よく使うクラス
<div className="
  container    // 中央揃え
  mx-auto      // 左右のマージンを自動
  p-4          // パディング 16px
  text-center  // テキスト中央揃え
  text-xl      // 大きなテキスト
  font-bold    // 太字
  bg-blue-500  // 青色背景
  text-white   // 白色テキスト
  rounded-lg   // 角丸
  hover:bg-blue-600  // ホバー時の色変更
">

デプロイ方法

GitHub Pages（無料）

1. GitHub リポジトリを作成
2. コードをプッシュ
3. Settings → Pages → Source: main branch
4. https://username.github.io/repo-name でアクセス

Vercel（Next.js 推奨）

1. vercel.com にサインアップ（GitHub 連携）
2. 「New Project」→ リポジトリを選択
3. 「Deploy」をクリック
4. URL が自動生成

制限事項

❌ ログイン/登録（サーバーが必要）
❌ データ保存（データベースが必要）
❌ 管理ページ（バックエンドが必要）
❌ 決済機能（バックエンドが必要）

アップグレード時期

以下の機能が必要になったら Dynamic レベル に移行してください:

→ 「ログイン機能が必要」
→ 「データを保存したい」
→ 「管理ページが必要」
→ 「ユーザー同士でやり取りさせたい」

Starter レベル向け bkit 機能（v1.5.1）

出力スタイル: bkit-learning（推奨）

最良の学習体験のために、学習用出力スタイルを有効にしてください:

/output-style bkit-learning

これにより以下が提供されます:

各タスク終了後の学習ポイント（何をしたか、なぜそうしたかの説明）
実践を促す TODO(learner) マーカー
初心者向けに調整された概念説明

エージェントメモリ（自動アクティブ）

bkit エージェントはセッションを超えて学習の進捗を自動的に記憶します。セットアップは不要です — starter-guide エージェントは user スコープのメモリを使用するため、異なるプロジェクト間でも学習コンテキストが保持されます。

エージェントチーム

エージェントチームは Starter レベルのプロジェクトでは利用できません。 Dynamic レベルにアップグレードすると、2人のチームメイトによる並列 PDCA モードが解放されます。

よくある間違い

間違い	解決策
画像が表示されない	パスを確認（`./images/photo.jpg`）
CSS が適用されない	link タグのパスを確認
ページ遷移が機能しない	href パスを確認（`./about.html`）
モバイルで崩れる	`<meta name="viewport">` タグを確認

ww-w-ai/bkit-claude-code

bkit-claude-code とは？

お気に入りのAIに質問する

ドキュメント