cmx-sdk 0.2.9 → 0.2.11

package/templates/claude/skills/cmx-migrate/references/analysis-guide.md

@@ -1,127 +0,0 @@
-# 解析ガイド
-
-Step 1（解析）でClaude自身が判断する際のルール。
-
-## URLパターン → CMXタイプのマッピング
-
-### コレクション候補の検出
-
-| URLパターン | 推定タイプ | 根拠 |
-|------------|----------|------|
-| `/blog/*`, `/posts/*`, `/articles/*` | post | ブログ記事 |
-| `/news/*`, `/updates/*`, `/press/*` | news | ニュース・お知らせ |
-| `/docs/*`, `/guide/*`, `/manual/*` | doc | ドキュメント |
-| `/about`, `/company`, `/services` | static-page | 固定ページ |
-| `/contact`, `/inquiry` | form | フォームページ |
-| `/products/*`, `/items/*` | data-type | 商品（データタイプ） |
-| `/team`, `/members`, `/staff` | data-type | メンバー（データタイプ） |
-| `/faq`, `/qa` | data-type | FAQ（データタイプ） |
-
-### 一覧ページ vs 詳細ページの判定
-
-- 一覧ページ: URLがパターンのルート（`/blog`）で、ページ内に複数のリンクカードがある
-- 詳細ページ: URLがパターンの子（`/blog/post-1`）で、長い本文がある
-
-### 固定ページ vs コレクションの判定
-
-- 固定ページ: 個別URLで、時系列でない、少数（1-3ページ）
-- コレクション: パターン化されたURLで、同じ構造のページが複数（5件以上）
-
-## ページ構造の分析
-
-### セクション検出
-
-固定ページ（`/about` 等）はセクションに分割して分析:
-
-```html
-<!-- セクションの境界を検出する目印 -->
-<section>              → セクション区切り
-<div id="team">        → セクション「team」
-<h2>チーム</h2>        → セクション見出し
-<hr>                   → セクション区切り
-```
-
-各セクションに対して:
-- どんなコンテンツか（テキスト、カード一覧、画像ギャラリー等）
-- データタイプに分離すべきか（繰り返しデータの場合）
-- MDXコンポーネントにすべきか（再利用可能なUIパターンの場合）
-
-### 繰り返しデータの検出
-
-同じ構造が3回以上繰り返される場合はデータタイプ候補:
-
-```html
-<!-- このパターンが5回繰り返される → データタイプ候補 -->
-<div class="team-member">
-  <img src="..." alt="...">
-  <h3>名前</h3>
-  <p>役職</p>
-</div>
-```
-
-→ データタイプ `staff`: name(text), position(text), photo(image)
-
-### コンポーネント候補の検出
-
-複数ページで共通して使われるUIパターン:
-
-- CTAバナー（タイトル + 説明 + ボタン）→ `<CTA>`
-- 特徴カード（アイコン + タイトル + 説明）→ `<FeatureCard>`
-- テスティモニアル（引用 + 名前 + 会社名）→ `<Testimonial>`
-- FAQ アコーディオン（質問 + 回答）→ `<FAQ>`
-- 画像ギャラリー → `<Gallery>`
-- 料金テーブル → `<PricingTable>`
-
-**判定基準:**
-- 2つ以上のページで同じパターンが使われている → コンポーネント候補
-- 記事本文内で使われる装飾要素 → MDXコンポーネント候補
-- ページレイアウトの一部 → React コンポーネント（src/components/）
-
-## フォームの検出
-
-```html
-<form>
-  <input type="text" name="name" required>     → { key: "name", type: "text", required: true }
-  <input type="email" name="email" required>    → { key: "email", type: "email", required: true }
-  <textarea name="message"></textarea>          → { key: "message", type: "textarea" }
-  <select name="category">                     → { key: "category", type: "select", options: [...] }
-    <option>お問い合わせ</option>
-    <option>採用について</option>
-  </select>
-</form>
-```
-
-## スタイル情報の解釈
-
-### カラーの分類
-
-computed style から取得した色を以下に分類:
-
-| 取得元 | 分類先 |
-|-------|-------|
-| body の background-color | background |
-| body の color | text |
-| a タグの color | primary（多くの場合） |
-| nav の background-color | 参考（ヘッダー色） |
-| ボタンの background-color | primary or accent |
-
-### トーンの判定
-
-| 特徴 | トーン |
-|------|-------|
-| 白背景 + 青/グレーテキスト + サンセリフ | プロフェッショナル・クリーン |
-| ダーク背景 + 明るいテキスト | モダン・テック |
-| パステルカラー + 丸みのあるUI | カジュアル・フレンドリー |
-| 高コントラスト + 大きなタイポグラフィ | インパクト・ブランド重視 |
-| ミニマルデザイン + 余白多め | ミニマル・エレガント |
-| 写真多め + オーバーレイ | ビジュアル重視 |
-
-### フォントの分類
-
-| フォント種類 | 用途推定 |
-|------------|---------|
-| Noto Sans JP, Hiragino | 日本語サイト標準 |
-| Inter, SF Pro | テック系 |
-| Playfair Display, Merriweather | エレガント・メディア系 |
-| Roboto, Open Sans | 汎用 |
-| モノスペース（JetBrains Mono等） | コード表示用 |

