Community画像github.com

テンプレートブランド変更

Next.js App Routerプロジェクト(およびオプションでNestJS API)を新しいブランドに変更します。名前、ワードマーク、色、ロゴ・アイコンファイル、各ロケールのコピー、メタデータ・SEOタイトル、メール、シードデータを更新し、古い名前が完全に削除されたこととビルドがすべて成功することを確認します。

テンプレートブランド変更 とは?

このスキルは、Next.js App Routerプロジェクト(および付随するNestJS API)を新しいブランドに全面的にリブランドするためのステップバイステップのガイドです。開発者が「テンプレートをリブランドしてほしい」「ホワイトラベルにしてほしい」「新しいビジネス向けにリネームしてほしい」と依頼されたときに使用します。一連のチェックスクリプト(`rebrand-check.mjs`)を用いて、各変更ステップの後で古い名前が残っていないことを検証しながら作業を進めます。ブランド設定ファイル、色・ロゴ・アイコン、全ロケールのテキスト、SEOメタデータ、メール、シードデータを漏れなく更新し、最後にすべてのビルドが成功することを確認します。パッケージ名や環境変数など、インストールや既存データを壊すものは変更しません。このスキールはClaude Codeエージェント向けに設計されており、AIが自律的にブランド変更作業を実行し、結果をレポートとしてまとめることができます。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/aniq-ui-pro/agent-skills/tree/HEAD/skills/template-rebrand

Installed? Explore more 画像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Next.js(およびNestJS)プロジェクトをリブランドする

手順を順番に実行してください。各ステップの最後にはチェックが含まれています。それを実行し、見つかった問題を修正してから次のステップに進みます。CHECKは、プロジェクトルートで以下のコマンドを実行することを意味します。

node ${CLAUDE_SKILL_DIR}/scripts/rebrand-check.mjs check \
  --old "旧名称" --old "他のスクリプト内の旧名称" \
  --new "新名称" --new "他のスクリプト内の新名称"

旧名称が一般的な単語(例:STORE)の場合は --case を追加し、意図的に旧名称を残すファイルには --allow <path> を使用します。盲目的な検索置換は絶対に行わないでください。

0. 概要、マッピング、ベースライン

  1. プロジェクトで使用されている旧名称のすべての形式(各言語、スラッグ、メールドメイン)と、新名称の各言語、ブランドカラー、ロゴファイル、トーンを書き出します。リクエストで指定がない場合は、適切な値を選択し、そのまま進めて選択内容をレポートに記載します。
  2. node ${CLAUDE_SKILL_DIR}/scripts/rebrand-check.mjs map を実行します。
  3. マップから各アプリのビルドコマンドを、編集前に一度実行します。

チェック: マップ、削減すべきCHECKヒット数、およびすべてのビルドの結果が得られていること。すでに失敗しているビルドは、リブランドが原因ではないと記録します。

1. 名称とワードマーク

ブランド設定ファイル、ロゴコンポーネント、Webアプリマニフェスト、およびシードが書き込む設定行(メール送信者名がよくあります)。パッケージ名、環境変数名、データベース名、Dockerボリューム、ストレージプレフィックスは、依頼がない限り変更しないでください。これらを変更するとインストールや既存データが壊れます。

チェック: CHECKが「brand config」の下で0ヒットと表示すること。意図的に残したインフラ関連のヒットはレポートに記載します。

2. 色

マップにリストされたテーマファイル内のブランドトークン(ライトおよびダーク)、マニフェストまたはビューポート内のブラウザテーマカラー。コンポーネント内に色が直接書き込まれていないこと。

チェック: 各旧ブランドカラーに対して --old "#oldhex" を指定したCHECKが0ヒットと表示し、新しい色のテキストが両方のテーマで4.5:1のコントラストを維持していること。

3. ロゴとアイコンファイル

マップにリストされたワードマーク、マーク、ファビコン、アプリアイコン、共有画像を置き換えます。ファイル名とサイズを維持するか、すべての参照を更新します。各新しいファイルを開いて確認します。

チェック: CHECKがpublic/から不足している画像パスを0件と報告し、意図的に残したものを除き、旧名称を含むファイル名やフォルダ名が存在しないこと。

4. 全ロケールのコピー

単なる名称変更ではなく書き換え:ヒーロー、アバウト、フッター、リーガル、サポート、SEO、および旧事業を説明するすべての文章。すべてのロケールで同じキーを使用し、各言語はネイティブで記述します。

チェック: CHECKが「messages」の下で0ヒットと表示し、ある言語では新名称が使われているが別の言語では使われていないロケールやメッセージファイルが存在しないこと。

5. メタデータとSEO

ルートおよびページレイアウト、generateMetadata、タイトルテンプレート、Open GraphおよびTwitterフィールド、JSON-LD、サイトマップ、robots、マニフェストの name と short_name。

チェック: CHECKが「metadata and SEO」の下で0ヒットと表示すること。

6. メール

APIが送信する各言語の送信者名、件名、ヘッダーとフッター、リンク。送信者アドレスとドメインは環境変数から取得します。レポートに記載します。

チェック: CHECKが「emails」の下で0ヒットと表示すること。

7. シードとモックデータ

シーダー、フィクスチャ、モックカタログ:製品、カテゴリ、設定行、デモアカウントのメールドメイン、画像パス。APIシードとフロントエンドのモックデータが一致していること。

チェック: CHECKが「seed data」の下で0ヒットと表示すること。

8. ビルドと最終チェック

各アプリのビルドコマンドを再度実行します。エラーを修正してすべてが成功するまで続けます。依頼がない限り、開発サーバーや本番サーバーを起動しないでください。

チェック: すべてのビルドが終了コード0で終了し、その後CHECKが Result: PASS と表示すること。

レポート

ステップごとに変更したファイル、概要で指定されなかった項目に対して行った選択、許可したヒットとその理由、ビルド結果、および人に残された作業(ドメイン、DNS、メール送信者、法的テキスト)。

関連スキル