Building Design Systems with Vue.js

{
  "title": "Building Design Systems with Vue.js",
  "description": "Strategies for creating consistent and scalable design systems using Vue.js, including component libraries and style guides.",
  "category": "Vue Cursor Rules",
  "rules": [
    {
      "id": "vue-component-naming-convention",
      "description": "Ensure all Vue components follow the PascalCase naming convention to maintain consistency and readability.",
      "severity": "error",
      "pattern": {
        "type": "component",
        "name": {
          "notMatch": "^[A-Z][a-zA-Z0-9]*$"
        }
      },
      "message": "Component names should be in PascalCase (e.g., 'MyComponent')."
    },
    {
      "id": "vue-single-responsibility",
      "description": "Enforce the Single Responsibility Principle by ensuring each component has a single, clear purpose.",
      "severity": "warning",
      "pattern": {
        "type": "component",
        "methods": {
          "count": {
            "greaterThan": 5
          }
        }
      },
      "message": "Components should adhere to the Single Responsibility Principle; consider splitting this component into smaller, focused components."
    },
    {
      "id": "vue-prop-validation",
      "description": "Require explicit prop validation to ensure data integrity and component reliability.",
      "severity": "error",
      "pattern": {
        "type": "component",
        "props": {
          "any": {
            "type": "any",
            "required": false
          }
        }
      },
      "message": "All props should have defined types and be marked as required when necessary."
    },
    {
      "id": "vue-api-module-pattern",
      "description": "Encourage the use of the API module pattern to abstract HTTP requests, promoting separation of concerns and maintainability.",
      "severity": "info",
      "pattern": {
        "type": "component",
        "methods": {
          "any": {
            "body": {
              "contains": "axios.get"
            }
          }
        }
      },
      "message": "Consider abstracting HTTP requests into a separate API module to keep components focused on UI logic."
    },
    {
      "id": "vue-component-folder-structure",
      "description": "Recommend organizing components into feature-based directories to enhance project scalability and maintainability.",
      "severity": "info",
      "pattern": {
        "type": "directory",
        "name": "components",
        "children": {
          "any": {
            "type": "file",
            "extension": "vue"
          }
        }
      },
      "message": "Consider structuring components into feature-based directories (e.g., 'components/FeatureName/') to improve organization and scalability."
    }
  ]
}