Communitygithub.com

brandvm/webflow-launch

完成したWebflowビルドを公開し、最初の1ヶ月を運営します。SEO計画とスキーマ、ローンチ前QA（コンテンツ、機能、デバイス、アクセシビリティ、速度、SEO、トラッキング）、ローンチ日（公開、リリース、リダイレクト、noindex解除）、クライアントへの引き継ぎ、30日間のフォローアップを含みます。wf-templateで構築されたWebflowサイトが承認されローンチに向かうとき、ローンチ当日、サイトをクライアントに引き渡すとき、またはローンチ後の確認のために使用します。

webflow-launch とは？

このスキルは、Webflowビルドが完了しデザイン承認された後、サイトを公開し最初の30日間を管理するための包括的なガイドです。wf-templateリポジトリ内のチェックスクリプト（pnpm wf:*）と連携し、Claudeが自動で実施するタスク・確認と人間が行うタスクを明確に区別します。主な機能は、SEO計画の策定とスキーマ実装、コンテンツ・機能・デバイス・アクセシビリティ・パフォーマンス・SEO・トラッキングに関する事前QA、セーフパブリッシュによる公開、301リダイレクトの適用、クライアントへの引き継ぎドキュメント作成、30日間の事後チェック（404監視、分析確認、既知課題の修正）です。Claude Codeまたは同様のAIエージェント上で動作し、スキル内で参照される他のスキル（webflow-performance-optimizer、asset-audit、safe-publish）が利用可能な場合はそれらを活用し、利用不可の場合は手動確認を行います。各項目の進捗はpnpm progressコマンドで記録され、結果は報告されます。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/brandvm/wf-mgt/tree/HEAD/.claude/skills/webflow-launch
オリジナルを見る→すべてのスキルを見る

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

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

Webflow ローンチ：承認済みビルド → 公開サイト → 最初の30日間

webflow-build スキルの ビルド引き継ぎ が終わったところから始まります。すべてのページがステージング上で完成し、デザインに対して承認されています。webflow-build の基本ルールは引き続き適用されます（明示的なOKなしに、コミット、プッシュ、カスタムドメインへの公開、リリース、DNS変更を行わないこと。チャットに認証情報を記載しないこと）。

タグ：[Claude] Claude が実行する · [Claude checks] Claude が確認して報告する · [Person] 人間が実行する。Claude は追跡することはできるが、実行したと主張してはならない。 コマンドは webflow-build のチェックスクリプット（pnpm wf:*、リポジトリから。--live を付けると訪問者が見る内容をチェック）です。リスト内で別のスキル（webflow-performance-optimizer、asset-audit、safe-publish）が指定されている場合、セッションにそのスキルがあれば使用し、なければ手動で確認を行い、その旨を伝えてください。

実行方法：

  1. 各項目を実行したら、pnpm progress tick "<checklist>" "<itemの始まり>" で記録します（pnpm wf:* スクリプトが決定した場合は --by check を付ける）。webflow-build › checklists.md › How to record progress を参照。Benchのタスクパネルに同じリストが表示されます。pnpm progress show で表示でき、人間自身のToDoも含まれます。
  2. 上から下に進め、各セクションの結果を次のセクションに移る前に報告します。
  3. 失敗したものは、「ローンチ前に修正」または「ローンチ後に修正」として既知課題リストに追加し、担当者を割り当てます。
  4. webflow-build のチェックスクリプトはライブドメインに対しても動作します。--live を渡し、確認時に stagingUrl をそのドメインに向けてください。

SEO計画（レビュー中、事前QA前）

