mockgen-tailwindlisted

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 Informatio
rashidee/co2-skills · ★ 3 · Web & Frontend · score 77

Install: claude install-skill rashidee/co2-skills

# Mockgen HTML Generate a Node.js + HTMX + Alpine.js mockup server from PRD.md for UI/UX designer review. Header, footer, and sidebar are served as partials. Content pages are HTMX fragments swapped into a shell layout. All image/PDF links open in new tabs. ## Stack | Layer | Technology | |-------|------------| | Server | Node.js + Express.js | | Partial loading / navigation | HTMX 2.x | | Interactive UI (dropdowns, dark mode) | Alpine.js 3.x | | Styling | Tailwind CSS (CDN) | | Icons | Inline Heroicons SVG | ## Input This skill uses standardized input resolution. Provide: | Argument | Required | Example | Description | |----------|----------|---------|-------------| | `<application>` | Yes | `hub_middleware` | Application name to locate the context folder | | `<version>` | Yes | `v1.0.3` | Version to scope processing (filter user stories <= this version) | | `module:<name>` | No | `module:Location Information` | Limit generation to a single module | ### Application Folder Resolution The application name is matched against root-level application folders: 1. Strip any leading `<number>_` prefix from folder names (e.g., `1_hub_middleware` â†’ `hub_middleware`) 2. Match case-insensitively against the provided application name 3. Accept snake_case, kebab-case, or title-case input (all match the same folder) 4. If no match found, list available applications and stop ### Auto-Resolved Paths | File | Resolved Path | |------|---------------| | PRD.md | `<app_folder>/context