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