skills.rest
solitasroh
solitasrohCOMMUNITY
Explore all skills by this author →
GitHub

phase-3-mockup

Generate HTML/CSS/JS mockups with JSON data across Starter, Dynamic, and Enterprise scenarios.

2|1|Updated Mar 22, 2026
Search Tags:#nextjs#prototype#ui-design#componentization#mockup#pdca
One-click install
npx skills add https://github.com/solitasroh/mcukit --skill phase-3-mockup-solitasroh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: phase-3-mockup
Source: https://github.com/solitasroh/mcukit/tree/main/skills/phase-3-mockup
Command: npx skills add https://github.com/solitasroh/mcukit --skill phase-3-mockup-solitasroh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Quickly validate UI ideas without a designer by generating actionable mockups and wireframes that can be directly transitioned to Next.js components.

Core Features & Use Cases

  • UI mockups and wireframes implemented with plain HTML/CSS/JS that can be refactored into reusable Next.js components.
  • Data-driven prototypes using JSON to simulate realistic interactions and user flows.
  • PDCA-aligned workflow supporting design, do, check, act iterations across starter, dynamic, and enterprise contexts.

Quick Start

Create the initial mockups by populating the mockup structure (mockup/pages, mockup/styles, mockup/data) to seed Next.js componentization.

Frequently Asked Questions about phase-3-mockup

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

FAQPage Schema
How do I create UI mockups for Next.js components without a designer?▼

You can create UI mockups using plain HTML, CSS, and JS to validate design concepts quickly. This approach generates actionable wireframes that can be directly refactored and transitioned into reusable Next.js components.

What is the best way to simulate realistic user flows in a UI prototype?▼

Simulating realistic user flows in a UI prototype is best handled using JSON data. This method drives data-driven prototypes to simulate realistic interactions and validate user journeys without needing a live backend.

Can I use a PDCA workflow to iterate on screen mockups for different project scales?▼

Yes, a PDCA-aligned workflow supports design, do, check, and act iterations across starter, dynamic, and enterprise contexts. This ensures structured validation and refinement of screen mockups throughout the development cycle.

How do I plan componentization for Next.js from initial wireframes?▼

Plan componentization by populating a structured mockup directory containing pages, styles, and JSON data. This seeds your project structure and provides a clear, actionable map for refactoring plain HTML into Next.js components.

Does this mockup approach work for enterprise-level screen designs?▼

Yes, the mockup workflow explicitly supports enterprise scenarios alongside starter and dynamic contexts. It handles enterprise-level screen mockups, data simulation, and componentization planning to validate complex design concepts.

Related Skills

Explore More Design & Creative Skills→
popmechanicpopmechanic
134

design-reference

Convert design reference HTML files into React/JSX Vibes apps.

Community
Intermediate
popup-studio-aipopup-studio-ai
589

phase-3-mockup

Create HTML/CSS/JS screen mockups with JSON data for Next.js component extraction.

Official
Intermediate
maplin-comaplin-co

mockup-to-code

Convert UI mockups and design files into React, Vue, or HTML/CSS code.

Official
Advanced
jeffwweeejeffwweee

ui-designer

Generate HTML wireframes, React/MUI mockups, and design specifications.

Community
Intermediate