nextjs-shadcn
Creates Next.js 16 frontends with shadcn/ui. Use when building React UIs, components, pages, or applications with shadcn, Tailwind, or modern frontend patterns.
Creates Next.js 16 frontends with shadcn/ui. Use when building React UIs, components, pages, or applications with shadcn, Tailwind, or modern frontend patterns.
Generates React components with TypeScript, hooks, and best practices. Use when user asks to "create React component", "generate component", or "scaffold component".
Data fetching patterns for server/client components using fetch API, TanStack Query, useSuspenseQuery, apiRouteWrapper, and apiRequestWrapper. Use when implementing data loading, API calls, server functions, queries, mutations, API routes, or when the user mentions TanStack Query, useSuspenseQuery, apiRouteWrapper, apiRequestWrapper, tmdb-server-functions, or data fetching.
Generates Next.js 13+ pages with App Router, Server Components, Client Components, API routes, and proper data fetching. Use when building Next.js applications.
Create React/Next.js 16 components. Use when building pages, client/server components, forms with useActionState, or UI with shadcn/ui. ALWAYS activate with frontend-design together.
Review Next.js App Router code for optimal Partial Prerendering (PPR), caching strategy, Suspense boundaries, and React Query integration. Ensure adherence to Next.js 16+ Cache Components best practices.
TMDB API code generation workflow with selective Zod schemas using pnpm codegen:tmdb. Use when working with TMDB endpoints, regenerating types, adding TMDB API functionality, modifying endpoints-config.js, tmdb-server-functions.ts, Zod schemas, or when the user mentions TMDB codegen, endpoints-config, pnpm codegen:tmdb, needsZodSchema, or auto-generated TMDB files.
Comprehensive Rust backend development guide for Tauri applications. Use when creating Tauri commands, database operations, error handling, state management, or async patterns. Covers layered architecture (commands → services → operations → database), Result-based error handling, SeaORM patterns, tokio async/await, testing with cargo test, and type-driven design principles.
Next.js App Routerのエラーハンドリングを専門とするスキル。 error.tsx、not-found.tsx、global-error.tsxを使用したエラー境界とリカバリーを実現。 Anchors: - The Pragmatic Programmer / 適用: エラーハンドリング原則 / 目的: 品質維持と堅牢性 - Next.js Error Handling / 適用: error.tsx・not-found.tsx / 目的: エラーページ設計 Trigger: Use when implementing error handling pages, designing error.tsx/not-found.tsx/global-error.tsx, or building error boundaries and recovery mechanisms in Next.js App Router. error.tsx, not-found.tsx, global-error.tsx, error boundary, recovery
Phoenix framework guidelines for router configuration and deprecated modules. Use when writing Phoenix router files, adding routes, or configuring scopes. Prevents duplicate module prefix bugs from scope aliasing and use of deprecated Phoenix.View.
Node.jsにおけるストリーム処理とバックプレッシャー管理の専門知識。 大容量ファイルの効率的処理、メモリ使用量の最適化、 Readable/Writable/Transform/Duplexストリームの適切な活用方法を提供。 Anchors: • Node.js Streams API Documentation / 適用: ストリームAPI全般 / 目的: 公式APIの正確な使用 • Backpressuring in Streams (Node.js official) / 適用: バックプレッシャー管理 / 目的: メモリ効率最適化 • The Pragmatic Programmer (Hunt and Thomas) / 適用: 実装品質 / 目的: 保守性とテスタビリティ Trigger: Use when implementing stream processing in Node.js, handling large files, managing backpressure, or building data transformation pipelines. nodejs stream, stream processing, backpressure, readable stream, writable stream, transform stream, duplex stream, pipeline, large file
Add a new feature to the Next.js app following best practices
Django API development for 2025. Covers Django Ninja (modern, async-first, type-safe) and Django REST Framework (mature, ecosystem-rich). Use when building REST APIs, choosing between frameworks, implementing authentication, permissions, filtering, pagination, or async endpoints.
Nuxt 4プロジェクトで新しいVue 3コンポーネントを作成する際のテンプレートとガイドライン
Comprehensive expertise for Azure Static Web Apps including architecture, configuration, API integration with Azure Functions, authentication, routing, deployment, and CI/CD. Use when building, configuring, deploying, or troubleshooting Azure Static Web Apps projects with frameworks like React, Angular, Vue, Blazor, or vanilla JavaScript.
Next.jsアプリケーションのパフォーマンス最適化スキル。 Core Web Vitals(LCP、FID、CLS)改善、バンドルサイズ削減、画像・フォント最適化を提供する。 Anchors: • 『High Performance Browser Networking』(Ilya Grigorik) / 適用: ネットワーク最適化 / 目的: レイテンシ削減 • Web Vitals (Google) / 適用: Core Web Vitals測定 / 目的: UXメトリクス改善 • Next.js Documentation / 適用: next/image, next/font, App Router / 目的: フレームワーク最適化 Trigger: Use when optimizing Core Web Vitals (LCP, FID, CLS), reducing bundle size, implementing image optimization with next/image, or optimizing font loading with next/font.
React Server Components(RSC)の実装パターンとNext.js App Routerにおけるベストプラクティスを提供する専門スキル。 サーバーコンポーネントとクライアントコンポーネントの責務分離、データフェッチの最適化、 Suspenseとストリーミングの活用を支援します。 Anchors: • 『Learning React Server Components』(Tejas Kumar)/ 適用: RSCアーキテクチャ / 目的: サーバーとクライアント間の責務分離 • Next.js App Router公式ドキュメント / 適用: RSC実装パターン / 目的: Next.js固有の最適化手法 • Dan Abramovのブログ / 適用: RSC設計思想 / 目的: 第一原理からの理解 Trigger: Use when implementing Next.js App Router, designing Server Components, defining Client Component boundaries, optimizing data fetching, integrating Suspense, or implementing streaming SSR. rsc, server components, client components, next.js app router, use client, suspense, streaming, data fetching
Next.js App Routerのアーキテクチャと実装パターンを専門とするスキル。 ディレクトリベースルーティング、Server/Client Components分離、レンダリング戦略選択を支援。 Anchors: • Guillermo Rauch "Server-First" / 適用: コンポーネント配置判断 / 目的: デフォルトサーバー・例外クライアントの徹底 • Learning React (Banks, Porcello) / 適用: コンポーネント設計 / 目的: 再利用性と単一責任の原則適用 • Next.js公式ドキュメント / 適用: 特殊ファイル規約・レンダリング戦略 / 目的: フレームワーク規約準拠 Trigger: Use when designing Next.js routing structures, implementing app directory patterns, deciding Server vs Client Components, choosing rendering strategies (SSG, ISR, Dynamic), or structuring layouts and route groups. Keywords: app router, server components, client components, dynamic routes, route groups, parallel routes, intercepting routes, layout, template, loading, error
React Server Componentsの実装パターン専門スキル。 データフェッチ最適化、Suspenseストリーミング、サーバーアクション実装を提供する。 Anchors: • Next.js Documentation / 適用: Server Components / 目的: パフォーマンス向上 • React Server Components RFC / 適用: RSCアーキテクチャ / 目的: フェッチ最適化 • Next.js Data Fetching / 適用: キャッシング戦略 / 目的: 効率的なデータ管理 Trigger: Use when implementing React Server Components, designing RSC patterns, optimizing data fetching, planning Suspense boundaries, or implementing Server Actions. RSC, Server Components, data fetching, Suspense, streaming, Server Actions, cache, revalidate