How do I install the Mockup skill?

Run npx skillmds@latest add cwijayasundara/mockup 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.

What does the Mockup skill do?

Create a UI mockup, component, or page as a disposable artifact. No SDLC pipeline, no evaluator, no security review. It is listed under Web & Frontend on SkillMD.

Is Mockup 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 Mockup?

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 Mockup free to use?

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

Who published Mockup?

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

Mockup by cwijayasundara — Agent Skill

Name: Mockup
Author: cwijayasundara

File contents

mockup — UI Mockup / Component

Produces a self-contained UI artifact for review or discussion. Disposable artifact lane — no pipeline, no generator/evaluator GAN loop, no ratchet gates.

Flow

Prefer frontend-design. If the frontend-design skill is available, invoke it — it is purpose-built for distinctive, production-grade UI and avoids generic AI aesthetics. Pass along the user's intent, target screens, and any brand/style constraints.
If frontend-design is not installed, produce the mockup inline:
- A single self-contained .html file with all CSS and JS inlined (no external build step). CDN React + Tailwind is fine for richer mockups.
- Realistic mock data, not lorem ipsum.
- Show the primary happy-path state; include at least one empty/error state as a toggle or commented section.
- Label interactive elements with their intended action where it aids review.
Write to mockups/ (or a path the user names) and report the file path. Do not wire it to a backend, write tests, or run any verification gate — it is a mockup.

If the mockup is going to become a real shipped component, that is a deliberate switch to the full claude_harness_eng_v5 loadout and the SDLC pipeline.

Frequently asked questions

Mockup