package/templates/claude/skills/cmx-migrate/references/html-to-mdx.md

@@ -1,99 +0,0 @@
-# HTML → MDX 変換ルール
-
-子エージェントがコンテンツ変換時に参照するルール。
-
-## 基本変換テーブル
-
-| HTML | MDX |
-|------|-----|
-| `<h1>` | `# `（通常はtitleフィールドに抽出、本文には含めない） |
-| `<h2>` | `## ` |
-| `<h3>` | `### ` |
-| `<h4>` | `#### ` |
-| `<p>` | そのまま（タグ除去、前後に空行） |
-| `<strong>`, `<b>` | `**テキスト**` |
-| `<em>`, `<i>` | `*テキスト*` |
-| `<a href="url">` | `[テキスト](url)` |
-| `<ul><li>` | `- テキスト` |
-| `<ol><li>` | `1. テキスト` |
-| `<blockquote>` | `> テキスト` |
-| `<code>` | `` `テキスト` `` |
-| `<pre><code>` | ` ```lang\nコード\n``` ` |
-| `<img src="url" alt="text">` | `![text](url)` |
-| `<table>` | Markdown テーブル |
-| `<hr>` | `---` |
-| `<br>` | 改行（`\n`） |
-
-## 除去するもの
-
-- `<script>` タグとその中身
-- `<style>` タグとその中身
-- `<iframe>` タグ（広告、埋め込み等）
-- `<nav>` タグ（ナビゲーション）
-- `<header>` タグ（サイト共通ヘッダー）
-- `<footer>` タグ（サイト共通フッター）
-- `<aside>` タグ（サイドバー）
-- `class` 属性、`id` 属性、`style` 属性
-- `data-*` 属性
-- コメント `<!-- ... -->`
-- 広告関連の要素
-
-## URL 変換
-
-- 相対URL → 絶対URL に変換
-  - `/images/photo.jpg` → `https://old-site.com/images/photo.jpg`
-- 内部リンクは移行先のパスに変換可能であれば変換
-  - `/blog/post-1` → `/blog/post-1`（パスが同じなら変更不要）
-- 画像は外部URLのまま維持（後で Admin にアップロード可能）
-
-## メタデータ抽出
-
-コンテンツ本文とは別に以下を抽出:
-
-| フィールド | 抽出元 |
-|-----------|-------|
-| title | `<h1>` or `<title>` |
-| description | `<meta name="description">` |
-| slug | URLパスの末尾部分（`/blog/my-post` → `my-post`） |
-| publishedAt | `<time>` or `<meta property="article:published_time">` |
-| thumbnail | `<meta property="og:image">` or 記事内最初の `<img>` |
-
-## slug 生成ルール
-
-- URLパスの末尾セグメントを使用
-  - `https://old-site.com/blog/2024/01/my-article` → `my-article`
-- 日本語URLの場合はローマ字化または英語化
-- 使用可能文字: 英数字、ハイフン
-- 重複チェック: 既存slugと衝突する場合は `-2`, `-3` を付加
-
-## MDXコンポーネント置換
-
-既存サイトのUIパターンがMDXコンポーネントとして定義されている場合、対応するHTMLをコンポーネントに置換する。
-
-```html
-<!-- 移行元 -->
-<div class="feature-card">
-  <span class="icon">✨</span>
-  <h3>高速</h3>
-  <p>パフォーマンスに優れています</p>
-</div>
-```
-
-```mdx
-<!-- 移行後 -->
-<FeatureCard icon="✨" title="高速">
-パフォーマンスに優れています
-</FeatureCard>
-```
-
-ただし、コンポーネント置換は `src/components/custom/index.ts` に export されているもののみ使用可能。
-
-## 品質チェック
-
-変換後のMDXが以下を満たすか確認:
-- Markdownとして正しい構文か
-- 空行が適切に挿入されているか
-- リスト、テーブルのインデントが正しいか
-- コードブロックの言語指定があるか
-- 画像のalt属性が設定されているか
-- 不要なHTMLタグが残っていないか

