{
  "id": "recipe.style-cards-and-edges",
  "goal": "Persist visual styling without leaving the WireDiagram contract.",
  "readFirst": [
    "/llm/schema/wire-diagram.json",
    "/llm/react.shape.json"
  ],
  "preferredPath": [
    "Use node.tone for common semantic color.",
    "Use node.style.fill, stroke, strokeWidth, strokeDasharray, borderRadius, opacity, shadow, and textColor for explicit card overrides.",
    "Use node.data.card only for serializable card content: title, description, badges, meta, progress, and footer.",
    "Use explicit edges when edge labels, edge tone, handles, style, labelStyle, or routing must persist.",
    "Use React CSS variables, colorMode, unstyled, and classNames for host app styling boundaries."
  ],
  "nodePatch": {
    "tone": "info",
    "style": {
      "fill": "#eef6ff",
      "stroke": "#2563eb",
      "borderRadius": 8,
      "shadow": true
    },
    "data": {
      "card": {
        "badges": [
          {
            "label": "SLA",
            "tone": "info"
          }
        ],
        "footer": "Auto-routed"
      }
    }
  },
  "edgePatch": {
    "label": "approved",
    "routing": "smoothstep",
    "style": {
      "stroke": "#16a34a",
      "strokeWidth": 2,
      "markerEnd": "arrow"
    },
    "labelStyle": {
      "background": "#ecfdf5",
      "fill": "#166534"
    }
  },
  "avoid": [
    "Do not store React components, HTML, SVG, or CSS in data.card.",
    "Do not require consumer Tailwind configuration for @aigentive/wire-react.",
    "Do not create separate card nodes for workflow cards."
  ]
}