skills.rest
RosenGray
RosenGrayCOMMUNITY
Explore all skills by this author →
GitHub

sima-detail-page

Fetch entity data by publicId and render interactive detail pages.

Updated Aug 23, 2026
Search Tags:#routing#Next.js#server-components#client-components#ui-pattern#detail-page
One-click install
npx skills add https://github.com/RosenGray/sima --skill sima-detail-page
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sima-detail-page
Source: https://github.com/RosenGray/sima/tree/main/.cursor/skills/sima-detail-page
Command: npx skills add https://github.com/RosenGray/sima --skill sima-detail-page

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building consistent, scalable detail pages requires coordinating server data fetching, routing, and interactive UI components.

Core Features & Use Cases

  • Standardized page structure for dynamic routes that fetch an entity by publicId on the server and render a client-side detail component.
  • Integrated image galleries, modals, and owner actions to support rich detail pages across products like vehicles, services, or listings.
  • Reusable layout patterns for badges, information sections, and contact data with authentication-aware visibility.

Quick Start

Create a detail page structure that fetches an entity by its publicId and renders a client detail component with an image gallery and basic owner actions.

Frequently Asked Questions about sima-detail-page

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

FAQPage Schema
How do I build a Next.js detail page that fetches server data and renders interactive client components?▼

To build a Next.js detail page with server components, fetch entity data by publicId on the server, then pass it to a client component to render interactive UI elements like image galleries and modals.

What is the best way to structure dynamic routes for a server-rendered detail interface?▼

The best way to structure dynamic routes for a detail interface is using a standardized layout pattern that separates server-side data fetching from client-side interactivity, including on-demand resource loading for scripts and assets.

Can I use server components and client components together for a single dynamic route in Next.js?▼

Yes, you can use server components and client components together by having the server component handle the publicId data fetching and rendering the client component to manage interactive features like owner actions and authentication-aware visibility.

How do I implement image galleries and modals within a server-rendered Next.js application?▼

Implement image galleries and modals by fetching the required entity data within your server component and rendering a dedicated client component that handles the interactive display logic and on-demand asset loading.

Does this detail page pattern support authentication-aware visibility for owner actions?▼

Yes, this detail page pattern supports authentication-aware visibility by using reusable layout patterns for badges and contact data, allowing you to conditionally render owner actions within the client component.

Related Skills

Explore More Software Engineering Skills→
lucasnobreelucasnobree

nextjs-pathname-id-fetch

Fetch data dynamically from URL parameters in Next.js server components.

Community
Intermediate
coastdigitalgroupcoastdigitalgroup
2

third-party-embed-optimization

Replace third-party embeds with facade previews and lazy-load on interaction.

Official
Advanced
giosuetedeschi-specgiosuetedeschi-spec

clerk-auth

Migrate your project to use androidx libraries with automated simplification of complex conditional logic and improved readability and maintainability of your Dart code.

Community
Intermediate
HollowvynHollowvyn

server-side-rendering

Generate complete HTML on the server for React applications.

Official
Intermediate