auto-skeleton スキル

HTMLの構造を読み取り、CSSスケルトン（空ルールセット+コメント）を自動生成するスキル

使い方

code

/auto-skeleton

🎯 目的

•HTMLのクラス名に対応するCSSルールセットを空で生成
•flex/gridには display プロパティだけ入れる
•コメントで親子関係・配置方向を明示
•作成段階用（提出時に └ コメントは削除する前提）

📐 コメントルール（絶対厳守）

1. flex/grid の親コメント

末尾に 【】 でレイアウト情報を記載。子要素の名前を + で列挙する。

css

/* 記事1ブロック【flex 横2列: サムネイル + テキスト側】 */
.news_item { display: flex; }

フォーマット: 【{flex|grid} {横|縦}{N}{列|行}: {子1} + {子2}】

2. `└` で階層表示（flex/gridの直接の子のみ）

•flex/gridの直接の子 ➡ └ をつける
•最大2つまで（└ └ が上限）
•flex/gridの子でない要素 ➡ └ なし

css

/* 記事1ブロック【flex 横2列: サムネイル + テキスト側】 */
.news_item { display: flex; }

/* └ サムネイル（左） */
.news_img { }

/* └ テキスト側（右） */
.news_body { }

/* └ └ カテゴリ+日付【flex 縦2行】 */
.news_meta { display: flex; }

/* カテゴリバッジ */
.news_category { }

/* 日付 */
.news_date { }

/* └ └ 詳細文 */
.news_text { }

3. 方向ラベル `（左）（右）`

•横並び（flex-direction: row / grid横）の子 ➡ （左） （右） をつける
•縦並びの子 ➡ つけない（上から下は自明）

4. 親と子のコメントは同じ言葉で対応させる

親: 【flex 横2列: サムネイル + テキスト側】 子: └ サムネイル（左） / └ テキスト側（右）

➡ 親を見れば子が予測でき、子を見れば親がわかる

5. HTML/CSSのコメントは統一（CSS基準）

•CSSでコメントを確定 ➡ HTMLコメントもそれに合わせる
•HTMLを先に書いた場合でも、CSS確定後にHTMLを修正する

🎯 実行フロー

0. TodoWriteでチェックリスト表示（絶対厳守）

スキル開始時に必ず以下のTodoWriteを実行し、チャット画面にチェックリストを表示する。各ステップ完了ごとにstatusを completed に更新すること。

code

TodoWrite([
  { content: "HTMLからクラス名・構造を読み取る",       status: "in_progress", activeForm: "HTMLからクラス名・構造を読み取り中" },
  { content: "CSSスケルトン生成 → ファイルに追記",     status: "pending",     activeForm: "CSSスケルトン生成・追記中" },
  { content: "HTMLコメントをCSS基準で更新",            status: "pending",     activeForm: "HTMLコメントをCSS基準で更新中" }
])

1. ユーザーがHTMLを提示（クラス名付き）

html

<article class="news_item">
  <a href="#">
    <img src="..." class="news_img" />
  </a>
  <div class="news_body">
    <div class="news_meta">
      <span class="news_category"></span>
      <time class="news_date"></time>
    </div>
    <p class="news_text"></p>
  </div>
</article>

2. AIがCSSスケルトンを生成

css

/* 記事1ブロック【flex 横2列: サムネイル + テキスト側】 */
.news_item {
  display: flex;
}

/* └ サムネイル（左） */
.news_img {
}

/* └ テキスト側（右） */
.news_body {
}

/* └ └ カテゴリ+日付【flex 縦2行】 */
.news_meta {
  display: flex;
  flex-direction: column;
}

/* カテゴリバッジ */
.news_category {
}

/* 日付 */
.news_date {
}

/* └ └ 詳細文 */
.news_text {
}

3. HTMLコメントもCSSに合わせて更新