How to Add Product Page

How to Add Product Page

手順の概要

1. 商品写真を撮影し、/imgs/ に保存する
2. pnpm convimgs:upload で画像を処理・アップロードする
3. /l-add-product-page コマンドを実行し、対話形式で商品データとMDXテンプレートを生成する
4. 生成されたMDXファイルに商品説明・写真・仕様などを追記する
5. pnpm check でバリデーションを実行する

/l-add-product-page が行うこと

• 商品情報のヒアリング（名前、価格、仕様など）
• src/data/product-master-data.mjs へのデータ追加
• 必要な画像の存在チェック
• src/mdx/notes/ への MDX テンプレート生成
• TypeScript 型チェックとバリデーション

事前に準備するもの

商品写真

• 高解像度（幅1600px以上）
• 複数アングル推奨
• 保存先: /imgs/{slug}.jpg (または .png)
• 追加ビュー: /imgs/{slug}-view1.jpg など

画像処理

pnpm convimgs:upload

WebP（600w-2000w）、OGP画像、Mercari画像、Blurhashメタデータが生成される。

商品情報

• 商品スラッグ (URL用、例: zudo-stand-40)
• 表示名 (日本語、例: zudo-stand 40HP版)
• ブランド (brands.mjs に存在するもの)
• 説明文 (1-2文の概要)
• 価格 (税込・送料込)
• 仕様 (幅、素材など)

生成されるファイル

Product Master Data

場所: src/data/product-master-data.mjs

新商品は allProducts 配列の 先頭 に追加する（最新の商品が一覧の先頭に表示されるため）。

MDX テンプレート

場所: src/mdx/products/{slug}-intro.mdx

生成されるMDXは imgThumb: null に設定される。これにより product master data の imgSrc が自動的に使用され、画像の管理が一元化される。

MDX編集のポイント

テンプレート生成後、以下を追記する:

• 商品の詳細な説明
• 商品写真 (<ExImg>, <ImgsGrid> コンポーネント使用)
• 技術仕様
• ブランド情報
• 関連商品

バリデーション

pnpm check

TypeScript型チェック、ESLint、フォーマットチェック（Prettier、mdx-formatter）が実行される。

次のステップ

1. (任意) /l-add-mercari-item でMercari出品データを作成
2. 変更をコミットしてPRを作成
3. 開発サーバーで確認: pnpm dev

関連ドキュメント

• How to Add Mercari Item - Mercari出品データの作成
• Mercari Product Detail Text Writing Rules - テキストフォーマットガイドライン

スキルの場所

スキル定義ファイル: .claude/skills/l-add-product-page/SKILL.md