UI Design & Frontend Skills

Guide an AI coding agent through the full Merge Link implementation flow — context loading, database setup, backend API endpoints, and frontend UI. Use when starting a Merge integration, implementing Merge Link in a new project, setting up linkedaccounts, or building the connect button or app marketplace UI.

Guide an AI coding agent through the full post-connection experience — settings page, sync status visibility, relinking, integration configuration, custom fields, and category-specific data scope filtering. Use after completing Merge Link setup to build the ongoing integration management experience or settings UI.

Guide an AI coding agent through implementing Merge sync triggers — initial sync detection and subsequent incremental sync. Webhooks are the recommended primary approach; polling acts as a development starting point and a production fallback. Use after completing Merge Link setup when you need to fetch data from Merge, detect sync completion, or implement incremental data syncing. Triggers on: "set up data sync", "fetch data from Merge", "how do I get data from Merge", "start syncing from Merge", "fetch employee data after linking", "pull data from Merge", "sync data after connection", "implement Merge sync", "detect when Merge sync completes", "set up Merge webhooks", "Merge webhook handler", "incremental sync".

Implement the four Merge Link backend API endpoints: link token creation, public token exchange, relinking, and deletion. Use as Step 3 of Merge Link implementation.

Add a single "Connect" button that opens the Merge Link modal. Use as Step 4a of Merge Link implementation after backend endpoints are complete.

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.

Create the linkedaccounts database table required for Merge Link. Use as Step 2 of Merge Link implementation after loading context.

Build the dedicated integration settings page that lets end users manage their connected integrations — view connection health, reconnect/relink, configure per-integration settings (sync scope, field mappings, data filters, writeback behavior), and track setup completeness. Use as Step 2 of post-connection implementation. Use when a developer says "build settings page", "integration settings", "configure integration", "sync scope", "field mappings", "writeback configuration", or "setup completeness" for a Merge integration.

Establish a data-scope filtering strategy (pre-storage or post-storage) before syncing data from Merge. Customers rarely want every record their connected system has — they want a scoped subset (active employees in HRIS, candidates in a specific stage in ATS, accounts of a certain type in CRM, tickets from a specific project in Ticketing, etc.). Use as Step 6 of post-connection implementation when customers need control over which records are synced. Triggers on: "filter synced data", "selective sync", "sync scope", "employee filtering", "candidate filtering", "account filtering", "ticket filtering", "include/exclude records", "scope of sync".

Build a settings UI that lets customers select and enable custom fields from their connected system using Merge's Field Mapping API. Use as Step 5 of post-connection implementation when customers need access to fields beyond Merge's common models.

Implement relinking as a first-class in-product flow and surface detailed, actionable error messages that clarify who must act and how. Use as Step 4 of post-connection implementation to eliminate integration support tickets.

Implement sync status visibility and user-facing messaging for the initial sync timeline. Use as Step 3 of post-connection implementation to prevent user confusion while Merge syncs data in the background.

Implement Merge sync detection via a scheduled polling job. Use this as a development starting point (no public webhook endpoint required) and as a production fallback alongside sync-implement-webhooks to catch missed or delayed webhook deliveries. A single job covers both initial sync detection (first connection) and subsequent incremental syncs (modifiedafter bounded fetches). Use when a developer says "set up polling sync", "scheduled sync", "fallback sync", "sync without webhooks", "cron job for Merge", or wants a simple way to fetch data while developing locally.

Implement Merge sync detection via webhooks — the PRIMARY production-recommended approach. A single endpoint handles both initial sync detection (first connection) and subsequent incremental syncs (ongoing data updates), with HMAC verification and a bounded modifiedafter / modifiedbefore fetch window. Use when a developer says "set up Merge webhooks", "real-time sync", "implement sync", "fetch data from Merge", "Merge webhook handler", "Linked Account synced", "incremental sync", or after completing Merge Link. Production builders should also add sync-implement-polling as a fallback safety net.