mockgen-tailwind

Name: mockgen-tailwind
Availability: InStock
Author: rashidee

Generate HTML UI mockups from PRD.md files with an Express server.

3|Updated Mar 15, 2026

Search Tags:#workflow #ui #tailwind #htmx #design-system #mockup #alpinejs

Ready to run

npx skills add https://github.com/rashidee/co2-skills --skill mockgen-tailwind

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: mockgen-tailwind
Source: https://github.com/rashidee/co2-skills/tree/main/skills/mockgen-tailwind
Command: npx skills add https://github.com/rashidee/co2-skills --skill mockgen-tailwind

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate UI mockups from PRD.md files to accelerate designer review, turning long textual specifications into tangible HTML previews.

Core Features & Use Cases

Create module-based mockup screens aligned to PRD sections and user stories
Serve mockups via a Node.js + Express server using HTMX for in-page updates and Alpine.js for interactivity
Output a self-contained mockup package including partials, server, and a mockup/ folder ready for review

Quick Start

Run the mockgen-tailwind skill with your application context to generate a mockup server, then start the server with npm start.

Frequently Asked Questions about mockgen-tailwind

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

FAQPage Schema

How do I generate UI mockups from a PRD.md file?▼

Run the skill against your application context to parse the PRD.md file and output a self-contained package with module-specific HTML previews ready for designer review.

Can I use Tailwind CSS and HTMX together for interactive UI mockups?▼

Yes, you can generate mockups using Tailwind CSS and HTMX together. This skill outputs an Express server utilizing HTMX for in-page updates and Alpine.js for interactivity, styled with a tokenized design system.

Does generating mockups from PRD files require setting up a separate server environment?▼

Generating mockups from PRD files does not require a separate server environment setup. The skill outputs a ready-to-run Node.js Express server with the mockup artifacts, so you can immediately preview screens using npm start.

What is the best way to create module-specific screens for multi-module applications?▼

The best way to create module-specific screens is using this skill to parse PRD sections and user stories, generating aligned HTML previews and partials for each distinct application module.

How do frontmatter-driven metadata and tokenized styling apply to UI mockups?▼

Frontmatter-driven metadata and tokenized styling apply to UI mockups by enforcing consistent design system tokens across generated screens, ensuring standardized visual properties and structured metadata throughout the HTML preview package.