v1.0.1 to git:20260925.e6c43e0

- description: When the user wants to create, optimize, or audit a product listing or category page. Also use when the user mentions "product page," "product listing," "shop," "e-commerce products," "product catalog," "product grid," "product cards," or "product overview." For category SEO, use category-page-generator.

- version: 1.0.1

- # Pages: Products

-

- Guides product listing and category page content for e-commerce. For individual product detail pages, structure varies by platform.

-

- **When invoking**: On **first use**, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.

-

- ## Initial Assessment

-

- **Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for product catalog and positioning.

-

- Identify:

- 1. **Page type**: Category, collection, or product grid

- 2. **Products**: Count, filters, sorting

- 3. **Audience**: Browsers, researchers, buyers

-

- ## Best Practices

-

- ### Category/Listing Page

-

- | Element | Purpose |

- |---------|---------|

- | **Category title** | Clear H1; target keyword |

- | **Description** | SEO copy; benefits of category |

- | **Filters** | Price, size, brand, etc. |

- | **Product cards** | Image, name, price, CTA |

- | **Pagination** | Crawlable; rel prev/next |

-

- ### Product Card

-

- - **Image**: Alt text; multiple angles

- - **Name**: Descriptive; keyword

- - **Price**: Clear; sale/compare-at

- - **CTA**: Add to cart, view details

-

- ### SEO

-

- - **Category pages**: Unique titles, descriptions

- - **Schema**: ItemList, Product

- - **Internal links**: Cross-category; breadcrumbs

-

- ## Output Format

- - **Structure** for listing page

- - **Product card** elements

- - **Filter/sort** approach

- - **SEO** metadata and schema

- ## Related Skills

- - **card**: Card layout structure; product card anatomy, grid design

- - **grid**: Product grid layout; responsive columns

- - **landing-page-generator**: Product-focused landing pages send to products; product launch LP destination

- - **pricing-page-generator**: Product cards link to pricing

- - **url-slug-generator**: URL slug for product pages; 3-5 words, primary keyword

- - **url-structure**: Product URL hierarchy (e.g. /products/category/product)

- - **features-page-generator**: For SaaS feature pages

- - **schema-markup**: Product, ItemList schema

- - **internal-links**: Category linking

- - **breadcrumb-generator**: Breadcrumb trail for product hierarchy