mockup-creation

What this skill does

# Mockup Creation

Create polished, interactive UI mockups and prototypes using NuxtJS 4 (Vue) or Next.js (React) with TypeScript and TailwindCSS v4.

## Overview

Rapid creation of production-quality mockups with:

**NuxtJS 4 (Vue):**
- **Vue 3 Composition API** with TypeScript
- **Vite** bundler (built-in)
- **Auto-imports** for components and composables
- **Zero-config TypeScript** with auto-generated types
- **File-based routing** from pages/ directory

**Next.js (React):**
- **React 19** with TypeScript v5.1.0+
- **Turbopack** bundler (default, faster than Webpack)
- **App Router** with Server/Client Components
- **Built-in TypeScript** with zero configuration
- **File-based routing** from app/ directory

**Common Features:**
- **TailwindCSS v4** with modern tooling
- **Component-driven architecture**
- **Server-side rendering (SSR)** or static site generation (SSG)
- **Interactive reactivity**
- **Production-ready optimizations**

## Quick Start

### Option A: NuxtJS 4 (Vue-based)

### Option A: NuxtJS 4 (Vue-based)

#### 1. Initialize Project

```bash
# Create NuxtJS 4 project (TypeScript enabled by default)
npx nuxi@latest init my-mockup
cd my-mockup
npm install
```

#### 2. Install and Configure TailwindCSS

**Install TailwindCSS v4 with Vite plugin:**

```bash
npm install -D tailwindcss @tailwindcss/vite
```

**Configure nuxt.config.ts:**

```typescript
// https://nuxt.com/docs/4.x/api/configuration/nuxt-config
import tailwindcss from '@tailwindcss/vite'

export default defineNuxtConfig({
  devtools: { enabled: true },
  
  typescript: {
    strict: true,
    typeCheck: true
  },
  
  // Auto-import components and composables
  components: [
    {
      path: '~/components',
      pathPrefix: false,
    },
  ],
  
  // App configuration
  app: {
    head: {
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',
      title: 'My Mockup',
      meta: [
        { name: 'description', content: 'My mockup description' }
      ],
    }
  },
  
  // Vite configuration with TailwindCSS v4
  vite: {
    plugins: [
      tailwindcss()
    ],
    css: {
      devSourcemap: true
    }
  }
})
```

**Create CSS file and import TailwindCSS (e.g., assets/css/main.css):**

```css
@import "tailwindcss";
```

**Import CSS in app.vue or nuxt.config.ts:**

```typescript
// In nuxt.config.ts, add to the config:
export default defineNuxtConfig({
  css: ['~/assets/css/main.css'],
  // ... rest of config
})
```

#### 3. Start Development

```bash
npm run dev
# Opens http://localhost:3000
```

### Option B: Next.js (React-based)

#### 1. Initialize Project

```bash
# Create Next.js project (uses recommended defaults with TypeScript and TailwindCSS)
npx create-next-app@latest my-mockup --yes
cd my-mockup
```

**Or with custom options:**

```bash
npx create-next-app@latest my-mockup
# Choose: TypeScript: Yes, TailwindCSS: Yes, App Router: Yes
```

#### 2. Verify TailwindCSS v4 Setup

**Next.js includes TailwindCSS by default. To upgrade to v4:**

```bash
npm install -D tailwindcss@next @tailwindcss/postcss@next
```

**Update tailwind.config.ts:**

```typescript
import type { Config } from 'tailwindcss'

export default {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
} satisfies Config
```

**Update postcss.config.mjs:**

```javascript
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}
```

**Update app/globals.css:**

```css
@import "tailwindcss";
```

#### 3. Start Development

```bash
npm run dev
# Opens http://localhost:3000
```

## Workflow

### 1. Define Structure

Identify mockup requirements:

- Layout type (single page, dashboard, multi-page)
- Sections needed (header, hero, features, footer, sidebar)
- Responsive breakpoints (mobile, tablet, desktop)
- Interactive elements (forms, modals, dropdowns)

