How do I install the Mockuplm skill?

Run npx skillmds@latest add nimbalyst/mockuplm in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Mockuplm safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Mockuplm?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Mockuplm free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Mockuplm?

nimbalyst (@nimbalyst) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Mockuplm by nimbalyst — Agent Skill

Name: Mockuplm
Author: nimbalyst

File contents

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

Create mockup file in nimbalyst-local/mockups/[descriptive-name].mockup.html
Build the mockup with HTML and inline CSS
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:

Capture a screenshot to see what they marked
Interpret their visual feedback
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:

Check nimbalyst-local/existing-screens/ for cached replicas
If no replica exists, create a pixel-perfect HTML/CSS replica first
Copy to nimbalyst-local/mockups/ and apply modifications there
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

---name: mockuplmdescription: 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 PlanningMockupLM 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> </body></html>```## Workflow1. **Create mockup file** in `nimbalyst-local/mockups/[descriptive-name].mockup.html`2. **Build the mockup** with HTML and inline CSS3. **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 AnnotationsUsers 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 marked2. Interpret their visual feedback3. 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 ScreensWhen modifying existing UI:1. Check `nimbalyst-local/existing-screens/` for cached replicas2. If no replica exists, create a pixel-perfect HTML/CSS replica first3. Copy to `nimbalyst-local/mockups/` and apply modifications there4. Never modify the original in existing-screens directly## File NamingUse kebab-case with `.mockup.html` extension:- `settings-page.mockup.html`- `checkout-flow.mockup.html`- `user-profile-card.mockup.html`

Frequently asked questions

Mockuplm