link-implement-frontend-marketplacelisted

Implement the App Center/Marketplace UI pattern for Merge Link — a browsable integration catalog where users select and connect specific integrations. Use as Step 4b of Merge Link implementation when users should discover and connect multiple integrations.
merge-api/merge-unified-skills · ★ 0 · Web & Frontend · score 71

Install: claude install-skill merge-api/merge-unified-skills

# Implementing the App Center / Integration Marketplace > You're implementing the **App Marketplace** pattern — a browsable catalog where users discover and connect integrations. If you'd prefer a simpler single Connect button instead, use `link-implement-frontend-connect`. Builds an integration marketplace where users browse a catalog of available integrations and click to connect specific ones. Best for products that support many integrations across multiple categories. ## Prerequisites - `link-implement-backend` complete (all 4 endpoints working) - **React**: `npm install @mergeapi/react-merge-link` - **Vanilla JS**: `<script src="https://cdn.merge.dev/initialize.js"></script>` in `<head>` ## Before Proceeding **Step 1 — Confirm or gather required context:** - **Categories**: Which Merge categories should the marketplace display? (`hris`, `ats`, `crm`, `accounting`, `ticketing`, `filestorage`, `knowledgebase`) - **Frontend SDK** *(React only)*: React SDK (`@mergeapi/react-merge-link`) or CDN+vanilla JS? If invoked from `implementing-link`, both were answered in Step 1d — use that context. Otherwise, ask the user now. **Step 2 — Frontend pre-scan:** If invoked from `implementing-link`, the pre-scan was already done in Step 4 — use those findings (existing page location, or the user's answer about mockups). Otherwise, do the scan now: - Search the frontend for an existing integrations page, marketplace, or app catalog (filenames or routes like `marketplace`, `inte