claude code skill

/mockup

Scaffold a new mockup page under /mockup/. Auto-discovered by the mockup index. Build rapid prototypes of layouts, variants, and experimental features.

source

---
name: mockup
description: Scaffold a new mockup page under frontend/src/app/mockup/. Auto-discovered by the /mockup index. Use when the user says "/mockup", "spin up a mockup", "make a new mockup", "add a discover variant", or describes a new layout to prototype.
---

# /mockup — create a new prototype layout

You're scaffolding a rapid-prototype mockup page on JustBuildApps. Mockups live under `/frontend/src/app/mockup/` and are auto-discovered by the mockup index.

## Inputs

The user invokes via `/mockup` or says things like:
- "spin up a mockup"
- "make a new mockup for X layout"
- "add a discover variant"
- "create a prototype for Y feature"

You can infer the layout type, feature, or variant from their description.

## Steps

1. **Pick a slug.** From the user's description, derive a URL-safe slug (lowercase, dashes). Examples: `explore-variants`, `profile-redesign`, `feed-grid`.

2. **Create the page file** at `/frontend/src/app/mockup/[slug]/page.tsx`:
   - Use client component (`'use client'`)
   - Import necessary components (Shadcn/UI, custom components)
   - Implement the layout as described
   - Export metadata with a clear title and description

3. **Follow the JBA design language**:
   - Nordic-inspired: clean lines, plenty of whitespace, minimal ornamentation
   - Dark mode first (or system-aware)
   - Tailwind CSS for styling
   - Responsive design (mobile → tablet → desktop)
   - Use existing Shadcn/UI components when possible

4. **Register in the mockup index** (optional — it auto-discovers, but you can mention it):
   - Mockups are auto-discovered from the `/mockup/` directory
   - Just create the page and it'll appear at `/mockup/[slug]`

5. **Ship it**:
   - Write the component to the file
   - The mockup is immediately viewable at `http://localhost:3000/mockup/[slug]` (dev) or `https://justbuildapps.com/mockup/[slug]` (prod)

## Example output

```tsx
'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/button';

export const metadata = {
  title: 'Mockup: Explore Variants — JustBuildApps',
  description: 'Testing different card layouts for the explore page',
};

export default function ExploreVariantsMockup() {
  return (
    <div className="min-h-screen bg-background p-6">
      <h1 className="text-3xl font-semibold mb-8">Explore Variants</h1>
      {/* Layout here */}
    </div>
  );
}
```

## Tone

Mockups are explorations, not polished products. You're testing ideas quickly. Keep descriptions short. Focus on the layout/interaction, not marketing.

## Don't

- Don't add navigation or routing — keep it self-contained
- Don't over-engineer. This is a prototype, not a feature
- Don't ask for approval; just build and show the URL when done