/mockuplm
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.
$ npx -y skills add nimbalyst/nimbalyst --skill mockuplm --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/mockuplm
Context preview
The summary Claude sees to decide when to auto-load this skill.
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
mockuplm.SKILL.mdname: 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
- **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`
Read more
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
- **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`
Nimbalyst is a free, open-source, local, interactive visual editor & session/task manager for developers, product managers, designers, builders.
Repo: nimbalyst/nimbalyst
Other skills on nimbalyst.
- /datamodellm
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.
Open skill - /git-commit
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.
Open skill - /excalidraw
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.
Open skill - /extension-development
Build, install, and hot-reload Nimbalyst extensions using MCP tools. Use when developing, testing, or iterating on Nimbalyst extensions.
Open skill - /feedback-intake
Help 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.
Open skill - /planning
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.
Open skill