Generate a production-grade Product Detail Page (PDP) optimized for the 2026 conversion benchmarks — 4-8% target vs 1.5-3% average. Triggers: "product page", "PDP", "product detail page", "Shopify product page", "ecommerce conversion".
The English summary is being prepared. Showing the original description.
Run score Not tested
See how to installReview the instructions the agent will receive before you install.
You generate a complete, conversion-optimized PDP. The 2026 benchmark is clear: average sites convert at 1.5-3%, top performers at 4-8% — a 2-3× gap explained by measurable elements, not magic. Your job is to ship those elements.
The single biggest gap-closer: image quality + social proof + page speed. Walmart found each 1-second-faster page delivered +2% conversion. Page loading in 2.4s converts at 1.9%; 5.7s converts at 0.6%.
Verify before building:
Recovery:
Eye-tracking shows users scan PDPs in F-pattern. The viewport-above-fold zones (in priority order):
Generate the layout as semantic HTML with proper landmarks (<main>, <section>, <aside>). Mobile-first CSS (default styles for ≤768px, media queries for tablet/desktop). Touch targets ≥44px.
VALIDATION: Lighthouse mobile Best Practices ≥ 90. CLS < 0.1 (every image has explicit width/height). LCP image preloaded.
93% of consumers cite visual appearance as the top purchase factor. The image system MUST:
<picture><source type="image/avif">....srcset at 320w/640w/1024w/1600w/2560w.<head>: <link rel="preload" as="image" href="..." imagesrcset="..." imagesizes="...">.<video autoplay muted loop playsinline poster> on desktop, click-to-play on mobile (battery).VALIDATION: Hero image LCP < 2.5s on Slow 4G. Image markup passes Lighthouse Image best practices.
Products with 5+ reviews convert 270% better. Build the proof block as:
nofollow outbound links.VALIDATION: Above-fold area on mobile shows at least one social proof element. AggregateRating schema validates.
Critical CTAs:
Variant selectors:
aria-label, current-state styling, "out of stock" greyed not hidden.Inventory urgency (only if accurate):
VALIDATION: CTA is keyboard-focusable, has visible focus ring, aria-disabled when out-of-stock.
Generate JSON-LD for the product:
{
"@context": "https://schema.org",
"@type": "Product",
"name": "...",
"image": ["..."],
"description": "...",
"sku": "...",
"brand": { "@type": "Brand", "name": "..." },
"offers": {
"@type": "Offer",
"url": "...",
"priceCurrency": "USD",
"price": 49.99,
"availability": "https://schema.org/InStock",
"itemCondition": "https://schema.org/NewCondition",
"shippingDetails": { "@type": "OfferShippingDetails", ... },
"hasMerchantReturnPolicy": { "@type": "MerchantReturnPolicy", ... }
},
"aggregateRating": { "@type": "AggregateRating", "ratingValue": 4.7, "reviewCount": 128 },
"review": [ ... top 3 reviews ... ]
}
Include shippingDetails and hasMerchantReturnPolicy — these unlock Google Shopping rich results in 2026.
VALIDATION: Passes Google Rich Results Test for Product. AggregateRating has a real value (not 0/0).
Top performers run disciplined experiments and read the data honestly. Generate:
pdp.experiments.json) compatible with Optimizely, VWO, Statsig, GrowthBook, or LaunchDarkly.pdp_view, pdp_image_zoom, pdp_variant_select, pdp_add_to_cart, pdp_buy_now, pdp_exit.VALIDATION: Sample-size calculator does the math (not just emits a TODO). Experiment config maps to user's chosen platform.
pdp/
├── README.md # Where to drop files in each platform
├── components/
│ ├── ProductHero.{tsx|liquid|vue}
│ ├── ProductGallery.{tsx|liquid|vue}
│ ├── ProductVariants.{tsx|liquid|vue}
│ ├── ProductSocialProof.{tsx|liquid|vue}
│ ├── ProductSchema.{tsx|liquid|vue}
│ └── ProductCTA.{tsx|liquid|vue}
├── styles/
│ └── pdp.css # Mobile-first responsive
├── schema/
│ └── product-jsonld.example.json
├── experiments/
│ └── pdp.experiments.json
├── tracking/
│ └── events.spec.md
└── perf/
└── lighthouse-budget.json # CI gate: LCP<2.5s, INP<200ms, CLS<0.1
Score 1–5:
Most common gap: forgetting LCP image preload → hero takes 4s on Slow 4G → conversion craters. Verify the <link rel="preload"> is in the head, not just <img loading="eager">.
Append to ~/.claude/skills/pdp-builder/LEARNINGS.md:
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Run a full Section 508 + WCAG 2.2 Level AA accessibility audit on a federal / .gov / public-sector website or ICT product. Triggers: "Section 508", "508 audit", "WCAG", "VPAT", "ACR".
The English summary is being prepared. Showing the original description.
Analyzes actuarial modeling systems for loss reserving accuracy, premium pricing methodology, mortality/morbidity tables, stochastic modeling, and capital adequacy per SOA and Solvency II standards..
The English summary is being prepared. Showing the original description.
Analyzes advertising yield across programmatic and direct-sold inventory including CPM/CPC/CPA performance, header bidding efficiency, fill rate optimization, inventory monetization strategies, and compliance with IAB standards and OpenRTB protocols..
The English summary is being prepared. Showing the original description.
Create and manage Architecture Decision Records using the Michael Nygard format. Triggers: you need to document architecture decisions, record technical choices, explain why a technology was chosen.
The English summary is being prepared. Showing the original description.
Analyzes affordable housing management software for unit allocation algorithms, waitlist management, income verification workflows, Fair Housing compliance, LIHTC and Section 8 program tracking, inspection scheduling, and tenant reporting..
The English summary is being prepared. Showing the original description.
Rewrites existing landing pages, blog posts, and documentation so AI search engines (Google AI Overviews, ChatGPT, Perplexity, Claude, Gemini) cite them. Triggers: an existing page underperforms in AI answers despite ranking well in classic SERPs.
The English summary is being prepared. Showing the original description.