Pdp Audit
Research-backed UX and conversion audit of ecommerce product detail pages (PDPs). Use this skill whenever the user wants to review, audit, critique, or improve a product page — including requests like "review this PDP", "audit my product page", "why isn't this page converting", "UX review of [URL]", "check this product page against best practices", or when the user shares a product page URL or screenshots and asks for feedback. Also trigger for CRO reviews, conversion audits, or design QA of product pages, even if the words "audit" or "PDP" are not used.
Install
npx skills add llizell/pdp-audit --skill pdp-auditgit clone --depth 1 https://github.com/llizell/pdp-audit.git /tmp/pdp-audit
mkdir -p ~/.claude/skills
cp -r /tmp/pdp-audit/. ~/.claude/skills/pdp-auditPersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# PDP Audit Audit an ecommerce product detail page against research-backed UX and conversion guidelines. Produce a prioritized, evidence-based report a design or dev team can act on immediately. The guideline knowledge base lives in `references/pdp-guidelines.md`. Read it in full before auditing. If `references/private-guidelines.md` exists, read that too and treat its entries as additional checks (users may add their own research there — never create this file yourself). ## Step 1 — Capture evidence Determine what you have to work with: **Mode A: Live URL + browser access (Playwright MCP or similar).** 1. Open the URL at desktop width (1440px). Take a full-page screenshot, then screenshots of each zone as you scroll: gallery, buy box, description/specs, reviews, cross-sells, footer area. 2. Repeat at mobile width (390px). Pay attention to what is above the fold and whether a sticky add-to-cart appears on scroll. 3. Interact where guidelines require it: click a color/size swatch (does the gallery and price update?), open the size guide (overlay or new page?), attempt add-to-cart (what confirmation appears?), hover/tap the main image (zoom?). 4. Inspect the DOM where visuals are ambiguous: shipping info presence, structured data, disabled states, tap target sizes. **Mode B: Screenshots only.**
Details
- Skill name
pdp-audit- Repository
- llizell/pdp-audit
- License
- MIT
- Repo updated
- 17 August 2026
- Listed in
- karanb192/awesome-claude-skills
FAQ
What does the Pdp Audit skill do?
Research-backed UX and conversion audit of ecommerce product detail pages (PDPs). Use this skill whenever the user wants to review, audit, critique, or improve a product page — including requests like "review this PDP", "audit my product page", "why isn't this page converting", "UX review of [URL]", "check this product page against best practices", or when the user shares a product page URL or screenshots and asks for feedback. Also trigger for CRO reviews, conversion audits, or design QA of product pages, even if the words "audit" or "PDP" are not used.
How do I install the Pdp Audit skill?
skills CLI (Claude Code, Cursor, Codex and more): npx skills add llizell/pdp-audit --skill pdp-audit. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Related skills
Pro Motion
jack-reson8/pro-motion
Pro Motion: make a high-taste motion-graphics launch film, brand film, TVC or promo video and the unconventional campaign around it, audio first: pick a surprising campaign mechanism (media hijack, fake-broken ads, meme replies, UGC army, FOOH), plan the music as a marketing asset, then render the film in code (canvas to MP4) cut to the beat with AE-style effects. Also builds stylized web pages the same way (official site, landing page, interactive hero: live WebGL type, cutout subjects, try-with-your-photo, waitlist). Use when the user asks for a launch video, product film, brand ad, app prom
Multi Stack MCP
VovikP/multi-stack-mcp
Generate native UI sections (hero, pricing, features, CTA, footer) for Next.js, Flutter, WordPress, or Vue from a unified pattern catalog with shared design tokens. Use when the user asks to "add a hero", "insert pricing section", "build landing page section", "create Flutter widget for marketing block", or wants the same brand styling applied across multiple stacks.
Scanning For Accessibility Issues
jeremylongshore/claude-code-plugins-plus-skills
This skill enables Claude to perform comprehensive accessibility audits. It uses the accessibility-test-scanner plugin to identify WCAG 2.1/2.2 compliance issues, validate ARIA attributes, check keyboard navigation, and assess screen reader compatibility. Use this skill when the user requests an accessibility scan, audit, or compliance check, or when terms like "WCAG", "ARIA", "screen reader", "accessibility testing", or "a11y" are mentioned. It provides actionable insights for improving web application accessibility.
Impresario
Shushant17711/impresario
Use when building, creating, designing, redesigning, animating or polishing any website, landing page, portfolio, product page, hero, microsite, component or app screen in any frontend stack — even when the user gives only a subject ("make a website for X") with no style direction. Autonomously invents a memorable, subject-specific concept and ships heavily animated, flowing, award-level (Awwwards style) work without asking the user for style choices. Also use when a result looks generic, templated, AI-made, flat, static or lifeless.
Keyword Icons
1ruthless-coder-ai/keyword-icons
Generate clean monochrome PNG icons from a keyword — three distinct concepts per keyword, 1:1 aspect ratio, transparent background, recolorable, ready to drop into PowerPoint, Keynote, or docs. Use this whenever the user asks for an icon, pictogram, or "a simple graphic that represents X" (hospital, growth, contract, security, teamwork…), in any language, even if they never say the word "icon". Also use it when the user wants to recolor, resize, or tweak an icon made earlier.
Build with Better Design
1better-designs/better-design-plugin
Build or redesign a web or mobile interface on a Better Design design system. Use when the user asks for an app, site, page, dashboard or component and wants it built on Better Design, or asks to choose, create or install a design system.
Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.