Establishing Effective Component Naming Conventions in Vue

{
  "title": "Establishing Effective Component Naming Conventions in Vue",
  "description": "Learn how to create a clear and consistent naming convention for Vue components to improve readability and maintainability.",
  "category": "Vue Cursor Rules",
  "rules": [
    {
      "name": "Use Multi-Word Component Names",
      "description": "Ensure all component names consist of multiple words to prevent conflicts with existing and future HTML elements.",
      "severity": "error",
      "pattern": {
        "type": "component",
        "name": "^[a-zA-Z]+$"
      },
      "message": "Component names should be multi-word to avoid conflicts with HTML elements."
    },
    {
      "name": "Component Name Casing in JavaScript",
      "description": "Use PascalCase for component names in JavaScript files to distinguish them from HTML elements.",
      "severity": "error",
      "pattern": {
        "type": "component",
        "name": "^[a-z][a-zA-Z]+$"
      },
      "message": "Component names in JavaScript should be in PascalCase."
    },
    {
      "name": "Component Name Casing in Templates",
      "description": "Use kebab-case for component names in templates to align with HTML conventions.",
      "severity": "error",
      "pattern": {
        "type": "template",
        "name": "^[A-Z][a-zA-Z]+$"
      },
      "message": "Component names in templates should be in kebab-case."
    },
    {
      "name": "Use Full Words in Component Names",
      "description": "Avoid abbreviations in component names to enhance clarity and maintainability.",
      "severity": "warning",
      "pattern": {
        "type": "component",
        "name": ".*[A-Z]{2,}.*"
      },
      "message": "Component names should use full words instead of abbreviations."
    },
    {
      "name": "Prefix Base Components Appropriately",
      "description": "Prefix base components with 'Base', 'App', or 'V' to indicate their foundational role.",
      "severity": "warning",
      "pattern": {
        "type": "component",
        "name": "^(?!Base|App|V)[A-Z][a-zA-Z]+$"
      },
      "message": "Base components should be prefixed with 'Base', 'App', or 'V'."
    },
    {
      "name": "Prefix Single-Instance Components with 'The'",
      "description": "Prefix components that are intended to have a single active instance per page with 'The'.",
      "severity": "warning",
      "pattern": {
        "type": "component",
        "name": "^(?!The)[A-Z][a-zA-Z]+$"
      },
      "message": "Single-instance components should be prefixed with 'The'."
    }
  ]
}