/products

name: products-page-generator
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.
metadata:
  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