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

1. Navigate to the target URL using navigate_page
2. Screenshot the page using take_screenshot
3. 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).

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