Communitygithub.com

AdityaPratamaS18/website-skill

クライアントやビジネス向けに、SEO最適化されたNext.jsウェブサイトを、概要からローンチ準備完了まで構築します。

website-skill とは？

このスキルは、クライアントからの簡単な依頼（「○○社のウェブサイトを作って」「この概要からサイトを構築して」「WordPressサイトをNext.jsにリビルドして」など）や、充填済みのディスカバリーブリーフ、会社案内PDF、提案書などのソースマテリアルから、フルスクラッチのSEO最適化済みNext.jsウェブサイトを構築するための手順を定義しています。 主な対象プラットフォームは、AIエージェント（Claude Code, Cursor, Codexなど）とNext.js（App Router）です。このスキルは、ブリーフの読み取り、ファクトシートの作成、クライアントへの質問、キーワードリサーチ、サイト計画、デザイン方針、ページ構築、SEOブロッキングチェック、プレビュー、そしてローンチまでの全フェーズをカバーします。 重要な特徴として、各フェーズの終わりにゲート（承認ポイント）が設定されており、AIエージェントが無断で次のフェーズに進むことを防ぎます。例えば、フェーズ1（ファクト）ではファクトシートの要約と不足情報をユーザーに提示し、フェーズ2（サイト計画）ではキーワードとURLのテーブルを表示して承認を得る必要があります。また、計画（site-plan.json）が唯一の真実の情報源として機能し、すべてのページのタイトル、説明、見出し、ルートを制御します。 さらに、このスキルには厳格なルールが組み込まれています。例えば、各サービスに1つのURLを割り当てる（ランキングのため）、1つのURLに1つのプライマリキーワード、アニメーション付き統計カウンターの禁止（スクリプト実行前に0が表示されるため）などです。ビルドゲートはスクリプトによって自動的に実行され、失敗点は根本原因から修正されます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/AdityaPratamaS18/website-skill/tree/HEAD/skills/website-skill
オリジナルを見る→すべてのスキルを見る

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

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

ウェブサイトスキル: 手順

このスキルは、1つのブリーフから1つのクライアントウェブサイトを作成します。各クライアントには、承認された計画、1つのコードベース、および1つのチェックスクリプトがあります。承認された計画が、ルート、タイトル、説明、見出し、およびサイトマップを制御します。

このドキュメントでは、<skill-dir> はこのファイルを含むフォルダ、<client-folder> はこのクライアント用のフォルダです。ユーザーがフォルダの規則を持っていない場合は、clients/<client>/ を使用してください。

事前要件

  1. このクライアントのメモ（存在する場合）を読んでください。該当するルールを2、3行でユーザーに伝えてください。
  2. ブリーフ、会社概要、ロゴ、写真を見つけてください。
  3. Node.js、Python 3、および rsync が利用可能であることを確認してください。

警告: ブリーフに記載されていない事実をサイトに記載しないでください。架空の証明書、クライアント名、数値、またはお客様の声は、クライアントにとって法的および信頼のリスクとなります。

フェーズ 1: 事実

  1. references/brief-intake.md を読んでください。
  2. 各ソースファイルをすべて読んでください。
  3. <client-folder>/site-brief/facts.md を作成してください。
  4. クライアントが現在のサイトを持っている場合は、クロールしてください。リダイレクトマップ用に各URLを記録してください。
  5. 事実が不足している場合は、<client-folder>/site-brief/questions-for-client.md を作成してください。

ゲート 1. ユーザーに事実シートの要約と不足事項のリストを表示してください。ユーザーが返信するまで停止してください。ユーザーが同意した場合にのみ、不足事項を続行してください。不足している事実を必要とするページは、計画から除外されるか、その事実なしで残ります。

フェーズ 2: サイト計画

  1. references/site-plan.md を読んでください。
  2. クライアントの市場向けにキーワードリサーチを実施してください。
  3. <skill-dir>/assets/site-plan.template.json を <client-folder>/site-brief/site-plan.json にコピーしてください。
  4. 各ページに1つのエントリを入力してください。
  5. 提案書が存在する場合は、計画と比較してください。スコープ内の各項目には、ページまたは機能が必要です。スコープ内のフォームには、server ホスティング、または合意された代替手段が必要です。
  6. 計画ゲートを実行してください。各 FAIL を修正してください。
python3 <skill-dir>/scripts/site_gate.py plan <client-folder>/site-brief/site-plan.json

ゲート 2. ユーザーに以下の列を含むテーブルを表示してください: URL、プライマリキーワード、月間ボリューム、タイトル。また、ホスティングの選択も明記してください。ユーザーが承認するまで停止してください。その後、計画に "approved_by" と "approved_on" として承認を記入してください。これらのフィールドがないと、ビルドゲートは失敗します。

フェーズ 3: スキャフォールド

  1. フォルダ <client-folder>/website/ を選択してください。
  2. スキャフォールドスクリプトを実行してください。このスクリプトはパスにスペースや大文字が含まれていても動作します。
