Nextjs

nextjs-turbopackスキルを使うと、Next.js 16+でTurbopackを活用し、ローカル開発の高速化、HMR、バンドラーの使い分けを実践的に進められます。インストール、使い方、Frontend Developmentのワークフローでwebpackに戻すべきタイミングまでを整理した、実用的なnextjs-turbopackガイドとして使えます。

frontend-patterns は、React と Next.js のフロントエンド開発に役立つ実践的な skill です。コンポーネント、状態管理、フォーム、ルーティング、アクセシビリティ、パフォーマンスについて、保守しやすいパターンを選ぶ助けになります。一般論のベストプラクティスではなく、実装方針やパターン選定を明確に確認したいときに、frontend-patterns ガイドを活用してください。

backend-patterns は、Node.js・Express・Next.js の API routes に対応したバックエンド開発スキルです。API 設計、repository/service/controller のレイヤー設計、バリデーション、キャッシュ、バックグラウンドジョブ、データベース最適化まで実践的にカバーし、手探りを減らしながら、より整理されたサーバーサイド設計を進めやすくします。

shadcnスキルを使うと、プロジェクトの状況を確認し、適切なCLIコマンドを実行し、コンポーネントを導入しながら、base と radix の使い分け、フォーム、テーマ設定、registry まで、ドキュメントに沿ってUIを組み立てられます。

fullstack-developer skill は、React、Next.js、Node.js、API、データベース、認証、デプロイまでをまたぐ、モダンな JavaScript / TypeScript のWebアプリ開発向け再利用可能プロンプトパッケージです。複数レイヤーにまたがる設計・実装の検討に向いており、スクリプトやテンプレートを配布する形式ではなく、1つの `SKILL.md` で対象範囲と進め方を定義するタイプです。

ui-ux-pro-maxはAIによるUI/UXデザイン支援スキルです。レイアウト、スタイル、カラースキーム、タイポグラフィ、UXルールなどを体系的にガイドし、Webやモバイル開発に最適。React、Next.js、Vue、Svelte、Tailwind、shadcn/ui、SwiftUI、React Native、Flutter、HTML/CSSに対応し、設計・レビュー・改善に役立つデザイン知見を提供します。

nextjs-app-router-patterns は、Next.js 14+ の App Router アーキテクチャ設計を支援するスキルです。Server Components、streaming、caching、route handlers、Server Actions を含むフルスタック開発や、Pages Router からの移行計画に役立ちます。

vercel-react-best-practices は、Vercel Engineering が提供するスキルで、AI エージェントが React と Next.js のパフォーマンスを最適化できるよう、waterfalls・bundle size・rendering などの優先度付きルールでガイドします。

deploy-to-vercelは、デプロイ前にrepoの状態、ローカルのproject連携、CLI認証、team scopeを確認できるVercel向けスキルです。標準ではpreview deployを使い、補助スクリプトにも対応し、推測に頼らずデプロイURLを返しやすくします。

source-driven-development スキルは、フレームワーク固有のコーディングを公式ドキュメントに基づいて進めるためのもので、実装前にパターンを確認できます。React、Vue、Next.js、Svelte、Angular などのスタックで、正確性、出典の明確さ、バージョン差に左右される判断が重要な場合に最適です。

frontend-devは、洗練された本番品質のWebページを作るためのフロントエンド開発スキルです。高品質なUI、シネマティックなモーション、AI生成メディア、訴求力のあるコピー、生成アートまでまとめて扱えます。ランディングページ、マーケティングサイト、商品ページ、ダッシュボードなど、デザイン・コンテンツ・実装の整合性が重要なフロントエンド制作に向いています。

fullstack-dev は、フルスタック開発の実践ガイドです。コーディング前に、バックエンドのアーキテクチャ、API 設計、認証、データフロー、フロントエンド連携まで見通して整理できます。CRUD アプリ、ダッシュボード、チャット、API-first の構築に向いており、適切なワークフロー、制約、リリース可能な判断を重視します。

