/mockuplm

name: mockuplm
description: Create visual UX mockups using HTML/CSS files (.mockup.html). Use when the user wants to design UI, wireframes, visual layouts, or plan features visually.

MockupLM - Visual Planning

MockupLM is Nimbalyst's visual mockup system for UI/UX design and planning. Create `.mockup.html` files with HTML and inline CSS to share and iterate on designs with users.

When to Use MockupLM

• Planning new UI features or screens
• Designing layouts and visual hierarchy
• Creating wireframes or prototypes
• Visualizing proposed changes to existing screens
• Any situation where visual communication helps

**Do NOT use for implementation** - MockupLM is for planning only. If you're implementing actual code, don't create mockup files.

File Format

• **Extension**: `.mockup.html`
• **Location**: `nimbalyst-local/mockups/` for new designs, `nimbalyst-local/existing-screens/` for replicas of existing UI
• **Structure**: Standalone HTML with inline CSS, no external dependencies

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Inline CSS here */
  </style>
</head>
<body>
  <!-- Mockup content -->
</body>
</html>

Workflow

1. **Create mockup file** in `nimbalyst-local/mockups/[descriptive-name].mockup.html` 2. **Build the mockup** with HTML and inline CSS 3. **Verify visually** using the Task tool to spawn a sub-agent that will:

• Capture screenshot with `mcp__nimbalyst__capture_editor_screenshot`
• Analyze for layout/visual issues
• Fix with Edit tool if needed
• Re-capture and iterate until correct

User Annotations

Users can draw directly on mockups in the editor (circles, arrows, highlights). These annotations are NOT in the HTML source.

**To see user annotations**: Use `mcp__nimbalyst__capture_editor_screenshot` to capture a screenshot that includes the annotations.

When the user draws on a mockup: 1. Capture a screenshot to see what they marked 2. Interpret their visual feedback 3. Update the mockup accordingly

Design Guidelines

• **Realistic appearance**: Mockups should look like finished UI, not sketches
• **Clean HTML/CSS**: Use semantic HTML and minimal, well-organized CSS
• **Stable selectors**: When regenerating a mockup, preserve existing `id` and `class` values on elements that still represent the same UI; rename or remove them only when that element genuinely changes
• **Modern patterns**: Use flexbox, grid, CSS variables
• **Placeholder content**: Use realistic sample data (lorem ipsum, example names, etc.)
• **Responsive design**: Consider mobile breakpoints when appropriate

For Existing Screens

When modifying existing UI:

1. Check `nimbalyst-local/existing-screens/` for cached replicas 2. If no replica exists, create a pixel-perfect HTML/CSS replica first 3. Copy to `nimbalyst-local/mockups/` and apply modifications there 4. Never modify the original in existing-screens directly

File Naming

Use kebab-case with `.mockup.html` extension:

• `settings-page.mockup.html`
• `checkout-flow.mockup.html`
• `user-profile-card.mockup.html`