Skills
.Work. You
Rest

pug-mockup

Community

Self-contained SPA mockups, shareable offline

Design & Creative#prototyping#spa#prototype#design-system#lucide#mockup#pug
Authorduylamle
Version1.0.0
Installs0

System Documentation

What problem does it solve?

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.

Core Features & Use Cases

  • Single-file output: compiles Pug templates into one self-contained HTML file with CSS and JS inlined for offline sharing.
  • Component-driven templates: mixins, pages, and a starter template speed up multi-page mockups and iterative edits.
  • Iterative workflow: guidance and project CLAUDE.md mapping for targeted edits, conversion guides to production frameworks, and asset embedding conventions for images and icons.
  • Use case: create a 5–15 page dashboard prototype for stakeholder demos, iterate one page at a time, then convert the approved layout into React/Vue components.

Quick Start

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."

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: pug-mockup
Download link: https://github.com/duylamle/product-collection/archive/main.zip#pug-mockup

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.