# Mockuplm

Create visual UX mockups using HTML/CSS files (.mockup.html).

- Repository: https://github.com/nimbalyst/nimbalyst (2013 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-31
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add nimbalyst/nimbalyst --skill mockuplm -g -a claude-code -y`
Codex: `npx skills add nimbalyst/nimbalyst --skill mockuplm -g -a codex -y`
Cursor: `npx skills add nimbalyst/nimbalyst --skill mockuplm -g -a cursor -y`
Gemini CLI: `npx skills add nimbalyst/nimbalyst --skill mockuplm -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add nimbalyst/nimbalyst`

## 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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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 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

The rest: https://github.com/nimbalyst/nimbalyst/blob/HEAD/packages/extensions/mockuplm/claude-plugin/skills/mockuplm/SKILL.md