Solidjs Basic

Cursor-Regel für SolidJS-Grundlagen: Signals und JSX-Syntax statt Virtual-DOM-Pattern.

Original-Beschreibung der Autoren: Cursor rules for Solid.js development with basic setup.

Die Regel

---
description: "Cursor rules for Solid.js development with basic setup."
globs: **/*
alwaysApply: false
---
// Solid.js Basic Setup .cursorrules

// Prefer functional components

const preferFunctionalComponents = true;

// Solid.js best practices

const solidjsBestPractices = [
  "Use createSignal() for reactive state",
  "Utilize createEffect() for side effects",
  "Implement createMemo() for derived values",
  "Use createResource() for data fetching",
  "Implement Show and For components for conditional and list rendering",
  "Utilize createStore() for complex state management",
];

// Folder structure

const folderStructure = `
src/
  components/
  pages/
  utils/
  App.jsx
  index.jsx
public/
  index.html
`;

// Additional instructions

const additionalInstructions = `
1. Use JSX for component templates
2. Implement proper error boundaries
3. Utilize Solid Router for routing when applicable
4. Use Solid's built-in optimization features
5. Implement lazy-loading for improved performance
6. Follow Solid.js naming conventions and best practices
7. Use server-side rendering (SSR) when needed
`;

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

SolidJS wirkt syntaktisch wie React (JSX, Komponenten), rendert aber ohne virtuellen DOM — Reaktivität läuft über feingranulare Signals, die sich direkt an den echten DOM binden, wodurch Re-Renders ganzer Komponenten entfallen und die App spürbar schneller bleibt. Diese Basisregel sorgt dafür, dass Cursor SolidJS-typisch codiert statt aus Gewohnheit React-Patterns wie useState oder unnötige Wrapper-Funktionen vorzuschlagen, die in Solid entweder falsch oder überflüssig sind. Passend für Entwickler, die von React kommen und die Fallstricke (z. B. destrukturierte Props zerstören Reaktivität) vermeiden wollen.

Praxis-Tipp

Direkt zu Beginn eines neuen Solid-Projekts aktivieren, z. B. „Erstelle eine Counter-Komponente mit createSignal“ — verhindert, dass Cursor reflexartig React-Hooks-Syntax einmischt.

Lizenz & Quelle

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

Lade …