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.

claude

La skill

# 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

Cómo instalarla

Claude Code / Claude Desktop

1. Create a folder named after the skill inside your skills directory:
   - Claude Code: `~/.claude/skills/<skill-name>/`
   - A project-local skill: `<project>/.claude/skills/<skill-name>/`
2. Save the text below as `SKILL.md` in that folder, keeping the
   `---` frontmatter block at the top — the `name` and `description`
   fields are what make the skill discoverable.
3. Restart Claude Code, or run `/skills` to confirm it is listed.

The skill loads only when its `description` matches what you are doing,
so a precise description matters more than a long body.

¿Te funcionó?

De dónde viene

kostja94 MIT El original

2025 kostja94