SEOは最終段階で確認するだけでなく、計画的に構築されます。計画はリポジトリの docs/handoff/SEO-PLAN.md にあります（テンプレートには雛形があります）。現在ステージングで出力されているもの、手順、ページごとのスキーマ、クライアントから必要なもの。

  • [Claude] すべてのページとテンプレートを棚卸し：タイトルと説明（長さ含む）、Open Graphフィールドと画像、noindex、JSON-LD。ページ設定ではなく公開されたHTML（pnpm wf:seo）を読みます。
  • [Claude] 不足または弱いタイトルと説明のドラフトを作成；[Person] が承認；[Claude] がページ設定に書き込みます（テンプレートはMeta TitleとMeta Descriptionフィールドにバインド）。
  • [Claude] Open Graphは「SEOと同じ」をすべてのページで適用；[Person] がデフォルトの1200×630共有画像を承認；テンプレートは画像フィールドにバインド。
  • [Claude] Webflowが書き込まないサイト全体のタグ（og:site_name、og:locale）は loader.html のヘッドスニペットに追加：再ペーストして公開し、pnpm wf:install を実行。
  • [Claude] スキーマはJSON-LDファイルとしてリポジトリに、ページごとに1つ（docs/seo/schema/<page>.jsonld）、CMSテンプレート用に docs/seo/schema/templates.md（{Field} バインディング付き）。各項目はプロダクションドメイン上の1つのOrganizationを @id で参照。ファイルが信頼すべき情報源であり、ページのヘッドコード（またはページツールを介した jsonLdSchema、コネクタがある場合）はコピーです。単一行フィールドのみバインド：引用符や改行はJSONを壊し、アポストロフィは &#39; になります。
  • [Claude] 見出し計画：すべてのページとテンプレートで pnpm wf:outline を実行し、headings.md と照合。タグの修正はビルドに反映；[Person] がH1またはH2の文言変更を承認します（これはコピーです）。
  • [Claude] リダイレクトマップ（サイトが古いサイトを置き換える場合）：pnpm wf:redirects map（liveUrl の旧サイト、または --from）で docs/seo/redirects.csv をWebflowのインポート形式で作成；「要確認」と表示された行はすべて確認・編集。 [Person] がマップを承認し、サイトに既存の301リダイレクトがあればエクスポートします（インポートするとすべて置き換わる；--existing を付けて再実行）。
  • [Claude checks] サイトマップ内のすべてのページに、タイトル、説明、正規URL、1つのH1がステージング上にあること（pnpm wf:seo）。
  • [Claude checks] 重複したタイトルや説明がなく、実際の404ページがあること。長いタイトルや短い説明は修正されるか許容されること。スキーマがないページは seo.noSchemaOk にリストされていること。次に、各種類の1ページでGoogleのリッチリザルトテストを実行。
  • [Person] 正式な名前、住所、電話番号、営業時間、ソーシャルプロフィール、プロダクションドメイン（www または apex）を提供。

ローンチ前QA

コンテンツ

  • [Claude checks] プレースホルダーテキストや # リンクがないこと（pnpm wf:links、lorem ipsumも検出）。仮画像は既知課題と照合。
  • [Person] すべてのページを校正。
  • [Claude checks] 公開されたHTMLに data-manual-todo マーカーが残っていないこと（すべての手動ステップが完了）。docs/handoff/REVIEW.md › 「ローンチ前」がすべてチェック済み。
  • [Claude checks] 連絡先データ：電話番号は tel: リンクとして、住所、メール、営業時間。 [Person] が正しいことを確認。
  • [Claude checks] 法律関連ページが存在しフッターにリンクされていること。著作権年とソーシャルリンク。

機能

  • [Person] すべてのフォームを1回ずつ送信：正しい受信箱またはCRMに届き、確認画面が表示され、自動返信メールが送信される。（Claudeはスパム対策を通過できません。ヘッドレスブラウザはブロックされます。）
  • [Claude checks] すべてのリンクとボタンが機能すること（pnpm wf:links --external；外部の失敗は手動で確認。一部のサイトはボットをブロック）。
  • [Claude checks] 404ページ、ローディング状態、空状態、成功状態、エラー状態。
  • [Claude checks] 検索、フィルター、並び替え、ページネーション（ある場合）。
  • [Person] 決済：テスト購入と払い戻し（ある場合）。

