mockuplm

# 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 ```html <!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...