AGENTS.md — MUNOLOGY リポジトリ作業ガイド
人間・コーディングエージェント共通の作業規約。迷ったら Design.md を先に確認する。
プロジェクト概要
- Astro 5 静的サイト。記事は Content Collections(
src/content/articles/)。 - スタイル: Tailwind CSS +
src/styles/global.css(デザイントークンは:rootと Tailwindmun.*の両方で一致させる)。 - 本番 URL:
astro.config.mjsのsite(sitemap・OG の前提)。
ディレクトリ
| パス | 内容 |
|---|---|
src/pages/ | ルーティング。.astro が URL になる。 |
src/layouts/BaseLayout.astro | <html>、計測、唯一の <main id="main-content">、Header/Footer。 |
src/components/ | 再利用 UI。 |
src/content/ | articles コレクションとスキーマ config.ts。 |
public/ | 静的配信(画像・ファビコン)。 |
docs/ | Git 手順、方針文書。理念の正本は docs/PHILOSOPHY.md、前提チェックは docs/PREMISES.md。 |
docs/DESIGN.md | Google DESIGN.md 形式(トークン YAML+本文)。npm run design:lint。人間用の長文仕様は Design.md(大小文字非区別 FS ではルート DESIGN.md と混同しないよう docs/ 配下に置く)。 |
| レイアウト | src/styles/global.css の layout-shell / layout-narrow / layout-hero-inner 等。新規セクションは container mx-auto px-6 ではなく上記+ Design.md スペーシング節。 |
レイアウトと HTML の鉄則
- ページ
.astro内に<main>を置かない。スロットは既にBaseLayoutの<main>内にある。 - ページ全体のラッパーには
<div class="page-main …">を使う(ホームはヒーロー優先でpt-16なしでも可)。 - スキップリンクは
BaseLayoutが#main-contentに対して付与済み。idを変えない。
記事の追加・修正
src/content/articles/に.mdを追加(またはテンプレート_template*.mdを複製)。- フロントマターは src/content/config.ts の Zod スキーマ必須:
title,description,author,date,category,tags,id等。 draft: trueは本番ビルドから除外される。- スラッグはファイル名(拡張子除く)。日本語ファイル名は URL エンコードされるため、英語スラッグ推奨。
スタイル変更の「正」の所在
- Design.md — トークン・ルールの仕様書(人間可読の主文書)。
src/styles/global.css—:root変数、.markdown-content、.hero-gradient-text、.card-bg等。tailwind.config.mjs—theme.extend.colors.munとfontFamily.sans。- docs/DESIGN.md — エージェント向けの DESIGN.md 形式(
@google/design.mdでlint/export可能)。トークン追加時は Design.md / CSS / Tailwind に加え、docs/DESIGN.mdの YAML を揃え、npm run design:lintを通す。
新しい色を足す場合は 実装三箇所+ docs/DESIGN.md を同期する。
Tailwind の注意
- 動的クラス名は禁止(例:
`text-${x}-400`)。ビルドに含まれない。条件分岐で 完全なクラス文字列をマップする。 - 記事カードのカテゴリ色は src/components/ArticleCard.astro のパターンに従う。
計測(GTM / GA)
- GTM を正(コンテナ ID は
BaseLayout参照)。GA4 測定 IDは GTM 経由で送る前提。 - ページ head に 二重の gtag 埋め込みを増やさない(二重送信防止)。変更時は docs/PREMISES.md 6 節と整合させる。
コマンド
npm install
npm run dev # 開発
npm run build # 本番ビルド
npm run preview # ビルドプレビュー
npm run type-check
(ESLint / Prettier は未導入。導入する場合は package.json と本ファイルを更新すること。)
Cursor / AI 向け
- ユーザールールで 日本語応答が指定されている場合がある(チャット側)。
- 大きなリファクタより、Design.md に書かれた範囲に収める。
.canvas.tsxを触る作業でなければ Canvas スキルは不要。
参考リンク
- docs/PHILOSOPHY.md — 存在理由と編集上の方針(迷ったら先にこれ)
- Design.md — トークン・コンポーネント・ Markdown ルール
- docs/DESIGN.md — 機械可読トークン(
npm run design:lint) - docs/PREMISES.md — ステークホルダー前提
- README.md — 起動・構造の概要