Skill
animation
Author animated technical explainer diagrams as .anim.json files for Nimbalyst's Animation editor. Use when the user wants to animate a diagram, show how a…
@nimbalystView SkillProductivity
Skill
/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.
Install
$ 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
- **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:
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
- **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:
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`
Ships withnimbalyst
Nimbalyst - The open-source visual workspace for Claude Code, Codex, and OpenCode. Run multiple coding agents in parallel, edit their work visually in markdown, mockups, and diagrams, and track tasks. Free, MIT-licensed desktop app for macOS, Windows, Linux, with mobile companion for iOS and Android.
Get the whole plugin
Stats
1,691
Stars
247
Forks
Active
Maintenance
TypeScript
Language
MIT
License
4d ago
Last commit
10mo ago
Created
Repo: nimbalyst/nimbalyst
Other skills on nimbalyst.
@nimbalystView SkillSkill
canvas
Author Nimbalyst Project Canvas boards (.canvas files) — an infinite canvas whose cards are live editors for real workspace files and shared documents,…
@nimbalystView SkillSkill
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…
@nimbalystView SkillSkill
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…
@nimbalystView SkillSkill
excalidraw
Create diagrams and visual drawings using Excalidraw (.excalidraw files). Use when the user wants flowcharts, architecture diagrams, system diagrams, sketches,…
@nimbalystView SkillSkill
extension-development
Build, install, and hot-reload Nimbalyst extensions using MCP tools. Use when developing, testing, or iterating on Nimbalyst extensions.
@nimbalystView Skill