# AI エージェントに渡す

> Claude Code や Cursor などにそのまま貼れる指示文、Claude Code 用スキル（SKILL.md）の雛形、CLAUDE.md / AGENTS.md に書く短い版。

URL: https://sitekit.example/docs/agents

## 使い方

サイトを作った AI エージェントに、そのまま続きを頼めます。下の指示文をコピーして、エージェントに貼ってください。指示文の中で、エージェントに [llms-full.txt](https://sitekit.example/llms-full.txt)（このドキュメントの全文）を読ませています。

- サイト ID は先に決めておき、指示文の `<サイトID>` を書き換えます
- schema.json をサイトに反映するのは、いまは人の作業です。CLI・MCP サーバーで自動化できるようになる予定です （近日）

## 貼る指示文: お問い合わせフォームを付ける

```text
このサイトに SiteKit のお問い合わせフォームを付けてください。

まず https://sitekit.example/llms-full.txt を読んでください。SiteKit の仕様はそこに全部あります。書いていないことは推測で足さないでください。

サイト ID: <サイトID>
フォームの項目: お名前（必須）、メールアドレス（必須）、お問い合わせ内容

やること:
1. すべてのページの </body> の直前に次の1行を入れる
   <script src="https://cdn.sitekit.example/sitekit.js" data-site="<サイトID>" defer></script>
2. お問い合わせのページに <form data-sitekit-form="contact"> を作る。入力の name は schema.json の fields[].key と同じにする
3. フォームの中に、ボット対策の隠し入力を必ず入れる
   <input type="text" name="_hp" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px" aria-hidden="true">
4. フォームの外（フォームと同じ親の直下）に、成功とエラーの表示を置く
   <div data-sitekit-success role="status" aria-live="polite" hidden>お問い合わせありがとうございました。</div>
   <div data-sitekit-error role="status" aria-live="polite" hidden></div>
5. 入力の誤りを示す CSS を足す: [aria-invalid="true"] { border-color: #c00; }
6. schema.json を作る。forms[].key は "contact"、fields の key は 2 の name と一致させる。メールの項目は type: "email" にする（お礼メールの宛先になる）
7. 最後に、作った schema.json と、変更したファイルの一覧を見せる

守ること:
- 送信処理の JavaScript・fetch・hidden 項目は書かない（script が全部やる）
- 同じ name を複数の入力に使わない（チェックボックスの群は name を分ける）
- 通知先（メール・Slack）は schema.json に書かない（管理画面の設定で決める）
```

## 貼る指示文: お店の人が直せる箇所を付ける

```text
このサイトの営業時間とお知らせを、SiteKit の管理画面からお店の人が直せるようにしてください。

まず https://sitekit.example/llms-full.txt を読んでください。仕様はそこに全部あります。

サイト ID: <サイトID>

やること:
1. script タグが無ければ </body> の直前に入れる
   <script src="https://cdn.sitekit.example/sitekit.js" data-site="<サイトID>" defer></script>
2. 営業時間の値が入っている要素に data-cms="hours.<項目>" を付ける。中の文言は消さない（CMS に届かないときにそのまま出る）
3. お知らせの一覧を <template data-cms-list="news" data-cms-limit="3"> で書き、1件も無いときの <template data-cms-empty="news"> も置く
4. schema.json に groups（key: "hours"）と collections（key: "news"）を書く
5. 作った schema.json と、変更したファイルの一覧を見せる

守ること:
- data-cms を付けた要素の中に、同じタグ名の要素を入れない（<div data-cms> の中に <div> を入れない。別のタグを使う）
- 1つの要素に data-cms 系の属性は1つだけ。data-cms-attr も1要素に1つ
- <script> と <style> の中に data-cms を書かない
- タグ名と属性名は小文字
```

## 守ること（チェックリスト）

エージェントの作業を確かめるときにも使えます。

- [ ] script は `src="https://cdn.sitekit.example/sitekit.js"` と `data-site` の1行。`integrity` は付けない
- [ ] フォームは `data-sitekit-form="<forms[].key>"`。属性名は `data-sitekit-form` / `data-sitekit-success` / `data-sitekit-error` の3つだけ
- [ ] `name="_hp"` の隠し入力がある（必須）
- [ ] 入力の `name` が schema.json の `fields[].key` と一致している。`forms[].key` がフォームの属性の値と一致している
- [ ] 成功の表示はフォームの外。`role="status" aria-live="polite"` がある
- [ ] 送信処理の JavaScript・hidden 項目を書いていない
- [ ] schema.json の key は英小文字で始まり、英小文字・数字・`_` だけ（40 文字まで）
- [ ] `data-cms` の中の静的な文言は、それだけで意味が通る
- [ ] 中継（Cloudflare Pages）を使うなら `data-embed` を付けていない

## Claude Code 用スキル（SKILL.md）の雛形

`.claude/skills/sitekit-setup/SKILL.md` に置くと、Claude Code が「フォームを付けて」などの依頼で読みます。サイト ID を書き換えて使ってください。

````markdown
---
name: sitekit-setup
description: 静的サイトに SiteKit のお問い合わせフォームや、お店の人が管理画面から直せる箇所（CMS）を付けるときに使う。「フォームを付けて」「問い合わせを受けたい」「営業時間を管理画面で直せるように」「お知らせを更新できるように」などの依頼で読む。
---

# SiteKit を組み込む

仕様の正本は https://sitekit.example/llms-full.txt。作業の前に必ず読み、書いていないことは推測で足さない。

- サイト ID: <サイトID>
- script: <script src="https://cdn.sitekit.example/sitekit.js" data-site="<サイトID>" defer></script>（全ページの </body> の直前）

## フォーム

1. `<form data-sitekit-form="<key>">` を作る。key は schema.json の forms[].key と同じ
2. 入力の name は forms[].fields の key と同じにする
3. ボット対策の `<input type="text" name="_hp" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px" aria-hidden="true">` を必ず入れる
4. `<div data-sitekit-success role="status" aria-live="polite" hidden>` と `<div data-sitekit-error role="status" aria-live="polite" hidden>` をフォームの外（同じ親の直下）に置く
5. メールの項目は type: "email"（お礼メールの宛先になる）
6. 送信処理の JavaScript・fetch・hidden 項目は書かない
7. 同じ name を複数の入力に使わない
8. 通知先は schema.json に書かない（管理画面の設定で決める）

## 直せる箇所

1. グループの値は `data-cms="<group>.<field>"`。中の静的な文言は残す
2. 一覧は `<template data-cms-list="<collection>">`、空のときは `<template data-cms-empty="<collection>">`
3. 印を付けた要素の中に同じタグ名の要素を入れない。1要素に印は1つ。data-cms-attr も1つ
4. `<script>` / `<style>` の中に印を書かない。タグ名・属性名は小文字

## 終わったら

- 作った schema.json と、変更したファイルの一覧を見せる
- schema.json の key・HTML の name・data-sitekit-form の値が一致しているかを表にして確かめる
- schema.json の反映と、管理画面での通知先の設定は人に頼む
````

## CLAUDE.md / AGENTS.md に書く短い版

プロジェクトの `CLAUDE.md`（Claude Code）や `AGENTS.md`（Codex・Cursor など）に足しておくと、毎回の指示で同じことを書かずに済みます。

```markdown
## SiteKit（CMS とフォーム）

- 仕様: https://sitekit.example/llms-full.txt（作業の前に読む。書いていないことは足さない）
- サイト ID: <サイトID>。script は全ページの </body> の直前に1行: <script src="https://cdn.sitekit.example/sitekit.js" data-site="<サイトID>" defer></script>
- フォームは <form data-sitekit-form="<forms[].key>">。入力の name は schema.json の fields[].key と一致。name="_hp" の隠し入力は必須。成功・エラーは data-sitekit-success / data-sitekit-error（フォームの外）
- 直せる箇所は data-cms="<group>.<field>"。印の要素の中に同じタグ名を入れない。1要素に印は1つ
- 送信処理の JavaScript・hidden 項目は書かない。通知先は schema.json ではなく管理画面
```

## MCP サーバーを使う場合 （近日）

MCP サーバーを使えるようになると、エージェントが schema.json の作成・反映、テスト送信、お問い合わせの確認まで行えるようになる予定です（[CLI・MCP・API キー](https://sitekit.example/docs/cli-mcp)）。