デバイス、アクセシビリティ、速度

  • [Person] 実機：iPhone Safari、Android Chrome；デスクトップChrome、Safari、Firefox、Edge。
  • [Claude checks] すべてのページテンプレートで pnpm wf:overflow：2560pxから360pxのすべての幅で、右端にコンテンツがはみ出さず、横スクロールがないこと（ブレークポイント間のラップトップ幅を含む）。
  • [Claude checks] どのページにも深刻なまたは重大なアクセシビリティ違反がないこと、すべての幅で（pnpm wf:a11y --all-widths）。目標：WCAG 2.2 AA。
  • [Claude] すべてのページをキーボードのみで操作：フォーカスの可視性、順序、メニュー、ダイアログ、Escapeキー。
  • [Person] スクリーンリーダーによるスポットチェック。
  • [Claude checks] スマートフォンプロファイルでのパフォーマンス：目標値はCLS < 0.1、INP < 200 ms、LCP < 2.5 s（webflow-performance-optimizer）。デザインがトレードオフしているものを記録。

SEOとトラッキング

  • [Claude checks] サイトマップ内のすべてのページに、タイトル、説明、正規URL、1つのH1があること（pnpm wf:seo）。
  • [Claude checks] OGタグとJSON-LDがすべてのページでパース可能でHTMLエンティティを含まないこと。noindexは seo.noindexOk 内のページのみに設定されていること：その他のSEOレポート。代替テキスト（asset-audit）、ファビコン、SEO-PLAN.md で計画されたスキーマ。
  • [Claude checks] 正規URLがライブドメインを指していること（ドメインが接続された後：設定の liveUrl、その後 pnpm wf:seo --live --canonical）。
  • [Claude checks] pnpm wf:tracking --live（タグがドメインに設定された後。最初にステージングで読み込まれる場合、そちらでも確認）：どのページにどのタグが読み込まれるか、ページビューが二重カウントされないこと、Cookie選択前または「拒否」後にトラッキングしないこと、gclidとUTMがホストリダイレクト後も維持されること。データを送信するすべてのリクエストはブロックされるため、このチェックはクライアントのレポートに何も追加しません。アカウントが何かを受信したかどうかは判断できません。
  • [Person] GA4とコンバージョンが届いていること（リアルタイムレポート）、ライブサイトでCookieを受け入れた後。

ローンチ日

  • [Person] コンテンツフリーズに同意。公開承認と日付をクライアントから得る。
  • [Person] DNS：1日前にTTLを下げる；メールレコード（MX、SPF、DKIM）は維持。ClaudeはDNSやレジストラの設定を変更しません。
  • [Claude] 明示的なOKを得て：ライブドメインに公開（safe-publish が利用可能な場合：変更内容を表示、確認、公開）。リポジトリのリリースを作成し、ヘッドスニペットに RELEASE を設定（README › リリース）。
  • [Claude checks] pnpm wf:domain：証明書が信頼されていて期限切れ間近でないこと、httpおよびもう一方のwwwホストが liveUrl ホストに恒久的にリダイレクトされること、ドメインが45日以内に期限切れにならないこと。
  • [Claude checks] pnpm wf:install --live：公開されたスニペットが loader.html と一致すること（新しい RELEASE を含む）、viewportメタが1つだけ、localhostへのリクエストがないこと。
  • [Claude checks] pnpm wf:seo --live --canonical：seo.noindexOk 以外にnoindexが残っていないこと、すべての正規URLがライブドメイン上にあること。
  • [Claude] noindexとステージングパスワードを削除；robots.txtがインデックスを許可していること。
  • [Claude] ライブサイトのビジュアルベースラインを保存（pnpm wf:baseline save --live、pages 内のすべてのページ）し、コミット。
  • [Claude] 301リダイレクトを適用：[Person] が docs/seo/redirects.csv をインポート（サイト設定 › 公開 › 301リダイレクト › インポート）して公開；[Claude checks] pnpm wf:redirects test --live：すべての行が1回の恒久的なホップで目的のページに到達すること。
  • [Claude checks] sitemap.xml が存在すること（サイト設定 › SEO › サイトマップを自動生成）。かつ /design/style-guide や /design/media をリストしていないこと：サイトプランが適用された後（適用前は403が返る）、サイトマップツールで両方を除外。
  • [Person] Search Consoleにsitemap.xmlを送信。
  • [Person] ライブサイトでフォームを送信し、アクセスを分析ツールで確認。

クライアントへの引き継ぎ（公開承認済み）

