Uikit Guidelines

Cursor-Regel für konsistente UI-Kit-Nutzung — hält die KI an 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 Cursor-Regel legt fest, wie sich der KI-Editor beim Schreiben von UI-Code an ein bestehendes UI-Kit hält – etwa welche Komponenten, Props, Spacing- und Farb-Tokens zu verwenden sind, statt eigene Ad-hoc-Styles zu erfinden. Datei in .cursor/rules ablegen, dann berücksichtigt Cursor sie automatisch bei jedem Vorschlag im Projekt. Sinnvoll für Teams mit einem etablierten Design-System, bei denen die KI sonst dazu neigt, Inline-Styles oder fremde Komponenten-Bibliotheken vorzuschlagen. Kein Ersatz für echte Lint-Regeln, aber hilft, Design-Drift in KI-generiertem Code früh zu vermeiden. Vor Einsatz Inhalt prüfen und ans eigene UI-Kit anpassen.

## Praxis-Tipp

In .cursor/rules speichern und projektbezogen anpassen (Komponentennamen, Token-Liste eintragen), bevor Cursor UI-Code generiert.

## Lizenz & Quelle

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

Lade …