ai-cli-command-reference/index.html at main · Yayutom/ai-cli-command-reference · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="description"
      content="Unofficial practical reference for Codex CLI and Claude Code TUI / slash commands, organized by the job you want to do."
    />
    <meta property="og:title" content="AI CLI Command Reference" />
    <meta
      property="og:description"
      content="Codex CLI と Claude Code の TUI / slash command を同一機能ごとに横並びで比較・コピーできる実務リファレンス。"
    />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://yayutom.github.io/ai-cli-command-reference/" />
    <meta name="twitter:card" content="summary" />
    <title>AI CLI Command Reference</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <a class="skip-link" href="#main">本文へ移動</a>

    <header class="topbar">
      <div class="brand">
        <span class="brand-mark" aria-hidden="true">C</span>
        <div>
          <p class="eyebrow">Side-by-side command reference</p>
          <h1>AI CLI Command Reference</h1>
        </div>
      </div>
      <div class="topbar-meta" aria-label="検証情報">
        <span>Codex CLI 0.141.0</span>
        <span>Claude Code 2.1.183</span>
        <span>2026-06-20 検証</span>
      </div>
    </header>

    <main id="main" class="page-shell">
      <section class="intro-band" aria-labelledby="intro-title">
        <div class="intro-copy">
          <p class="project-kicker">Unofficial practical reference for Codex CLI and Claude Code</p>
          <h2 id="intro-title">TUI で打つコマンドを主役にした対応表です。</h2>
          <p>
            起動コマンドは最初だけ。日常的に使う slash command を横並びにし、CLI でしか使わない操作は補助として残しています。
          </p>
        </div>
        <div class="intro-side">
          <div class="launcher-box" aria-label="起動コマンド">
            <p>起動だけ</p>
            <div class="launcher-grid">
              <div>
                <span>Codex</span>
                <div class="copy-row compact">
                  <code class="cmd-line">codex</code>
                  <button class="copy-button" type="button" data-copy="codex">Copy</button>
                </div>
              </div>
              <div>
                <span>Claude Code</span>
                <div class="copy-row compact">
                  <code class="cmd-line">claude</code>
                  <button class="copy-button" type="button" data-copy="claude">Copy</button>
                </div>
              </div>
            </div>
          </div>
          <div class="source-strip" aria-label="参照元">
            <a href="https://developers.openai.com/codex/cli/reference" target="_blank" rel="noreferrer">Codex CLI reference</a>
            <a href="https://developers.openai.com/codex/cli/slash-commands" target="_blank" rel="noreferrer">Codex slash commands</a>
            <a href="https://code.claude.com/docs/en/cli-reference" target="_blank" rel="noreferrer">Claude CLI reference</a>
            <a href="https://code.claude.com/docs/en/commands" target="_blank" rel="noreferrer">Claude commands</a>
          </div>
        </div>
      </section>

      <section class="control-band" aria-label="検索と表示切替">
        <label class="search-field">
          <span>検索</span>
          <input id="searchInput" type="search" placeholder="例: review, MCP, resume, /plan" autocomplete="off" />
        </label>
        <div class="segmented-control" role="tablist" aria-label="表示">
          <button class="segment is-active" type="button" data-view="compare">TUI 対応</button>
          <button class="segment" type="button" data-view="cli">CLI 一覧</button>
          <button class="segment" type="button" data-view="slash">Slash 一覧</button>
          <button class="segment" type="button" data-view="unique">片側のみ</button>
        </div>
        <div class="filter-row" aria-label="絞り込み">
          <select id="toolFilter" aria-label="ツール">
            <option value="all">両方</option>
            <option value="codex">Codex</option>
            <option value="claude">Claude Code</option>
          </select>
          <select id="parityFilter" aria-label="対応関係">
            <option value="all">対応すべて</option>
            <option value="same">同等</option>
            <option value="similar">近い</option>
            <option value="codex-only">Codex のみ</option>
            <option value="claude-only">Claude のみ</option>
          </select>
        </div>
      </section>

      <section class="stats-grid" aria-label="登録件数">
        <div class="stat-block">
          <span id="statPairs">0</span>
          <p>機能対応</p>
        </div>
        <div class="stat-block">
          <span id="statCodex">0</span>
          <p>Codex コマンド</p>
        </div>
        <div class="stat-block">
          <span id="statClaude">0</span>
          <p>Claude Code コマンド</p>
        </div>
        <div class="stat-block">
          <span id="statSlash">0</span>
          <p>Slash commands</p>
        </div>
      </section>

      <section id="results" class="results" aria-live="polite"></section>
    </main>

    <footer class="footer">
      <p>
        Source: local <code>codex --help</code>, <code>claude --help</code>, OpenAI Codex docs, and Claude Code docs.
        Commands change quickly; verify destructive or account-affecting operations before use.
      </p>
    </footer>

    <script src="./script.js" defer></script>
  </body>
</html>