Skip to content
Merged
Show file tree
Hide file tree
Changes from 13 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
157 changes: 157 additions & 0 deletions .agents/skills/ui-preview/SKILL.md
Original file line number Diff line number Diff line change
@@ -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
7 changes: 7 additions & 0 deletions .agents/skills/ui-preview/mcp.json
Original file line number Diff line number Diff line change
@@ -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"]
}
}
2 changes: 0 additions & 2 deletions .claude/settings.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
{
"enabledPlugins": {
"beads@beads-marketplace": true,
"pr-review-toolkit@claude-plugins-official": true,
"typescript-lsp@claude-plugins-official": true
}
}
48 changes: 48 additions & 0 deletions .dockerignore
Original file line number Diff line number Diff line change
@@ -1 +1,49 @@
# Dependencies
node_modules

# Build outputs (will be rebuilt in container)
build
.cache

# Database files (mounted as volumes in production)
prisma/*.db
prisma/*.db-journal
prisma/dumps

# Environment files (use Docker secrets or env vars)
.env
.env.*
!.env.example

# Git
.git
.gitignore
.gitattributes

# IDE and editor
.vscode
.idea
*.swp
*.swo

# Documentation
*.md
!README.md
docs

# Testing
e2e
coverage
playwright-report
test-results
*.spec.ts

# CI/CD
.github
.husky

# Misc
.DS_Store
*.log
.beads
.claude
Loading
Loading