How does it handle security and CSRF?

The generated plans include specific patterns for mutation handlers that forward CSRF headers and handle token authentication using the backendFetch pattern.

Which frameworks is this skill optimized for?

While the logic can be adapted, it is highly optimized for modern full-stack frameworks like Next.js that utilize Server Actions, App Router API routes, and SSR (Server-Side Rendering) patterns.

What is the purpose of the fetch-plan skill?

It is designed to create a structured architectural plan for a new data entity before any code is written, ensuring that naming conventions, file paths, and API patterns remain consistent throughout the project.

Does this skill write the actual implementation code?

No, it focuses on the planning phase. It outputs a structured Markdown plan that serves as a blueprint for the developer or Claude to follow during the implementation phase.

Fullstack Fetch Layer Planner

Name: Fullstack Fetch Layer Planner
Author: adelabdelgawad

byadelabdelgawad

0•

API 开发

Architects comprehensive fetch layers for new entities by defining server actions, API routes, and client-side calls before implementation.

The fetch-plan skill provides a structured blueprint for full-stack data fetching architectures, ensuring consistency across naming conventions and directory structures. It bridges the gap between defining a new data entity and writing the implementation code by generating a detailed map of server actions, backend API endpoints, client-side hooks, and SSR page components. This helps developers maintain a standardized pattern for CRUD operations, bulk updates, and status toggling while ensuring all TypeScript types and backend dependencies are verified upfront.

主要功能

01Scaffolds Next.js-style API route structures including collection and resource handlers

02Provides SSR page component blueprints with initial data hydration patterns

030 GitHub stars

04Maps server actions to specific backend URL patterns and return types

05Defines client-side fetch signatures with generic type support and CSRF protection

06Generates standardized naming conventions across snake_case, camelCase, and PascalCase

使用场景

01Planning new CRUD modules in a Next.js or React full-stack application

02Standardizing API architecture and fetch patterns across a development team

03Pre-validating backend requirements and TypeScript definitions before writing implementation code

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add adelabdelgawad/fullstack-agents fetch-plan

For use in Claude.ai and ChatGPT

主要功能

01Scaffolds Next.js-style API route structures including collection and resource handlers

02Provides SSR page component blueprints with initial data hydration patterns

030 GitHub stars

04Maps server actions to specific backend URL patterns and return types

05Defines client-side fetch signatures with generic type support and CSRF protection

06Generates standardized naming conventions across snake_case, camelCase, and PascalCase

使用场景

01Planning new CRUD modules in a Next.js or React full-stack application

02Standardizing API architecture and fetch patterns across a development team

03Pre-validating backend requirements and TypeScript definitions before writing implementation code