skills.rest
DauQuangThanh
DauQuangThanhCOMMUNITY
Explore all skills by this author →
GitHub

mockup-creation

Create UI mockups for Vue and React projects with TypeScript and TailwindCSS v4.

14|11|Updated Dec 1, 2025
Search Tags:#ui#react#vue#prototype#tailwindcss#nuxt#mockup
One-click install
npx skills add https://github.com/DauQuangThanh/hanoi-rainbow --skill mockup-creation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mockup-creation
Source: https://github.com/DauQuangThanh/hanoi-rainbow/tree/main/skills/mockup-creation
Command: npx skills add https://github.com/DauQuangThanh/hanoi-rainbow --skill mockup-creation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Creating interactive, production-ready UI mockups and prototypes from design concepts is time-consuming and error-prone when translating ideas into tangible interfaces. This skill accelerates the process by enabling a clean, repeatable workflow using NuxtJS 4 (Vue) or Next.js (React) with TypeScript and TailwindCSS v4.

Core Features & Use Cases

  • Rapid creation of production-quality mockups for websites, dashboards, admin panels, and interactive UI demonstrations.
  • Framework-agnostic support for NuxtJS 4 (Vue) and Next.js (React) with TypeScript and TailwindCSS v4.
  • Real-world scenario: a product designer or frontend lead uses the skill to generate an interactive prototype aligned with specifications for handoff to developers.

Quick Start

Initialize a NuxtJS 4 project or Next.js project with TailwindCSS v4 and scaffold a starter dashboard to begin prototyping.

Frequently Asked Questions about mockup-creation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create production-ready UI mockups for Vue and React projects?▼

You can generate production-ready UI mockups by applying a script-driven workflow using NuxtJS 4 or Next.js with TypeScript and TailwindCSS v4. This approach supports marketing landing pages, SaaS dashboards, and admin panels.

Can I use TailwindCSS v4 with Next.js and NuxtJS 4 to build interactive prototypes?▼

Yes, TailwindCSS v4 is fully supported alongside Next.js and NuxtJS 4 environments. You can build interactive prototypes using a script-driven workflow that leverages TypeScript and auto-imported Nuxt components.

What is the best way to turn design concepts into interactive SaaS dashboard prototypes?▼

The best way to turn design concepts into interactive SaaS dashboard prototypes is using a clean, repeatable workflow that initializes a Next.js or NuxtJS 4 project with TailwindCSS v4. This accelerates creating tangible interfaces aligned with specifications.

How do I scaffold a starter dashboard for rapid UI prototyping?▼

To scaffold a starter dashboard for rapid UI prototyping, initialize a NuxtJS 4 or Next.js project configured with TailwindCSS v4. This setup provides the foundation to begin prototyping websites and admin panels immediately.

Does this UI mockup approach support TypeScript and auto-imported Nuxt components?▼

Yes, this UI mockup approach natively supports TypeScript and auto-imported Nuxt components within the NuxtJS 4 environment. It enables a script-driven workflow for rapid iteration across marketing landing pages and interactive prototypes.

Related Skills

Explore More Design & Creative Skills→
justinlevinedotmejustinlevinedotme
7

vite-shadcn-tailwind4

Initialize shadcn/ui with Tailwind v4 in Vite projects.

Community
Advanced
viably-labsviably-labs

ui-designer

Generate React/Tailwind/Framer Motion UI designs and design systems from brief prompts.

Official
Advanced
skaile-aiskaile-ai

prog-expert-scadcn

Configure shadcn-nuxt with components.json registry and Tailwind CSS v4 in Nuxt projects.

Official
Advanced
aztr0nutzsaztr0nutzs
2

frontend-design-ultimate

Generate React, Tailwind CSS, and shadcn/ui static websites from text descriptions.

Community
Advanced