bash <skill-dir>/scripts/scaffold.sh "<client-folder>/website" static
  1. 計画がサーバー機能を必要とする場合のみ（references/launch.md を参照）、static の代わりに server を使用してください。
  2. 承認された site-plan.json を src/lib/site-plan.json にコピーしてください。
  3. src/lib/site.ts 内の各 __FILL 値を事実シートの値で置き換えてください。
  4. node_modules/next/dist/docs/01-app/ にあるメタデータ、画像、フォント、静的エクスポートのガイドを読んでください。

注: Next.js はメジャーバージョン間で変更されます。node_modules 内のガイドはインストールされているバージョンに一致します。あなたのトレーニングデータは一致しません。

フェーズ 4: デザイン方針

  1. references/design-and-copy.md を読んでください。
  2. ロゴからカラーとタイプのトークンを作成し、globals.css に配置してください。
  3. ロゴから public/logo.webp、public/og.webp（1200 x 630 ピクセル）、および src/app/icon.png を作成してください。
  4. ヘッダー、フッター、およびホームページのみを構築してください。
  5. プレビューを開始してください。静的サイトの場合は、ビルド後に npx serve out -l 3210 を使用してください。サーバーサイトの場合は npm run dev を使用してください。
  6. ブラウザで http://127.0.0.1:3210 を開いてください。375、768、1280 ピクセルでページを確認してください。

注: 埋め込みブラウザは localhost に対して HTTP 431 を返す可能性があります。アドレス 127.0.0.1 にはこの問題はありません。

ゲート 3. ユーザーにホームページを表示してください。ユーザーがデザインを承認するまで停止してください。他のすべてのページはこのデザインを使用します。

注意: ゲート 3 の前に他のページを構築しないでください。後でデザインが変更されると、すべてのページの移行が発生します。

フェーズ 5: ページ

  1. references/seo-build-spec.md を読んでください。
  2. コンテンツを src/lib/ の型付きデータファイル（例: services.ts）に配置してください。ページファイルは薄く保ってください。
  3. 繰り返しのページタイプごとに、generateStaticParams を使用した1つの動的ルートを使用してください。
  4. pageMetadata() と getPage() を使用して、各タイトル、説明、H1 を計画から取得してください。
  5. クライアントの声で、購入者向けのコピーを作成してください。facts.md からの事実のみを使用してください。
  6. 仕様に従って内部リンクを追加してください。
  7. サイトをビルドしてください。
npm run build
  1. ビルドゲートを実行してください。各 FAIL をその原因で修正してください。パスを得るためにゲートを変更しないでください。
python3 <skill-dir>/scripts/site_gate.py build <client-folder>/website
  1. npx tsc --noEmit と npm run lint を実行してください。

フェーズ 6: レビュー

  1. 各ページタイプをブラウザで 375、768、1280 ピクセルで確認してください。
  2. 各CTA（電話、WhatsApp、メール、フォーム）を確認してください。
  3. ユーザーが要求する場合は、クライアント向けのページコピーを1つのドキュメントにまとめてください。references/design-and-copy.md に従ってください。
  4. ユーザーが指示した場合にのみ、プレビューをデプロイしてください。プレビュービルドはインデックス可能ではありません。

ゲート 4. ユーザーにプレビューURLとゲート結果を提供してください。ユーザーがローンチを承認するまで停止してください。

フェーズ 7: ローンチ

  1. references/launch.md を読んでください。
  2. SITE_INDEXABLE=1 を指定してビルドしてください。
  3. --release を指定してビルドゲートを実行してください。ゲートは合格する必要があります。
  4. references/launch.md のローンチ手順を実行してください。

警告: 現在のセッションで承認がないまま、ドメインを接続したり、本番環境にプッシュしたりしないでください。ライブドメインはクライアントのビジネスに影響を与えます。

クローズアウト

  1. ユーザーに残っているクライアントアクションのリストを提供してください。
  2. このクライアントのメモに、パス、決定事項、教訓を記録してください。
  3. サイトがSEOコンテンツ作業の準備ができていることをユーザーに伝えてください。

固定ルール

ルール理由
各サービスに1つのURL1ページのサイトではサービスにランク付けできるURLが与えられない
各URLに1つのプライマリキーワード1つのキーワードに2つのページがあると、互いに競合する
計画がタイトルとルートの唯一の情報源ゲートはビルドされたHTMLを計画と比較する
アニメーション付き統計カウンターの禁止スクリプトが実行される前にHTMLに0が表示される
ゲートはスクリプトスクリプトがキャッチする各欠陥は、先に人間の目をすり抜けたものだ

参考文献

ファイル参照フェーズ
references/brief-intake.mdフェーズ 1
references/site-plan.mdフェーズ 2
references/design-and-copy.mdフェーズ 4 および フェーズ 6
references/seo-build-spec.mdフェーズ 5
references/launch.mdフェーズ 2（ホスティング）および フェーズ 7

関連スキル

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community