🎨
FrontendTypeScript

MockupLM

by nimbalyst

MockupLM is a Frontend skill for Claude Code, published by nimbalyst in nimbalyst.

1.5K stars212 forkson nimbalyst/nimbalystAdded 2026/08/19+3% in starsRepository updated 2026/08/19
agentic-aiai-agentsclaude-codecodexcoding-agentdeveloper-toolsidemarkdown-editormcpmulti-agent-systemsopencodewysiwyg-editor
Install in seconds
Install MockupLM
Copy MockupLM into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.
terminal
npx degit https://github.com/nimbalyst/nimbalyst/tree/main/packages/extensions/mockuplm/claude-plugin/skills/mockuplm ~/.claude/skills/mockuplm

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/nimbalyst/nimbalyst.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file
packages/extensions/mockuplm/claude-plugin/skills/mockuplm/SKILL.md in nimbalyst/nimbalyst
Installs to
~/.claude/skills/mockuplm
Collection
One of 7 skills cataloged from this repository
Category
Frontend567 skills

What MockupLM does

MockupLM creates visual UX mockups as standalone HTML/CSS files for planning UI features, wireframes, and visual layouts. Use it to communicate design ideas visually before implementation.

MockupLM is cataloged under Frontend on DirSkills. MockupLM comes from a repository tagged agentic-ai, ai-agents, claude-code, codex and coding-agent.

Documentation

README

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.

This is the opening of the README. Read the full README on GitHub.

Frequently asked about MockupLM

  • What else does nimbalyst publish alongside MockupLM?

    MockupLM is one of 7 skills that DirSkills catalogs from nimbalyst/nimbalyst, the repository it ships in. Its siblings there include DataModelLM, Excalidraw and Feedback Intake. Each one is a separate skill with its own page in this directory, installs the same way MockupLM does, and is maintained by nimbalyst in that same repository. The rest of the collection is listed on the nimbalyst/nimbalyst page.

  • How does MockupLM compare to other Frontend skills?

    MockupLM ranks #280 by stars among the 567 Frontend skills in this catalog. The most-starred ones next to it are Angular Developer, Android Clean Architecture and Accessibility. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of MockupLM against them. Open each page to compare what they document and how they install.

More from nimbalyst/nimbalyst

MockupLM is one of 7 skills cataloged on DirSkills from nimbalyst/nimbalyst.

See all 7 skills
🗄️
2w ago

DataModelLM

DataModelLM creates visual data models for database schemas using the Prisma format with an entity-relationship canvas. Use it when designing database schemas, ERDs, or planning data models for applications.
Data
1.5K212
✏️
2w ago

Excalidraw

Excalidraw creates diagrams and visual drawings using Excalidraw (.excalidraw files) for flowcharts, architecture diagrams, system diagrams, sketches, or any visual diagram. Use when the user wants to visually communicate structure or flow.
Frontend
1.5K212
📋
2w ago

Feedback Intake

Feedback Intake helps users file a bug report or feature request for Nimbalyst. It activates from the in-app feedback flow or /feedback slash commands, gathering and anonymizing evidence before opening a GitHub issue.
Automation
1.5K212
📝
2w ago

Git Commit

Git Commit creates git commits using Nimbalyst's interactive commit proposal widget. Use it only when the user explicitly clicks 'Commit with AI' or asks for a smart commit; for regular commits, use standard git commands.
Automation
1.5K212
🧩
2w ago

Nimbalyst Extension Development

Nimbalyst Extension Development builds, installs, and hot-reloads Nimbalyst extensions using MCP tools. Use it when developing, testing, or iterating on Nimbalyst extensions.
Automation
1.5K212
📋
2w ago

Planning

Planning creates structured plan documents and tracker items using YAML frontmatter for bugs, tasks, ideas, and features. Use it to plan a feature, track progress, log work items, or organize project work.
AI Engineering
1.5K212