template-bff

Enforce BFF standards for Next.js Server Actions and Route Handlers.

Updated Mar 30, 2026
One-click install
npx skills add https://github.com/dtaborda/startup-saas-template --skill template-bff
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: template-bff
Source: https://github.com/dtaborda/startup-saas-template/tree/main/skills/template-bff
Command: npx skills add https://github.com/dtaborda/startup-saas-template --skill template-bff

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Template-bff codifies backend-for-frontend Server Action and Route Handler practices so the ui/ layer never bypasses Supabase abstractions, validation contracts, or standardized action results, eliminating scattered business logic and inconsistent data flows.

Core Features & Use Cases

  • BFF decision tree clarifies when to favor Server Actions versus Route Handlers for streaming, webhooks, mutations, and data fetching needs.
  • Server Action pattern demands Zod validation through @template/contracts, delegation of business logic to @template/core, and returning ActionResult<T> so components can react predictably.
  • Route Handler guidance covers SSE and webhook orchestration with proper headers, streaming flow, and error handling while keeping business logic centralized.
  • Critical checklist enforces the prohibition of direct Supabase imports, inline schemas, cross-calling actions, and missing error handling across all server-side logic in ui/.

Quick Start

Request template-bff to implement a Server Action that validates input with @template/contracts, delegates to @template/core, and returns an ActionResult so UI components can handle success or failure predictably.

Frequently Asked Questions about template-bff

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure Next.js Server Actions for data mutations and streaming?

Next.js Server Actions should enforce Zod validation through contracts, delegate business logic to core modules, and return standardized ActionResult objects so UI components react predictably to data mutations and streaming responses.

When should I use Next.js Route Handlers instead of Server Actions?

Use Next.js Route Handlers instead of Server Actions when handling webhook orchestration or Server-Sent Events (SSE), as route handlers provide proper header control, streaming flow management, and centralized error handling for API logic.

What is the best way to validate Supabase data fetching in Next.js App Router?

The best way to validate Supabase data fetching in Next.js App Router is applying Zod schemas via shared contracts and accessing Supabase exclusively through core abstractions to prevent scattered business logic and bypassed data flows.

Can I import Supabase directly inside Next.js Server Actions?

No, direct Supabase imports inside Next.js Server Actions are prohibited; you must access Supabase exclusively through designated core modules to ensure consistent backend-for-frontend abstractions and standardized data flows.

How does Zod validation work with Next.js Route Handlers and Server Actions?

Zod validation works with Next.js Route Handlers and Server Actions by requiring schemas defined within shared contracts rather than inline, ensuring all server-side input is validated before business logic execution.

Why do my Next.js Server Actions return inconsistent data formats to the client?

Next.js Server Actions return inconsistent data formats to the client when bypassing standardized ActionResult responses; enforcing typed ActionResult objects ensures components handle success and failure predictably.