すべて [Person] が実施、Claudeは書類を準備できます：

  • ライブサイト；所有権移行（Webflowサイト、ホスティング料金、ドメイン、デザインファイル、フォント・画像ライセンス）。[Claude] 移行すべきものをリスト化：レジストラ、DNSホストと更新日（pnpm wf:domain）、ID付きタグ、ページが読み込むサードパーティサービス（pnpm wf:tracking --live）。
  • CMSトレーニング（録画）とトレーニングノート（[Claude] がCMSノートからドラフト作成）。
  • アナリティクス、タグマネージャー、Search Consoleへのアクセス。
  • 認証情報の返却；エージェンシーアクセスは削除するか、サポート契約のもとで維持。
  • サポート条件と最初の改善ロードマップ。

ローンチ後（最初の30日間）

  • [Claude checks] 1～3日目：404とリダイレクトチェーンをクロール（pnpm wf:links --live --external）；[Person] がSearch Consoleのカバレッジを確認し、「見つかりません（404）」URLをエクスポート；[Claude checks] pnpm wf:redirects test --live --file <export> を実行し、失敗したものはマップに行を追加。
  • [Person] 1週目：リードが届いているか、アナリティクスの数値が正しいか。
  • [Person] 2～4週目：インデックス状況とトラフィックをベースラインと比較。
  • [Claude] 既知課題リストのローンチ後項目を修正。
  • [Person] 30日目のチェックイン、振り返り、推薦文またはケーススタディ。
  • [Claude checks] チェックイン時（および以降のサポート訪問時）に pnpm wf:domain：更新期限が迫っているものは、支払い担当者に通知。
  • [Claude] 以降のリリース前には、ステージングに公開した後 pnpm wf:baseline compare --live を実行：すべての変更が予期されたものか、または修正されていること。
  • [Claude] プロジェクトの新しい template-candidate GOTCHAS をテンプレートに提案（webflow-build › rules.md › Contributing）；テンプレートは pnpm harvest で収集。

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

brandvm/webflow-audit

Work on a Webflow site that is already live, without breaking it: a read-only audit first (visual baselines, speed as the median of several runs, accessibility, links, SEO and schema, CMS, custom code and interactions), a status tracker from the client's own checklist, a rollback point, then small batches that go to staging, are verified, and reach the live domain only when the person types "publish". Use when auditing or improving an existing live Webflow site (speed, SEO, accessibility, cleanup), moving a live site's custom code onto wf-template, or doing a one-off fix on a live site (a broken link, a carousel, a form). For a new site, use webflow-build.

brandvm/webflow-build

Build a Webflow site in Webflow from its approved localhost prototype (built first from the Figma design, in Bench or by Claude), with the Webflow MCP and this wf-template repo: variables, tag styles, classes and CMS, the repo port and loader, the style guide page, the media page, components, then pages section by section, each verified against the prototype at four widths, up to the build handoff. Use when building prototype pages from Figma frames, starting or continuing a Webflow build (Designer through the MCP plus JS/CSS in the repo), building components or pages, comparing Webflow staging with the prototype, checking anchors, page transitions, load flicker or the published HTML, or wrapping up a build session. For project setup, the inputs and the Webflow snapshot, use webflow-prototype; for launch, webflow-launch; for a site that is already live, webflow-audit.

brandvm/webflow-prototype

Start a Webflow project and build its Figma design as a localhost prototype that mirrors Webflow, before anything is written to Webflow. Covers setting up the repo and workspace from wf-template (pnpm new-project, or Bench's Add client from a Figma design), collecting the inputs, reading the Figma file, taking the Webflow snapshot, building the style guide and then each page with the site's own variables and class names, and the handoff pack for the Webflow build. Use for "New project: Webflow site <name>, Figma <link>", setting up a repo and workspace, reading a Figma file, starting or continuing a localhost prototype, proposing variables and classes, or preparing the handoff to the Webflow build. For building in Webflow, use webflow-build.

brandvm/webflow-style-guide

Make or update a Webflow site's style guide page in the one fixed layout every site uses (a sidebar of sections, each section a list of rows with the name on the left and the live specimen on the right), first in the localhost prototype and then in Webflow at /design/style-guide. Use when starting a project's style guide, when the style guide is the first page of a prototype or of a Webflow build, when a new class or component needs its row, when checking that every class is on the page before running Webflow's "Clean up unused styles", or when adding a style guide to an existing site.

関連スキル

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