Mockgen Tailwind

Quality score: 70/100 · Category: Product · Sub-category: product-misc

type:review

Generate HTML mockup screens from PRD.md files for UI/UX human designer review. Creates a Node.js + Alpine.js + HTMX mockup server with admin dashboard layout (left sidebar navigation, header with logo/notifications/locale/user menu, footer with copyright/version) served as partials, organized by user role in a mockup/ folder. Input: application name (mandatory), version (mandatory), module (optional). Output: mockup/ folder in the application's context folder containing MOCKUP.html index page, server.js, package.json, partials/, and role-specific content subfolders. Trigger on keywords: "generate mockup", "generate mockups", "create mockup screens", "HTML mockup", "UI mockup from user stories", "mockup from PRD.md", "generate screens", "create UI screens". Accepts application name and version as input (e.g., `/mockgen-tailwind hub_middleware v1.0.3`). Optionally accepts a module name to limit generation to screens for that module only (e.g., `/mockgen-tailwind hub_middleware v1.0.3 module:Location Information`). When module is specified, only content files for that module are generated/updated; partials, sidebars, server files, and other module screens are left untouched. Automatically excludes strikethrough (deprecated/removed) items.

What this skill does

Mockgen Tailwind is a production-ready Claude Code skill (quality score 70/100) in the product-misc sub-category. It ships as a SKILL.md file that Claude Code auto-discovers under ~/.claude/skills/mockgen-tailwind/ and loads when your prompt matches the skill's trigger.

Who uses this skill

The Mockgen Tailwind skill is built for product managers, product designers, and cross-functional teams planning, shipping, and measuring product features. It is part of the open ClaudSkills registry, a community-curated catalog of 15,000+ capabilities you can install for Claude Code — the Claude CLI agent.

How to install

Free

Manual install (2 steps)

mkdir -p ~/.claude/skills/mockgen-tailwind
curl -L https://claudskills.com/skills/mockgen-tailwind/SKILL.md \
  -o ~/.claude/skills/mockgen-tailwind/SKILL.md

Or just download SKILL.md directly and drop it into ~/.claude/skills/mockgen-tailwind/. Claude Code auto-discovers it on next session.

Skills live at ~/.claude/skills/mockgen-tailwind/SKILL.md on macOS/Linux, or %USERPROFILE%\.claude\skills\mockgen-tailwind\SKILL.md on Windows. See the full install guide for step-by-step instructions.

Pro

One-click install via the desktop app

The ClaudSkills desktop app installs any skill directly into ~/.claude/skills/ with one click — no terminal required. Pro starts at $9/mo or $149 lifetime.

More Product skills

Browse all Product skills in the ClaudSkills registry, or explore these top-rated picks from the same category:

Browse all Product skills → Top 100 skills

Part of ClaudSkills — the open registry for Claude Code skills. · What's New · Install guide · About · llms.txt

Part of Acreator Store — Adam Lankamer's AI tools: GifPerfect · AspectPerfect · SlomoPerfect · Ucaption · UTagger · AutoXPoster · TestYourSkills