ascii-mockups

name	ascii-mockups
description	ASCII Mockups Skill - Guide for creating ASCII mockups in UI element descriptions on prooph board. Covers visual state representation and documenting UI variations using text-based wireframes.

ASCII Mockups for UI Element Descriptions

This document describes how to create effective ASCII mockups for UI elements in prooph board.

---

Structure

ASCII mockups go inside a bash code block under a ## ASCII Mockup heading:

## ASCII Mockup

```bash
┌─────────────────────────────────────┐
│  Time Tracker                       │
├─────────────────────────────────────┤
│         09:23:45                    │
│      Time in progress               │
├─────────────────────────────────────┤
│     [ Pause ]  [ Clock Out ]        │
└─────────────────────────────────────┘
```

---

Patterns

Pattern 1: State Description with Mockup

- clocked in: true

Time is ticking

```yaml
trackingId: track1
```

## ASCII Mockup

```bash
┌─────────────────────────────────────┐
│  Time Tracker                       │
├─────────────────────────────────────┤
│                                     │
│         09:23:45                    │
│      Time in progress               │
│                                     │
│    Started: 09:00 AM                │
│                                     │
├─────────────────────────────────────┤
│     [ Pause ]  [ Clock Out ]        │
└─────────────────────────────────────┘
```

Use cases:

• Show UI state variations
• Visual mockups for developer reference
• Document interactive elements

---

Pattern 2: Dashboard / Feature Overview

Overview of:

- days worked in current month
- total hours worked this month
- total overtime

## ASCII Mockup

```bash
┌─────────────────────────────────────────────┐
│  Time Entries Dashboard                     │
├─────────────────────────────────────────────┤
│                                             │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  │
│  │  Days    │  │  Hours   │  │ Overtime │  │
│  │ Worked   │  │ Worked   │  │  Hours   │  │
│  │    15    │  │  120.5   │  │   +8.5   │  │
│  └──────────┘  └──────────┘  └──────────┘  │
└─────────────────────────────────────────────┘
```

Use cases:

• Dashboard/overview screens
• Card-based layouts
• Provide visual layout reference

---

Pattern 3: State Variations

Document different UI states with separate mockups:

- clocked in: true

Time is ticking

## ASCII Mockup

```bash
┌─────────────────────────────────────┐
│  Time Tracker                       │
├─────────────────────────────────────┤
│         09:23:45                    │
│      Time in progress               │
└─────────────────────────────────────┘
```

- clocked in: false

Time is not ticking

## ASCII Mockup

```bash
┌─────────────────────────────────────┐
│  Time Tracker                       │
├─────────────────────────────────────┤
│         PAUSED                      │
│    ⚠️ On break                      │
├─────────────────────────────────────┤
│         [ Continue ]                │
└─────────────────────────────────────┘
```

Use cases:

• Document different UI states
• Show how UI changes based on data
• Help developers understand state transitions

---

Pattern 4: Blocked / Disabled State

## ASCII Mockup

```bash
┌─────────────────────────────────────┐
│  Time Tracker                       │
│  (Blocked State)                    │
├─────────────────────────────────────┤
│         09:23:45                    │
│      Time in progress               │
└─────────────────────────────────────┘
```

---

Alternative: Markdown Tables for List Views

For list/overview screens, markdown tables are often more practical than ASCII mockups:

## List View

| Name | Email | Status | Last Activity |
|------|-------|--------|---------------|
| Anna M. | [e-mail] | Active | 2026-03-05 |
| Bob K. | [e-mail] | Inactive | 2026-02-28 |

Use when:

• List/overview screens
• Tabular data presentation
• Lightweight alternative to ASCII mockups

---

Best Practices

Keep It Simple

Focus on the elements that matter for this process step. Don't include every UI detail.

✅ Good: Simple, clear structure
┌──────────────────┐
│  Time Tracker    │
├──────────────────┤
│  09:23:45        │
│  [Pause] [Out]   │
└──────────────────┘

❌ Avoid: Pixel-perfect with too much detail
┌─────────────────────────────────────────────┐
│ ☰  My App            🌐 User ▾    🔔 3     │
├─────────────────────────────────────────────┤
...

---

Show What Changes

If the mockup documents a specific state, make the state clear:

- clocked in: true

Or add a label in the mockup:

│  (Blocked State)                    │

---

Use Consistent Styling

Pick a mockup style and stick with it across the model:

• Box-drawing characters: ┌─┐│├┤└┘
• Button representation: [ Button ]
• Icons: ⚠️ 🔔 🌐 (sparingly)

---

Common Mistakes

Too Detailed

❌ Bad: Every CSS class, spacing, and color noted

✅ Better: Show layout and key elements only

---

Outdated Mockups

Keep mockups in sync with actual UI changes. Outdated mockups create confusion.