skills.rest
rladydqls99
rladydqls99COMMUNITY
Explore all skills by this author →
GitHub

fsd-page

Generate Next.js page components with TanStack Query states in FSD structure.

Updated Aug 23, 2026
Search Tags:#frontend#react#next.js#component generation#tanstack query#fsd
One-click install
npx skills add https://github.com/rladydqls99/claude-marketplace --skill fsd-page
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fsd-page
Source: https://github.com/rladydqls99/claude-marketplace/tree/main/plugins/dev-team-plugin/skills/fsd-page
Command: npx skills add https://github.com/rladydqls99/claude-marketplace --skill fsd-page

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the creation of Next.js page components, ensuring they correctly handle various asynchronous data states like loading, errors, and empty results, streamlining frontend development.

Core Features & Use Cases

  • Dynamic State Handling: Generates pages that display loading spinners, error messages, or empty states based on data availability.
  • FSD Architecture Integration: Creates components adhering to the Feature-Sliced Design (FSD) pattern, placing them in the correct src/pages/ or app/ directories.
  • TanStack Query Integration: Leverages TanStack Query for efficient data fetching and state management.
  • Use Case: When asked to create a new product listing page for an e-commerce site, this Skill will generate the necessary Next.js component, including logic for fetching product data and displaying appropriate messages if data is loading, an error occurred, or no products are found.

Quick Start

Use the fsd-page skill to create a new page component for displaying user profiles.

Frequently Asked Questions about fsd-page

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

FAQPage Schema
How do I generate a Next.js page with loading and error states using TanStack Query?▼

To generate a Next.js page with loading and error states using TanStack Query, this Skill creates page components with integrated inline fallback UI for asynchronous data states. It automatically structures these pages within a Feature-Sliced Design (FSD) architecture.

How do I structure Next.js pages to comply with Feature-Sliced Design rules?▼

Structuring Next.js pages to comply with Feature-Sliced Design (FSD) rules involves placing components in the correct `src/pages/` or `app/` directories. This Skill automates that architectural placement while generating the page logic.

Can I add empty state handling automatically when creating Next.js components?▼

Yes, you can add empty state handling automatically when creating Next.js components. This Skill generates dynamic state handling logic that displays appropriate fallback UI components for empty results, loading spinners, and error messages.

Does this page generation tool support the Next.js app router directory structure?▼

Yes, this page generation tool supports the Next.js app router directory structure. It can create page components under either the `src/pages/` or `app/` directories, adhering to the Feature-Sliced Design project structure.

What is the best way to handle data fetching states in a React Feature-Sliced Design architecture?▼

The best way to handle data fetching states in a React Feature-Sliced Design architecture is using TanStack Query. This Skill generates pages that leverage TanStack Query for efficient data fetching alongside inline fallback UI components for state management.

Why does my Next.js page component need inline fallback UI for state management?▼

Your Next.js page component needs inline fallback UI for state management to handle asynchronous data availability. This Skill integrates these fallback components directly to display loading spinners, error messages, or empty states without requiring external UI libraries.

Related Skills

Explore More Software Engineering Skills→
syeda-hoorain-alisyeda-hoorain-ali

nextjs-project-initialization-and-best-practices

Initialize and structure Next.js projects with TypeScript, Tailwind, and App Router.

Community
Intermediate
BalagurudevBalagurudev

architect

Enforce Feature-Sliced Design architecture for Next.js applications.

Community
Intermediate
Mte90Mte90
51

Next.js Architecture (FSD)

Organizes Next.js applications into Feature-Sliced Design layers with defined import rules.

Community
Advanced
CloakingGhostCloakingGhost

frontend

Guide Next.js 16 frontend development with FSD architecture, TypeScript, Tailwind CSS, and Zustand.

Community
Intermediate