--- name: crud-applikation-erstellen description: Erstellt ausdrücklich gewünschte CRUD-Anwendungen mit React, Shadcn Admin Kit, ra-core, Tailwind und standardmässig Spring Boot. Verwenden bei „Ich möchte eine CRUD-Applikation bauen“ oder einem ausdrücklich gewählten CRUD-Profil; nicht automatisch für allgemeine Web-GUIs oder spezifische Eingabeabläufe. --- # CRUD-Applikation erstellen Verwende dieses Profil, wenn der Benutzer eine CRUD-Anwendung ausdrücklich verlangt oder nach kurzer Eignungsprüfung wählt. Bestehende Projektentscheidungen und ausdrückliche Abweichungen haben Vorrang. Erzwinge keinen Stack-Wechsel. ## Wann und warum CRUD bedeutet Datensätze anlegen, lesen, ändern und löschen. Das Profil passt, wenn die Hauptaufgabe die Pflege klar benannter Ressourcen ist: etwa Inventar, Kontakte, Kataloge oder Stammdaten. Wiederkehrende Listen, Filter und Formulare lassen sich dann deklarativ beschreiben; das Framework übernimmt Datenzugriff, Navigation und Formularzustände. Das spart eigenen Ablaufcode. Wähle es nicht allein deshalb, weil eine Anwendung eine Datenbank hat. Bei geführten Beratungs- oder Erfassungsabläufen, grafischen Editoren, komplexen Freigaben oder stark interaktiven Fachwerkzeugen leite die Oberfläche aus der Nutzeraufgabe ab. Bei gemischten Anwendungen kann ein Verwaltungsbereich CRUD nutzen, während andere Bereiche individuell bleiben. Erzwinge fachliche Aktionen wie „freigeben“ oder „buchen“ nicht als beliebige Änderung eines Statusfelds. Die erste Grundlage für die Wahl ist gut lesbarer, schlanker GUI-Code durch Convention over Configuration: Wiederkehrende Abläufe folgen den Konventionen des Frameworks und müssen nicht jedes Mal selbst ausprogrammiert werden. Besonders geeignet ist das Profil für Greenfield-Projekte, in denen wir die Freiheit haben, diese Konventionen von Anfang an zu übernehmen. Beschreibe im GUI-Code vor allem Ressourcen, Spalten und Felder. Nutze die gekapselten Abläufe des Frameworks, statt sie selbst nachzubauen. Die zweite Leitlinie ist deklarative Programmierung: Beschreibe Listen und Formulare mit Komponenten und HTTP-Endpunkte im Spring-Backend mit Annotationen wie `@GetMapping`. Das Framework übernimmt die wiederkehrende technische Verarbeitung; fachliche Logik bleibt in den zuständigen Methoden. Shadcn Admin Kit mit ra-core und Spring Boot passen damit konzeptionell gut zusammen: Konventionen und deklarative Beschreibungen reduzieren eigenen Ablaufcode. Spring Boot ergänzt dies durch Auto-Konfiguration. Diese konzeptionelle Passung ersetzt nicht den vereinbarten API-Vertrag. ## Profil und Zuständigkeiten - Verwende React, TypeScript, Shadcn Admin Kit, ra-core und Tailwind; für eine neue eigenständige Oberfläche ist Vite der Ausgangspunkt. - Verwende Java mit Spring Boot als Backend, sofern nichts anderes vereinbart ist. Leite daraus weder eine automatische Backend-Migration noch öffentlich zugängliche Repository-Endpunkte ab. - Nutze ra-core für Ressourcen, Datenanbieter und CRUD-Abläufe. Shadcn Admin Kit verbindet diesen funktionalen Kern mit den sichtbaren shadcn/ui-Bausteinen. Das klassische React-admin mit Material UI ist eine Alternative, aber nicht die UI dieses Profils. - Prüfe kompatible aktuelle Versionen und die offizielle Installation vor dem Aufbau; fixiere gewählte Versionen. Kopiere keine alten Preset-Kommandos blind. - Halte Fachtexte, Dokumentation und fachliche Bezeichner deutsch. Behalte etablierte technische APIs und übernommene Bibliotheksnamen bei. Farben, Akzente und Hell/Dunkel sind frei; Schwarz ist keine Profilvorgabe. ## Ablauf 1. Entscheide anhand der Hauptaufgabe, ob und für welche Teile der Anwendung CRUD verwendet wird. Kläre die zu verwaltenden Daten, erlaubte Aktionen und Rollen. Dokumentiere die Entscheidung und ihre Gründe. Bei ungeeigneten Abläufen kläre den betroffenen Teil, statt die gesamte GUI diesem Profil unterzuordnen. Nutze [domain-modellieren](../domain-modellieren/SKILL.md) bei fachlichen Unklarheiten. 2. Lies Projektentscheidungen. Nutze [projekt-initialisieren](../projekt-initialisieren/SKILL.md) und [opentofu-initialisieren](../opentofu-initialisieren/SKILL.md), soweit eine Initialisierung zum Auftrag gehört. Ein Skill-Aufruf allein erlaubt keine Installation, Veröffentlichung oder Clustererstellung. Beachte [werkzeuge-verwalten](../werkzeuge-verwalten/SKILL.md). 3. Zeige zunächst eine kleine Ressource mit Liste und Formular. Verwende fertige Komponenten, bevor du eigene baust. Halte Listen, Formulare und ergänzende Zeilenaktionen übersichtlich. Teile Felddefinitionen für Anlegen/Bearbeiten, soweit sie dieselbe fachliche Bedeutung haben; baue keine universelle Formulargenerierung ohne Bedarf. 4. Verwende die untenstehenden Listenregeln und [gui-gestalten](../gui-gestalten/SKILL.md) für visuelle Qualität. Das hier ausdrücklich gewählte CRUD-Profil ersetzt dessen allgemeinen Stack-Vorschlag nur in diesem Umfang. Zeige neue Artefakte und stimme den Stil vor grösseren Ausbauschritten ab. 5. Trenne Prototyp und Integration: Kennzeichne erfundene, flüchtige Daten. Ein Fake-Datenanbieter beweist keine REST-Anbindung. Vereinbare für die API IDs, Filter, Sortierung, Seitennummerierung/Gesamtzahl, Fehlerformat und erlaubte Schreibfelder passend zum Datenanbieter. Halte Adapter schlank. 6. Prüfe mit [sicherheit-und-datenschutz-pruefen](../sicherheit-und-datenschutz-pruefen/SKILL.md) Berechtigungen und Mandantentrennung serverseitig für jede Aktion. Ein Auth-Provider oder versteckter Knopf schützt keine API. Wähle Login und Rollenmodell projektspezifisch; Keycloak ist keine automatische Vorgabe für jede CRUD-Anwendung. 7. Nutze [persistenz-gestalten](../persistenz-gestalten/SKILL.md) für relationale Datenhaltung und Migrationen und [code-strukturieren](../code-strukturieren/SKILL.md) für fachliche Schnitte. Geschäftsregeln, Validierung und Transaktionen gehören ins Backend. Kläre Archivierung, Beziehungen, konkurrierende Änderungen und tatsächliche Löschwirkung anhand der Ressource. 8. Prüfe den gewählten Slice nach [testgetrieben-entwickeln](../testgetrieben-entwickeln/SKILL.md): leere Liste, Suche, Anlegen, Bearbeiten, Pflichtfelder, Fehler und Löschabbruch/-erfolg. Prüfe Tastatur, Fokus, schmale/breite Ansicht und bei echter API auch unerlaubte Zugriffe. Nutze [aenderung-pruefen](../aenderung-pruefen/SKILL.md) vor Abschluss; unterscheide geprüfte Funktionen von offenen Integrationen. ## Listen und Aktionen - Setze eine klar benannte Hinzufügen-Aktion oberhalb der Liste. - Verwende den Datensatznamen als echten, per Tastatur erreichbaren Link zur passenden Detail- oder Bearbeitungsansicht. Zeilenklick darf ergänzen. - Bündle weitere Zeilenaktionen in einem dezenten Dreipunktmenü mit zugänglichem Namen pro Datensatz. Vermeide grosse, wiederholte Aktionsknöpfe je Zeile. - Benenne Aktionen mit Text; markiere Löschen zusätzlich als destruktiv. Öffne vor dem Löschen eine Bestätigung mit Datensatzname, tatsächlicher Wirkung und Abbrechen. Schütze vor Doppelaktionen und zeige Erfolg/Fehler. Ein Menü-/Dialogklick darf nicht zusätzlich die Zeilennavigation auslösen. - Stelle Fokus nach Menü/Dialog sinnvoll wieder her; bleibt nach dem Löschen kein Auslöser, führe ihn zu einem sinnvollen Element in der Liste. - Zeige Lade-, Leer-, Validierungs- und Fehlerzustände. Prüfe deutsche Texte einschliesslich ARIA-Beschriftungen; Übersetzungspakete können Lücken haben. - Sorge mobil für erreichbare Aktionen und verständliche Daten. Entscheide anhand der Aufgabe zwischen gestapelten Feldern und horizontalem Scrollen. ## Referenzen - [Convention over Configuration – Konvention vor Konfiguration](https://de.wikipedia.org/wiki/Konvention_vor_Konfiguration): begrifflicher Einstieg und erste Leitlinie; Konventionen übernehmen und Abweichungen ausdrücklich beschreiben. - [React-admin: Architektur](https://marmelab.com/react-admin/Architecture.html): zweite Leitlinie: deklarative Programmierung mit Komponenten sowie Trennung von ra-core, UI und Datenanbietern. - [Spring Framework: Annotierte Controller](https://docs.spring.io/spring-framework/reference/web/webmvc/mvc-controller.html): deklarative Endpunktzuordnung und Bindung von Eingaben und Antworten. - [Shadcn Admin Kit: Installation](https://marmelab.com/shadcn-admin-kit/docs/install/): offizieller Einstieg und aktuelle Voraussetzungen. - [Shadcn Admin Kit: EditButton](https://marmelab.com/shadcn-admin-kit/docs/editbutton/): Datensatzkontext und optionale Zeilennavigation. - [shadcn/ui](https://ui.shadcn.com/docs): anpassbarer Komponentenquellcode. - [Spring Boot: Auto-Konfiguration](https://docs.spring.io/spring-boot/reference/using/auto-configuration.html): abhängigkeitsbasierte Vorgaben, die durch eigene Konfiguration ersetzt werden können. ## Fertig, wenn - Eignung, Abgrenzung und ausdrückliche Stack-Abweichungen dokumentiert sind; - eine kleine Ressource verständlich und mit passenden Aktionen bedienbar ist; - der GUI-Code durch Framework-Konventionen schlank und gut lesbar bleibt; - Nachweise den tatsächlichen Prototyp- oder Integrationsumfang abdecken; - keine offenen Sicherheits- oder Integrationsarbeiten als erledigt gelten.