AIでサイト更新を簡単にする | ClaudeをCMSとして使う構成の忘備録

構成概要

Claude.ai
  └─ Supabase MCPコネクター（接続済み）
  └─ Skill: supabase-web-content
        └─ project_id: my_project_id
        └─ table: public.posts
        └─ storage bucket: post-images

postsテーブルのスキーマ

画像のフルURLは https://my-project-id.supabase.co/storage/v1/object/public/post-images/<filename> で構成される。サイト側で postImageUrl(filename) が展開する。

Skillに書いたこと

• テーブルスキーマと各カラムの説明
• 画像はファイル名のみ保存するルール
• published = true にする前は必ず確認するルール
• slugはタイトルから自動生成（未指定時）
• updateは必ず updated_at = now() を含める
• 操作には execute_sql を使う

Skillファイルは .skill 形式でパッケージ化してインストール済み。

よく使う操作メモ

一覧取得

SELECT id, slug, title, date, published FROM posts ORDER BY date DESC;

作成

INSERT INTO posts (slug, title, date, img, content, published)
VALUES ('my-slug', 'タイトル', '2026-05-19', null, '# 本文', false)
RETURNING *;

公開

UPDATE posts SET published = true, updated_at = now() WHERE slug = 'my-slug';

削除（要確認）

DELETE FROM posts WHERE slug = 'my-slug';

再現手順（次回セットアップ時）

1. Supabaseでプロジェクト作成、postsテーブルとストレージバケット（post-images）を用意する
2. Claude.aiのコネクター設定からSupabase MCPを接続する
3. Skillファイルを作成し、スキーマ・ルール・project_idを記載する
4. .skill 形式にパッケージングしてインストールする
5. 動作確認：「記事一覧を見せて」と話しかけてみる