package/templates/claude/skills/cmx-migrate/references/intermediate-format.md

@@ -1,196 +0,0 @@
-# 中間フォーマット定義
-
-## site-map.json
-
-Step 1（解析）で生成し、Step 2（計画）以降で参照する構造化データ。
-
-```json
-{
-  "sourceUrl": "https://example.com",
-  "analyzedAt": "2026-02-17",
-
-  "navigation": {
-    "primary": [
-      { "label": "ブログ", "href": "/blog" },
-      { "label": "会社概要", "href": "/about" },
-      { "label": "お問い合わせ", "href": "/contact" }
-    ],
-    "footer": [
-      { "label": "プライバシーポリシー", "href": "/privacy" }
-    ]
-  },
-
-  "pageGroups": [
-    {
-      "pattern": "/blog/*",
-      "type": "collection",
-      "suggestedCmxType": "post",
-      "suggestedSlug": "blog",
-      "suggestedName": "ブログ",
-      "listPage": "/blog",
-      "sampleDetailPages": ["/blog/article-1", "/blog/article-2"],
-      "totalCount": 25,
-      "fields": [
-        { "key": "title", "type": "text", "selector": "h1", "required": true },
-        { "key": "date", "type": "date", "selector": "time" },
-        { "key": "category", "type": "relation", "values": ["技術", "デザイン", "ビジネス"] },
-        { "key": "tags", "type": "relation_multi", "values": ["Next.js", "TypeScript", "React"] },
-        { "key": "thumbnail", "type": "image" },
-        { "key": "author", "type": "text" },
-        { "key": "body", "type": "richtext", "selector": "article" }
-      ],
-      "suggestedDataTypes": ["categories", "tags"]
-    },
-    {
-      "pattern": "/news/*",
-      "type": "collection",
-      "suggestedCmxType": "news",
-      "suggestedSlug": "news",
-      "suggestedName": "お知らせ",
-      "listPage": "/news",
-      "sampleDetailPages": ["/news/announcement-1"],
-      "totalCount": 15,
-      "fields": [
-        { "key": "title", "type": "text", "required": true },
-        { "key": "date", "type": "date" },
-        { "key": "category", "type": "relation", "values": ["プレスリリース", "イベント"] },
-        { "key": "body", "type": "richtext" }
-      ],
-      "suggestedDataTypes": ["categories"]
-    },
-    {
-      "pattern": "/about",
-      "type": "static-page",
-      "sections": [
-        { "id": "hero", "description": "ヒーローセクション（キャッチコピー + CTA）" },
-        { "id": "mission", "description": "ミッション・ビジョン" },
-        { "id": "team", "description": "メンバー一覧（カード型、5名）" },
-        { "id": "history", "description": "沿革タイムライン" }
-      ]
-    },
-    {
-      "pattern": "/contact",
-      "type": "form",
-      "fields": [
-        { "key": "name", "type": "text", "label": "お名前", "required": true },
-        { "key": "email", "type": "email", "label": "メールアドレス", "required": true },
-        { "key": "company", "type": "text", "label": "会社名" },
-        { "key": "message", "type": "textarea", "label": "お問い合わせ内容", "required": true }
-      ]
-    },
-    {
-      "pattern": "/faq",
-      "type": "data-type-page",
-      "suggestedSlug": "faq",
-      "description": "アコーディオン型FAQ一覧"
-    }
-  ],
-
-  "dataTypeCandidates": [
-    {
-      "slug": "staff",
-      "name": "スタッフ",
-      "source": "/about セクション #team",
-      "entryCount": 5,
-      "fields": [
-        { "key": "name", "label": "名前", "type": "text", "required": true },
-        { "key": "position", "label": "役職", "type": "text" },
-        { "key": "bio", "label": "自己紹介", "type": "textarea" },
-        { "key": "photo", "label": "写真", "type": "image" }
-      ]
-    },
-    {
-      "slug": "faq",
-      "name": "よくある質問",
-      "source": "/faq ページ",
-      "entryCount": 12,
-      "fields": [
-        { "key": "question", "label": "質問", "type": "text", "required": true },
-        { "key": "answer", "label": "回答", "type": "richtext", "required": true },
-        { "key": "category", "label": "カテゴリ", "type": "select", "options": { "choices": ["一般", "料金", "技術"] } }
-      ]
-    }
-  ],
-
-  "componentCandidates": [
-    {
-      "name": "FeatureCard",
-      "description": "3カラムの特徴紹介カード",
-      "foundAt": ["/", "/about"],
-      "props": [
-        { "name": "icon", "type": "string", "description": "アイコン（絵文字）" },
-        { "name": "title", "type": "string", "description": "タイトル", "required": true },
-        { "name": "children", "type": "string", "description": "説明文", "required": true }
-      ]
-    },
-    {
-      "name": "CTA",
-      "description": "コールトゥアクションバナー",
-      "foundAt": ["/", "/about", "/blog"],
-      "props": [
-        { "name": "title", "type": "string", "required": true },
-        { "name": "description", "type": "string" },
-        { "name": "buttonText", "type": "string", "required": true },
-        { "name": "buttonUrl", "type": "string", "required": true }
-      ]
-    }
-  ],
-
-  "style": {
-    "colors": {
-      "primary": "#2563eb",
-      "secondary": "#64748b",
-      "accent": "#f59e0b",
-      "background": "#ffffff",
-      "text": "#1e293b",
-      "muted": "#f1f5f9"
-    },
-    "fonts": {
-      "heading": "Noto Sans JP, sans-serif",
-      "body": "Noto Sans JP, sans-serif",
-      "code": "JetBrains Mono, monospace"
-    },
-    "fontSizes": {
-      "h1": "2.5rem",
-      "h2": "2rem",
-      "body": "1rem"
-    },
-    "tone": "プロフェッショナル・クリーン",
-    "layoutPattern": "container-centered",
-    "cardStyle": "shadow-sm with rounded corners"
-  }
-}
-```
-
-## migration-plan.json
-
-Step 2（計画）で生成。ユーザーと対話して確定した移行計画。
-
-site-map.json の「提案」をユーザーが承認・修正した「確定版」。
-
-```json
-{
-  "sourceUrl": "https://example.com",
-  "confirmedAt": "2026-02-17",
-  "collections": [...],
-  "dataTypes": [...],
-  "components": [...],
-  "forms": [...],
-  "routes": [...],
-  "style": {...}
-}
-```
-
-`site-map.json` との違い:
-- `pageGroups` → `collections` + `routes` に分解・確定
-- `suggestedCmxType` → `type` に確定
-- `dataTypeCandidates` → `dataTypes` に確定（不要なものは除外済み）
-- `componentCandidates` → `components` に確定（選択されたもののみ）
-
-## build-result.json
-
-Step 3（構築）で生成。SDK コマンドで登録した結果のID一覧。
-
-## content-result.json
-
-Step 4（コンテンツ投入）で生成。各バッチの結果を集約した投入結果。

