tinycorn-studio/agent-skills

Aperçu UI avant tout (standard TinyCorn Studio)

Règle : toute modification de l'interface doit être accompagnée d'une image de prévisualisation approuvée par l'utilisateur avant d'être appliquée au code.

Workflow

1. Écrire le script de rendu hors écran dans tools/preview_<nom>.swift — pas besoin de lancer l'application, rendu direct en PNG 2x.

2. Exécuter et ouvrir l'image pour l'utilisateur :

   swift tools/preview_<nom>.swift ~/Desktop/<App>-<Nom>-Preview.png
   open ~/Desktop/<App>-<Nom>-Preview.png
   

3. Demander l'approbation — s'il y a plusieurs choix de design, générer 2 à 4 variantes côte à côte et demander à l'utilisateur de choisir (A/B/C/D).

4. N'appliquer qu'après validation de l'utilisateur. Commiter le script de prévisualisation avec la fonctionnalité.

5. Si l'utilisateur demande des ajustements : modifier le script, refaire le rendu, répéter jusqu'à approbation.

Squelette de code (SwiftUI, macOS)

import AppKit
import SwiftUI

struct PreviewRoot: View {
    var body: some View {
        // Construire une UI simulée avec les composants/couleurs exacts de l'application
        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)")

Pièges (rencontrés en vrai)

• Ne pas nommer de variable globale avec le même nom qu'un modificateur/vue SwiftUI (ex : border) → erreur de surcharge. Utiliser borderColor.
• Un en-tête partagé entre plusieurs méthodes ne pas le déclarer plusieurs fois dans le même fichier.
• Rendu 2x : définir rep.size ou utiliser bitmapImageRepForCachingDisplay + cacheDisplay comme ci-dessus ; ne pas oublier layoutSubtreeIfNeeded() avant la mise en cache.
• Ne pas utiliser screencapture/AppleScript pour capturer l'application — la machine manque souvent des droits d'enregistrement d'écran (-1743). Le rendu hors écran est la seule méthode fiable.
• Application en thème sombre : utiliser les mêmes Color(nsColor:) et assets de l'application pour que la prévisualisation corresponde à la réalité.
• Enregistrer l'image sur ~/Desktop/ pour que l'utilisateur la trouve facilement, nom sous la forme <App>-<Fonctionnalité>-Preview.png.

Au-delà de SwiftUI

• Web : ouvrir une maquette HTML dans le navigateur puis capturer, ou utiliser Playwright pour une capture d'écran.
• CLI/TUI : rendu avec des ANSI dans le terminal ou description textuelle colorée.

Règle inchangée : image d'abord, code ensuite, validation utilisateur avant application.