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:
- Type: Native integrations, plugins, extensions, API, webhooks
- Platforms: Which to feature (Slack, Notion, Figma, etc.)
- Format: Single page vs. per-integration pages
- 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
1---
2name: integrations-page-generator
3description: 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.
4metadata:
5 version: 1.0.1
6---
7
8# Pages: Integrations / Plugins
9
10Guides integrations, plugins, and extensions pages. Shows how the product connects with Canva, Slack, Zapier, and other platforms. Common for SaaS, tools, and developer products.
11
12**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.
13
14## Initial Assessment
15
16**Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for product, integrations, and target platforms.
17
18Identify:
191. **Type**: Native integrations, plugins, extensions, API, webhooks
202. **Platforms**: Which to feature (Slack, Notion, Figma, etc.)
213. **Format**: Single page vs. per-integration pages
224. **Primary goal**: Install, connect, sign up
23
24## Page Structure
25
26| Section | Purpose |
27|---------|---------|
28| **Headline** | "Integrate with [Platforms]" or "Connect [Product] to Your Stack" |
29| **Value** | Why integrations matter; workflow benefits |
30| **Catalog** | Grid or list: logo, name, short description, "Connect" or "Install" |
31| **Categories** | By use case (Productivity, Design, Dev) or platform type |
32| **API** | Link to api-page or docs if developer-focused |
33| **CTA** | Browse all, request integration, build your own |
34
35## Best Practices
36
37### Organization
38
39- **By category**: Productivity, Design, Marketing, Dev tools
40- **By platform**: Slack, Notion, Figma, Zapier
41- **Search/filter**: For 20+ integrations
42- **Featured**: Highlight top 5–10; rest in catalog
43
44### Content
45
46- **Per integration**: Logo, 1–2 sentence benefit, "Connect" CTA
47- **Use cases**: "Use with Slack to get notifications"
48- **Screenshots**: Show connected workflow when possible
49
50### SEO
51
52- **Intent**: Informational + commercial; "X integration," "X plugin"
53- **Title**: "Integrations | Connect [Product] to [Platforms]" or "[Product] + Slack"
54- **Internal links**: API, docs, features, pricing
55
56## Output Format
57
58- **Headline** and value proposition
59- **Catalog structure** (categories, layout)
60- **Per-integration** copy (name, benefit, CTA)
61- **Internal links** (API, docs)
62- **SEO** metadata
63
64## Related Skills
65
66- **card**: Integration card structure; logo, name, description, CTA; catalog grid
67- **grid, list**: Catalog layout; grid or list format
68- **api-page-generator**: API overview; link for developer integrations
69- **docs-page-generator**: Integration setup guides in docs
70- **category-page-generator**: Catalog layout for many integrations
71- **landing-page-generator**: Integration-specific landing pages
gabrielmoreira