Communitygithub.com

ai4s-research/open-science

Überprüfen Sie visuelle Frontend-Änderungen in der Desktop-App, ohne die Tauri-App oder ein Live-Modell zu starten.

Was ist open-science?

Diese Fähigkeit ermöglicht es Entwicklern, visuelle Änderungen an der Desktop-Frontend-Komponente schnell zu überprüfen, ohne die gesamte Tauri-Anwendung oder eine OpenCode-Sitzung ausführen zu müssen. Sie richtet einen temporären Vite-Entwicklungsserver ein, der eine einzelne Komponente in einer HTML-Datei rendert, sodass iterative UI-Anpassungen isoliert getestet werden können. Der Ablauf umfasst das Erstellen einer HTML- und einer TSX-Datei, das Starten eines Vite-Servers auf Port 5199 und die Steuerung des Browsers über die Chrome-HTTP-API (Port 9528), um visuelle Elemente zu überprüfen. Nach Abschluss werden alle temporären Dateien und der Serverprozess bereinigt. Die Fähigkeit unterstützt plattformunabhängige Validierung und ist ideal für Entwickler, die mit React-, Tailwind- und Tauri-basierten Desktop-Anwendungen arbeiten. Sie ist mit gängigen AI-Agenten wie Claude Code und Cursor kompatibel.

Funktioniert mit~Claude Code~Codex CLI~Cursor✓OpenCode
npx skills add https://github.com/ai4s-research/open-science/tree/HEAD/apps/desktop/.claude/skills/verify
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Überprüfen von Desktop-Frontend-Änderungen

Zum Ausführen der gesamten App werden eine OpenCode-Sitzung und ein Live-Modell-Durchlauf benötigt. Für reine Frontend-Komponentenänderungen kann die Komponente stattdessen in einer temporären Vite-Seite eingebunden werden:

  1. Erstellen Sie apps/desktop/verify-<x>.html (einfaches HTML, <div id="root">, <script type="module" src="/src/verify-<x>.tsx">) und apps/desktop/src/verify-<x>.tsx (ReactDOM.createRoot, importiere ./index.css für Tailwind, importiere die Komponente über @/). Vite stellt automatisch jede .html-Datei unter apps/desktop/ bereit.
  2. cd apps/desktop && npx vite --port 5199 --strictPort (im Hintergrund). Der npx-Wrapper kann doppelt spawnen und einen Fehler "Port in use" melden, während der erste Vorgang in Ordnung ist – prüfen Sie lsof -iTCP:5199 vor einem erneuten Versuch.
  3. Steuern Sie den Browser mit der Browser-Control-Fähigkeit (Chrome-HTTP-API, Port 9528): createWindow → waitForSelector → readDom → screenshotTab (Screenshots landen in ~/Downloads/). Fallstricke: evalScript wird durch CSP in der Erweiterung blockiert – verwenden Sie readDom/scrollTab stattdessen; readDom erfordert ein explizites "attributes": [], sonst wird ein Fehler "Value is unserializable" ausgegeben.
  4. Aufräumen: closeTab, killen Sie die Vite-PID, löschen Sie beide Hilfsdateien, und bestätigen Sie, dass git status sauber ist.

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community