tinycorn-studio/agent-skills

UI-Vorschau zuerst (TinyCorn Studio Standard)

Regel: Jede UI-Änderung muss zuerst als Vorschau-Bild vom Benutzer genehmigt werden, bevor sie in den Code übernommen wird.

Workflow

1. Schreibe ein Offscreen-Rendering-Skript in tools/preview_<name>.swift — kein App-Start nötig, rendere direkt als 2x-PNG.

2. Führe es aus und öffne das Bild für den Benutzer:

   swift tools/preview_<name>.swift ~/Desktop/<App>-<Name>-Preview.png
   open ~/Desktop/<App>-<Name>-Preview.png
   

3. Genehmigung einholen — bei mehreren Designoptionen 2–4 Varianten nebeneinander rendern und den Benutzer wählen lassen (A/B/C/D).

4. Erst nach Benutzer-OK anwenden. Das Vorschau-Skript mit der Funktion committen.

5. Bei Änderungswünschen: Skript anpassen, erneut rendern, wiederholen bis zur Genehmigung.

Code-Skelett (SwiftUI, macOS)

import AppKit
import SwiftUI

struct PreviewRoot: View {
    var body: some View {
        // Erstelle eine simulierte UI mit exakten Komponenten/Farben der App
        VStack { /* ... */ }
            .frame(width: 900, height: 600)
            .background(Color(nsColor: .windowBackgroundColor))
    }
}

let host = NSHostingView(rootView: PreviewRoot())
host.frame = NSRect(x: 0, y: 0, width: 900, height: 600)
host.layoutSubtreeIfNeeded()

let rep = host.bitmapImageRepForCachingDisplay(in: host.bounds)!
host.cacheDisplay(in: host.bounds, to: rep)

let png = rep.representation(using: .png, properties: [:])!
let out = CommandLine.arguments.count > 1
    ? CommandLine.arguments[1]
    : "preview.png"
try! png.write(to: URL(fileURLWithPath: out))
print("Wrote \(out)")

Fallstricke (echt erlebt)

• Globale Variablennamen nicht mit SwiftUI-Modifiern/Views überschreiben (z. B. border) → Überladungsfehler. Stattdessen borderColor verwenden.
• Header werden von mehreren Methoden gemeinsam genutzt, daher nicht doppelt deklarieren an anderen Stellen in derselben Datei.
• 2x-Rendering: rep.size setzen oder bitmapImageRepForCachingDisplay + cacheDisplay wie oben verwenden; layoutSubtreeIfNeeded() vor dem Caching nicht vergessen.
• Kein screencapture/AppleScript zum App-Screenshot verwenden — der Rechner hat oft keine Screen-Recording-Berechtigung (-1743). Offscreen-Rendering ist der einzig zuverlässige Weg.
• Dunkles Theme: Gleiche Color(nsColor:) und Assets der App verwenden, damit die Vorschau der Realität entspricht.
• Bild auf ~/Desktop/ speichern, damit der Benutzer es leicht findet; Dateiname im Format <App>-<Feature>-Preview.png.

Außerhalb von SwiftUI

• Web: HTML-Mockup im Browser öffnen und Screenshot machen, oder Playwright-Screenshot verwenden.
• CLI/TUI: Mit ANSI im Terminal rendern oder farbigen Text beschreiben.

Die goldene Regel bleibt: Bild zuerst, Code danach, Benutzer genehmigt erst dann.