イベントページ作成
新しいイベントページを対話的に作成します。
ディレクトリ構成
_assets/ は常に作成する。その他は必要な場合のみ。
src/pages/{year}/{month}/
├── _assets/ # 画像（hero.webp等）、PDF
├── _components/ # 全コンポーネント（共有なし、すべてイベント固有）
├── _config/ # 設定ファイル（必要な場合）
├── _scripts/ # イベント固有スクリプト（必要な場合）
├── _styles/
│ └── variables.css # テーマ変数の上書き（テーマ変更時のみ）
└── *.astro # ページファイル
コンポーネント化の方針
- すべてのコンポーネントはイベント固有:
src/components/ は使用しない。
- ページ作成時、繰り返し使われる要素（見出し、カード等）は
_components/ に切り出す
- スタイルはイベントごとに毎回少しずつ変える（固定テンプレートにしない）
- フォーマルかつシンプルなデザインをベースに、自由にアレンジする
- テーマ変数（
--brand, --surface 等）とパレット（--blue-6 等）を活用
コンポーネントテンプレート
.claude/skills/create-event/templates/ に汎用コンポーネントのリファレンス実装がある。
| テンプレート | 用途 |
|---|
ButtonLink.astro | CTAボタンリンク（--brand, --surface 使用） |
MapFrame.astro | Google Maps埋め込み |
TimeTable.astro | スケジュール表 |
Bracket.astro | 装飾括弧テキスト（currentColor 使用） |
使い方:
- テンプレートの内容をイベントの
_components/ にコピーする
- そのまま使うか、イベントのデザインに応じてカスタマイズする
- テンプレートにないコンポーネント（Header, Footer, 見出し等）はスキルが新規作成する
カラーパレット
src/styles/palette.css に定義されたカラートークンを使用する。
- Gray:
--gray-0(明) 〜 --gray-9(暗) の10段階
- 色:
--{color}-2(明), --{color}-4, --{color}-6, --{color}-8(暗) の4段階
- 色の種類: blue, green, red, orange, violet, pink, indigo
テーマ変数
global.css で定義されるデフォルト値:
css
1:root {
2 --brand: var(--blue-6); /* メインカラー */
3 --surface: var(--gray-0); /* 背景色 */
4 --text-1: var(--gray-9); /* 本文テキスト */
5 --text-2: var(--gray-6); /* サブテキスト */
6 --line: var(--gray-4); /* ボーダー・区切り線 */
7 --font-serif: ...; /* セリフフォント */
8}
追加の色はパレットトークンをコンポーネント内で直接参照する（var(--pink-6) 等）。テーマ変数を増やさない。
イベント形式
| 形式 | 内容 |
|---|
| 宿泊あり | 2日間タイムテーブル、講師紹介、交流会、部分参加、持ち物 |
| 宿泊なし | 日時、講師、会場、申込リンクのみ。タイムテーブル不要 |
配色テーマ
| テーマ | 対応 |
|---|
| ライト（デフォルト） | variables.css不要 |
| ダーク | 暗い背景、白文字。variables.cssで --surface/--text-1/--text-2 を上書き。さらに color-scheme: dark を :root に追加するとスクロールバー・フォーム要素等もダーク化される |
| カスタム | メインカラーと背景を追加で質問 |
実行手順
Step 1: 基本情報の収集
AskUserQuestionツールで以下を質問：
-
形式（ヘッダー: "形式"）
- 宿泊あり（お泊まり会） - 2日間、タイムテーブルあり
- 宿泊なし（日帰り） - 日時・講師・会場・申込のみ
-
配色（ヘッダー: "配色"）
-
内容（ヘッダー: "内容"）
- サンプルで作成 - 仮データで雛形を生成
- 直接入力 - 詳細をテキストで入力
Step 2: 追加情報（必要な場合）
カスタム配色: メインカラー（ブルー/グリーン/オレンジ/パープル系）と背景（明るい/暗い）を質問
直接入力: ユーザーにテキストで以下を入力してもらう
- 年月、イベント名、開催日時、会場名、講師名（任意）、申込リンク（任意）
サンプル: 年月のみ質問
Step 3: ファイル生成
ブランチの提案: ファイル生成前に、新しいブランチで作業することを提案する。このプロジェクトは main push で自動デプロイされるため、ブランチを分けることでページ完成前の公開を防ぎ、レビュー後にマージできる。ブランチ名の例: git checkout -b event/{year}-{month}
以下の順序でファイルを作成する：
_assets/ ディレクトリ: ヒーロー画像用に .gitkeep ファイルを配置して作成（空ディレクトリは git に追跡されないため）_components/: テンプレート（templates/）があるコンポーネントはコピーして配置し、必要に応じてカスタマイズ。その他はスキルが新規作成_styles/variables.css: テーマ変更時のみindex.astro: メインページ（コンポーネントをインポートして使用）
宿泊あり:
- ヒーローセクション（テーマ聖句）
- 概要（日時、会場、講師、参加費）
- 講師紹介
- プログラム（2日間のタイムテーブル）
- 交流会・レクリエーション案内
- 申し込み（フォームリンク、期限）
- その他情報（部分参加、持ち物、アクセス、問い合わせ）
宿泊なし: シンプルな構成
- ヒーローセクション
- 概要（日時、会場、講師）
- 申し込み（フォームリンク）
- アクセス・問い合わせ
Step 4: 完了報告
- 作成したファイル一覧
- 確認方法:
pnpm run dev → http://localhost:4321/{year}/{month}/
- 次のステップ（
_assets/ にヒーロー画像を追加、内容編集など）
注意事項
- 日本語でコミュニケーション
- ページ内で繰り返す要素は
_components/ に切り出す
_assets/ ディレクトリは常に作成する（ヒーロー画像の追加先として）- すべてのコンポーネントをイベント固有の
_components/ に作成する（src/components/ は使用しない）
variables.css ではパレットトークンのみ使用する（例: --brand: var(--green-6);）。hex値（#2f9e44 等）は使わない- アニメーションには
prefers-reduced-motion 対応を追加する（@media (prefers-reduced-motion: reduce) で無効化）
