server-actions-and-routes — next.js server-side communication server-actions-and-routes, GrowMate, community, next.js server-side communication, ide skills, server-actions-and-routes install, Claude Code, Cursor, Windsurf

v1.0.0
GitHub

About this Skill

Perfect for Next.js Agents needing efficient server-side communication and route handling. Server-actions-and-routes is a technical specification for Next.js server-side communication, outlining rules for using Server Actions and Route Handlers to ensure consistency, security, and development efficiency.

Features

Uses Server Actions as the primary choice for CRUD operations and form handling
Employs Route Handlers for special cases, ensuring flexibility and customization
Follows a set of rules for communication, including configuration paths and naming conventions
Supports Next.js server-side rendering for improved performance and SEO
Provides a standardized approach to server-side development, reducing errors and inconsistencies

# Core Topics

shoma-endo shoma-endo
[0]
[0]
Updated: 3/8/2026

Agent Capability Analysis

The server-actions-and-routes skill by shoma-endo is an open-source community AI agent skill for Claude Code and other IDE workflows, helping agents execute tasks with better context, repeatability, and domain-specific guidance. Optimized for next.js server-side communication, server-actions-and-routes install.

Ideal Agent Persona

Perfect for Next.js Agents needing efficient server-side communication and route handling.

Core Value

Empowers agents to ensure consistency, security, and development efficiency in Next.js server-side communication by leveraging Server Actions and Route Handlers with CRUD operations, providing a set of rules for effective usage, including one-way data binding and API route protection using protocols like HTTPS.

Capabilities Granted for server-actions-and-routes

Implementing Server Actions for CRUD operations
Configuring Route Handlers for special cases
Ensuring security and consistency in Next.js applications

! Prerequisites & Limits

  • Requires Next.js framework
  • Limited to server-side communication and route handling
Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

server-actions-and-routes

Install server-actions-and-routes, an AI agent skill for AI agent workflows and automation. Works with Claude Code, Cursor, and Windsurf with one-command...

SKILL.md
Readonly

Server Actions & Routes 技術規約

Next.js のサーバーサイド通信において、一貫性・セキュリティ・開発効率を担保するためのルールです。

1. 使い分けの基準

基本的には Server Actions を第一選択 とし、Route Handlers は特殊なケースに限定します。

通信方式推奨される用途配置パス / 命名
Server ActionsCRUD操作、フォーム送信、状態変更。クライアントからの一般的なリクエストに優先使用。src/server/actions/*.actions.ts
Route HandlersSSE (ストリーミング)、外部 Webhook、Cron ジョブ、特定の HTTP メソッド/ヘッダーが必要な場合。app/api/**/route.ts

2. Server Actions 実装ルール

  • ファイルレベルの宣言: ファイルの先頭に必ず 'use server'; を記述します。関数レベルでの宣言は避け、.actions.ts ファイルに集約してください。
  • 命名規則: ファイル名は必ず [feature].actions.ts とします。
  • バリデーション: 入力引数は zod スキーマを使用して parse または safeParse し、型安全を保証します。
  • クライアント用インポート: 既存の一部実装(例: chat.actions.ts)では、名前衝突回避や明示性のために export const MyActionSA = MyAction; のようなエイリアスを定義している場合がありますが、新規実装において必須ではありません。

3. セキュリティ & 認証

  • 認証の必須化: 認証が必要な全てのアクション/ルートにおいて、処理の先頭で認証チェックを実施します。
    • Server Actions: 引数の liffAccessTokenauthMiddleware に渡して検証。
    • Route Handlers: ヘッダー(Bearer)または Cookie からトークンを取得し、ensureAuthenticated 等の共通ロジックで検証。
  • 特権操作の制限: viewMode (閲覧モード) が有効な場合、データの「書き込み」や「管理者操作」を拒否し、VIEW_MODE_ERROR_MESSAGE を返却する必要があります。
  • エラーハンドリング:
    • Server Actions では、ユーザーフレンドリーなエラーメッセージを含むオブジェクトを返却します。
    • Route Handlers では、適切な HTTP ステータスコード(401, 403, 429 等)と JSON データを返却します。
  • 情報のカプセル化: 内部 ID や不必要な機密情報(API キー等)をクライアントに返さないよう、専用のレスポンス型(例: ChatResponse)を定義して返却データをフィルタリングします。

4. 実装のアンチパターン

  • app/api/ 内の route.ts'use server'; を記述する(不要かつ誤解を招く)。
  • クライアントから直接 prismasupabase (Service Role) を呼び出すコードを Server Actions 外に書く。
  • 認証チェックなしで Service Role による DB 操作を行う(重大なセキュリティリスク)。

セルフレビュー項目

  • その機能は Server Action で実装可能か?(SSE 等が必要ないなら Action を選択)
  • 経路に応じた適切な共通認証ロジックで検証を行っているか?
  • viewMode の際に破壊的操作が制限されているか?
  • zod で入力値を検証しているか?

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is server-actions-and-routes?

Perfect for Next.js Agents needing efficient server-side communication and route handling. Server-actions-and-routes is a technical specification for Next.js server-side communication, outlining rules for using Server Actions and Route Handlers to ensure consistency, security, and development efficiency.

How do I install server-actions-and-routes?

Run the command: npx killer-skills add shoma-endo/GrowMate/server-actions-and-routes. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for server-actions-and-routes?

Key use cases include: Implementing Server Actions for CRUD operations, Configuring Route Handlers for special cases, Ensuring security and consistency in Next.js applications.

Which IDEs are compatible with server-actions-and-routes?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for server-actions-and-routes?

Requires Next.js framework. Limited to server-side communication and route handling.

How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add shoma-endo/GrowMate/server-actions-and-routes. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use server-actions-and-routes immediately in the current project.

Related Skills

Looking for an alternative to server-actions-and-routes or another community skill for your workflow? Explore these related open-source skills.

View All

widget-generator

Logo of f
f

f.k.a. Awesome ChatGPT Prompts. Share, discover, and collect prompts from the community. Free and open source — self-host for your organization with complete privacy.

149.6k
0
AI

flags

Logo of vercel
vercel

flags is a Next.js feature management skill that enables developers to efficiently add or modify framework feature flags, streamlining React application development.

138.4k
0
Browser

zustand

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

72.8k
0
AI

data-fetching

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

72.8k
0
AI