tinycorn-studio/agent-skills

Prévia de UI primeiro (Padrão TinyCorn Studio)

Regra: toda alteração de interface deve ter uma imagem de prévia aprovada pelo usuário antes de ser aplicada ao código.

Fluxo de trabalho

1. Escreva um script de renderização offscreen em tools/preview_<nome>.swift — não é necessário executar o aplicativo, renderize diretamente para PNG 2x.

2. Execute e abra a imagem para o usuário:

   swift tools/preview_<nome>.swift ~/Desktop/<App>-<Nome>-Preview.png
   open ~/Desktop/<App>-<Nome>-Preview.png
   

3. Solicite aprovação — se houver múltiplas opções de design, renderize 2–4 alternativas lado a lado e peça ao usuário para escolher (A/B/C/D).

4. Aplique apenas após o usuário OK. Faça commit do script de prévia junto com a funcionalidade.

5. Se o usuário solicitar ajustes: modifique o script, renderize novamente e repita até a aprovação.

Esqueleto de código (SwiftUI, macOS)

import AppKit
import SwiftUI

struct PreviewRoot: View {
    var body: some View {
        // Monte a UI simulada usando os mesmos componentes/cores do 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)")

Armadilhas (já encontradas na prática)

• Não nomeie variáveis globais com o mesmo nome de modifier/view SwiftUI (ex: border) → erro de overload. Use borderColor.
• Cabeçalhos compartilhados entre métodos: não declare repetidamente em outros locais do mesmo arquivo.
• Renderização 2x: defina rep.size ou use bitmapImageRepForCachingDisplay + cacheDisplay como acima; não esqueça layoutSubtreeIfNeeded() antes de cachear.
• Não use screencapture/AppleScript para capturar o aplicativo — a máquina geralmente não tem permissão de Gravação de Tela (-1743). Renderização offscreen é a única forma confiável.
• Tema escuro do app: use Color(nsColor:) e assets do app para que a prévia corresponda à realidade.
• Salve a imagem em ~/Desktop/ para facilitar o acesso do usuário, com nome no formato <App>-<Feature>-Preview.png.

Fora do SwiftUI

• Web: abra o HTML mockup no navegador e capture, ou use Playwright para screenshot.
• CLI/TUI: renderize com ANSI no terminal ou descreva o texto com cores.

O princípio geral permanece o mesmo: imagem primeiro, código depois, usuário aprova para aplicar.