Skip to main content

makepad-screenshot

CRITICAL: Use for Makepad GUI screenshot debugging and visual inspection. Triggers on: /screenshot, 截图, 看看UI, 查看界面, capture makepad, run and capture, 运行并截图, 看看效果, UI截图, 界面截图, screenshot makepad, capture app, 截取应用, bring to front

الانتقال إلى التثبيت

معلومات المصدر

المستودع
ZhangHanDong/makepad-component
آخر نشاط في المصدر
١ فبراير ٢٠٢٦ في ٠٥:٥٠
لغة SKILL.md المكتشفة
الإنجليزية
النجوم
٣٧
التفرعات
١٤

خيارات التثبيت

يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.

مراجعة ملفات المصدر

اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.

عرض SKILL.md

SKILL.md
تعليمات المصدر · معاينة للقراءة فقط
name
makepad-screenshot
description
CRITICAL: Use for Makepad GUI screenshot debugging and visual inspection. Triggers on: /screenshot, 截图, 看看UI, 查看界面, capture makepad, run and capture, 运行并截图, 看看效果, UI截图, 界面截图, screenshot makepad, capture app, 截取应用, bring to front
userInvocable
true
# Makepad Screenshot Skill > Automated screenshot debugging for Makepad GUI applications ## Trigger Words - `/screenshot` - Capture current running Makepad app - `/screenshot <app-name>` - Capture specific app - `/run-and-capture <package>` - Build, run and capture - "截图", "看看UI", "查看界面", "capture makepad" ## Features Automates visual debugging workflow for Makepad apps: 1. Bring app window to front 2. Capture screenshot 3. Analyze screenshot with Read tool 4. Report UI issues or confirm correct rendering ## Usage ### 1. Capture Current Running App ``` /screenshot ``` Auto-detects and captures windows containing "makepad" or current project name. ### 2. Capture Specific App ``` /screenshot a2ui-demo ``` Captures app with window name containing "a2ui". ### 3. Build, Run and Capture ``` /run-and-capture a2ui-demo ``` Full workflow: cargo build → cargo run → wait for startup → capture. ## Implementation Steps ### Step 1: Detect Running App ```bash # Find Makepad-related processes ps aux | grep -E "(makepad|cargo.*run)" | grep -v grep ``` ### Step 2: Bring Window to Front (macOS) ```bash # Generic pattern - match by process name osascript -e 'tell application "System Events" to set frontmost of (first process whose name contains "APP_NAME") to true' # Example osascript -e 'tell application "System Events" to set frontmost of (first process whose name contains "a2ui") to true' ``` ### Step 3: Capture to Scratchpad ```bash # Silent capture (-x suppresses shutter sound) screencapture -x $SCRATCHPAD/screenshot.png ``` ### Step 4: View with Read Tool ``` Read $SCRATCHPAD/screenshot.png ``` Claude's Read tool supports image files and can directly analyze screenshot content. ## Complete Automation Script ### Capture Current App ```bash APP_NAME="${1:-makepad}" SCRATCHPAD="${SCRATCHPAD_DIR:-/tmp}" SCREENSHOT="$SCRATCHPAD/makepad_screenshot_$(date +%H%M%S).png" # Bring to front osascript -e "tell application \"System Events\" to set frontmost of (first process whose name contains \"$APP_NAME\") to true" 2>/dev/null sleep 0.5 # Capture screencapture -x "$SCREENSHOT" echo "$SCREENSHOT" ``` ### Build, Run and Capture ```bash PACKAGE="$1" SCRATCHPAD="${SCRATCHPAD_DIR:-/tmp}" SCREENSHOT="$SCRATCHPAD/${PACKAGE}_$(date +%H%M%S).png" # Kill old process pkill -f "$PACKAGE" 2>/dev/null # Build and run cargo build -p "$PACKAGE" && \ (cargo run -p "$PACKAGE" 2>&1 &) && \ sleep 5 && \ osascript -e "tell application \"System Events\" to set frontmost of (first process whose name contains \"$PACKAGE\") to true" && \ sleep 1 && \ screencapture -x "$SCREENSHOT" echo "$SCREENSHOT" ``` ## Claude Execution Flow When user says "截图" or "/screenshot": 1. **Detect App** ```bash ps aux | grep -E "cargo.*run|makepad" | grep -v grep | head -1 ``` 2. **Determine App Name** - Extract from process list - Or use current project's package name 3. **Execute Screenshot** ```bash osascript -e 'tell application "System Events" to set frontmost of (first process whose name contains "APP") to true' sleep 0.5 screencapture -x /path/to/scratchpad/screenshot.png ``` 4. **Read and Analyze** ``` Read /path/to/scratchpad/screenshot.png ``` 5. **Report Results** - Describe visible UI elements - Point out any issues (layout, colors, missing components) - Confirm functionality ## Notes - **macOS Only** - Uses `screencapture` and `osascript` - **Permission Required** - osascript needs accessibility permission - **Window Occlusion** - Must bring to front first - **Startup Time** - Need to sleep after cargo run to wait for window - **Scratchpad** - Use session-specific scratchpad directory for screenshots ## Example Interactions ### Example 1: Quick Screenshot ``` User: 截图看看现在的 UI Claude: 1. Detected running a2ui-demo 2. Execute screenshot command 3. Read screenshot file 4. Analysis: "UI displays normally, TextField shows input '你好', product list rendered 3 cards..." ``` ### Example 2: Build Run and Capture ``` User: /run-and-capture a2ui-demo Claude: 1. pkill old process 2. cargo build -p a2ui-demo 3. cargo run -p a2ui-demo & 4. sleep 5 wait for startup 5. Capture and analyze ``` ### Example 3: Verify Two-way Binding ``` User: I entered "Hello😊" in TextField, help me verify two-way binding with screenshot Claude: 1. Execute screenshot, save to scratchpad 2. Read screenshot, analyze UI 3. Output verification report: ┌────────────────────────────────────────┐ │ A2UI Demo - Product Catalog │ ├────────────────────────────────────────┤ │ [Search Products] │ │ ┌──────────────────────────────────┐ │ │ │ Hello😊 │ │ ← TextField shows input │ └──────────────────────────────────┘ │ │ Hello😊 │ ← Text (caption) synced │ │ │ Products (Template Rendering) │ │ ┌──────────────────────────────────┐ │ │ │ Premium Headphones | $99.99 | + │ │ │ └──────────────────────────────────┘ │ └────────────────────────────────────────┘ ✅ Two-way binding verification successful: | Component | Binding Path | Display Content | |-----------|--------------|-----------------| | TextField | /search/query | Hello😊 | | Text (caption) | /search/query | Hello😊 | ``` ## UI Analysis Report Format After screenshot, Claude should provide structured analysis: ### Basic Report ```markdown ## Screenshot Analysis **Application**: a2ui-demo **Time**: 2026-02-01 14:30:00 **Window State**: Normal display ### UI Elements | Element | Type | Content/State | |---------|------|---------------| | Title | Label | "A2UI Demo - Product Catalog" | | Search Box | TextField | Empty/Has input | | Product List | PortalList | 3 cards | ### Issue Detection - ✅ Layout normal - ✅ Text rendering normal - ⚠️ Image not loaded (network image) ``` ### Function Verification Report ```markdown ## Function Verification: TextField Two-way Binding **Test Scenario**: User enters content in TextField, verify data model sync ### Verification Result | Component | Binding Path | Expected | Actual | Status | |-----------|--------------|----------|--------|--------| | TextField | /search/query | Hello😊 | Hello😊 | ✅ | | Text (caption) | /search/query | Hello😊 | Hello😊 | ✅ | ### Conclusion ✅ **Two-way binding works correctly** - Unicode Chinese characters: ✅ - Emoji characters: ✅ - Real-time sync: ✅ ``` ## Common Issue Troubleshooting ### Window Cannot Be Brought to Front ```bash # Check if process is running ps aux | grep -E "a2ui|makepad" | grep -v grep # Try using process ID osascript -e 'tell application "System Events" to set frontmost of (first process whose unix id is PID) to true' ``` ### Screenshot is Black Screen Possible causes: 1. Window occluded by other windows - bring to front first 2. App still starting - increase sleep time 3. GPU rendering delay - wait 1-2 seconds before capture ### App Name Matching Issues Makepad compiled app names are usually package names (underscores to hyphens): - `a2ui-demo` → process name contains `a2ui` or `a2ui-demo` - `my_app` → process name contains `my_app` or `my-app` ## Related Skills - `makepad-basics` - Makepad fundamentals - `makepad-widgets` - Widget usage - `memory-skills` - Memory system --- **Context**: For automated visual debugging of Makepad GUI applications **Tags**: makepad, screenshot, debugging, gui, automation, macos
عرض على GitHub