/html-mockups

name: html-mockups
description: if the user asks for an html mockup for ui components or screens

Output Location

Write mockups to the task directory if one exists:

• `.humanlayer/tasks/{task-slug}/mockup-{description}.html`

Or to a reasonable location the user specifies.

Each mockup must be a single self-contained file: put all CSS in a `<style>` block and all JS in a `<script>` block. Do not split shared styles or scripts into sibling files. The cloud viewer serves every artifact from its own signed URL, so an HTML file that links to a sibling `.css` or `.js` file renders unstyled there even though it looks right when opened from disk.

Design System: Poimandres Theme

Color Palette

:root {
  /* Backgrounds */
  --terminal-bg: #1b1e28;           /* Primary background - very dark blue-gray */
  --terminal-bg-alt: #303340;       /* Secondary/elevated background */

  /* Text */
  --terminal-fg: #a6accd;           /* Primary text - muted purple-gray */
  --terminal-fg-dim: #767c9d;       /* Secondary/muted text */

  /* Semantic Colors */
  --terminal-accent: #add7ff;       /* Primary accent - bright cyan blue */
  --terminal-success: #5de4c7;      /* Success/positive - mint green */
  --terminal-warning: #fffac2;      /* Warning/caution - pale yellow */
  --terminal-error: #d0679d;        /* Error/destructive - pink/magenta */

  /* Borders & Inputs */
  --terminal-border: #303340;       /* Border color - matches bg-alt */
  --terminal-input-bg: #ffffff05;   /* Input background - 5% white */
  --terminal-input-border: #ffffff10; /* Input border - 10% white */
  --terminal-selection: #717cb425;  /* Selection highlight */

  /* Derived */
  --terminal-accent-dim: rgba(173, 215, 255, 0.3);  /* 30% accent */
}

Typography

• **Font Family**: `'JetBrains Mono', 'Fira Code', monospace`
• **Base Size**: 13px for body text
• **Labels**: 10-11px, uppercase, letter-spacing 1-1.5px
• **Buttons**: 10-11px, uppercase, letter-spacing 1-1.5px, font-weight 500

Button Styling

All buttons use these base styles:

• **Border radius**: 0 (fully square corners - `rounded-none`)
• **Border**: 1px solid
• **Font**: Monospace, uppercase, letter-spacing
• **Transition**: 0.15s for all properties

Button Variants

**Default (Accent)**

.btn-default {
  background: rgba(173, 215, 255, 0.2);  /* 20% accent */
  color: #add7ff;                         /* accent text */
  border-color: #add7ff;                  /* accent border */
}
.btn-default:hover {
  background: #add7ff;                    /* solid accent */
  color: #1b1e28;                         /* dark text */
}

**Ghost**

.btn-ghost {
  background: transparent;
  color: #767c9d;                         /* dim text */
  border-color: #303340;                  /* border color */
}
.btn-ghost:hover {
  background: rgba(173, 215, 255, 0.1);   /* 10% accent */
  border-color: #add7ff;
  color: #add7ff;
}

**Destructive**

.btn-destructive {
  background: transparent;
  color: #d0679d;                         /* error */
  border-color: #d0679d;
}
.btn-destructive:hover {
  background: #d0679d;
  color: #1b1e28;
}

**Loud Success CTA** (for primary actions like "Proceed to Next Step")

.btn-loud-success {
  background: transparent;
  color: #5de4c7;                         /* success */
  border-color: #5de4c7;
  animation: pulse-success 2s ease-in-out infinite;
}
.btn-loud-success:hover {
  background: rgba(93, 228, 199, 0.1);    /* 10% success */
}

@keyframes pulse-success {
  0%, 100% { box-shadow: 0 0 0 0 rgba(93, 228, 199, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(93, 228, 199, 0); }
}

Semantic Button Patterns

For toggle buttons that indicate state (like action buttons in bottom tray):

**Success State (enabled)**

.btn-icon.active-success {
  background: rgba(93, 228, 199, 0.15);   /* 15% success */
  color: #5de4c7;
  border-color: rgba(93, 228, 199, 0.3);  /* 30% success */
}
.btn-icon.active-success:hover {
  background: rgba(93, 228, 199, 0.25);   /* 25% success */
  border-color: #5de4c7;
}

**Warning State (enabled)**

.btn-icon.active-warning {
  background: rgba(255, 250, 194, 0.15);  /* 15% warning */
  color: #fffac2;
  border-color: rgba(255, 250, 194, 0.3); /* 30% warning */
}
.btn-icon.active-warning:hover {
  background: rgba(255, 250, 194, 0.25);  /* 25% warning */
  border-color: #fffac2;
}

**Error State (enabled)**

.btn-icon.active-error {
  background: rgba(208, 103, 157, 0.15);  /* 15% error */
  color: #d0679d;
  border-color: rgba(208, 103, 157, 0.4); /* 40% error */
}
.btn-icon.active-error:hover {
  background: rgba(208, 103, 157, 0.25);  /* 25% error */
  border-color: #d0679d;
}

Component Patterns

Container with Left Border Indicator

.input-wrapper {
  border-left: 2px solid var(--terminal-accent);
  padding-left: 12px;
  margin-left: 4px;
}

/* Focused state */
.input-wrapper.focused {
  border-left-color: var(--terminal-accent);
}

/* Error/deny state */
.input-wrapper.error {
  border-left-color: var(--terminal-error);
}

Status Badge

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--terminal-bg-alt);
  border: 1px solid var(--terminal-border);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-badge.ready {
  color: var(--terminal-success);
  border-color: var(--terminal-success);
  background: rgba(93, 228, 199, 0.1);
}

Keyboard Shortcut

.kbd {
  display: inline-block;
  padding: 1px 4px;
  font-size: 9px;
  background: var(--terminal-bg-alt);
  border: 1px solid var(--terminal-border);
  color: var(--terminal-fg-dim);
  margin-left: 4px;
}

Card/Panel

.panel {
  background: var(--terminal-bg);
  border: 1px solid var(--terminal-border);
  padding: 24px;
}

.panel-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5