Custom Plugins

Frontguard ships a plugin architecture that lets you extend every stage of the pipeline through six lifecycle hooks. Five plugins are built in; writing your own is a plain object.

Built-in plugins

Figma

Design-to-code comparison, token extraction, component mapping.

Performance Budgets

LCP / CLS / TTFB thresholds correlated with the visual diff.

Accessibility

axe-core WCAG audits — contrast, alt text, focus — in one pass.

Third-Party Scripts

Flags ad / analytics / widget origins that appear or vanish.

Monitor

Production visual monitoring, threshold alerting, history.

Lifecycle hooks

Hooks are called in order. All are optional — implement only what you need. Hooks that return a value replace the input for the next plugin in the chain.

setup → beforeDiscover → afterDiscover → beforeRender →
afterRender → afterCompare → afterRun → teardown

Plugins are called in registration order; teardown runs LIFO. Plugin names must be unique.

Example: a Slack plugin

plugins/slack.ts

export function slackPlugin(webhookUrl: string): FrontguardPlugin {
  return {
    name: 'slack',
    async afterRun(result, ctx) {
      if (result.summary.regressions === 0) return;
      await fetch(webhookUrl, {
        method: 'POST',
        body: JSON.stringify({ text: `🔴 ${result.summary.regressions} regression(s)` }),
      });
    },
  };
}