artifacts-builder

アーティファクトビルダー

概要

ビルド手順なしで最新のブラウザー上で動作する、自己完結型で本番品質の HTML/CSS/JS アーティファクトを生成します。各アーティファクトは、インタラクティブなデモ、プロトタイプ、データ可視化、ユーティリティツールに必要なすべてを含む、単一ファイル（または最小限のファイルセット）です。プログレッシブエンハンスメント、レスポンシブデザイン、読みやすいコードを重視します。

フェーズ 1：範囲の定義

1. アーティファクトの目的を明確にします（デモ、プロトタイプ、ツール、可視化）
2. インタラクティブ性のレベルを決定します（静的、インタラクティブ、データ駆動）
3. 必要な依存関係を特定します（なし、CDN から読み込み、埋め込み）
4. レスポンシブ要件を定義します（モバイル、デスクトップ、両方）
5. 制約を設定します（ファイルサイズ、ブラウザーのサポート、オフライン対応）

停止 — アーキテクチャを決定する前に、範囲と制約をユーザーに確認します。

アーティファクトの種類の決定表

目的	複雑さ	依存関係	例
静的デモ	低	なし	製品のモックアップ、ランディングページ
インタラクティブウィジェット	中	なし、または Alpine.js	計算機、フォームビルダー
データ可視化	中〜高	D3.js または Chart.js	ダッシュボード、チャートエクスプローラー
プロトタイプ	中	Alpine.js または Petite-Vue	クリック可能な UI プロトタイプ
ユーティリティツール	中〜高	さまざま	JSON フォーマッター、カラーピッカー
ジェネレーティブアート	中	なし	Canvas アニメーション、パターンジェネレーター
プレゼンテーション	中	なし、または Mermaid	スライドデッキ、図表ビューアー

フェーズ 2：アーキテクチャ

1. 単一ファイルまたは複数ファイルの方式を選択します
2. CDN の依存関係を選択します（必要な場合）
3. ファイル内のコンポーネント構成を計画します
4. 状態管理の方法を定義します
5. プログレッシブエンハンスメントのレイヤーを計画します

停止 — アーキテクチャと依存関係の選択肢を提示し、承認を得ます。

アーキテクチャの決定表

制約	単一ファイル	複数ファイル
共有が簡単（メール、貼り付け）	はい	いいえ
ファイルサイズ < 100KB	はい	どちらでも可
複数のページ／ビュー	可能（SPA）	より適しています
チームでの共同作業	難しい	より適しています
オフラインでの使用	はい（自己完結型）	バンドルが必要
SEO 要件	該当なし	該当なし（アーティファクトはツールです）

依存関係の決定表

用途	推奨	CDN URL	サイズ
軽量なリアクティビティ	Alpine.js	cdn.jsdelivr.net/npm/alpinejs@3	約 15KB
最小限の Vue 風ライブラリ	Petite-Vue	unpkg.com/petite-vue	約 6KB
チャート	Chart.js	cdn.jsdelivr.net/npm/chart.js@4	約 65KB
データ可視化	D3.js	cdn.jsdelivr.net/npm/d3@7	約 90KB
図表	Mermaid	cdn.jsdelivr.net/npm/mermaid@10	約 120KB
CSS フレームワーク（プロトタイプ）	Tailwind Play CDN	cdn.tailwindcss.com	実行時
アイコン	Lucide	unpkg.com/lucide@latest	必要に応じて
依存関係が不要	Vanilla JS	該当なし	0KB

CDN の使用ルール

ルール	理由
メジャーバージョン（@3、@7）を固定します	互換性を損なう変更を防ぐため
CDN の依存関係は最大 3 つにします	アーティファクトを軽量に保つため
integrity と crossorigin を追加します	CDN の侵害に対するセキュリティ対策
適切な縮退動作を用意します	CDN に障害が発生しても動作させるため
より小さな代替手段を優先します	React より Alpine、Vue より Petite-Vue

フェーズ 3：実装

1. セマンティックな HTML 構造を構築します
2. CSS を追加します（インラインの <style> または埋め込み）
3. JavaScript の機能を実装します
4. エラー処理とフォールバックを追加します
5. さまざまなビューポートとブラウザーでテストします

停止 — ユーザーに渡す前に、アーティファクトが正しく動作することを確認します。

テンプレート構造

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[Artifact Title]</title>
  <style>
    /* Reset */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* Design Tokens */
    :root {
      --color-bg: #ffffff;
      --color-text: #1a1a2e;
      --color-primary: #3b82f6;
      --color-border: #e2e8f0;
      --radius: 0.5rem;
      --space: 1rem;
      --font: system-ui, -apple-system, sans-serif;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --color-bg: #0f172a;
        --color-text: #e2e8f0;
        --color-primary: #60a5fa;
        --color-border: #334155;
      }
    }

    /* Base Styles */
    body {
      font-family: var(--font);
      background: var(--color-bg);
      color: var(--color-text);
      line-height: 1.6;
    }

    /* Component Styles */
    /* ... */
  </style>
