skills.rest
open-mercato
open-mercatoOFFICIAL
Explore all skills by this author →
WebsiteGitHub

om-mockup-prototype

Build clickable, commentable HTML prototypes for Open Mercato backend and backoffice flows.

1.7k|382|Updated Sep 10, 2025
Search Tags:#prototype#User Stories#mockup#backoffice#review comments#click-through#Design tokens
One-click install
npx skills add https://github.com/open-mercato/open-mercato --skill om-mockup-prototype
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: om-mockup-prototype
Source: https://github.com/open-mercato/open-mercato/tree/main/.ai/skills/om-mockup-prototype
Command: npx skills add https://github.com/open-mercato/open-mercato --skill om-mockup-prototype

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Flow misunderstandings in backend and backoffice features are expensive to fix after implementation. This Skill produces an interactive, click-through prototype from requirements before any production code is written, so reviewers can walk the screens and leave anchored feedback while changes are still cheap.

Core Features & Use Cases

  • Story-driven screen inventory: Verifies requirements contain user stories with acceptance criteria, then derives a screen inventory covering empty, error, permission, and dialog states mapped to story IDs.
  • Production-faithful scaffolding: Generates a prototype under .ai/prototypes/<slug>/ with design tokens synced from globals.css and screen anatomy mirroring the real AppShell, DataTable, CrudForm, and Kanban components.
  • Anchored review comments: Ships a built-in comment engine with pins, threads, re-anchoring, deletion tombstones, and an append-only export format that reviewers commit back to the repository.
  • Use Case: Given a requirements document for a new order-management module, generate a clickable admin prototype, present it screen-by-screen to stakeholders, collect pinned feedback, and export the comments for the team before implementation begins.

Quick Start

Ask the assistant to build an interactive backend prototype from your requirements file, for example: create a clickable prototype for the flow described in requirements.md.

Frequently Asked Questions about om-mockup-prototype

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

FAQPage Schema
How do I create a clickable prototype for an Open Mercato backend flow?▼

Run the init-mockup.mjs script with a prototype slug and a requirements file path. It creates a directory under .ai/prototypes with index.html, generated tokens.css, and the comment engine, which you then fill with screen sections following the screen-patterns reference.

What requirements format does the prototype skill need?▼

The requirements must contain user stories with acceptance criteria, including role-goal-outcome statements. If stories are missing, the workflow stops and asks whether to generate a story map before any prototyping begins.

Can I use this for storefront or public frontend mockups?▼

No. This skill is scoped to Open Mercato backend and backoffice flows only. Portal, storefront, and public frontend work should go to surface-specific design guidance, and generic design-system mockups belong to the om-ds-mockup workflow.

How do reviewers leave feedback on the prototype?▼

Reviewers switch to Comment mode, click any element to pin a thread, and reply or resolve in the side panel. Feedback is stored locally, then exported as a comments.js file that replaces the committed version so the team can share it via git.

Why does the prototype use hardcoded text instead of translations?▼

Static HTML prototypes deliberately skip useT() translations and lucide-react imports, using an embedded SVG sprite instead. These differences are documented in the generated README so prototype markup is never copied into production code.

How are design tokens kept in sync with the real app?▼

The tokens.css file is generated from apps/mercato/src/app/globals.css and must never be edited by hand. Run the sync-tokens.mjs script to refresh it, or use its --check flag to audit drift.

Related Skills

Explore More Product & Management Skills→
oVservantoVservant

product-manager-agent

Generate PRDs, user stories, acceptance criteria, and success metrics from project ideas.

Community
Advanced
SHGrowthSHGrowth
6

om-backend-ui-design

Standardize backend admin UI development with @open-mercato/ui components.

Official
Advanced
bitwardenbitwarden
129

detecting-existing-threads

Detect existing GitHub PR review threads before posting inline comments.

Official
Advanced
LowyShinLowyShin
33

phase-3-mockup

Create HTML/CSS UI mockups with JSON data for Next.js component transition.

Community
Intermediate