{
  "id": "stack-profile:storybook-design-system",
  "_kind": "StackProfile",
  "_file": "domain/stack-profiles/deep-stacks-4.yaml",
  "_cluster": "domain",
  "attributes": {
    "displayName": "Storybook Design System Stack (React, Storybook, Chromatic, Tailwind, TypeScript)",
    "description": "A component-driven design system stack where React components are\ndeveloped and documented in Storybook, visually regression-tested with\nChromatic, and styled with Tailwind CSS utility classes. TypeScript\nenforces component prop contracts. Vitest handles unit tests for\ncomponent logic while Chromatic captures visual snapshots on every PR\nfor automated design review. The system publishes as an npm package\nconsumed by product teams across the organization. Designed for\ndesign systems teams in mid-to-large companies standardizing UI\nacross multiple products. The tradeoff is adoption friction —\nmaintaining a shared design system requires governance, versioning\ndiscipline, and continuous communication between design and\nengineering to prevent component proliferation and style drift.\n",
    "composes": [
      "framework:react",
      "tool:storybook",
      "tool:chromatic",
      "library:tailwindcss",
      "language:typescript",
      "tool:vitest"
    ]
  },
  "outgoingEdges": [
    {
      "from": "stack-profile:storybook-design-system",
      "to": "framework:react",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:storybook-design-system",
      "to": "tool:storybook",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:storybook-design-system",
      "to": "tool:chromatic",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:storybook-design-system",
      "to": "library:tailwindcss",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:storybook-design-system",
      "to": "language:typescript",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:storybook-design-system",
      "to": "tool:vitest",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:storybook-design-system",
      "to": "tool:npm",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:storybook-design-system",
      "to": "tool:github-actions",
      "kind": "composed_of"
    },
    {
      "from": "stack-profile:storybook-design-system",
      "to": "role:frontend-engineer",
      "kind": "used_by_role"
    },
    {
      "from": "stack-profile:storybook-design-system",
      "to": "role:product-designer",
      "kind": "used_by_role"
    },
    {
      "from": "stack-profile:storybook-design-system",
      "to": "role:design-lead",
      "kind": "used_by_role"
    },
    {
      "from": "stack-profile:storybook-design-system",
      "to": "workflow:design-system-maintenance",
      "kind": "follows_workflow"
    },
    {
      "from": "stack-profile:storybook-design-system",
      "to": "workflow:design-review",
      "kind": "follows_workflow"
    },
    {
      "from": "stack-profile:storybook-design-system",
      "to": "domain:frontend",
      "kind": "applies_to"
    },
    {
      "from": "stack-profile:storybook-design-system",
      "to": "domain:web-development",
      "kind": "applies_to"
    },
    {
      "from": "stack-profile:storybook-design-system",
      "to": "skill-area:design-systems",
      "kind": "requires_skill_area"
    },
    {
      "from": "stack-profile:storybook-design-system",
      "to": "skill-area:react-components",
      "kind": "requires_skill_area"
    },
    {
      "from": "stack-profile:storybook-design-system",
      "to": "skill-area:visual-regression-testing",
      "kind": "requires_skill_area"
    },
    {
      "from": "stack-profile:storybook-design-system",
      "to": "skill-area:frontend-development",
      "kind": "requires_skill_area"
    },
    {
      "from": "stack-profile:storybook-design-system",
      "to": "skill-area:ui-styling",
      "kind": "requires_skill_area"
    }
  ],
  "incomingEdges": []
}