📦
prompt-engineering-patterns
86本番環境向けLLMプロンプトを最適化
LLMプロンプトは、指示、例、評価基準が不明確なために失敗することがよくあります。このスキルは、Claude、Codex、Claude Code、および同様のツールでプロンプトを改善するためのテンプレートとワークフローを提供します。
生産性 表示
スキル nextjs-app-router-patterns
📦
nextjs-app-router-patterns
コンテンツリビジョン r1 安全 ⚙️ 外部コマンド🌐 ネットワークアクセス🔑 環境変数
より良い Next.js App Router アプリを構築する
Next.js App Router プロジェクトは、ルーティング、ストリーミング、キャッシュ、Server Components が相互に作用すると構造化が難しくなることがあります。このスキルは、Claude、Codex、Claude Code に、モダンな Next.js アプリケーションアーキテクチャの実践的なパターンを提供します。
対応: Claude Codex Code(CC)
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
エージェントリクエスト
Review the Skillstore skill "nextjs-app-router-patterns" from https://skillstore.io/skills/wshobson-nextjs-app-router-patterns.md and its manifest at https://skillstore.io/api/skills/wshobson-nextjs-app-router-patterns/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「nextjs-app-router-patterns」を使用しています。 商品一覧ページには、フィルター、ページネーション、高速な初回描画が必要です。
期待される結果:
- 推奨: ページは Server Component のままにし、フィルタリングされた商品を一覧の近くで取得します。
- 商品一覧の周囲に Suspense を使用し、フィルターと周辺レイアウトを先にレンダリングできるようにします。
- 商品データにはタグベースの revalidation を使用し、データベースアクセスの前にクエリパラメータを検証します。
「nextjs-app-router-patterns」を使用しています。 ダッシュボードには、独立した分析パネルとチームパネルが必要です。
期待される結果:
- 推奨: 独立して読み込まれるパネルには parallel routes を使用します。
- 各パネルに個別の読み込み状態を用意し、遅い分析データがチームデータをブロックしないようにします。
- 共有ナビゲーションとレイアウト状態は、親の dashboard layout に保持します。
「nextjs-app-router-patterns」を使用しています。 API route が商品作成リクエストを受け付けます。
期待される結果:
- 推奨: リクエストを解析し、スキーマで検証し、呼び出し元を認可し、フィールドを allowlist します。
- 検証エラーや存在しないレコードには明確なステータスコードを返します。
- 生の request body を永続化処理に直接渡すことは避けます。
セキュリティ監査
安全v7 • 2026/7/8 バージョン別レポートを開く
All static findings were false positives caused by Markdown code fences, TypeScript examples, documentation links, and placeholder data-fetching snippets. No evidence found of command execution, credential exfiltration, prompt injection, environment file access, or system reconnaissance in SKILL.md.
1
スキャンされたファイル
545
解析済み行数
0
レビュー項目
0
誤検知を無視
リスク要因
⚙️ 外部コマンド (23)
SKILL.md:33-44 SKILL.md:44-48 SKILL.md:48-92 SKILL.md:92-98 SKILL.md:98-137 SKILL.md:137-158 SKILL.md:158-162 SKILL.md:162-196 SKILL.md:196-200 SKILL.md:200-243 SKILL.md:243-245 SKILL.md:245-249 SKILL.md:249-285 SKILL.md:285-289 SKILL.md:289-352 SKILL.md:352-356 SKILL.md:356-398 SKILL.md:398-402 SKILL.md:402-445 SKILL.md:445-449 SKILL.md:449-494 SKILL.md:494-500 SKILL.md:500-522
🌐 ネットワークアクセス (10)
🔑 環境変数 (2)
最新の完了済み静的・セマンティック監査では、確認済みのセキュリティ検出事項は見つかりませんでした。これは、スキルに副作用がないことを証明するものではありません。
監査者: codex 監査履歴を表示 →
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/wshobson-nextjs-app-router-patterns/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/wshobson-nextjs-app-router-patterns?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/wshobson-nextjs-app-router-patterns?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/wshobson-nextjs-app-router-patterns/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/wshobson-nextjs-app-router-patterns.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>学術引用 (APA · BibTeX · CFF)
APA形式の引用
wshobson. (2026). nextjs-app-router-patterns security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/wshobson-nextjs-app-router-patterns/audits/7BibTeX形式の引用
@techreport{wshobson-wshobson-nextjs-app-router-patterns-2026,
author = {wshobson},
title = {nextjs-app-router-patterns security audit report (audit version 7)},
institution = {Skillstore},
year = {2026},
number = {7},
url = {https://skillstore.io/skills/wshobson-nextjs-app-router-patterns/audits/7},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "nextjs-app-router-patterns security audit report (audit version 7)"
version: "unspecified"
type: report
authors:
- name: "wshobson"
date-released: "2026-07-08"
url: "https://skillstore.io/skills/wshobson-nextjs-app-router-patterns/audits/7"
identifiers:
- type: other
value: "skillstore:wshobson-nextjs-app-router-patterns:audit:7"
description: "Skillstore immutable audit report identifier"
バリアントを比較
インストール可能なバリアント 2 件各作者のスキルは個別のインストール項目として維持されます。推奨バリアントは Skillstore の証拠で順位付けされます。
このバリアントが首位の理由
Skillstore スコアが最高
Skillstore スコア
このスコアの理由 証拠の信頼度: 高 55
アーキテクチャ
85
保守性
87
コンテンツ
71
コミュニティ
78
仕様準拠
作成できるもの
新しい App Router プロジェクトを計画する
実装を開始する前に、ファイル規約、レンダリングモード、読み込み状態、ルート境界を選択します。
既存の Next.js ルートをモダン化する
Pages Router の習慣を、Server Components、layouts、route handlers を使った App Router パターンへ置き換えます。
アーキテクチャパターンをレビューする
機能がキャッシュ、Suspense、metadata、Server Actions を保守しやすい形で使用しているか確認します。
これらのプロンプトを試す
レンダリングパターンを選択する
Use the Next.js App Router patterns skill to recommend rendering modes for this page. Include Server Component, Client Component, static, dynamic, and streaming tradeoffs.
ルート構造を設計する
Use the skill to design an App Router folder structure for this feature. Include layout, page, loading, error, route handler, and default files where appropriate.
データ取得を改善する
Use the skill to review this data fetching flow. Recommend caching, revalidation, tag invalidation, and Suspense boundaries for a Next.js App Router implementation.
高度なルーティングを監査する
Use the skill to evaluate this App Router design with parallel routes, intercepting routes, Server Actions, and metadata generation. Call out security and validation gaps.
ベストプラクティス
- まず Server Components から始め、ブラウザー API、hooks、または直接的なインタラクションが必要な場合にのみ Client Components を追加します。
- 遅いデータ領域の周囲に Suspense 境界を配置し、ページの残りの部分をすばやくストリーミングできるようにします。
- request bodies、form data、route params、search params は、データベース操作で使用する前に検証します。
回避
- 明確なインタラクション要件がないまま、大きなルートツリーの先頭に use client を置くこと。
- 生の request bodies をデータベース書き込みや Server Actions に直接渡すこと。
- 安全にキャッシュ、事前構築、または revalidation できるコンテンツに dynamic rendering を使用すること。
よくある質問
このスキルは完全な Next.js アプリケーションを生成しますか？
いいえ。既存プロジェクト内でエージェントが適用できるアーキテクチャガイダンスとコードパターンを提供します。
どの Next.js バージョンを対象としていますか？
App Router モデルを使用する Next.js 14 以降を対象としています。
Server Components に役立ちますか？
はい。Server Components を使用すべき場合と Client Component が必要な場合を説明します。
キャッシュを扱っていますか？
はい。fetch caching、revalidation、tags、path invalidation パターンについて説明します。
このスキルは公開しても安全ですか？
はい、中程度のリスクに関する注記付きです。このスキルはガイダンスのみですが、ユーザーがコピーする前に改善すべき API 例が 1 つあります。
Claude、Codex、Claude Code は使用できますか？
はい。metadata には Claude、Codex、Claude Code のサポートが記載されています。
開発者情報
作成者
wshobsonライセンス
MIT
Skillstore リビジョン
r1
バージョンに関する注意
作者はバージョンを宣言していません。
参照
64ca8af0f54a325752f08bd54e52151061ea659a
メンテナンスの新しさ
2026/7/28
利用状況
10 ダウンロード · 263 閲覧
ファイル構成
📄 SKILL.md
wshobson のその他のスキル
すべて表示📦
context-driven-development
81コンテキスト駆動開発を管理する
AI支援プロジェクトでは、プロダクト目標、スタック選定、ワークフロールールが散在すると一貫性が失われます。このスキルは、Conductor のコンテキスト成果物を通じて Claude、Codex、Claude Code を導きます。
コーディング＆開発 表示
📦
startup-financial-modeling
80スタートアップ向け財務モデルを構築する
スタートアップチームは、採用、資金調達、資金使途を計画する前に、明確な予測を必要とします。このスキルは、収益、コスト、ランウェイ、シナリオを実務的な財務計画アウトプットとして整理します。
データ＆アナリティクス 表示
📦
kpi-dashboard-design
79意思決定を促進するKPIダッシュボードを設計する
チームは多くの数値を表示するだけで、行動につながらないダッシュボードを作りがちです。このスキルは、Claude、Codex、Claude Codeが意味のあるKPIを選定し、ビューを構成し、指標を明確に提示するのに役立ちます。
デザイン＆クリエイティブ 表示
📦
postmortem-writing
79非難しないインシデント事後分析を書く
インシデントレビューは、一貫性がなくなったり、非難に焦点が当たったり、実行に移しにくくなったりしがちです。このスキルは、Claude、Codex、Claude Code が、明確なタイムライン、根本原因、担当者を含む構造化された事後分析を作成するのに役立ちます。
ライティング＆コンテンツ 表示
📦
data-storytelling
79明確なデータストーリーを構築
生の指標だけでは、ステークホルダーを説得したり意思決定を支援したりするには不十分なことがよくあります。このスキルは、Claude、Codex、Claude Code が分析を明確なナラティブ、ビジュアル、推奨事項へと整理するのを支援します。
データ＆アナリティクス 表示
関連スキル
すべて表示📦
vercel-react-view-transitions
82React View Transitions を実装する
作成者 vercel-labs
React view transitions は配置を誤りやすく、意図しない静かなアニメーションや目立つアニメーションを引き起こします。このスキルは、route、Suspense、list、shared element のアニメーション選択を導きます。
コーディング＆開発 表示
📦
senior-frontend
81本番環境対応のフロントエンド機能を構築
作成者 davila7
フロントエンドチームには、プロジェクト間で一貫したReactおよびNext.jsのガイダンスが必要です。このスキルは、フロントエンド分析のためのリファレンスワークフロー、品質プラクティス、ヘルパースクリプトを提供します。
コーディング＆開発 表示
📦
nextjs-architecture
81Next.js App Routerアーキテクチャを計画する
作成者 89jobrien
Next.jsチームは、ルート、コンポーネント、データ読み込み、移行手順の選択に苦労することがあります。このスキルは、App Router、Server Components、パフォーマンスに関する構造化されたアーキテクチャ指針を提供します。
コーディング＆開発 表示
📦
nextjs-optimization
80Next.js パフォーマンスの最適化
作成者 Atman36
Next.js アプリケーションは、大きなバンドル、弱いキャッシュ、最適化されていないメディアによって遅くなることがあります。このスキルは、Claude、Codex、Claude Code が本番アプリ向けに的を絞ったパフォーマンス改善を行えるよう支援します。
コーディング＆開発 表示
📦
vercel-react-best-practices
80React と Next.js のパフォーマンス最適化
作成者 vercel-labs
React と Next.js アプリは、ウォーターフォール、大きなバンドル、回避可能な再レンダリングによって速度が低下しがちです。このスキルは、エージェントがより安全にパフォーマンス重視の変更を行うための具体的なルールを提供します。
コーディング＆開発 表示
📦
react-best-practices
79ReactとNext.jsコードを最適化する
作成者 sickn33
ReactとNext.jsアプリは、遅いデータフェッチ、大きなバンドル、回避可能な再レンダリングに悩まされることがよくあります。このスキルは、パフォーマンス重視のコード生成とレビューのための具体的なルールと例をエージェントに提供します。
コーディング＆開発 表示