starter

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

アクション

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

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

1. プロジェクトのディレクトリ構造を作成します（HTML/CSS/JS または Next.js）
2. package.json を生成します（Next.js を選択した場合）
3. CLAUDE.md を作成します（レベル：Starter を指定）
4. docs/ フォルダー構造を作成します（PDCA ドキュメント用）
5. .bkit-memory.json を初期化します

guide（開発ガイド）

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

help（初心者向けヘルプ）

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

対象ユーザー

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

技術スタック

オプション A：純粋な HTML/CSS/JS（まったくの初心者向け）

HTML5        → Web page structure
CSS3         → Styling
JavaScript   → Dynamic features (optional)

オプション B：Next.js（フレームワークを使用）

Next.js 14+  → React-based framework
Tailwind CSS → Utility CSS
TypeScript   → Type safety (optional)

言語ティアのガイダンス（v1.3.0）

おすすめ：ティア 1 の言語のみ（Python、TypeScript、JavaScript）

Starter レベルでは、AI ツールのサポートを最大限に活用できる AI ネイティブ開発に重点を置いています。

ティア	使用可否	理由
ティア 1	✅ はい	AI の完全なサポート、Vibe Coding に最適化
ティア 2	⚠️ 制限あり	Dynamic レベルを検討してください
ティア 3～4	❌ いいえ	Dynamic/Enterprise にアップグレードしてください

プロジェクト構造

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

project/
├── index.html          # Main page
├── about.html          # About page
├── css/
│   └── style.css       # Styles
├── js/
│   └── main.js         # JavaScript
├── images/             # Image files
├── docs/               # PDCA documents
│   ├── 01-plan/
│   └── 02-design/
└── README.md

オプション B：Next.js

project/
├── src/
│   ├── app/
│   │   ├── layout.tsx      # Common layout
│   │   ├── page.tsx        # Main page
│   │   └── about/
│   │       └── page.tsx    # About page
│   └── components/         # Reusable components
├── public/                 # Static files
├── docs/                   # PDCA documents
├── 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（ウェブページのスタイリング）

/* Basic styles */
body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
}

/* Center alignment */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Responsive (mobile support) */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
}

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

// app/page.tsx - Main page
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 page
// URL: /about
export default function About() {
  return (
    <div className="container mx-auto p-4">
      <h1>About</h1>
      <p>I am ...</p>
    </div>
  );
}

Tailwind CSS（手軽なスタイリング）

// Frequently used classes
<div className="
  container    // Center alignment
  mx-auto      // Auto left/right margin
  p-4          // Padding 16px
  text-center  // Center text
  text-xl      // Large text
  font-bold    // Bold text
  bg-blue-500  // Blue background
  text-white   // White text
  rounded-lg   // Rounded corners
  hover:bg-blue-600  // Color change on hover
">

デプロイ方法

GitHub Pages（無料）

1. Create GitHub repository
2. Push code
3. Settings → Pages → Source: main branch
4. Access at https://username.github.io/repo-name

Vercel（Next.js におすすめ）

1. Sign up at vercel.com (GitHub integration)
2. "New Project" → Select repository
3. Click "Deploy"
4. URL automatically generated

制限事項

❌ Login/Registration (requires server)
❌ Data storage (requires database)
❌ Admin pages (requires backend)
❌ Payment features (requires backend)

アップグレードするタイミング

次の要件がある場合は、Dynamic レベルに移行してください。

→ "I need login functionality"
→ "I want to store data"
→ "I need an admin page"
→ "I want users to communicate with each other"

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"> タグを確認します