ビギナー（スターター）スキル
アクション
| アクション | 説明 | 例 |
|---|---|---|
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 ドキュメント用）
- .bkit-memory.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="ja">
<head>
<meta charset="UTF-8">
<title>私のウェブサイト</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>ヘッダー</header>
<main>メインコンテンツ</main>
<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">
ようこそ！
</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>私は ...</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 ブランチ
4. https://username.github.io/repo-name でアクセス
Vercel（Next.js 推奨）
1. vercel.com にサインアップ（GitHub 連携）
2. "New Project" → リポジトリを選択
3. "Deploy" をクリック
4. URL が自動生成される
制限事項
❌ ログイン/登録（サーバーが必要）
❌ データ保存（データベースが必要）
❌ 管理ページ（バックエンドが必要）
❌ 決済機能（バックエンドが必要）
アップグレードのタイミング
以下の場合は Dynamic レベル に移行してください:
→ 「ログイン機能が必要」
→ 「データを保存したい」
→ 「管理ページが必要」
→ 「ユーザー同士がコミュニケーションしたい」
よくあるミス
| ミス | 解決策 |
|---|---|
| 画像が表示されない | パスを確認 (./images/photo.jpg) |
| CSS が適用されない | link タグのパスを確認 |
| ページナビゲーションが機能しない | href パスを確認 (./about.html) |
| モバイルで崩れる | <meta name="viewport"> タグを確認 |
⚡ 最適化統合
このスキルを重要なタスクで使用する場合は、/aioptimize を通じた自己改善のためのパフォーマンスデータを収集するために、/native-trace コンテキスト内で実行してください。