vercel-react-view-transitions
82React View Transitions を実装する
React view transitions は配置を誤りやすく、意図しない静かなアニメーションや目立つアニメーションを引き起こします。このスキルは、route、Suspense、list、shared element のアニメーション選択を導きます。
Next.js Cache Componentsを正しく構築する
Next.jsの移行中にCache Componentsを安全に導入するのは難しい場合があります。このスキルは、PPR、cache directives、lifetimes、tags、invalidationについて焦点を絞ったガイダンスを提供します。
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
Review the Skillstore skill "next-cache-components" from https://skillstore.io/skills/vercel-labs-next-cache-components.md and its manifest at https://skillstore.io/api/skills/vercel-labs-next-cache-components/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
「next-cache-components」を使用しています。 開発者が、商品データをキャッシュしつつアカウント設定は最新に保つ方法を尋ねています。
期待される結果:
「next-cache-components」を使用しています。 チームが古いNext.jsのキャッシュ設定を置き換える方法を尋ねています。
期待される結果:
All static findings were reviewed against SKILL.md and appear to be false positives from Markdown syntax or educational Next.js examples. I found no prompt injection, malware intent, credential access, shell execution, or data exfiltration behavior in the skill content.
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
https://skillstore.io/skills/vercel-labs-next-cache-components/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/vercel-labs-next-cache-components?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/vercel-labs-next-cache-components?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/vercel-labs-next-cache-components/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/vercel-labs-next-cache-components.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>vercel-labs. (2026). next-cache-components security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/vercel-labs-next-cache-components/audits/5@techreport{vercel-labs-vercel-labs-next-cache-components-2026,
author = {vercel-labs},
title = {next-cache-components security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/vercel-labs-next-cache-components/audits/5},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "next-cache-components security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
- name: "vercel-labs"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/vercel-labs-next-cache-components/audits/5"
identifiers:
- type: other
value: "skillstore:vercel-labs-next-cache-components:audit:5"
description: "Skillstore immutable audit report identifier"
古いPPR、revalidate、unstable_cacheのパターンを、明確な置き換えガイダンスに沿ってCache Componentsへ変換します。
Suspenseを使って、静的シェル、キャッシュ済みデータ、動的なリクエスト時セクションを組み合わせるルートを計画します。
変更頻度が異なるコンテンツに対して、適切なタグ、有効期間、invalidation APIを選択します。
Next.js 16プロジェクトでCache Componentsを有効にする方法と、有効化後に何が変わるのかを説明してください。
このページ構造をレビューし、どの部分を静的にするべきか、use cacheでキャッシュするべきか、またはSuspenseで動的にするべきかを分類してください。
Next.jsで商品一覧、ダッシュボード指標、ユーザー固有の通知に使うcacheLifeプロファイルを選ぶのを手伝ってください。
experimental.ppr、revalidate、dynamic設定、unstable_cacheから、cache tagsを使うCache Componentsへの移行計画を作成してください。
作成者
vercel-labsライセンス
MIT
Skillstore リビジョン
r1
バージョンに関する注意
作者はバージョンを宣言していません。
参照
36e07d5e13068e5be64447e8f20b427cf2cbd21a
メンテナンスの新しさ
2026/7/18
利用状況
18 ダウンロード · 136 閲覧
ファイル構成
📄 SKILL.md
React View Transitions を実装する
React view transitions は配置を誤りやすく、意図しない静かなアニメーションや目立つアニメーションを引き起こします。このスキルは、route、Suspense、list、shared element のアニメーション選択を導きます。
再利用可能な AI スキルを作成する
チームには、再利用可能なエージェントの知識とワークフローを一貫した方法でパッケージ化する仕組みが必要です。このスキルは、Claude、Codex、Claude Code をスキルの設計、作成、検証、パッケージ化へ導きます。
React と Next.js のパフォーマンス最適化
React と Next.js アプリは、ウォーターフォール、大きなバンドル、回避可能な再レンダリングによって速度が低下しがちです。このスキルは、エージェントがより安全にパフォーマンス重視の変更を行うための具体的なルールを提供します。
Reactのコンポジションパターンを適用する
boolean props が多い React コンポーネントは、保守やレビューが難しくなります。この skill は、compound components、明示的な variants、provider ベースの state に関する明確なパターンをエージェントに提供します。
React Native アプリを最適化
React Native アプリでは、低速なリスト、ぎこちないアニメーション、プラットフォーム特有のミスが発生することがあります。このスキルは、パフォーマンスの高い Expo および React Native 開発のための簡潔なルールを Codex、Claude、Claude Code に提供します。
Next.js のベストプラクティスを適用する
Next.js プロジェクトは、境界の不明確さ、遅いデータ取得、デプロイのミスによって失敗することがよくあります。このスキルは、Claude、Codex、Claude Code に、最新の App Router 作業に集中したルールを提供します。
本番環境対応のフロントエンド機能を構築
作成者 davila7
フロントエンドチームには、プロジェクト間で一貫したReactおよびNext.jsのガイダンスが必要です。このスキルは、フロントエンド分析のためのリファレンスワークフロー、品質プラクティス、ヘルパースクリプトを提供します。
シニアのガイダンスでフルスタックアプリを構築
作成者 alirezarezvani
フルスタックプロジェクトでは、一貫したセットアップ、アーキテクチャ選定、品質チェックが必要になることがよくあります。このスキルは、React、Next.js、Node.js、GraphQL、PostgreSQL の作業向けにスクリプトとリファレンスを提供します。
Next.js App Routerアーキテクチャを計画する
作成者 89jobrien
Next.jsチームは、ルート、コンポーネント、データ読み込み、移行手順の選択に苦労することがあります。このスキルは、App Router、Server Components、パフォーマンスに関する構造化されたアーキテクチャ指針を提供します。
Webアプリのローカライゼーションを自動化
作成者 DNYoussef
多言語対応を追加すると、文字列、ルーティング、メタデータ、ロケールファイルがコードベース全体に散在しがちです。このスキルは、翻訳、検証、ドキュメントを含むi18nセットアップを計画し、実装します。
Vue 3 のコード品質を向上
作成者 vuejs-ai
Vue プロジェクトでは、時間の経過とともに reactivity、component、performance に関するミスが蓄積しがちです。このスキルは、より安全なパターンと明確なコードのために、Vue 3 に特化したガイダンスを提供します。
プロファイリングによる Go パフォーマンスの最適化
作成者 89jobrien
Go サービスは、明確な根拠がないまま低速化したりメモリ使用量が増えたりすることがあります。このスキルは、プロファイリング、割り当て分析、並行処理のチューニング、ベンチマーク主導の最適化をガイドします。