원클릭으로 Manus에서 모든 스킬 실행

glimpse

스타1

포크0

업데이트2026년 3월 18일 16:47

Show native macOS UI from scripts and agents — dialogs, forms, visualizations, floating widgets, cursor companions. Use when you need to display HTML to the user, collect input, show a chart, render markdown, or create any visual interaction without a browser.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

joemccann

joemccann/sift

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

Glimpse — Native macOS Micro-UI

Glimpse opens a native macOS window with a WKWebView in under 50ms. You write HTML, the user sees it instantly. Bidirectional communication via window.glimpse.send() (webview -> Node) and .send(js) (Node -> webview).

When to use Glimpse:

You need user input beyond yes/no (forms, selections, text input)
You want to show something visual (charts, markdown, images, diffs)
You want to confirm a destructive action with a proper dialog
You want a floating indicator, notification, or companion widget
You need the user to interact with rich content

Import: Always use the absolute path to glimpse.mjs within the installed package:

import { open, prompt } from '/Users/joemccann/dev/apps/util/glimpse-ui/src/glimpse.mjs';

Quick Reference

One-Shot Dialog (prompt)

const answer = await prompt(html, {
  width: 400, height: 300,
  title: 'My Dialog',
  frameless: true,
  transparent: true,
});
// answer = data from window.glimpse.send(), or null if user closed window

Persistent Window (open)

const win = open(html, options);
win.on('ready', (info) => {});       // HTML loaded
win.on('message', data => {});       // user interaction
win.on('closed', () => {});          // window gone
win.send('document.title = "Hi"');   // eval JS in webview
win.setHTML('<h1>New content</h1>'); // replace HTML
win.close();                         // close window

All Options

{
  width, height,          // pixels (default: 800x600)
  title,                  // window title (default: "Glimpse")
  frameless: true,        // no title bar, draggable by background
  floating: true,         // always on top
  transparent: true,      // transparent window background
  clickThrough: true,     // mouse passes through window
  followCursor: true,     // window follows mouse cursor
  followMode: 'spring',   // 'snap' (instant, default) or 'spring' (elastic)
  cursorAnchor: 'top-right',
  cursorOffset: {x, y},
  openLinks: true,        // open clicked links in default browser
  autoClose: true,        // close after first message
  x, y,                   // exact screen position
  timeout,                // for prompt() only — ms before rejecting
}

In-Page JavaScript Bridge

window.glimpse.send(data)  // send data to Node (any JSON-serializable value)
window.glimpse.close()     // close the window from JS

Common Patterns

Confirm Dialog: prompt() with yes/no buttons, Enter/Escape keyboard handling
Text Input Form: Input fields with submit on Enter
Selection List: Arrow keys + Enter to pick from a list
Live Progress: open() + push updates via .send() as work progresses
Floating Notification: Frameless + transparent + floating + clickThrough + auto-dismiss
Cursor Companion: followCursor + clickThrough for agent status indicators
Command Palette: Frameless + transparent + backdrop blur + search input

Tips

Always set cursor: pointer on clickable elements
Use autofocus on the primary input field
Add keyboard shortcuts — Enter to confirm, Escape to cancel
For transparent windows, set background: transparent !important on <body>
prompt() returns null when the user closes without sending — always handle this
Be generous with window height — content clips without scrollbars

이 저장소의 다른 Skills

같은 저장소

macos-branded-notifications

joemccann/sift

Send branded macOS notifications with custom app icon using terminal-notifier. Use when implementing native Notification Center integration with custom branding.

2026-03-181

swiftui-ui-patterns

joemccann/sift

Best practices and example-driven guidance for building SwiftUI views and components. Use when creating or refactoring SwiftUI UI, designing tab architecture with TabView, composing screens, or needing component-specific patterns and examples.

2026-03-181

ai-chat-ux-best-practices

joemccann/sift

Use this skill when planning, auditing, or refining the assistant UX in the native macOS client, especially setup, settings, chat trust surfaces, prompt wrappers, and command transparency.

2026-03-131

metal-macos-replatform

joemccann/sift

Use this skill when planning, auditing, or implementing Metal-backed macOS desktop surfaces, especially hybrid SwiftUI/AppKit plus MetalKit apps, shader packaging, MTKView integration, and Metal toolchain setup.

2026-03-131

name	glimpse
description	Show native macOS UI from scripts and agents — dialogs, forms, visualizations, floating widgets, cursor companions. Use when you need to display HTML to the user, collect input, show a chart, render markdown, or create any visual interaction without a browser.

Glimpse — Native macOS Micro-UI

When to use Glimpse:

You need user input beyond yes/no (forms, selections, text input)
You want to show something visual (charts, markdown, images, diffs)
You want to confirm a destructive action with a proper dialog
You want a floating indicator, notification, or companion widget
You need the user to interact with rich content

Import: Always use the absolute path to glimpse.mjs within the installed package:

import { open, prompt } from '/Users/joemccann/dev/apps/util/glimpse-ui/src/glimpse.mjs';

Quick Reference

One-Shot Dialog (prompt)

const answer = await prompt(html, {
  width: 400, height: 300,
  title: 'My Dialog',
  frameless: true,
  transparent: true,
});
// answer = data from window.glimpse.send(), or null if user closed window

Persistent Window (open)

const win = open(html, options);
win.on('ready', (info) => {});       // HTML loaded
win.on('message', data => {});       // user interaction
win.on('closed', () => {});          // window gone
win.send('document.title = "Hi"');   // eval JS in webview
win.setHTML('<h1>New content</h1>'); // replace HTML
win.close();                         // close window

All Options

{
  width, height,          // pixels (default: 800x600)
  title,                  // window title (default: "Glimpse")
  frameless: true,        // no title bar, draggable by background
  floating: true,         // always on top
  transparent: true,      // transparent window background
  clickThrough: true,     // mouse passes through window
  followCursor: true,     // window follows mouse cursor
  followMode: 'spring',   // 'snap' (instant, default) or 'spring' (elastic)
  cursorAnchor: 'top-right',
  cursorOffset: {x, y},
  openLinks: true,        // open clicked links in default browser
  autoClose: true,        // close after first message
  x, y,                   // exact screen position
  timeout,                // for prompt() only — ms before rejecting
}

In-Page JavaScript Bridge

window.glimpse.send(data)  // send data to Node (any JSON-serializable value)
window.glimpse.close()     // close the window from JS

Common Patterns

Confirm Dialog: prompt() with yes/no buttons, Enter/Escape keyboard handling
Text Input Form: Input fields with submit on Enter
Selection List: Arrow keys + Enter to pick from a list
Live Progress: open() + push updates via .send() as work progresses
Floating Notification: Frameless + transparent + floating + clickThrough + auto-dismiss
Cursor Companion: followCursor + clickThrough for agent status indicators
Command Palette: Frameless + transparent + backdrop blur + search input

Tips

Always set cursor: pointer on clickable elements
Use autofocus on the primary input field
Add keyboard shortcuts — Enter to confirm, Escape to cancel
For transparent windows, set background: transparent !important on <body>
prompt() returns null when the user closes without sending — always handle this
Be generous with window height — content clips without scrollbars