Generate self-contained Pug SPA mockups that compile to a single HTML file.
npx skills add https://github.com/duylamle/product-collection --skill pug-mockup
Please help me install this Agent Skill. Skill: pug-mockup Source: https://github.com/duylamle/product-collection/tree/main/skills/pug-mockup Command: npx skills add https://github.com/duylamle/product-collection --skill pug-mockup
Rapidly turns product and design ideas into clickable, shareable prototypes without requiring frameworks or servers, removing the friction of building and shipping demo UIs for stakeholder review.
In Claude Code, ask it to "create a mockup for a 5-page task manager with a sidebar layout, blue primary color, and pages: dashboard, tasks, task detail, settings, login."
High-intent search queries and answers about installing and using this skill.
To create a self-contained HTML mockup, use Pug templates to compile your SPA prototype into a single file with inlined CSS and JS. This approach removes the need for servers or frameworks, producing a shareable dist/index.html file for offline stakeholder review.
The best way to prototype a multi-page SPA without a web framework is using Pug mixins and hash-based routing. This method generates a component-driven project that compiles directly into a standalone HTML file, enabling rapid iterative UI design without server dependencies.
Yes, you can use Lucide SVG icons and embedded assets in a Pug mockup. The project includes specific asset embedding conventions to inline images and icons directly into the single-file HTML output, ensuring the prototype remains fully self-contained for offline sharing.
Pug-mockup supports converting prototypes to production frameworks through included conversion guides. After iterating on your component-driven Pug templates, you can translate the approved UI layouts directly into React or Vue components for production development.
You can prototype 5 to 30 pages within a single Pug mockup project. This scale is ideal for small to mid-size apps, allowing you to iteratively edit individual pages using Pug mixins before compiling everything into one self-contained HTML file.
Yes, you need pug-cli installed to execute the build step. The pug-cli tool compiles your Pug templates, along with inlined CSS and JS, into the final dist/index.html file required for your self-contained offline SPA mockup.
JosephWoodallRetrieve PubChem compounds, properties, and bioactivity via PubChemPy and PUG-REST.
OneWave-AIConvert UI screenshots into responsive HTML, CSS, React, or Vue code.
samlaggzGenerate self-contained HTML architecture diagrams with inline SVG from textual descriptions.
DauQuangThanhCreate UI mockups for Vue and React projects with TypeScript and TailwindCSS v4.
