mcpbeat

Products Page Generator

kostja94/products-page-generator

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.

637 tokens
context cost
the whole folder, loaded on every use
1
files
instructions only
0
copies elsewhere
how many repositories repackaged it
836
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository 
npx skills add https://github.com/kostja94/marketing-skills --skill products-page-generator

The instruction itself

8 sections, as written by the author

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:

  • Page type: Category, collection, or product grid
  • Products: Count, filters, sorting
  • 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

How to use it

Copy the folder

Take kostja94/products-page-generator from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.