mockups

Name: mockups
Availability: InStock
Author: rakovi4

Generate HTML interface mockups for user stories with desktop and mobile parity.

45|13|Updated Apr 13, 2026

Search Tags:#HTML #prototyping #user stories #UI design #mockups

Ready to run

npx skills add https://github.com/rakovi4/continue-framework --skill mockups-rakovi4

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: mockups
Source: https://github.com/rakovi4/continue-framework/tree/main/.claude/skills/mockups
Command: npx skills add https://github.com/rakovi4/continue-framework --skill mockups-rakovi4

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps generate HTML interface mockups for user stories, enabling the creation of UI mockups, prototypes, or the use of the /mockups command.

Core Features & Use Cases

Generate HTML Mockups: Create high-quality HTML mockups for user stories with desktop and mobile parity.
Usage: Use the /mockups command to generate mockups by story name, MVP number, or through interactive selection.
Phase-Based Workflow: Follows a structured workflow including context gathering, story selection, screen plan, mockup generation, screenshots, and summary.

Quick Start

To generate a mockup for a user story, use the command: /mockups "Story name"

Frequently Asked Questions about mockups

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

FAQPage Schema

How do I generate HTML mockups from user stories?▼

To generate HTML mockups from user stories, use the /mockups command followed by the story name or MVP number. This initiates a structured workflow producing production-quality UI mockups with desktop and mobile parity.

What is the workflow for creating UI mockups for user stories?▼

The UI mockup workflow involves context gathering, story selection, completing a screen plan, mockup generation, taking screenshots, and a final summary. This structured process ensures predefined design conventions are correctly applied.

Can I create prototypes with both desktop and mobile parity?▼

Yes, you can create prototypes with desktop and mobile parity. The mockup generation process inherently ensures that the HTML interface mockups adapt and maintain visual consistency across both desktop and mobile screen sizes.

Do I need to complete a screen plan before generating HTML mockups?▼

Yes, you need to complete a screen plan before generating HTML mockups. The structured workflow requires this step to define the interface layout before producing the production-quality HTML mockups.

How do I select specific user stories for UI mockup generation?▼

You can select specific user stories for UI mockup generation by using the /mockups command with the story name or MVP number, or by choosing stories through an interactive selection process during the workflow.

What's the best way to ensure production-quality HTML mockups?▼

The best way to ensure production-quality HTML mockups is to follow the structured generation workflow and utilize predefined design conventions and templates. This guarantees consistency and desktop and mobile parity.