npx claudepluginhub tody-agent/codymaster --plugin cmThis skill uses the workspace's default tool permissions.
Enables AI agents to execute x402 payments with per-task budgets, spending controls, and non-custodial wallets via MCP tools. Use when agents pay for APIs, services, or other agents.
Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.
Designs and optimizes AI agent action spaces, tool definitions, observation formats, error recovery, and context for higher task completion rates.
See it before you build it. This skill transforms vague user requests into precise, structured 'Construction Blueprints' for the Google Stitch AI generator, ensuring UI outputs are professional, consistent with project branding, and ergonomically sound.
ALWAYS trigger when the task involves building, redesigning, or modifying UI:
Trigger keywords: build UI, design page, create screen, landing page, dashboard layout, UI designer, use stitch, stitch me a ui, redesign, restyle
This skill operates as a pipeline. Do not skip steps.
┌─────────────────────────────────────────────────────────┐
│ cm-ui-preview Master Workflow │
├─────────────────────────────────────────────────────────┤
│ │
│ Step 1: PREFLIGHT & INTENT │
│ ├── Detect task: New UI vs. Refine/Beautify │
│ └── Verify Stitch MCP tools availability │
│ │
│ Step 2: DESIGN SYSTEM EXTRACTION (The Source of Truth) │
│ ├── Check: .stitch/DESIGN.md, css tokens, etc. │
│ └── Fallback: Trigger `cm-ux-master` to generate one │
│ │
│ Step 3: PROMPT ENHANCEMENT (The Build Blueprint) │
│ ├── Project Overview (What, who, style vibe) │
│ ├── Design System Specs (Colors, Typography, Layout) │
│ └── Page Structure (Core function + Specific areas) │
│ │
│ Step 4: STITCH EXECUTION (The Build Loop) │
│ ├── create_project() │
│ ├── generate_screen_from_text() │
│ ├── Present link + AI insights to user │
│ └── User Decision: Confirm / Edit / Skip │
│ │
│ Step 5: FINALIZATION & BATON PASS │
│ ├── Save state to .stitch/next-prompt.md │
│ └── Hand off to cm-execution for actual coding │
│ │
└─────────────────────────────────────────────────────────┘
create_project and generate_screen_from_text are available. If not, inform the user they are missing the Stitch tools but proceed with Prompt-Only generation (output the blueprint for them to use manually).edit_screens() on existing IDs instead of generate_screen_from_text().Before assembly, you MUST establish the design constraints.
Look for:
.stitch/DESIGN.md (Primary source for Stitch)design-system/MASTER.md (From cm-ux-master).cm/design-tokens.css or Tailwind configsIf no design system exists:
Suggest running cm-ux-master or create a .stitch/DESIGN.md baseline.
A baseline MUST contain:
DO NOT send vague prompts to Stitch (e.g., "Make a login page"). You must assemble an "Optimized Prompt Structure" — a detailed construction blueprint.
Structure your prompt exactly like this:
[Overall vibe, mood, and purpose of the page: e.g., "A modern fintech dashboard for B2B users. Professional, trustworthy, high data density, light mode."]
**DESIGN SYSTEM (REQUIRED):**
- Platform: Web Desktop-first
- Palette: Primary Blue (#0F62FE), Secondary Gray (#F4F4F4), Danger Red (#DA1E28)
- Typography: Inter for UI, Roboto Mono for numbers
- Styles: 4px border radius, subtle drop shadows on cards
**PAGE STRUCTURE & FUNCTION:**
### 1. Dashboard Home
**Core function**: Overview of recent transactions and account health.
- **Top Nav**: Brand logo, Global Search input, User Avatar dropdown.
- **Hero/Header**: Greeting "Welcome back, {User}", Total Balance callout (Large bold text).
- **Main Function Area**:
- Left col: Line chart showing 30-day revenue.
- Right col: Vertical list of "Recent Transactions" (Icon, Title, Date, Amount (Green/Red)).
- **Action Area**: Primary CTA "Send Money" (Blue fill, large), Secondary "Download Statement" (Outline).
Refine UI terminology: Replace "nice buttons" with "Primary CTA", replace "boxes" with "Cards". Apply relevant constraints from cm-ux-master (e.g., Miller's Law for chunking lists).
Project Creation:
mcp_StitchMCP_create_project({ title: "UI Preview — {Feature}" })
Screen Generation:
mcp_StitchMCP_generate_screen_from_text({
projectId: "<id>",
prompt: "<Your Optimized Prompt Blueprint>",
deviceType: "DESKTOP" // or MOBILE
})
User Presentation:
Show the output, provide the URL, and present the AI Insights (from the tool's outputComponents response).
🎨 **UI Preview Generated!**
- **Stitch Project ID:** `<id>`
- **View & Edit:** [Open in Google Stitch](https://stitch.withgoogle.com/projects/<id>)
- **AI Insights:** [Any suggestions or notes returned by Stitch]
What's next?
1. ✅ **Confirm** — I will write the code matching this design exactly.
2. ✏️ **Edit** — Tell me what to change, I'll update the preview.
3. ⏭️ **Skip** — Proceed straight to coding.
mcp_StitchMCP_edit_screens() with the specific element changes..stitch/next-prompt.md to feed into the next agent task or session for continuity.Pencil MCP tools are available and will be integrated as an alternative execution engine in future updates (batch_design, get_editor_state).