ki-agenten-toolkit/.claude/skills/code-gen.md

name, description, user_invocable

name	description	user_invocable
code-gen	Generiert React Frontend und Node.js/Express Backend Code nach Best Practices	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
• Mobile-First Responsive Design (siehe unten)
• Dark Mode immer einbauen (siehe unten)
• Styling: Tailwind CSS oder CSS Modules

Mobile-First Pflicht

Jede Komponente wird zuerst für Mobile designt, dann für größere Screens erweitert:

• Tailwind: Basis-Klassen = Mobile, sm:, md:, lg: für größere Screens
• Touch-freundliche Elemente: min. 44x44px Tap-Targets
• Hamburger-Menu / Drawer-Navigation auf Mobile
• Flexible Grids: grid-cols-1 auf Mobile, sm:grid-cols-2, lg:grid-cols-3
• Bilder/Medien: max-w-full, Lazy Loading
• Formulare: Vollbreite Inputs auf Mobile, mehrspaltig ab md:
• Testen: Layout muss ab 320px Breite funktionieren

Dark Mode Pflicht

Jede Komponente muss Dark Mode unterstützen. Implementierung:

Theme-Provider (einmalig im Projekt)

// src/hooks/useTheme.ts
import { useState, useEffect, createContext, useContext } from 'react';

type Theme = 'light' | 'dark' | 'system';

const ThemeContext = createContext<{
  theme: Theme;
  resolvedTheme: 'light' | 'dark';
  setTheme: (theme: Theme) => void;
}>({ theme: 'system', resolvedTheme: 'light', setTheme: () => {} });

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<Theme>(() => {
    return (localStorage.getItem('theme') as Theme) || 'system';
  });

  const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>('light');

  useEffect(() => {
    const root = document.documentElement;
    const systemDark = window.matchMedia('(prefers-color-scheme: dark)');

    const apply = () => {
      const isDark = theme === 'dark' || (theme === 'system' && systemDark.matches);
      root.classList.toggle('dark', isDark);
      setResolvedTheme(isDark ? 'dark' : 'light');
    };

    apply();
    localStorage.setItem('theme', theme);
    systemDark.addEventListener('change', apply);
    return () => systemDark.removeEventListener('change', apply);
  }, [theme]);

  return (
    <ThemeContext.Provider value={{ theme, resolvedTheme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export const useTheme = () => useContext(ThemeContext);

Theme-Toggle Komponente

// src/components/ThemeToggle.tsx
import { useTheme } from '../hooks/useTheme';

export function ThemeToggle() {
  const { theme, setTheme } = useTheme();
  const next = { light: 'dark', dark: 'system', system: 'light' } as const;
  return (
    <button
      onClick={() => setTheme(next[theme])}
      className="p-2 rounded-lg bg-gray-200 dark:bg-gray-700 min-w-[44px] min-h-[44px]"
      aria-label="Theme wechseln"
    >
      {theme === 'light' ? '☀️' : theme === 'dark' ? '🌙' : '💻'}
    </button>
  );
}

Tailwind Dark Mode Config

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  // ...
}

Styling-Regeln für Dark Mode

• Immer dark: Variante angeben: bg-white dark:bg-gray-900
• Text: text-gray-900 dark:text-gray-100
• Borders: border-gray-200 dark:border-gray-700
• Inputs: bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100
• Hover: hover:bg-gray-100 dark:hover:bg-gray-800
• Keine hardcoded Farben ohne dark: Gegenstück

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 (inkl. useTheme)
  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
• Jede UI-Komponente: Mobile-First + Dark Mode