sima-page-structure

What problem does it solve?

This Skill provides a clear blueprint for structuring listing pages using React Suspense, dedicated loading states, and modular content components to improve performance and UX.

Core Features & Use Cases

• Structured Main Page: Defines server components for extracting search params, filtering, sorting, and pagination with a Suspense wrapper.
• Content Component Pattern: Separates data fetching and rendering into a dedicated {Entity}Content component, driven by a generic filters, currentPage, and sort props.
• Loading Skeletons: Guides to implement a loading component that mirrors the real content layout for smooth feedback.
• Pagination & Styling: Establishes a fixed bottom pagination wrapper and reusable page styling for consistency across entities.

Quick Start

Start by aligning your project structure to the described layout under app/(public)/{category}/{entity}/ and implementing the components and styles as outlined.