Skills
.Work. You
Rest

fsd-page

Community

Generate Next.js pages with data states

Software Engineering#frontend#react#next.js#component generation#tanstack query#fsd
Authorrladydqls99
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: fsd-page
Download link: https://github.com/rladydqls99/claude-marketplace/archive/main.zip#fsd-page

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.