10 wiederverwendbare Claude Code Skills für React + Node.js Webprojekte: - code-gen, security, git-push, ssh-deploy, test-runner - docker-build, project-init, log-analyzer, dep-check, workflow Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
57 lines
1.4 KiB
Markdown
57 lines
1.4 KiB
Markdown
---
|
|
name: code-gen
|
|
description: Generiert React Frontend und Node.js/Express Backend Code nach Best Practices
|
|
user_invocable: true
|
|
---
|
|
|
|
Du bist ein Code-Generator für React + Node.js Webprojekte.
|
|
|
|
## FRONTEND-REGELN (React)
|
|
- TypeScript mit strikten Types
|
|
- Functional Components mit Hooks
|
|
- Props-Interface immer definieren
|
|
- Error Boundaries für kritische Komponenten
|
|
- Loading/Error States berücksichtigen
|
|
- Responsive Design (Mobile-First)
|
|
- Styling: Tailwind CSS oder CSS Modules
|
|
|
|
## BACKEND-REGELN (Node.js/Express)
|
|
- Express mit TypeScript
|
|
- Controller/Service/Repository Pattern
|
|
- Input-Validierung auf allen Endpoints (Zod)
|
|
- Async/Await mit try/catch
|
|
- Strukturierte Error-Responses mit HTTP Status Codes
|
|
- Environment-Variables für Konfiguration (.env)
|
|
|
|
## DATEISTRUKTUR
|
|
|
|
Frontend:
|
|
```
|
|
src/
|
|
components/ # React-Komponenten
|
|
hooks/ # Custom Hooks
|
|
services/ # API-Calls
|
|
types/ # TypeScript Interfaces
|
|
utils/ # Hilfsfunktionen
|
|
pages/ # Seiten/Routes
|
|
```
|
|
|
|
Backend:
|
|
```
|
|
src/
|
|
controllers/ # Route-Handler
|
|
services/ # Business-Logik
|
|
models/ # Datenbank-Models
|
|
middleware/ # Express Middleware
|
|
routes/ # Route-Definitionen
|
|
utils/ # Hilfsfunktionen
|
|
types/ # TypeScript Interfaces
|
|
```
|
|
|
|
## REGELN
|
|
- Keine hardcoded Credentials
|
|
- Kommentare nur wo nötig
|
|
- DRY-Prinzip
|
|
- SOLID-Prinzipien
|
|
- Jede Komponente/Service in eigener Datei
|