</head>
<body>
  

  <script>
    // Application logic
    (function() {
      'use strict';
      // ...
    })();
  </script>
</body>
</html>

レスポンシブデザインのパターン

コンテナーを基準としたレイアウト

.container {
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--space);
}

モバイルファーストのメディアクエリー

/* Base: mobile */
.layout { display: flex; flex-direction: column; }

/* Tablet and up */
@media (min-width: 768px) {
  .layout { flex-direction: row; }
  .sidebar { width: 280px; flex-shrink: 0; }
}

プログレッシブエンハンスメント

レイヤー	目的	要件
HTML	コンテンツにアクセスでき、意味があること	CSS や JS がなくても動作する
CSS	視覚的な表現とレイアウト	JS がなくても動作する
JavaScript	強化されたインタラクティブ性	動的な動作を追加する

機能検出

// Check before using modern APIs
if ('IntersectionObserver' in window) {
  // Use lazy loading
} else {
  // Load all images immediately
}

if (CSS.supports('backdrop-filter', 'blur(10px)')) {
  element.classList.add('glass-effect');
}

状態管理（フレームワークなし）

シンプルな状態パターン

function createStore(initialState) {
  let state = { ...initialState };
  const listeners = new Set();

  return {
    getState: () => ({ ...state }),
    setState(updates) {
      state = { ...state, ...updates };
      listeners.forEach(fn => fn(state));
    },
    subscribe(fn) {
      listeners.add(fn);
      return () => listeners.delete(fn);
    },
  };
}

URL ベースの状態（共有可能な成果物向け）

function syncStateWithURL(store) {
  const params = new URLSearchParams(location.search);
  for (const [key, value] of params) {
    store.setState({ [key]: JSON.parse(value) });
  }
  store.subscribe(state => {
    const params = new URLSearchParams();
    Object.entries(state).forEach(([k, v]) => params.set(k, JSON.stringify(v)));
    history.replaceState(null, '', `?${params}`);
  });
}

エクスポート形式

形式	用途	方法
単一の HTML ファイル	共有、埋め込み	自己完結型の <style> と <script>
HTML + アセット	複雑な成果物	CSS/JS ファイルを分離
データ URL	インライン埋め込み	data:text/html;base64,...
スクリーンショット/PNG	ドキュメント	html2canvas またはブラウザーのスクリーンショット
PDF	印刷/レポート	印刷スタイルを使った window.print()

品質チェックリスト

• 有効な HTML5（<!DOCTYPE html>、lang 属性）
• レスポンシブ対応の viewport メタタグ
• JavaScript がなくても動作する（コンテンツが表示される）
• ダークモードに対応している（prefers-color-scheme）
• キーボードで操作できる
• コンソールエラーがない
• ファイルサイズが 100KB 未満（画像を除く）
• クロスブラウザーでテスト済み（Chrome、Firefox、Safari）
• 必要に応じて印刷スタイルがある
• セマンティック HTML 要素を適切に使用している

アンチパターン / よくある間違い

アンチパターン	問題点	代わりに行うこと
単一ファイルの成果物で React/Vue/Angular を使用する	シンプルな操作にはオーバーヘッドが大きすぎる	Alpine.js またはバニラ JS を使用する
シンプルな UI に CDN から重いフレームワークを読み込む	読み込みが遅く、帯域幅を浪費する	必要性に応じて依存関係の重さを調整する
CSS カスタムプロパティの代わりにインラインスタイルを使う	テーマ設定やダークモードに対応できない	CSS カスタムプロパティ（トークン）を使用する
ユーザー入力のエラー処理がない	不正な入力でクラッシュする	入力を検証し、フィードバックを提供する
ピクセル単位で固定した寸法	モバイルやタブレットで表示が崩れる	レスポンシブ単位（%、rem、vw）を使用する
<meta viewport> がない	モバイルでデスクトップ表示が縮小される	必ず viewport メタタグを含める
<head> 内のブロッキング <script>	ページのレンダリングが遅れる	defer 属性を使うか、body の末尾に配置する
スクリプトを IIFE で囲まない	グローバルスコープを汚染する	(function() { ... })() で囲む
トークンを使わず色をハードコードする	テーマを切り替えられない	CSS カスタムプロパティを使用する

統合ポイント

スキル	統合内容
ui-ux-pro-max	スタイル選択と UX ガイドライン
ui-design-system	一貫したテーマ設定のためのデザイントークン
canvas-design	成果物内での Canvas/SVG ビジュアライゼーション
senior-frontend	複雑なコンポーネントのパターン
mobile-design	モバイル対応の成果物デザイン
planning	計画時に成果物の範囲を定義

スキルの種類

柔軟 — 成果物の要件に合わせてアーキテクチャ、依存関係、複雑さを調整します。シンプルなデモはできるだけ最小限に保ち、複雑なツールでは軽量なフレームワークや複数の CDN 依存関係を使用できます。