プロンプトライブラリに戻る
プロンプトライブラリチャットプロンプト

フロントエンド状態バグチャット

症状、ルート変更、古い props、最小再現手順からフロントエンドの状態バグを分析します。

フロントエンドエンジニアリングテスト
プレビュー

チャットプロンプト

推奨モデル

GPT-5.1 Codex

出力形式

フロントエンド状態デバッグメモ

プレビュー

チャットプロンプト

チャットスレッド

プロンプトレールの Use ボタンで URL クエリは更新されますが、クライアントナビゲーション後も textarea には前のプロンプトが残ります。

症状: URL は変わるが、textarea の状態が更新されません。 古い状態が疑われる箇所: クエリのハイドレーションが初回マウント時にしか走っていません。 再現手順: 同じモデルページで 2 枚のプロンプトカードをクリックします。 最小修正: 検索パラメータを監視し、関連値が変わったときだけ同期します。 テスト: 直接読み込みと同一ページ内ナビゲーションの両方で textarea が再入力されることを確認します。

出力

症状 / 古い状態が疑われる箇所 / 再現手順 / 最小修正 / テスト

症状、ルート変更、古い props、最小再現手順からフロントエンドの状態バグを分析します。

完全なプロンプト

フロントエンド状態バグチャット

症状、ルート変更、古い props、最小再現手順からフロントエンドの状態バグを分析します。

推奨モデル: GPT-5.1 Codex出力形式: フロントエンド状態デバッグメモ
完全なプロンプト
チャットプロンプト
あなたは Next.js ページの状態挙動をデバッグしているフロントエンドエンジニアです。提供されたメモを、チームが実行に移せる実用的なレビューに変換してください。回答は、症状、古い state が疑われる箇所、再現手順、最小修正、テストの構成で返してください。すべての主張は提供されたメモに基づけてください。不足している事実は作り出さず、不足として明示してください。

使用メモ

実際のメモ、制約、参照資料を貼り付けてください。レビューに必要な場合を除き、個人情報や機密データは含めないでください。

プロンプト FAQ

このプロンプトを使う前に

入力、モデル適性、結果を弱めずにテンプレートを調整する方法をすばやく確認できます。

フロントエンド状態バグチャットはいつ使うべきですか?

症状、ルート変更、古い props、最小再現手順からフロントエンドの状態バグを分析します。すでにメモ、制約、またはラフな下書きがあり、チームがレビューできる構造化された次の一手が必要なときに使用します。

実行前に何を含めるべきですか?

参照資料、対象読者、制約、主要な事実、回答が作り出してはいけない境界条件を含めてください。出力は、症状 / 古い状態が疑われる箇所 / 再現手順 / 最小修正 / テストとして整理されます。

スレッドプレビュー

プロンプトレールの Use ボタンで URL クエリは更新されますが、クライアントナビゲーション後も textarea には前のプロンプトが残ります。
症状: URL は変わるが、textarea の状態が更新されません。 古い状態が疑われる箇所: クエリのハイドレーションが初回マウント時にしか走っていません。 再現手順: 同じモデルページで 2 枚のプロンプトカードをクリックします。 最小修正: 検索パラメータを監視し、関連値が変わったときだけ同期します。 テスト: 直接読み込みと同一ページ内ナビゲーションの両方で textarea が再入力されることを確認します。

出力

症状 / 古い状態が疑われる箇所 / 再現手順 / 最小修正 / テスト

このモードの他のプロンプト

チャットスレッド

小規模ECチーム向けに、製品写真をキャンペーン素材へ変換するAIアシスタントを作りたいです。

課題仮説: 小規模ECチームは、生の製品写真をチャネル別のキャンペーン素材に変換する作業で時間を失っている。 最もリスクの高い前提: 写真品質が十分に高いこと、チームがAIによる素材バリエーションを信頼すること、本当のボトルネックがレビュー時間であること。 調査質問: キャンペーン素材制作の担当者は誰か、修正はどこで滞るか、どの品質基準が公開を止めるか。 検証計画: 5人の運用担当者にインタビューし、3つのプロンプト主導の素材フローを試し、最初に承認可能な素材ができるまでの時間を比較する。 意思決定ゲート: 現在のワークフローより早く公開可能なドラフトに到達できる場合のみ継続する。

チャットスレッド

個人コンサルタント向けの新しいAIノート製品を検討しています。これをリサーチブリーフにしてください。

目的: 個人コンサルタントにAIノートワークスペースが必要なのか、より軽いクライアントフォローアップ層が必要なのかを定義する。 作業中の前提: 彼らはすでにノートを取っているが、統合整理と次ステップの下書きが一貫していない。 対象読者: 継続的なクライアント通話があり、運用サポートが限られている個人コンサルタント。 主要な問い: どのノートが請求可能な仕事になるのか、通話後に何が失われるのか、CRMツールはどこで重すぎると感じられるのか。 リサーチ計画: 6件のインタビューを行い、直近10件の通話ノートワークフローをレビューし、フォローアップブリーフのプロトタイプを1つテストする。

チャットスレッド

こちらが私たちの AI プロダクト用ランディングページのアウトラインです。デザイン前に分かりにくい点を教えてください。

中核となる約束: 見えてはいるが、具体的なユーザー成果ではなく機能として語られている。 分かりにくい点: 誰が最初に価値を得るのか、サインアップ後にどのワークフローが変わるのかをページが説明していない。 例のギャップ: 前後比較の例、モデル出力サンプル、ヒーロー近くの短い信頼シグナルを追加する。 CTA の問題: 主なアクションが説明の後ろに出てくる。利用目的に沿った CTA をクイックユースセクションの近くへ移動する。 修正計画: ヒーローを鋭くし、成果カードを追加し、ビジュアルを磨く前に反論を書き直す。