auto-section スキル

スクショやURL からセクション名を自動提案するスキル

使い方

code

/auto-section

🎯 目的

画面のスクショまたはURLから、大セクション名を日本語で提案し、HTML/CSSに自動生成する

📐 コメント形式

HTML用（セクション名のみ）

html

<!-- ===============================================
     セクション名
     =============================================== -->

CSS用（セクション名 + 特徴・使用技術）

css

/* ┌─────────────────────────────────────────┐
   │ セクション名                            │
   │ - 特徴やレイアウト                      │
   │ - 使う技術とか                          │
   └─────────────────────────────────────────┘ */

❌ JS → 対象外

❌ モバイル対応 → 不要

🎯 実行フロー

1. ユーザーがスクショまたはURLを渡す

2. AIが大セクション名を一括提案（必ずユーザー確認）

出力例

code

📋 セクション提案:
1. ヘッダー
2. メインビジュアル
3. 新着情報
4. フッター

🔍 このセクション名でOK？修正ある？

3. ユーザーがOK → HTML/CSSに自動生成

HTML出力例（承認後）

html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>タイトル</title>
  <link rel="stylesheet" href="css/ファイル名.css">
</head>
<body>

<!-- ===============================================
     ヘッダー
     =============================================== -->
<header>
</header>

<!-- ===============================================
     メインビジュアル
     =============================================== -->
<section>
</section>

<!-- ===============================================
     新着情報
     =============================================== -->
<section>
</section>

<!-- ===============================================
     フッター
     =============================================== -->
<footer>
</footer>

  <script src="js/ファイル名.js"></script>
</body>
</html>

CSS出力例（承認後・人間風コメント）

css

/* ┌─────────────────────────────────────────┐
   │ ヘッダー                                │
   │ - 上に固定                              │
   │ - ロゴとメニューを横並び                │
   └─────────────────────────────────────────┘ */

/* ┌─────────────────────────────────────────┐
   │ メインビジュアル                        │
   │ - スライドショー（JSで動かす）          │
   │ - 全幅の背景画像                        │
   │ - relative + absolute で重ねる          │
   └─────────────────────────────────────────┘ */

/* ┌─────────────────────────────────────────┐
   │ 新着情報                                │
   │ - リスト形式（日付とタイトル）          │
   │ - 各行をflexで横並び                    │
   └─────────────────────────────────────────┘ */

/* ┌─────────────────────────────────────────┐
   │ フッター                                │
   │ - 下に配置                              │
   │ - 会社情報とかSNSボタン                 │
   └─────────────────────────────────────────┘ */

📐 ルール

HTML生成ルール

•✅ 空ファイル: 基本構造 + セクション生成
•✅ 既存ファイル: セクションのみ追記
•✅ タグは <header> <section> <footer> を使い分け
•❌ クラス名は付けない（後で auto-class で付与）

CSS生成ルール

•✅ 人間っぽい自然な日本語
•✅ 断定的に書く（「または」「等」は避ける）
•✅ 「とか」「〜を横並び」「〜で動かす」等のカジュアル表現OK
•❌ AI風の堅い表現は避ける

粒度

•✅ 大セクションのみ（ヘッダー、メイン、フッター等）
•❌ 細かいパーツは対象外

セクション名

•✅ 日本語
•✅ 直感的でわかりやすい名前
•✅ スクショの見た目から判断

確認フロー

•✅ 提案後に必ずユーザー確認（一括提案 → OK待ち）
•❌ 確認なしで生成しない

複数検出時

•✅ 一括で全部提案
•❌ 1個ずつ確認しない

命名の参考パターン

見た目	セクション名
ロゴ+メニュー上部	ヘッダー
メニューバー	ナビゲーション
大きな画像+キャッチ	メインビジュアル
カード並び	カードセクション
問い合わせフォーム	お問い合わせ
開閉パネル	アコーディオンメニュー
下部情報	フッター
横スクロール	スライダー
タブ切替	タブメニュー
表組み	テーブルセクション

注意事項

•スクショから直感的に判断: 見た目の塊で分ける
•提案後に必ず確認: 勝手に生成しない
•迷ったらユーザーに確認: 「この部分はXXXでいい？」
•auto-classと連携可能: セクション名確定後 → auto-classでクラス名付与
•人間風コメント: 自然な日本語で断定的に書く