Lars
7940dc7560
- .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
43 lines
1.2 KiB
Markdown
43 lines
1.2 KiB
Markdown
# 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:
|
||
```jsx
|
||
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
|