skills.rest
rashidee
rashideeCOMMUNITY
Explore all skills by this author →
GitHub

mockgen-tailwind

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
One-click install
npx skills add https://github.com/rashidee/co2-skills --skill mockgen-tailwind
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
rashideerashidee
3

specgen-spring-jpa-restapi

Generates Spring Boot REST API specifications from CLAUDE.md, PRD.md and MODEL.md context files.

Community
Advanced
fluid-commercefluid-commerce

fluid-design-os

Start and stop the Fluid Design OS canvas for reviewing and annotating marketing assets.

Official
Intermediate
eykdeykd

htmx-pattern-library

Provide HTMX and Alpine.js patterns for interactive web features.

Community
Advanced
bacchus-labsbacchus-labs
4

figma-design-workflow

Generate Figma mockups from wrangler specifications with design system integration.

Official
Advanced