feat: add UI Preview skill and configuration for Chrome DevTools

Author: zainfathoni

.agents/skills/ui-preview/SKILL.md

@@ -0,0 +1,157 @@
+---
+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
+
+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).
+
+| 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

.agents/skills/ui-preview/mcp.json

@@ -0,0 +1,7 @@
+{
+	"chrome-devtools": {
+		"command": "npx",
+		"args": ["-y", "chrome-devtools-mcp@latest"],
+		"includeTools": ["navigate_page", "take_screenshot", "new_page", "list_pages", "press_key", "evaluate_script"]
+	}
+}