Astro TypeScript

Cursor-Regel für Astro+TypeScript: generiert typsicheren Code für Komponenten, Islands und Content Collections.

Original-Beschreibung der Autoren: Cursor rules for Astro development with TypeScript integration.

Die Regel

---
description: "Cursor rules for Astro development with TypeScript integration."
globs: **/*
alwaysApply: false
---
{
  "rules": {
    "commit_message_guidelines": {
      "description": "Guidelines for creating conventional commit messages.",
      
      "format": {
        "description": "The format for commit messages using the conventional commits spec.",
        "body": "[optional scope]: \n\n[optional body]\n\n[optional footer(s)]"
      },
      
      "enabled": true,
      
      "rules": [
        {
          "description": "Always suggest a conventional commit with a type and optional scope in lowercase letters."
        },
        {
          "description": "Keep the commit message concise and within 60 characters."
        },
        {
          "description": "Ensure the commit message is ready to be pasted into the terminal without further editing."
        },
        {
          "description": "Provide the full command to commit, not just the message."
        }
      ],
      
      "examples": [
        {
          "prompt": "<diff_context> /commit",
          "response": "git commit -m 'feat: add responsive navbar with TailwindCSS'"
        }
      ]
    },
    
    "development_guidelines": {
      "description": "Guidelines for developing code with Astro, TypeScript, and TailwindCSS.",
      
      "enabled": true,
      
      "rules": [
        {
          "description": "Enforce strict TypeScript settings, ensuring type safety across the project."
        },
        {
          "description": "Use TailwindCSS for all styling, keeping the utility-first approach in mind."
        },
        {
          "description": "Ensure Astro components are modular, reusable, and maintain a clear separation of concerns."
        }
      ]
    },
    
    "coding_style": {
      "description": "Guidelines for maintaining consistent coding style.",
      
      "enabled": true,
      
      "rules": [
        {
          "description": "Code must start with path/filename as a one-line comment."
        },
        {
          "description": "Comments should describe purpose, not effect."
        },
        {
          "description": "Prioritize modularity, DRY principles, and performance."
        }
      ]
    },
    
    "custom_slash_commands": {
      "description": "Custom slash commands.",
      
      "enabled": true,
      
      "commands": [
        {
          "name": "/commit",
          "description": "Generate a Git commit message using the conventional commits spec.",
          "enabled": true
        }
      ]
    }
  }
}

So nutzt du sie

Die Regel kopieren (Button oben) oder als Datei herunterladen und im Projekt unter .cursor/rules/ ablegen — Cursor lädt sie beim nächsten Start automatisch. Ältere Cursor-Versionen lesen alternativ eine einzelne .cursorrules-Datei im Projektstamm; dort einfach den Regel-Text ohne den Kopfblock zwischen den ----Zeilen einfügen.

Der Regel-Text ist englisch — Cursor versteht ihn unabhängig von der Sprache, in der Sie mit dem Editor chatten.

Im Detail

Regel für Astro-Projekte mit TypeScript: Sie gibt Cursor vor, wie Komponenten, Islands, Content Collections und Routing typsicher angelegt werden, statt generischen React- oder Vue-Code vorzuschlagen. Der Mehrwert liegt darin, dass Astros Hybrid-Modell — statisch gerenderte Seiten plus selektive Hydration — korrekt berücksichtigt wird, ein Punkt, an dem generische Frontend-Regeln oft danebenliegen. Lohnt sich für alle, die produktiv an Astro-Sites arbeiten und wollen, dass generierter Code zur bestehenden .astro-Struktur passt. Wie jede Regel der Sammlung nur ein Startpunkt: projektspezifische Integrationen sollte man ergänzen.

Praxis-Tipp

Prompt z. B. „Erstelle ProductCard.astro mit TypeScript-Props und einem client:visible-Island für den Warenkorb-Button“ — die Regel sorgt dafür, dass Hydration-Direktiven korrekt gesetzt werden.

Siehe auch

• Angular TypeScript

Lizenz & Quelle

• Lizenz: CC0 1.0
• Quelle: PatrickJS/awesome-cursorrules (GitHub)

Lade …