### 2. Create Component Architecture

**NuxtJS (Vue) auto-imports from:**

```
my-mockup/
├── components/
│   ├── layout/        # Header, Footer, Sidebar (auto-imported)
│   ├── ui/            # Button, Card, Modal, Input (auto-imported)
│   └── sections/      # Hero, Features, Testimonials (auto-imported)
├── pages/             # File-based routing (auto-routed)
├── composables/       # Shared logic (auto-imported)
├── layouts/           # Layout templates (default.vue, dashboard.vue)
└── types/             # TypeScript interfaces
```

**Next.js (React) structure:**

```
my-mockup/
├── app/
│   ├── layout.tsx     # Root layout (required)
│   ├── page.tsx       # Home page
│   ├── dashboard/
│   │   └── page.tsx   # /dashboard route
│   └── globals.css    # TailwindCSS imports
├── components/
│   ├── layout/        # Header, Footer, Sidebar
│   ├── ui/            # Button, Card, Modal, Input
│   └── sections/      # Hero, Features, Testimonials
├── lib/               # Utilities and shared logic
└── types/             # TypeScript interfaces
```

### 3. Build Components

**NuxtJS (Vue) Example: Type-safe Button Component (components/ui/Button.vue)**

```vue
<script setup lang="ts">
// No need to import 'computed' - auto-imported by Nuxt
interface Props {
  variant?: 'primary' | 'secondary' | 'outline'
  size?: 'sm' | 'md' | 'lg'
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'primary',
  size: 'md'
})

const buttonClasses = computed(() => {
  const variants = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-600 text-white hover:bg-gray-700',
    outline: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50'
  }
  const sizes = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg'
  }
  return `font-semibold rounded-lg transition ${variants[props.variant]} ${sizes[props.size]}`
})
</script>

<template>
  <button :class="buttonClasses">
    <slot />
  </button>
</template>
```

**Usage in pages/index.vue:**

```vue
<template>
  <div>
    <!-- Auto-imported as UiButton from components/ui/Button.vue -->
    <UiButton variant="primary" size="lg">
      Get Started
    </UiButton>
  </div>
</template>
```

**Next.js (React) Example: Type-safe Button Component (components/ui/Button.tsx)**

```typescript
import { ButtonHTMLAttributes } from 'react'

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'outline'
  size?: 'sm' | 'md' | 'lg'
  children: React.ReactNode
}

export function Button({ 
  variant = 'primary', 
  size = 'md', 
  children,
  className = '',
  ...props 
}: ButtonProps) {
  const variants = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-600 text-white hover:bg-gray-700',
    outline: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50'
  }
  
  const sizes = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg'
  }
  
  const buttonClasses = `font-semibold rounded-lg transition ${variants[variant]} ${sizes[size]} ${className}`
  
  return (
    <button className={buttonClasses} {...props}>
      {children}
    </button>
  )
}
```

**Usage in app/page.tsx:**

```typescript
import { Button } from '@/components/ui/Button'

export default function Home() {
  return (
    <div>
      <Button variant="primary" size="lg">
        Get Started
      </Button>
    </div>
  )
}
```

### 4. Apply Responsive Design

Use TailwindCSS breakpoints:

- `sm:` (640px), `md:` (768px), `lg:` (1024px), `xl:` (1280px), `2xl:` (1536px)

**NuxtJS (Vue) Responsive Grid Example:**

```vue
<template>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Auto-imported as UiCard from components/ui/Card.vue -->
    <UiCard v-for="item in items" :key="item.id" :data="item" />
  </div>
</template>

<script setup lang="ts">
const items = ref([...])
</script>
```

**Next.js (React) Responsive Grid Example:**

```typescript
import { Card } from '@/components/ui/Card'

export default function FeaturesSection() {
  const items = [
    { id: