/integrations

name: integrations-page-generator
description: When the user wants to create, optimize, or audit integrations, plugins, or extensions pages. Also use when the user mentions "integrations page," "plugins," "extensions," "add-ons," "API integrations," "connect with X," or "marketplace." For sitewide page planning, use website-structure.
metadata:
  version: 1.0.1

Pages: Integrations / Plugins

Guides integrations, plugins, and extensions pages. Shows how the product connects with Canva, Slack, Zapier, and other platforms. Common for SaaS, tools, and developer products.

**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, integrations, and target platforms.

Identify: 1. **Type**: Native integrations, plugins, extensions, API, webhooks 2. **Platforms**: Which to feature (Slack, Notion, Figma, etc.) 3. **Format**: Single page vs. per-integration pages 4. **Primary goal**: Install, connect, sign up

Page Structure

| Section | Purpose | |---------|---------| | **Headline** | "Integrate with [Platforms]" or "Connect [Product] to Your Stack" | | **Value** | Why integrations matter; workflow benefits | | **Catalog** | Grid or list: logo, name, short description, "Connect" or "Install" | | **Categories** | By use case (Productivity, Design, Dev) or platform type | | **API** | Link to api-page or docs if developer-focused | | **CTA** | Browse all, request integration, build your own |

Best Practices

Organization

• **By category**: Productivity, Design, Marketing, Dev tools
• **By platform**: Slack, Notion, Figma, Zapier
• **Search/filter**: For 20+ integrations
• **Featured**: Highlight top 5–10; rest in catalog

Content

• **Per integration**: Logo, 1–2 sentence benefit, "Connect" CTA
• **Use cases**: "Use with Slack to get notifications"
• **Screenshots**: Show connected workflow when possible

SEO

• **Intent**: Informational + commercial; "X integration," "X plugin"
• **Title**: "Integrations | Connect [Product] to [Platforms]" or "[Product] + Slack"
• **Internal links**: API, docs, features, pricing

Output Format

• **Headline** and value proposition
• **Catalog structure** (categories, layout)
• **Per-integration** copy (name, benefit, CTA)
• **Internal links** (API, docs)
• **SEO** metadata

Related Skills

• **card**: Integration card structure; logo, name, description, CTA; catalog grid
• **grid, list**: Catalog layout; grid or list format
• **api-page-generator**: API overview; link for developer integrations
• **docs-page-generator**: Integration setup guides in docs
• **category-page-generator**: Catalog layout for many integrations
• **landing-page-generator**: Integration-specific landing pages