skills.rest
hendrax5
hendrax5COMMUNITY
Explore all skills by this author →
GitHub

phase-3-mockup

Create component-separated HTML/CSS/JavaScript mockups with JSON data for Next.js conversion.

Updated Mar 20, 2026
Search Tags:#html#javascript#css#next.js#prototype#ui-ux#mockup
One-click install
npx skills add https://github.com/hendrax5/ironman --skill phase-3-mockup-hendrax5
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: phase-3-mockup
Source: https://github.com/hendrax5/ironman/tree/main/skills/phase-3-mockup
Command: npx skills add https://github.com/hendrax5/ironman --skill phase-3-mockup-hendrax5

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Rapidly validate visual and interaction ideas without a dedicated designer by producing interactive HTML/CSS/JavaScript mockups that are ready for developer handoff and conversion to Next.js components.

Core Features & Use Cases

  • Screen Mockups: Build page-level HTML and separated component units for predictable structure.
  • Interactions: Add basic JavaScript for user flows and micro-interactions to validate behavior.
  • Data Simulation: Provide JSON mock data to simulate APIs and drive UI states.
  • Next.js Preparation: Map mockup components to Next.js component boundaries and define props/interfaces for smooth transition.
  • Use Case: Quickly produce a login → onboarding → dashboard prototype with mocked data to validate UX with stakeholders and guide Phase 4 API design.

Quick Start

Create a component-separated homepage mockup with CSS variables, sample JSON data for hero and products, and simple JavaScript interactions to demonstrate the primary user flow.

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 HTML CSS JavaScript mockups for Next.js development?▼

Create HTML CSS JavaScript mockups by building component-separated HTML structures, modular CSS, and simple JavaScript interactions, then mapping them to Next.js component boundaries with defined props for developer handoff.

What is the best way to prototype UI interactions before implementation?▼

Prototyping UI interactions before implementation involves writing basic JavaScript for user flows and micro-interactions to validate behavior, supported by JSON mock data to simulate APIs and drive various UI states.

Can I prepare component-separated mockups for developer handoff without a designer?▼

Preparing component-separated mockups without a designer involves outputting modular HTML, separated CSS units, and documented component prop structures to validate interfaces and ensure smooth transition for developers.

Does this approach support generating JSON mock data for API simulation?▼

Generating JSON mock data for API simulation is supported by providing JSON structures that simulate APIs and drive UI states, ensuring data flows are validated during frontend prototyping and stakeholder demos.

How do I map UI prototype components to Next.js component boundaries?▼

Mapping UI prototype components to Next.js boundaries involves documenting component structures and defining props or interfaces during the mockup phase to ensure a smooth transition into Next.js implementation.

When should I use HTML mockups instead of building components directly in Next.js?▼

Using HTML mockups instead of building directly in Next.js is ideal when you need to rapidly validate visual ideas and user flows with stakeholders before committing to full implementation and API design.

Related Skills

Explore More Design & Creative Skills→
OzeroHAXOzeroHAX
32

project-standart-usecases

Design executable use cases with traceability to PRD requirements and acceptance criteria.

Community
Intermediate
JayZeeDesignJayZeeDesign
170

ui-design

Generate responsive single-file HTML UI prototypes with inline styles.

Community
Basic
dylantarredylantarre
38

design-tokens-structure

Structures design tokens into a 3-layer system for theming and governance.

Community
Basic
bahayonghangbahayonghang
16

image-to-ui-skill

Convert UI screenshots into interactive HTML/CSS/JS prototypes.

Community
Advanced