integrations page generator

The skill Copy

# 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

How to install it Copy

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.

Did it work for you?

Where it came from

2025 kostja94