Enhancing Angular Applications with Web Components Integration

{
  "title": "Enhancing Angular Applications with Web Components Integration",
  "description": "Methods for incorporating Web Components into Angular projects to promote reusability and interoperability.",
  "category": "Angular Cursor Rules",
  "rules": [
    {
      "id": "angular-web-components-integration",
      "description": "Ensure seamless integration of Web Components into Angular applications to enhance reusability and interoperability.",
      "severity": "warning",
      "conditions": [
        {
          "type": "fileContent",
          "pattern": "<script\\s+src=.*\\.js\\s*>"
        },
        {
          "type": "fileContent",
          "pattern": "customElements\\.define\\("
        }
      ],
      "actions": [
        {
          "type": "insert",
          "position": "after",
          "pattern": "<script\\s+src=.*\\.js\\s*>",
          "content": "\nimport { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n\n@NgModule({\n  schemas: [CUSTOM_ELEMENTS_SCHEMA]\n})\nexport class AppModule { }\n"
        },
        {
          "type": "insert",
          "position": "after",
          "pattern": "customElements\\.define\\(",
          "content": "\nimport { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n\n@NgModule({\n  schemas: [CUSTOM_ELEMENTS_SCHEMA]\n})\nexport class AppModule { }\n"
        }
      ]
    }
  ]
}