本文へ移動
cccskills
無料GitHub で公開日本語紹介

html-mockups

画面やUI部品の試作を、CSSとJavaScriptを含む単一のHTMLにまとめます。暗色の統一テーマで状態の違いや操作の注釈を示すスキルです。

原文原文の説明を見る

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

humanlayer/humanlayer

実行スコア 未検証

インストール方法を見る

こんなときに便利

  • 実装前に画面構成を検討したいとき
  • 通常時やエラー時を比較したいとき
  • 注釈付きのUI案を共有したいとき
  • 単一HTMLで画面を試作したいとき

日本語での紹介

できること

画面やUI部品の見た目を検討するためのHTMLモックアップを作成します。CSSは<style>、JavaScriptは<script>に収め、単一ファイルにまとめます。暗色のPoimandres Themeを使い、等幅フォント、角の四角いボタン、状態に応じた配色で見た目をそろえます。

こんなときに便利

実装前に画面構成を相談したい人や、操作による状態の違いを共有したい人に向いています。ボタン、フォーム、ステータス表示、パネルなどの表現が定められています。現実的なラベルや内容を使い、通常時・ホバー時・エラー時などを示すことで、画面の意図を検討できます。

使い方の例

  • 「この設定画面を、操作の説明付きHTMLモックアップにして」
  • 「フォームの通常時とエラー時を並べて見せて」
  • 「CSSとJavaScriptを含む一つのHTMLファイルにまとめて」

注意点

完成版の細部を仕上げる用途ではなく、案を探索するためのラフな試作を想定しています。配信先のビューアーで表示が崩れないよう、CSSやJavaScriptを別ファイルに分割しません。保存先は既存のタスクディレクトリ、または利用者が指定した場所です。

この紹介文は、公開されている SKILL.md をもとに AI（OpenAI Codex）が作成しました。正確な仕様は下の原文を確認してください。

含まれるファイル（1）

  • SKILL.md9.0 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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.5px;
  color: var(--terminal-fg-dim);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--terminal-border);
}

Form Elements

input, select, textarea {
  width: 100%;
  background: var(--terminal-bg-alt);
  border: 1px solid var(--terminal-border);
  color: var(--terminal-fg);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--terminal-accent);
}

label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--terminal-fg-dim);
  margin-bottom: 8px;
}

Layout Patterns

Icon Styling

.icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-sm {
  width: 12px;
  height: 12px;
}

Annotation Pattern (for mockup notes)

.annotation {
  margin-top: 20px;
  padding: 16px;
  background: rgba(173, 215, 255, 0.05);
  border: 1px dashed var(--terminal-border);
}

.annotation-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--terminal-accent);
  margin-bottom: 12px;
}

HTML Template

Start mockups with this template:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mockup - [Description]</title>
  <style>
    :root {
      --terminal-bg: #1b1e28;
      --terminal-bg-alt: #303340;
      --terminal-fg: #a6accd;
      --terminal-fg-dim: #767c9d;
      --terminal-accent: #add7ff;
      --terminal-border: #303340;
      --terminal-success: #5de4c7;
      --terminal-warning: #fffac2;
      --terminal-error: #d0679d;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'JetBrains Mono', 'Fira Code', monospace;
      background: #0d0f14;
      color: var(--terminal-fg);
      padding: 40px;
      line-height: 1.5;
    }

    h1 {
      color: var(--terminal-accent);
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 2px;
      margin-bottom: 40px;
      text-align: center;
    }

    /* Add component styles here */
  </style>
</head>
<body>
  <h1>Mockup Title</h1>

  <!-- Mockup content here -->

</body>
</html>

Guidelines

  1. Keep it rough - Mockups are for exploration, not pixel-perfect designs
  2. Include annotations - Add notes explaining behavior, states, interactions
  3. Show multiple states - Before/after, hover states, error states
  4. Use real-ish content - Don't use lorem ipsum, use realistic labels
  5. Square corners everywhere - No border-radius except explicit rounded elements
  6. Uppercase labels - All labels, buttons, section headers are uppercase
  7. Monospace everything - The entire UI uses monospace fonts

Next Steps

When you've finished the mockup, you can display it to the user in your next message or in a task document (e.g. design discussion, plan, etc.) with the following syntax:

path/to/mockup.html

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

コメント

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

送信するとすぐに公開されます。メールアドレスや電話番号などの個人情報は書かないでください。URL は 2 つまでです。

0 / 1000 文字

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

同じリポジトリのスキル

agent-browser

無料概要あり

Webページの移動やフォーム入力、クリックをエージェントに任せ、情報抽出や画面保存、操作前後の比較まで行います。ブラウザ作業の自動化やWebアプリの確認に使えるスキル。

  • フォーム入力やクリックを自動化したいとき
  • Webページのテキスト抽出
  • ページのスクリーンショット・PDF保存
humanlayer/humanlayer1.2万2026年10月23日 更新

asd-ste100

無料概要あり

曖昧で読みにくい英文を、語の意味をそろえた短い能動態の文へ書き直すスキル。指示文やツール説明を見直し、修正理由と変更前後を表で確認できます。

  • 別のエージェントへの英文指示の明確化
  • 英語のツール説明やエラー文の簡素化
  • 英語を母語としない読者向けの文章整理
humanlayer/humanlayer1.2万2026年10月23日 更新

better-github-skill

無料概要あり

GitHubのPRの状態、レビューの会話、CI失敗のログを専用スクリプトで収集し、変更の確認状況や未解決の指摘、失敗したジョブとステップを調べるスキル。

  • PRの状態をまとめて確認したいとき
  • 未解決のレビューの会話の確認
  • CIの失敗ジョブとステップの調査
humanlayer/humanlayer1.2万2026年10月23日 更新

bump-version

無料概要あり

リリース時に対象パッケージの基準バージョンを更新し、関連ファイルの同期と生成結果を検証して、コミットからPRブランチへのプッシュまで進めるスキル。

  • リリース用のバージョンを更新したいとき
  • 関連ファイルのバージョン表記の同期
  • プッシュ前の生成バージョン検証
humanlayer/humanlayer1.2万2026年10月23日 更新

calldiff

無料概要あり

Git のコミット間や作業中のコードで、関数の呼び出し構造の違いを確認します。呼び出しツリーの表示や、指定した関数へ至る経路の調査にも使えます。

  • 変更前後の関数呼び出しを比較したいとき
  • ブランチ間の呼び出し構造レビュー
  • 起点から目的の関数への経路調査
humanlayer/humanlayer1.2万2026年10月23日 更新

chrome-devtools-cli

無料概要あり

ターミナルからブラウザのクリックや入力、ページ移動を自動化し、通信やエラー、表示速度も調べられる、Chrome DevToolsのCLI操作を支援するスキル。

  • フォーム入力やページ移動の自動化
  • ページや要素の画面撮影
  • 通信内容やコンソールエラーの調査
humanlayer/humanlayer1.2万2026年10月23日 更新

humanlayer のスキルをすべて見る

このスキルの問題を報告する