Communitygithub.com

visuelles-urteil

Strukturiertes visuelles QA-Urteil für Screenshot-zu-Referenz-Vergleiche.

Was ist visuelles-urteil?

Dieses Skill stellt ein strukturiertes Bewertungssystem für visuelle Vergleiche zwischen generierten UI-Screenshots und Referenzbildern bereit. Es gibt ein JSON-Urteil mit einer Bewertung, einem Bestehen/Überarbeiten/Fehlschlag-Status und einer Liste konkreter visueller Unterschiede aus. Entwickler können dieses Skill nutzen, um visuelle Wiedergabetreue-Anforderungen wie Layout, Abstände, Typografie und Komponentenstil deterministisch zu bewerten, bevor sie mit der nächsten Bearbeitungsiteration fortfahren. Es unterstützt optionale Kategoriehinweise, um die Bewertung an spezifische UI-Kategorien wie HackerNews, SNS-Feed oder Dashboard anzupassen. Das Skill wird durch einen visuellen Debug-Workflow ergänzt, der Pixel-Diff-Tools als sekundäre Hilfe zur Lokalisierung von Hotspots einsetzt, die in umsetzbare Vorschläge umgewandelt werden können.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Yeachan-Heo/oh-my-claudecode/tree/main/skills/visual-verdict

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

<Verwendung_Wann>

  • Die Aufgabe umfasst visuelle Wiedergabeanforderungen (Layout, Abstände, Typografie, Komponentenstil)
  • Sie haben einen generierten Screenshot und mindestens ein Referenzbild
  • Sie benötigen eine deterministische Bestehen/Überarbeiten-Führung, bevor Sie mit Bearbeitungen fortfahren </Verwendung_Wann>

<Ausgabe_Vertrag> Geben Sie nur JSON mit dieser exakten Struktur zurück:

{
  "score": 0,
  "verdict": "revise",
  "category_match": false,
  "differences": ["..."],
  "suggestions": ["..."],
  "reasoning": "kurze Erklärung"
}

Regeln:

  • score: Ganzzahl 0-100
  • verdict: Kurzstatus (pass, revise oder fail)
  • category_match: true, wenn der generierte Screenshot der beabsichtigten UI-Kategorie / dem Stil entspricht
  • differences[]: Konkrete visuelle Abweichungen (Layout, Abstände, Typografie, Farben, Hierarchie)
  • suggestions[]: Umsetzbare nächste Bearbeitungen, die mit den Unterschieden verknüpft sind
  • reasoning: Zusammenfassung in 1-2 Sätzen </Ausgabe_Vertrag>

<Schwellwert_Und_Schleife>

  • Zielbestehensschwelle ist 90+.
  • Wenn score < 90, bearbeiten Sie weiter und führen Sie /oh-my-claudecode:visuelles-urteil erneut aus, bevor Sie einen weiteren visuellen Überprüfungsdurchlauf starten.
  • Betrachten Sie die visuelle Aufgabe nicht als abgeschlossen, bis der nächste Screenshot die Schwelle überschreitet. </Schwellwert_Und_Schleife>

<Debug_Visualisierung> Wenn die Fehldiagnose schwierig ist:

  1. Behalten Sie $visual-verdict als maßgebliche Entscheidung bei.
  2. Verwenden Sie Pixel-Diff-Tools (Pixel-Diff / Pixelmatch-Overlay) als sekundäres Debug-Hilfsmittel, um Hotspots zu lokalisieren.
  3. Konvertieren Sie Pixel-Diff-Hotspots in konkrete differences[]- und suggestions[]-Aktualisierungen. </Debug_Visualisierung>

Aufgabe: {{ARGUMENTS}}

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

agent-doc-discipline

Writing-time discipline for documents agents consume (the five surfaces, specs, tickets, .omc/skills/) — every rule checkable and carrying a why, steps before reference, one meaning in one home, no restating what the environment already says. Mandatory at drydock seed generation and the launch C5 sediment pass; opt-in for any other agent-facing doc edit. The companion of minimal-code-discipline: that one disciplines code, this one disciplines papers.

ai-slop-cleaner

Clean AI-generated code slop with a regression-safe, deletion-first workflow and optional reviewer-only mode

ask

Process-first advisor routing for Claude, Codex, Gemini, Antigravity, Grok, or Cursor via `omc ask`, with artifact capture and no raw CLI assembly

ask-navigator

Shipyard

autopilot

Full autonomous execution from idea to working code

autoresearch

Stateful single-mission improvement loop with strict evaluator contract, markdown decision logs, and max-runtime stop behavior

cancel

Cancel any active OMC mode (autopilot, ralph, ultragoal, swarm, ultrapilot, pipeline, team) and clean up retired legacy state

configure-notifications

Configure notification integrations (Telegram, Discord, Slack) via natural language

debug

Diagnose the current OMC session or repo state using logs, traces, state, and focused reproduction

deepinit

Deep codebase initialization with hierarchical AGENTS.md documentation

deep-interview

Socratic deep interview with mathematical ambiguity gating before explicit execution approval

drydock

Lay the keel of the shipyard harness in any repo — the 4-pillar shared environment (Context, Rules, Tools, Standards) across 5 surfaces (CLAUDE.md, skills, design-system, mcp/cli, shared context) so that every human and agent inherits the same design language and anyone can ship. Run once per repo; re-run with --check to audit drift.

execute

Carry an approved task through to working, verified code

external-context

Invoke parallel document-specialist agents for external web searches and documentation lookup

graph

Deterministic orchestration graph runtime - declarative DAG pipelines with journal-based crash recovery

harbor

Harbor intake for external work — the captain only handles unresolved decisions. Sweeps incoming issues and PRs, verifies every claim before disposition, reuses every decision already made, and hands the maintainer a docket whose pending items each carry one question with options, recommendation, impact and evidence. Agent-autonomous for facts and for actions covered by standing authorization; signed for every new judgment. Never merges.

hud

Configure HUD display options (layout, presets, display elements)

launch

Shipyard

loft

Loft the shape before cutting steel — answer a design question that prose cannot settle by building a throwaway artifact: a pure logic module in a clickable shell, or structurally different UI variants behind one route. The captain reacts to the artifact; the answer folds into the decision; the artifact never docks. Use when a design question stalls in words, when a navigator map carries a loft ticket, or when a spec discussion reaches

minimal-code-discipline

YAGNI-ladder coding discipline for writing changes — existence-first, reuse before writing, dependency ladder, shortest correct diff, with non-negotiables that must never be minimized away

Verwandte Skills