Uikit Guidelines

Hält die KI an bestehende UI-Kit-Komponenten, Spacing und Design-Tokens statt Ad-hoc-Styles.

Original-Beschreibung der Autoren: Cursor rules for UIKit development guidelines.

Die Regel

---
description: "Cursor rules for UIKit development guidelines."
globs: **/*
alwaysApply: false
---
you are an expert in coding with swift, iOS, UIKit. you always write maintainable code and clean code.
focus on latest documentation and features.
your descriptions should be short and concise.
don't remove any comments.

UIKit UI Design Principles:
1. Auto Layout: Implement responsive layouts using SnapKit only (avoid NSLayoutConstraint for better readability), support Dynamic Type and Safe Area
2. Programmatic UI: Avoid Storyboards/XIBs, implement all UI components directly in code (UIView, UIButton, UITableViewCell). Use view composition and custom view subclasses for reusability
3. UI Components must not directly access models or DTOs. Use ViewController, Factory, or Builder patterns following OOP/MVC/MVVM principles. Below are good and bad practice examples:

good practice:
```swift
let user = User(name: "Alice", email: "john@example.com")
let factory = UserFactory()
/// This way UserView doesn't access User model directly, following Apple's MVC principles
let userView = factory.createUserView(user: user)

bad practice:

let user = User(name: "Alice", email: "john@example.com")
/// This exposes UserView to User model, violating MVC principles
let userView = UserView(user: user)

4. UI components should pass events using closures, and the closure must pass ‘self’ as a parameter to allow external objects to identify the source component

class SampleView: UIView {
    var didTapButton: ((SampleView) -> Void)?
    private let button = UIButton()
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupUI()
        button.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
    }

    private func setupUI() {
        // setup UI
    }

    @objc private func buttonTapped() {
        didTapButton?(self)
    }
}

## So nutzt du sie

Die Regel kopieren (Button oben) oder als Datei herunterladen und im Projekt unter `.cursor/rules/` ablegen — Cursor lädt sie beim nächsten Start automatisch. Ältere Cursor-Versionen lesen alternativ eine einzelne `.cursorrules`-Datei im Projektstamm; dort einfach den Regel-Text ohne den Kopfblock zwischen den `---`-Zeilen einfügen.

Der Regel-Text ist englisch — Cursor versteht ihn unabhängig von der Sprache, in der Sie mit dem Editor chatten.


## Im Detail

Diese Regel soll verhindern, dass eine KI bei UI-Aufgaben eigene, ad-hoc gestylte Elemente erfindet, statt die vorhandenen Komponenten, Abstände und Design-Tokens eines UI-Kits zu verwenden. Das ist besonders relevant in gewachsenen Projekten mit eigenem Component-System, wo Inkonsistenz schnell entsteht, wenn jede neue Ansicht eigene Farben oder Abstandswerte mitbringt. Der Nutzen zeigt sich vor allem in Teams, die bereits ein etabliertes Design-System pflegen und visuelle Konsistenz über viele Seiten hinweg sicherstellen wollen. Ohne ein konkretes, dokumentiertes UI-Kit im Projekt läuft die Regel weitgehend ins Leere, da sie auf vorhandene Komponenten verweist, nicht auf Design-Prinzipien im Allgemeinen.

## Praxis-Tipp

Nur sinnvoll, wenn das UI-Kit vorher in der Regel selbst benannt oder verlinkt ist, sonst weiß die KI nicht, welche Komponenten gemeint sind.

## Siehe auch

- [Angular Novo Elements](/ki-verzeichnis/ide-tools/angular-novo-elements/)

## Lizenz & Quelle

- **Lizenz:** CC0 1.0
- **Quelle:** [PatrickJS/awesome-cursorrules (GitHub)](https://github.com/PatrickJS/awesome-cursorrules)

Lade …