Communitygithub.com

marnixGeerkens/rocketlauncher-claude-code

Next.js 14+ App Routerアーキテクチャ、サーバーコンポーネント、モダンなフルスタックReact開発のための包括的なパターン集です。

rocketlauncher-claude-code とは？

このスキルは、Next.js 14以降のApp Routerを活用したアプリケーション開発を効率化するための包括的なパターン集です。サーバーコンポーネント、ストリーミング、並行ルート、インターセプトルート、データフェッチとキャッシュの最適化、サーバーアクションによるフルスタック機能の実装など、Next.jsのモダンな機能を最大限に活用するためのベストプラクティスを提供します。Pages Routerからの移行や新規アプリケーションの構築に特に有用で、`resources/implementation-playbook.md`に詳細な実装例が用意されています。Claude CodeなどのAIエージェントが、このスキルを読み込むことで、Next.jsプロジェクトの設計や実装に関する正確で実践的なアドバイスを生成できるようになります。スキルの指示に従い、目標や制約を明確にし、適切なパターンを適用することで、開発の生産性とコード品質を大幅に向上させることが可能です。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/marnixGeerkens/rocketlauncher-claude-code/tree/HEAD/components/skills/web-development/nextjs-app-router-patterns
オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

Next.js App Router パターン

Next.js 14+ App Routerアーキテクチャ、サーバーコンポーネント、モダンなフルスタックReact開発のための包括的なパターン集です。

このスキルを使用するタイミング

  • App Routerを使用した新しいNext.jsアプリケーションの構築時
  • Pages RouterからApp Routerへの移行時
  • サーバーコンポーネントとストリーミングの実装時
  • 並行ルートとインターセプトルートの設定時
  • データフェッチとキャッシュの最適化時
  • サーバーアクションを使用したフルスタック機能の構築時

このスキルを使用しないタイミング

  • タスクがNext.js App Routerパターンに関連しない場合
  • この範囲外の異なるドメインやツールが必要な場合

手順

  • 目標、制約、必要な入力を明確にします。
  • 関連するベストプラクティスを適用し、結果を検証します。
  • 実行可能な手順と確認方法を提供します。
  • 詳細な例が必要な場合は、resources/implementation-playbook.mdを開きます。

リソース

  • resources/implementation-playbook.md: 詳細なパターンと例

Individual skills in this repo

This repo contains 13 individual skills — each has its own dedicated page.

marnixGeerkens/rocketlauncher-claude-code

When the user wants to optimize, improve, or increase conversions on any marketing page — including homepage, landing pages, pricing pages, feature pages, or blog posts. Also use when the user says "CRO," "conversion rate optimization," "this page isn't converting," "improve conversions," or "why isn't this page working." For signup/registration flows, see signup-flow-cro. For post-signup activation, see onboarding-cro. For forms outside of signup, see form-cro. For popups/modals, see popup-cro.

marnixGeerkens/rocketlauncher-claude-code

Balance visual design with ATS compatibility for creative roles. Use when the user is in design, art, writing, marketing creative, or any visual/creative field and needs a resume that looks distinctive but still parses.

marnixGeerkens/rocketlauncher-claude-code

Transform resume bullets into detailed portfolio case studies with context, action, and outcome. Use when the user mentions portfolio, case study, project write-up, or expanding a resume bullet into a longer narrative.

marnixGeerkens/rocketlauncher-claude-code

Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities. Use when: portfolio, personal website, showcase work, developer portfolio, designer portfolio.

marnixGeerkens/rocketlauncher-claude-code

Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.

marnixGeerkens/rocketlauncher-claude-code

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

marnixGeerkens/rocketlauncher-claude-code

Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.

marnixGeerkens/rocketlauncher-claude-code

Next.js App Router principles. Server Components, data fetching, routing patterns.

marnixGeerkens/rocketlauncher-claude-code

Expert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected route.

marnixGeerkens/rocketlauncher-claude-code

Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.

marnixGeerkens/rocketlauncher-claude-code

Create API handoff documentation for frontend developers. Use when backend work is complete and needs to be documented for frontend integration, or user says 'create handoff', 'document API', 'frontend handoff', or 'API documentation'.

marnixGeerkens/rocketlauncher-claude-code

Document frontend data needs for backend developers. Use when frontend needs to communicate API requirements to backend, or user says 'backend requirements', 'what data do I need', 'API requirements', or is describing data needs for a UI.

marnixGeerkens/rocketlauncher-claude-code

Comprehensive Python library for astronomy and astrophysics. This skill should be used when working with astronomical data including celestial coordinates, physical units, FITS files, cosmological calculations, time systems, tables, world coordinate systems (WCS), and astronomical data analysis. Use when tasks involve coordinate transformations, unit conversions, FITS file manipulation, cosmological distance calculations, time scale conversions, or astronomical data processing.

関連スキル

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community