# HTML Mockups

If the user asks for an html mockup for ui components or screens

- Repository: https://github.com/humanlayer/humanlayer (12740 stars)
- Category: Design
- License: Apache-2.0
- Last updated: 2026-10-31
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add humanlayer/humanlayer --skill html-mockups -g -a claude-code -y`
Codex: `npx skills add humanlayer/humanlayer --skill html-mockups -g -a codex -y`
Cursor: `npx skills add humanlayer/humanlayer --skill html-mockups -g -a cursor -y`
Gemini CLI: `npx skills add humanlayer/humanlayer --skill html-mockups -g -a gemini-cli -y`

## Description

if the user asks for an html mockup for ui components or screens

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

## 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

```css
: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

The rest: https://github.com/humanlayer/humanlayer/blob/HEAD/.claude/skills/html-mockups/SKILL.md