// 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.
| 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 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.
Do NOT use for implementation - MockupLM is for planning only. If you're implementing actual code, don't create mockup files.
.mockup.htmlnimbalyst-local/mockups/ for new designs, nimbalyst-local/existing-screens/ for replicas of existing UI<!DOCTYPE html>
<html>
<head>
<style>
/* Inline CSS here */
</style>
</head>
<body>
<!-- Mockup content -->
</body>
</html>
nimbalyst-local/mockups/[descriptive-name].mockup.htmlmcp__nimbalyst-mcp__capture_editor_screenshotUsers 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-mcp__capture_editor_screenshot to capture a screenshot that includes the annotations.
When the user draws on a mockup:
When modifying existing UI:
nimbalyst-local/existing-screens/ for cached replicasnimbalyst-local/mockups/ and apply modifications thereUse kebab-case with .mockup.html extension:
settings-page.mockup.htmlcheckout-flow.mockup.htmluser-profile-card.mockup.htmlHelp the user file a bug report or feature request for Nimbalyst. Activates when the user opens the in-app feedback flow or runs /feedback:bug-report or /feedback:feature-request. Coordinates evidence gathering, anonymization, and posting to GitHub Issues.
Create diagrams and visual drawings using Excalidraw (.excalidraw files). Use when the user wants flowcharts, architecture diagrams, system diagrams, sketches, or any visual diagram. For database schemas and entity relationship diagrams, use the DataModelLM extension instead.
Create git commits using Nimbalyst's interactive commit proposal widget. ONLY use when the user explicitly clicks "Commit with AI" button or asks for "smart commit". For regular commit requests, use standard git commands instead.
Build, install, and hot-reload Nimbalyst extensions using MCP tools. Use when developing, testing, or iterating on Nimbalyst extensions.
Create structured plan documents and track work items using YAML frontmatter. Use when the user wants to plan a feature, track progress, log bugs/tasks/ideas, or organize project work.
Create visual data models for database schemas using Nimbalyst's DataModelLM editor. Use when the user wants to design a data model, database schema, entity relationship diagram, or Prisma schema.