skills.rest
cwijayasundara
cwijayasundaraCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

mockup

Generate UI mockups with inline CSS, JS, and realistic data for review.

3|Updated Jun 10, 2026
Search Tags:#design#component#ui mockup#quick review#disposable artifact
One-click install
npx skills add https://github.com/cwijayasundara/claude_harness_eng_v5 --skill mockup-cwijayasundara
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mockup
Source: https://github.com/cwijayasundara/claude_harness_eng_v5/tree/main/harness-lite/.claude/skills/mockup
Command: npx skills add https://github.com/cwijayasundara/claude_harness_eng_v5 --skill mockup-cwijayasundara

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill generates disposable UI mockups, components, or pages for review or discussion without the need for a full SDLC pipeline or security review.

Core Features & Use Cases

  • Create Mockups: Produce self-contained UI artifacts for review or discussion.
  • Frontend-Design Integration: If available, integrate with the 'frontend-design' skill for production-grade UI.
  • Customization: Allows for realistic mock data, interaction labeling, and state presentation.

Quick Start

Generate a mockup for a component: mockup create component --name="button" --state="default" --interaction="click" --data="realistic" --toggle-error-state

Frequently Asked Questions about mockup

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a UI mockup for quick review without a full development pipeline?▼

To create disposable UI components, generate self-contained artifacts with inline CSS and JS, realistic mock data, and interaction labeling. This approach bypasses the SDLC pipeline and security review for immediate discussion.

What is a disposable UI artifact and when do I need one?▼

A disposable UI artifact is a self-contained page or component used for review and discussion. You need one to visualize interaction states and realistic data without committing to production-ready code or security reviews.

Can I present error states and realistic data in a UI component mockup?▼

Yes, you can present error states and realistic data in a UI component mockup by using generation parameters to toggle error states and inject realistic mock data. This enables interaction labeling and comprehensive state presentation.

Does the mockup skill work with frontend-design for production-quality UI?▼

Yes, the mockup skill integrates with frontend-design if available. This integration allows you to upgrade disposable review artifacts into production-grade UI while handling inline CSS and JS.

What are the limitations of using disposable mockups for UI design?▼

Disposable mockups lack an SDLC pipeline and security review, limiting them to discussion and review contexts. They are not production-ready unless integrated with a dedicated frontend-design skill for production-grade output.

Related Skills

Explore More Design & Creative Skills→
samlaggzsamlaggz

sketch

Generate 2-3 self-contained HTML mockups with inline CSS for side-by-side comparison.

Community
Intermediate
yckkkkyckkkk
1

design-html

Convert design specs and mockups into production-ready HTML/CSS.

Community
Advanced
az9713az9713
2

design-html

Convert design mockups into HTML/CSS using Pretext for computed layout.

Community
Advanced
offers-pngoffers-png

artifacts

Create mockup sandbox artifacts with enforced artifactType 'mockup-sandbox'.

Community
Basic