Kronk の歩き方 — 10スライドで掴むAIネイティブCMS

静的サイトジェネレータ（SSG）、AIコーディングツール、IDE — どれも優秀なのに、互いを知らない。その接着剤を担っているのはいつもあなただ。Kronk はその構造を変える、AIファーストでIDEネイティブなメタCMSである。kronk init がHugo / Astro / Eleventy / Next.js など9つのSSGを自動検出し、リポジトリをスキャンしてスキーマと品質ルールを生成。kronk 一発で CLAUDE.md・.cursorrules・.windsurfrules を書き出し、Claude Code / Cursor / Windsurf にあなたのサイトの正体を教え込む。SEO・アクセシビリティ・OWASPセキュリティを内蔵ガードレールとして強制し、AIが書いたコンテンツを"証明可能"にする。本資料はその仕組みを10枚で読み解くフィールドガイド。

Transcript

1. ドキュメント読解 · GETKRONK.COM/DOCS $ W H A T I S K R O N K _ あなたのAI が 本当に使える CMS 。 Hugo, Astro, Eleventy, Next.js ほか 計9つのSSGに対応した、 AI ファースト・IDE ネイティブのコンテンツマネジメント。 — my-blog — zsh — 80×24 $ npm install -g kronk-cms $ cd my-website $ kronk init フレームワーク検出中... ✓ Eleventy v4.0 を検出 コンテンツをスキャン中... ✓ 12投稿 / 5ページ .kronk/ を作成中... ✓ スキーマ生成完了 $ kronk Kronk v1.0 | 12 スキル有効 AI命令ファイルを更新: CLAUDE.md .cursorrules .windsurfrules $ 01 / 10 · 表紙 aivorynet / kronk-cms · MIT
2. 01 · 課題 なぜ 2026年に新しいCMSなのか 優れたSSG 。優れたAI 。優れたエディタ。 そのどれも、互いを知らない。 0 1 · A I 手探りで書く。 AIは記事もページも生成できる。だがあなたのス キーマ、分類、必須フィールドを知らない。結 局すべて手直しが要る。 title: "My New Post" category: "blog" ← フィールド名が違う tags: "ai, tools" ← 配列であるべき description: ??? ← 欠落 0 2 · C M S 違うタブにいる。 IDE CMS どのCMSもブラウザに引きずり込む。コードは IDE、AIもIDE。なぜコンテンツ管理だけ別の場所 にあるのか。 vs 0 3 · あなた 接着剤を担う。 CLIもAIもIDEも、どれも動く。互いに会話しない 3つの世界の間で、コピペするのはいつもあな た。 CLI → → AI AI → → IDE IDE → → CLI ?? ?? ?? 02 / 10 出典 · getkronk.com
3. 02 · 答え 一行定義 K R O N K ≔ あなたのAI に サイトの正体を教える メタCMS 。 結果: いつものAIが、フロントマターや分類、SEOルールを推測でこなすのをやめ、あなたの規約 に従って動き出す。 Kronkはあなたの静的サイトプロジェクトをスキャンし、スキーマと品質ルールを生成。それを Claude Code / Cursor / Windsurf が起動時に読む命令ファイルへ書き込む。 / / 仕組みの式 あなたの リポジトリ + Kronk の スキャン ↓ CLAUDE.md .cursorrules .windsurfrules = 文脈を持つAI 。 03 / 10 · Kronkとは
4. 03 · 構造 4つの構成要素 実際に手に入るもの。 CLI 1つ、AIスキル 12個、ワークフロー 1本、そして任意のコントロールパネル。 01 足場作りと 検証。 永久無料 · オープンソース C L I 本体 · M I T kronk init 一発でフレームワークを検 出し、コンテンツを索引化、.kronk/ 設定を生成。 20以上のコマンドが create / list / validate / scan / schema / migrate を 網羅。 02 AI にルールを 教え込む。 A I スキル · 1 2 個 /kronk-content, /kronk-seo, /kronk- audit などをAIがタスクに合わせて自 動選択。 あなたのスキーマ・SEO閾値・アクセ シビリティ規約を強制する。 03 一発で 文脈を流し込む。 ワークフロー kronk を実行すると、Claude Code / Cursor / Windsurf / Antigravity 用の 命令ファイルを再生成。 スキーマを変えたら、また走らせるだ け。 04 エディタ内の 操作盤。 I D E プラグイン · 任意 コンテンツナビゲータ、フォーム式フ ロントマター編集、ASCIIキャンバス、 メディアライブラリ、品質監査、デプ ロイ操作。 JETBRAINS · VS CODE CURSOR · ANTIGRAVITY 04 / 10 · 4つの柱
5. 04 · 流れ 5分で立ち上げる init → create → validate → AI へ説明。 S T E P 0 1 · インストール グローバル導入。 $ npm install -g kronk-cms S T E P 0 2 · I N I T 自動検出。 $ cd my-website $ kronk init コンテンツをスキャンし .kronk/schemas/ を生成。 S T E P 0 3 · 作成 最初の投稿。 $ kronk create post "Hello World" フレームワークに合った正しいフロント マター付きで生成。 S T E P 0 4 · 検証 ガードレール。 $ kronk validate $ kronk scan SEO・a11y・OWASP — コミット前のチェ ック。 S T E P 0 5 · A I へ説明 魔法の一手。 $ kronk CLAUDE.md · .cursorrules · .windsurfrules を書き出す。 // STEP 05 以降 // Claude Code はセッション開始時に CLAUDE.md を読む。あなたのAI はスキーマ・分類・SEO 閾値・ a11y 規約を理解した状態で立ち上がり、自動で検証する。 05 / 10 · 流れ
6. 05 · スキル 12個導入 · 自動選択 12 のスキル。 AI が適切なものを選ぶ。 タスクに合うときAIが呼び出すスラッシュコマンド。覚えるのはあなたではなくAI。 — skills — zsh $ kronk skills 12 個のスキルを導入済み kronk 実行のたび、CLAUDE.md / .cursorrules / .windsurfrules へ自動読み込み。 $ /kronk-content ガードレール付きコンテンツ生成 正しいフロントマター、スキーマで検証された必須項目、フレーム ワーク固有の規約に沿って作る。 /kronk-seo SEO 全面強制 タイトル長、ディスクリプション、見出し階層、alt属性、 canonical URL を逐一チェック。 /kronk-audit コンテンツ品質監査 「全記事を監査して改善点を出して」とAIに頼むだけ。 /kronk-theme テーマ生成・改修 各フレームワークが期待するレイアウト構造に沿ってテーマを足場 化。 /kronk-images 画像最適化とレスポンシブ srcset、モダンフォーマット、遅延読み込み — 挿入時にAIが処 理。 /kronk-verify 公開前の最終検証 最後の関門。全スキーマ合格・セキュリティ問題なし・a11y警告な しを確認してからコミット。 06 / 10 · AIスキル · /kronk-* 名前空間にあと6個
7. 06 · CLI MAN KRONK 8 つの動詞で全工程をまかなう。 init · create · list · validate · scan · schema · update · delete · migrate kronk init フレームワーク検出、コンテンツスキャン、.kronk/ 設定とスキーマを生成。 kronk create post · page · doc — 正しいフロントマター付き。--draft ・--template 対応。 kronk list posts / pages / docs / all を一覧。draft フィルタ、ソート、JSON出力に対 応。 kronk validate スキーマと品質ルールを検証。--fix で自動修正、--strict で警告も失敗扱 い。 kronk scan セキュリティ + アクセシビリティ + SEO。--security · --a11y · --seo · -- all 。 kronk schema コンテンツスキーマを生成・検証・一覧化（YAML / JSON） 。 kronk migrate フレームワークやフロントマター形式を相互変換。--dry-run 対応。 kronk 引数なし。CLAUDE.md · .cursorrules · .windsurfrules を再生成。 — 例: validate — zsh — 80×30 $ kronk validate コンテンツを検証中... src/posts/2026-01-26-hello-world.md ✓ フロントマターOK ⚠ ディスクリプションが短い (15字, 最低 50字) ✓ 見出し階層OK ✓ セキュリティ問題なし 警告 1件。 $ kronk validate --fix 1件を自動修正... 完了。 $ 07 / 10 · CLI リファレンス
8. 07 · ガードレール 「AIファースト」が実際に機能する理由 AI に書かせるのは誰でもできる。 Kronk は それを証明可能にする。 柱 0 1 SEO validation: seo: titleMinLength: 30 titleMaxLength: 60 descriptionMinLength: 120 descriptionMaxLength: 160 .kronk/config.yaml で閾値を設定可能 — タイトル 30〜60字、ディスクリプション 120〜160字、見出し階 層、alt属性、canonical URL を全部チェック。 柱 0 2 アクセシビリティ accessibility: requireAltText: true checkHeadingHierarchy: true wcagLevel: AA WCAG 2.1 AA 準拠。色コントラスト、キーボード操作、 セマンティックHTML、説明的なリンク、alt属性の強 制、見出し階層の整合。 柱 0 3 セキュリティ $ kronk scan --security ✓ XSS の侵入経路なし ✓ シークレットの露出なし ✓ リンク無害化済み ✓ フロントマター健全 OWASP に沿ったスキャンをCLIに内蔵。GDPR、HIPAA、 SOC 2 のコンプライアンス連携は AIVory 製品群と接続し て拡張可能。 08 / 10 · ガードレール
9. 08 · カバレッジ 9つのSSG · 自動検出 9 つのフレームワーク。 ワークフローは1 つ。 手動設定なし — Kronkが config.toml ・_config.yml ・astro.config.mjs ・next.config.js などを読んで、プロジェクトの正体を特定する。 Hugo Jekyll Astro Eleventy Next.js Gatsby Nuxt Hexo Strapi .TOML RUBY .MJS 11TY REACT REACT VUE NODE HEADLESS + more 予定 $ kronk init → 「フレームワーク検出中... Hugo v0.121 を検出」 — 9つすべてで同じ流れ。 09 / 10 · 対応フレームワーク
10. 09 · まとめ GETKRONK.COM · MIT / / 要点 あなたのAI に CMS を持たせる。 あなたのSSG に 管理者を与える。 全部、IDEの中で完結させる。 こんな人に 個人開発者 開発チーム / 制作会社 OSS メンテナー ブログ、ポートフォリオ、サイドプロジェクト。IDEから出ずに済 む。 複数クライアント、異なるSSG、共通のワークフロー1本。 ドキュメントサイトやプロジェクトページ。コードと同じMITライ センス。 9 S S G フレームワーク 12 A I スキル 20+ C L I コマンド MIT C L I ライセンス 10 / 10 · npm i -g kronk-cms · github.com/aivorynet/kronk-cms