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".
インストールする前に、エージェントに与えられる指示の中身を確認できます。
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:
まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
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".
日本語の概要は準備中です。原文の説明を表示しています。
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..
日本語の概要は準備中です。原文の説明を表示しています。
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..
日本語の概要は準備中です。原文の説明を表示しています。
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.
日本語の概要は準備中です。原文の説明を表示しています。
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..
日本語の概要は準備中です。原文の説明を表示しています。
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.
日本語の概要は準備中です。原文の説明を表示しています。