package/templates/claude/skills/cmx-migrate/references/tool-setup.md

@@ -1,150 +0,0 @@
-# ツールセットアップガイド
-
-## Firecrawl CLI
-
-### インストール
-
-```bash
-npm install -g firecrawl-cli
-```
-
-### APIキー設定
-
-1. https://firecrawl.dev でアカウント作成（無料枠: 500クレジット）
-2. APIキーを取得
-3. `.env.local`（または `.env`）に追加:
-
-```
-FIRECRAWL_API_KEY=fc-your-api-key
-```
-
-4. firecrawl コマンド実行前に環境変数をシェルに読み込む:
-
-```bash
-ENV_FILE=$( [ -f .env.local ] && echo .env.local || echo .env )
-set -a && source "$ENV_FILE" 2>/dev/null && set +a
-```
-
-> **補足**: `firecrawl login --api-key fc-your-api-key` でCLI自体に認証情報を保存する方法もあるが、上記の環境変数読み込みで十分。
-
-### セルフホスト（無料・無制限）
-
-APIクレジットを消費せず使いたい場合:
-
-```bash
-git clone https://github.com/firecrawl/firecrawl.git
-cd firecrawl
-cp .env.example .env
-docker compose up -d
-```
-
-セルフホスト時は `.env.local`（または `.env`）に接続先を指定:
-
-```
-FIRECRAWL_API_URL=http://localhost:3002
-```
-
-### 主要コマンド
-
-```bash
-# サイト内の全URLを発見（コンテンツ取得なし、高速）
-firecrawl map https://example.com --limit 1000 -o urls.json
-
-# サイト全体をクロール（Markdown取得）
-firecrawl crawl https://example.com --limit 200 --max-depth 3 --wait --progress -o crawl-result.json
-
-# 単一ページをスクレイプ（スクショ付き）
-firecrawl scrape https://example.com --format markdown,screenshot -o page.json
-
-# 構造化データ抽出（LLMが解析）
-firecrawl scrape https://example.com/blog --format json --json-prompt "Extract list items with their fields" -o structure.json
-```
-
-### クレジット消費目安
-
-| 操作 | クレジット消費 |
-|------|-------------|
-| map（URL発見） | 1クレジット/リクエスト |
-| scrape（単一ページ） | 1クレジット/ページ |
-| crawl（サイトクロール） | 1クレジット/ページ |
-| extract（構造化抽出） | 5クレジット/リクエスト |
-
-無料枠 500 クレジットで中小サイト（〜200ページ）の移行が1回可能。
-
-## agent-browser
-
-Claude Code に組み込みのスキルとして利用可能。追加インストール不要。
-
-### 主要コマンド
-
-```
-# ページを開く
-open https://example.com
-
-# スクリーンショット撮影
-screenshot output-path.png
-
-# DOMスナップショット（セマンティック構造）
-snapshot
-
-# JavaScript実行
-eval "document.title"
-eval "JSON.stringify(getComputedStyle(document.body))"
-
-# 要素クリック
-click @e5
-
-# テキスト取得
-text @e10
-```
-
-### スタイル情報抽出のパターン
-
-```javascript
-// 主要な CSS 変数/カラーを一括取得
-eval "JSON.stringify({
-  bodyBg: getComputedStyle(document.body).backgroundColor,
-  bodyColor: getComputedStyle(document.body).color,
-  bodyFont: getComputedStyle(document.body).fontFamily,
-  bodyFontSize: getComputedStyle(document.body).fontSize,
-  h1Font: document.querySelector('h1') ? getComputedStyle(document.querySelector('h1')).fontFamily : null,
-  h1Size: document.querySelector('h1') ? getComputedStyle(document.querySelector('h1')).fontSize : null,
-  h1Weight: document.querySelector('h1') ? getComputedStyle(document.querySelector('h1')).fontWeight : null,
-  linkColor: document.querySelector('a') ? getComputedStyle(document.querySelector('a')).color : null,
-  navBg: document.querySelector('nav') ? getComputedStyle(document.querySelector('nav')).backgroundColor : null,
-  footerBg: document.querySelector('footer') ? getComputedStyle(document.querySelector('footer')).backgroundColor : null
-})"
-```
-
-## cmx-sdk CLI
-
-プロジェクト内蔵。`npx cmx-sdk` で実行。
-
-### 移行で使用する主要コマンド
-
-<!-- cmx-sync:start id="skill-cmx-migrate-tool-setup-command-block" -->
-```bash
-# スキーマ登録
-npx cmx-sdk create-collection --json '{...}'
-npx cmx-sdk create-data-type --json '{...}'
-npx cmx-sdk create-data-entry --type-slug staff --json '{...}'
-
-# コード生成
-npx cmx-sdk codegen types
-npx cmx-sdk codegen pages --template layered
-
-# コンテンツ投入
-npx cmx-sdk create-content --collection blog --json '{...}'
-npx cmx-sdk create-content --collection blog --file content.json
-
-# 参照設定
-npx cmx-sdk set-content-references --id {contentId} --json '{...}'
-
-# ステータス変更
-npx cmx-sdk request-review-content --id {contentId}
-npx cmx-sdk publish-content --id {contentId}
-
-# コンポーネント
-npx cmx-sdk components scaffold --name FeatureCard
-```
-<!-- cmx-sync:end -->