gsap-reactは、ReactとNext.js向けのGSAP公式skillです。`useGSAP()`、refs、`gsap.context()`、スコープ付きセレクタ、クリーンアップまでカバーしており、再レンダーやアンマウントに起因する不具合を避けながら、Reactで安全にアニメーションを構築できます。フロントエンド開発でgsap-reactの導入方法や使い方を確認したいときに、このガイドを使ってください。

next-best-practices は、Next.js の App Router 開発に実践的に役立つスキルです。ファイル規約、RSC の境界、async API、データパターン、route handlers、バンドリング、エラーハンドリングまで幅広くカバーしています。

next-cache-components は、Next.js 16 の Cache Components を実践的に理解するためのスキルです。`cacheComponents` の有効化、`use cache` の使い方、`cacheLife` の設定、`cacheTag` の適用、さらに Suspense を使った動的セクションのストリーミングまでを学べます。

next-upgrade は、公式の移行ガイド、codemods、段階的なバージョン更新手順、関連依存関係の調整をもとに、実運用の Next.js プロジェクトを安全にアップグレードするためのスキルです。

このMedusaスキルは、Medusaをバックエンド開発向けにセットアップし、拡張するのに役立ちます。ヘッドレスコマースのバックエンド、管理画面向けツール、モジュール、APIルートに対応でき、Node.js と PostgreSQL を使ったインストール、セットアップ、利用までの実践的な Medusa ガイド手順を確認できます。

netlify-frameworksは、Vite/React、Astro、TanStack Start、Next.js、Nuxt、SvelteKit、Remix を Netlify で動かすためのデプロイガイドです。Deployment、adapter と plugin の設定、SSR、API routes、middleware、フレームワーク固有の Netlify 連携のトラブルシュートに、netlify-frameworks を使ってください。

supabase-nextjsは、Supabaseの認証、ストレージ、リアルタイム機能を使いながら、型付きのDBクエリにはDrizzle ORMを活用して、Next.js App Routerアプリを構築するのに役立ちます。保護されたルート、サーバー側のセッション管理、サーバー/クライアントの明確な分離が必要なバックエンド開発ワークフローに適しています。

posthog-analyticsは、フロントエンドアプリにおけるPostHogのイベントトラッキング、機能フラグ、ダッシュボードの実装を支援します。Next.js App RouterやReactプロジェクトで、導入手順、使い方、クリーンな計測設計を実務目線で確認したい場合に役立つスキルです。

vercel-react-best-practices は、Vercel Engineering がまとめた React と Next.js 向けのパフォーマンス重視ガイドです。コンポーネント、ルート、データ取得のリファクタリングで、ウォーターフォールの削減、バンドルの縮小、レンダリング改善、そしてより速いフロントエンド実装を目指すときに、この vercel-react-best-practices スキルを使ってください。

vercel-deployは、最小限の設定でアプリやWebサイトをVercelへデプロイできるよう支援するスキルです。プレビュー優先のデプロイ、わかりやすいインストール手順と使い方、そしてCLIが使えない場合や認証情報がない場合の信頼できる代替手段を前提に設計されています。共有しやすい素早いリンク作成に使い、本番公開は必要に応じて指示されたときだけ行ってください。

render-deployは、コードベースをRender向けのデプロイ計画に落とし込むためのskillです。render.yamlのBlueprintsや直接のサービス設定まで含めて、Renderで実運用しやすい形に整理します。インストール、使い方、サービス選定、環境変数、デプロイ確認まで、Renderで実践的に進めたいときに使えます。

netlify-deploy は、Netlify CLI を使って Web プロジェクトを Netlify に公開するためのデプロイ特化スキルです。認証、サイトのリンク設定、プレビューデプロイ、本番デプロイ、netlify.toml の確認まで案内し、ローカルのリポジトリから公開URLへ進むときの迷いを減らします。