skills.rest
saleor
saleorOFFICIAL
Explore all skills by this author →
Website𝕏@getsaleorGitHub

pdp

Implement Product Detail Pages with server and client component orchestration.

1.5k|875|Updated Aug 20, 2021
Search Tags:#caching#ecommerce#gallery#error-boundaries#server-actions#variant#pdp
One-click install
npx skills add https://github.com/saleor/storefront --skill pdp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pdp
Source: https://github.com/saleor/storefront/tree/main/.claude/skills/pdp
Command: npx skills add https://github.com/saleor/storefront --skill pdp

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

PDP architecture, image gallery, caching, and add-to-cart flow guidance to accelerate development and reliable debugging of product detail pages across channels.

Core Features & Use Cases

  • Structured PDP architecture: server+client components, gallery, and add-to-cart flow.
  • Robust data handling: caching strategies, Suspense, and ErrorBoundary integration to prevent full-page crashes.
  • Variant-aware visuals: variant-specific images and dynamic gallery behavior with URL-driven state.
  • Debug and optimization: guidance for LCP improvements, responsive behavior, and component composition.

Quick Start

Inspect the PDP architecture and start implementing the gallery, caching, and add-to-cart flow following the guide.

Frequently Asked Questions about pdp

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

FAQPage Schema
How do I structure server and client components for a product detail page?▼

Server and client component orchestration for a product detail page separates data fetching from interactive UI. Server components handle initial data and caching strategies, while client components manage variant selection and gallery state.

Why does my product image gallery crash when switching variants?▼

Variant images crash when gallery state is not synced with URL-driven parameters. Debugging variant-specific images requires dynamic gallery behavior tied to URL state and error boundaries to prevent full-page crashes.

How do I improve LCP performance on an ecommerce product detail page?▼

LCP performance on a product detail page improves by optimizing server component data fetching, applying caching strategies, and using Suspense for responsive image loading. Debugging LCP ensures faster storefront delivery.

What's the best way to handle errors in a PDP add-to-cart flow?▼

Handling errors in a PDP add-to-cart flow requires ErrorBoundary integration to prevent full-page crashes. Robust data handling combines server actions with error boundaries to isolate failures.

Can I use server actions for caching on an ecommerce product detail page?▼

Server actions support caching on an ecommerce product detail page by orchestrating data fetching with server components. Caching strategies ensure reliable data handling across the add-to-cart flow.

Do I need error boundaries to debug a PDP image gallery?▼

Error boundaries are necessary to debug a PDP image gallery because they prevent full-page crashes during dynamic visual updates. Variant-aware visuals require robust error handling to maintain gallery stability.

Related Skills

Explore More Software Engineering Skills→
FindMalekFindMalek
9

dukkani-storefront

Guide consistent storefront implementation across apps/storefront with architecture rules.

Community
Advanced
tomtoto757tomtoto757
14

product-page-design

Design responsive product detail pages with accessible variant selectors and sticky mobile add-to-cart bars.

Community
Intermediate
zebbernzebbern
5

next-best-practices

Apply Next.js App Router best practices for structure, data fetching, and error handling.

Community
Advanced
systemifyautomationsystemifyautomation

competitor-alternatives

Generate competitor comparison and alternative pages for SEO and sales enablement.

Community
Advanced