Lars/mitai-jinkendo
1
0
Fork 0
Code Issues 33 Pull Requests Actions Packages Projects Releases 5 Wiki Activity
develop
mitai-jinkendo/.claude/commands/ui-component.md
Lars 7940dc7560 docs: Struktur .claude/docs versionieren, working/, Gitea-Index, Regeln 
- .gitignore: .claude/docs, rules, commands tracken; settings.local weiter ignorieren
- DOCUMENTATION.md: verbindliche Ablage functional/technical/working/issues
- .claude/README.md: Agent-Einstieg; GITEA_ISSUES_INDEX aus MCP (Stand 2026-04-08)
- Arbeitspapiere von docs/ nach .claude/docs/working/ verschoben
- docs/MEMBERSHIP_SYSTEM.md als Stub; kanonisch technical/MEMBERSHIP_SYSTEM.md
- CLAUDE.md Pflichtlektüre und Links angepasst; docs/README.md vereinfacht

Made-with: Cursor
2026-04-08 13:01:49 +02:00

1.2 KiB
Raw Permalink Blame History

UI Component

Erstelle eine neue React-Komponente im Mitai Jinkendo Design-System.

Design-Regeln:

  • Hintergrund: var(--bg) oder var(--surface)
  • Akzentfarbe: var(--accent) = #1D9E75
  • Text: var(--text1) (primary), var(--text2) (secondary), var(--text3) (muted)
  • Border: var(--border)
  • Border-Radius: 12px für Cards, 8px für Buttons/Inputs
  • Kein TypeScript – reines JavaScript/JSX
  • Inline-Styles bevorzugt, keine externen CSS-Dateien
  • Keine neuen npm-Pakete ohne Absprache

Komponenten-Struktur:

function MeineKomponente({ prop1, prop2 }) {
  const [state, setState] = useState(null)
  
  return (
    <div className="card" style={{padding:16}}>
      ...
    </div>
  )
}

Vorhandene CSS-Klassen:

  • .card – weißer Container mit Schatten
  • .btn .btn-primary – grüner Button
  • .btn .btn-secondary – grauer Button
  • .btn-full – volle Breite
  • .form-input – Eingabefeld
  • .form-label – Label
  • .form-row – Label + Input + Unit nebeneinander
  • .section-gap – vertikaler Abstand
  • .spinner – Ladeindikator

API-Calls:

  • Immer über import { api } from '../utils/api'
  • Nie direktes fetch() verwenden
  • Token wird automatisch injiziert