ui-preview

预览并截取本地开发服务器和 Storybook 的屏幕截图。当用户要求查看 UI 组件、截取 Storybook 屏幕截图，或检查 Web/服务器应用时，可使用此技能。

SKILL.md

--- frontmatter

name: ui-preview
description: 'Preview and screenshot local dev servers and storybooks. Use when asked to view UI components, take screenshots of storybooks, or inspect the web/server apps.'
metadata:
  version: '1'

UI Preview Skill

Preview local dev servers and storybooks using Chrome DevTools.

Available Tools

•navigate_page - Navigate to a URL
•take_screenshot - Capture a screenshot of the current page
•new_page - Open a new browser tab
•press_key - Press keyboard keys (e.g., scrolling with PageDown, End)
•evaluate_script - Run JavaScript on the page

Workflow

•Navigate to the target URL using navigate_page
•Screenshot the page using take_screenshot
•Analyze captured screenshots with look_at for visual analysis

Local Dev URLs

Check .amp/dev-environment.txt for the running URLs (defaults: web=http://localhost:7001, server=https://localhost:7002).

Service	Path
Web dev server	/
Server dev server	/
Webview storybook	/storybook
Server storybook	/storybook

Storybooks

Access a specific story directly using the hash: /storybook#${story-title}

The story title is derived from the filename: handoff-story.svelte → #handoff-tool

Webview Storybook (localhost:7001)

Components for the VS Code extension webview UI.

Thread Components:

•#thread - Full thread view
•#streaming-thread - Thread with streaming content
•#scrollable-thread - Thread with scroll behavior
•#thread-reply-area - Message input area
•#thread-status - Thread status indicators
•#thread-summary - Thread summary view
•#thread-hints - Thread hint suggestions
•#thread-environment-input - Environment input

Tool Calls:

•#bash - Bash tool output
•#edit-file - File edit diffs
•#create-file - File creation
•#read - File read output
•#grep - Search results
•#glob - File glob results
•#handoff-tool - Handoff tool states
•#mermaid - Diagram rendering
•#oracle-tool - Oracle tool output
•#task-tool - Task tool output
•#web-search - Web search results

Editor & Input:

•#prompt-editor - Message input editor
•#mention-menu - @mention autocomplete
•#combobox - Combobox component
•#agent-mode-selector - Agent mode picker

Diff Viewer:

•#diff-viewer - Side-by-side diff
•#diff-display - Inline diff display
•#unified-diff - Unified diff format

Settings:

•#settings-page - Settings page
•#settings-error-modal - Error modal
•#sign-in-page - Authentication page

Layout:

•#layout-navbar - Navigation bar
•#current-thread-navbar-item - Thread nav item

Server Storybook (localhost:7002)

Components for the ampcode.com web app.

Thread Management:

•#thread-feed - Thread list feed
•#thread-feed-item - Individual thread item
•#thread-feed-list - Virtualized thread list
•#thread-actions - Thread action buttons
•#thread-visibility - Visibility settings
•#thread-visibility-edit - Edit visibility
•#thread-page - Full thread page
•#thread-open-in-button - Open in editor button
•#pull-request-badge - PR badge display

Settings:

•#settings-access-token-section - API tokens
•#settings-advanced-section - Advanced settings
•#settings-client-section - Client settings
•#billing-section - Billing info
•#amp-free-section - Free tier info
•#code-host-connections-section - GitHub/GitLab connections

User & Profile:

•#avatar - User avatar
•#profile-card - Profile card
•#profile-dropdown - Profile menu
•#user-display - User name display

Dashboard:

•#welcome - Welcome page
•#usage-by-day - Usage metrics

UI Components:

•#amp-logo - Logo variants
•#badge-single - Single badge
•#badge-group - Badge group
•#copyable-text - Copy-to-clipboard text
•#colors - Color palette
•#icons - Icon set

OG Images:

•#og-images - Social preview images

Tips

•Story titles use kebab-case from filenames (remove -story.svelte)
•Reload the skill if MCP tools become unavailable
•Use list_pages to manage multiple browser tabs
•Use press_key with "End" or "PageDown" to scroll the page
•Use evaluate_script for custom page interactions