🔒 AIボイラープレート for Remix

このボイラープレートは、単なるRemixテンプレートではありません。人間による厳格な設計に基づき、**AIエージェントのコーディングをプロセスレベルで制約（ガードレール）**することで、アーキテクチャの逸脱や潜在的なバグを初期段階で排除する「AI開発製造ライン」です。

この製造ラインはMVP開発専用とし、CI/CD前の段階で究極の品質安定を目指します。

💡 コア原則

一般的なフレームワークが「パフォーマンスを設計できる」のに対し、このボイラープレートはRemixアーキテクチャ上で**「パフォーマンスが既に設計されている」**状態を強制します。

肥大化を防ぐための制限です。

📝 単純要件専用: 個人開発のMVPに特化し、以下の厳格なルールを遵守します。
- 1サービス = 1画面
- 1機能 = 1セクション (1画面は複数セクションの縦連結)

このボイラープレートは、Web標準への回帰とエッジコンピューティングの活用を思想的背景として、以下の技術スタックを基本構成としています。

レイヤー	技術選定	選定理由・思想
Framework	Remix	Web標準準拠（Request/Response）。Nested Routesによるデータ取得の最適化。
Platform	Cloudflare Pages	エッジへのシームレスなデプロイ。コールドスタート0msによる優れたUX。
Runtime	Cloudflare Workers	エッジでのSSR実行環境。Node.js APIへの依存を減らし、Web標準APIを基本とする。
Styling	Tailwind CSS	ユーティリティファーストによるCSS設計。CSSの転送量を削減し、保守性を高める。
Testing	Vitest, Playwright	高速なユニットテストと、信頼性の高いE2Eテストを両立。
Linting	ESLint, Prettier	コードの一貫性と品質を自動的に担保。

このボイラープレートは拡張可能です。例えば、ブログ機能を実装する際には、以下の技術を組み合わせることで、エッジの能力を最大限に引き出すことができます。

レイヤー	技術選定	目的
Database	Cloudflare D1	エッジネイティブな分散型SQL(SQLite)による動的コンテンツの提供。
Content	MDX (Git管理)	コンテンツをコードとしてバージョン管理し、開発者体験を向上させる。

AIの創造性を制限することで、品質とアーキテクチャの規律を担保します。

ガードレール項目	規律（強制/禁止）	実現方法
Outside-In TDD専用	強制: E2E (外側) から開発を開始し、UI → Logic → Data-IOの層別ユニットTDDサイクル（二重ループ）を必須とします。	`TDD_WORK_FLOW.md`（⛏️）によるフロー強制。
コーディング規律の強制	禁止: 規定行数を超えた巨大なファイルやマジックナンバー。	`scripts/lint-template/engine.js` によるコードレベルの違反検出。
スタイリング憲章	強制: 実装者は常に「Tailwindクラス」のみを参照。禁止: `globals.css`のカスタムクラス・トークンへの直接参照、階層飛越。	`npm run lint:css-arch` による自動検出。詳細: `docs/design/STYLING_CHARTER.md`
構造保証フロー	強制: すべての新規コード生成および設計書作成は、構造保証フロー（SAF）に則り、リント付きテンプレート生成コマンド（npm run generate）を通じて行う。	AIエージェントは、サブエージェントを介した構造基盤イニシエーション（SFI）を実行し、その後の実装をメインエージェントが引き継ぎます。

AIはコードを実装しますが、人間は**「製造ラインの監視と管理（オペレーター責務）」**に集中します。

責務	オペレーター（人間）の役割	AIエージェントの役割
フロー管理	`TDD_WORK_FLOW.md`の進捗監視とAIへの指示出し。	`TDD_WORK_FLOW.md`に記載された全てのコーディングとテストの実行。
品質保証	リント実施、CI/CDへの移行準備。	コード化された規約（Lintルール）を自己チェックし、不具合を発見した場合は再現テストの作成から修正を開始。

このリポジトリでAIエージェントとして活動する際の行動規律、および開発フローの詳細は CLAUDE.md を参照してください。

Name	blog-writer
Description	Writes blog articles for ClaudeMix project following BAB (Before-After-Bridge) format. Use when you have an approved article proposal and need to write the full article with metadata, introduction (5-part fear-based BAB structure), and main content. Requires prior article proposal from blog-planner skill.