`**、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 形式](https://github.com/google-labs-code/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](./Design.md) スペーシング節。 | ## レイアウトと HTML の鉄則 - **ページ `.astro` 内に `

` を置かない**。スロットは既に `BaseLayout` の `

` 内にある。 - ページ全体のラッパーには `

` を使う（ホームはヒーロー優先で `pt-16` なしでも可）。 - **スキップリンク**は `BaseLayout` が `#main-content` に対して付与済み。`id` を変えない。 ## 記事の追加・修正 1. `src/content/articles/` に `.md` を追加（またはテンプレート `_template*.md` を複製）。 2. フロントマターは [src/content/config.ts](src/content/config.ts) の Zod スキーマ必須: `title`, `description`, `author`, `date`, `category`, `tags`, `id` 等。 3. `draft: true` は本番ビルドから除外される。 4. スラッグはファイル名（拡張子除く）。日本語ファイル名は URL エンコードされるため、**英語スラッグ推奨**。 ## スタイル変更の「正」の所在 1. **Design.md** — トークン・ルールの仕様書（人間可読の主文書）。 2. **`src/styles/global.css`** — `:root` 変数、`.markdown-content`、`.hero-gradient-text`、`.card-bg` 等。 3. **`tailwind.config.mjs`** — `theme.extend.colors.mun` と `fontFamily.sans`。 4. **docs/DESIGN.md** — エージェント向けの [DESIGN.md 形式](https://github.com/google-labs-code/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](src/components/ArticleCard.astro) のパターンに従う。 ## 計測（GTM / GA） - **GTM を正**（コンテナ ID は `BaseLayout` 参照）。GA4 測定 IDは GTM 経由で送る前提。 - ページ head に **二重の gtag 埋め込みを増やさない**（二重送信防止）。変更時は [docs/PREMISES.md](docs/PREMISES.md) 6 節と整合させる。 ## コマンド ```bash 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](./docs/PHILOSOPHY.md) — 存在理由と編集上の方針（迷ったら先にこれ） - [Design.md](./Design.md) — トークン・コンポーネント・ Markdown ルール - [docs/DESIGN.md](./docs/DESIGN.md) — 機械可読トークン（`npm run design:lint`） - [docs/PREMISES.md](./docs/PREMISES.md) — ステークホルダー前提 - [README.md](./README.md) — 起動・構造の概要