{
  "id": "stack-profile:visual-regression-testing",
  "_kind": "StackProfile",
  "_file": "domain/stack-profiles/deep-stacks-5.yaml",
  "_cluster": "domain",
  "attributes": {
    "displayName": "Visual Regression Testing (Chromatic, Storybook, Playwright, React, TypeScript)",
    "description": "A visual regression testing pipeline that uses Storybook to isolate UI\ncomponents and Chromatic to capture pixel-perfect snapshots across every\npull request. Playwright provides supplementary full-page visual\ncomparisons for critical user flows that span multiple components. React\nand TypeScript power the component library with strict type safety.\nGitHub Actions triggers visual reviews on every PR, and Chromatic's\nbuilt-in review workflow lets designers approve or reject visual changes\nbefore merge. Targeted at design-system teams that need to prevent\naccidental UI regressions across hundreds of components. The tradeoff\nis snapshot storage costs and false positives from sub-pixel rendering\ndifferences across browser versions.\n",
    "composes": [
      "tool:chromatic",
      "tool:storybook",
      "tool:playwright",
      "framework:react",
      "language:typescript",
      "tool:github-actions",
      "library:react-testing-library",
      "library:tailwindcss"
    ]
  },
  "outgoingEdges": [
    {
      "from": "stack-profile:visual-regression-testing",
      "to": "tool:chromatic",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:visual-regression-testing",
      "to": "tool:storybook",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:visual-regression-testing",
      "to": "tool:playwright",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:visual-regression-testing",
      "to": "framework:react",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:visual-regression-testing",
      "to": "language:typescript",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:visual-regression-testing",
      "to": "tool:github-actions",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:visual-regression-testing",
      "to": "library:react-testing-library",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:visual-regression-testing",
      "to": "library:tailwindcss",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:visual-regression-testing",
      "to": "role:frontend-engineer",
      "kind": "used_by_role"
    },
    {
      "from": "stack-profile:visual-regression-testing",
      "to": "role:product-designer",
      "kind": "used_by_role"
    },
    {
      "from": "stack-profile:visual-regression-testing",
      "to": "role:qa-engineer",
      "kind": "used_by_role"
    },
    {
      "from": "stack-profile:visual-regression-testing",
      "to": "workflow:visual-regression-testing",
      "kind": "follows_workflow"
    },
    {
      "from": "stack-profile:visual-regression-testing",
      "to": "workflow:design-system-maintenance",
      "kind": "follows_workflow"
    },
    {
      "from": "stack-profile:visual-regression-testing",
      "to": "domain:frontend",
      "kind": "applies_to"
    },
    {
      "from": "stack-profile:visual-regression-testing",
      "to": "domain:qa-testing",
      "kind": "applies_to"
    },
    {
      "from": "stack-profile:visual-regression-testing",
      "to": "skill-area:visual-regression-testing",
      "kind": "requires_skill_area"
    },
    {
      "from": "stack-profile:visual-regression-testing",
      "to": "skill-area:component-testing",
      "kind": "requires_skill_area"
    },
    {
      "from": "stack-profile:visual-regression-testing",
      "to": "skill-area:design-systems",
      "kind": "requires_skill_area"
    },
    {
      "from": "stack-profile:visual-regression-testing",
      "to": "skill-area:frontend-testing",
      "kind": "requires_skill_area"
    },
    {
      "from": "stack-profile:visual-regression-testing",
      "to": "skill-area:ci-cd",
      "kind": "requires_skill_area"
    }
  ],
  "incomingEdges": []
}