browser-app-creator

ブラウザーアプリ作成ツール

目的

セットアップ不要でオフラインでも動作する、本番環境対応の単一ファイル Web アプリケーションを作成します。手軽なツール、ダッシュボード、トラッカー、プロトタイプに最適です。

ADHD のあるユーザー向け：大きなボタン（60px 以上）、すべてを自動保存、視覚的なフィードバック、設定不要です。
SDAM のあるユーザー向け：すべてのデータがタイムスタンプ付きで localStorage に保持されます。
すべてのユーザー向け：ダウンロードしてすぐに使えます。サーバー、ビルド工程、依存関係は不要です。

起動条件

• ユーザーが「アプリを作って」「ツールを構築して」「ダッシュボードを作って」「トラッカーを作って」と言う
• 習慣トラッカー、ToDo リスト、タイマー、電卓、フォーム、データの可視化を依頼する
• ブラウザー上で動作するインターフェースやツールを求めるあらゆる依頼

基本的なワークフロー

1. 要件を把握する

どうしても必要な場合に限り、明確化のための質問をします。

{
  app_type: "dashboard|tracker|form|tool|visualization",
  primary_function: "What does the app do?",
  data_to_track: ["What data needs to be stored?"],
  key_actions: ["What can users do?"],
  visual_requirements: "Any specific layout needs?"
}

2. 単一ファイルのアプリを生成する

テンプレートの構成：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{App Name}</title>
  <style>
    /* ADHD-Optimized Styles */
  </style>
</head>
<body>
  
  <script>
    // App Logic + localStorage
  </script>
</body>
</html>

3. ADHD に配慮した最適化要件

必須の UI 要素：

• ✅ ボタン：高さ 60px 以上、高いコントラスト
• ✅ ダークモード：デフォルトのテーマ（切り替え可能）
• ✅ 自動保存：操作のたびに localStorage に保存
• ✅ 視覚的なフィードバック：成功／エラーメッセージ
• ✅ モバイル対応：すべての画面サイズで動作
• ✅ 大きなタッチ領域：モバイルでは最小 44px

CSS の要件：

/* ADHD-Optimized Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #1a1a1a;
  color: #e0e0e0;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

button {
  min-height: 60px;
  padding: 15px 30px;
  font-size: 18px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #4a9eff;
  color: white;
}

button:hover {
  background: #357abd;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(74, 158, 255, 0.4);
}

button:active {
  transform: translateY(0);
}

input, textarea, select {
  min-height: 50px;
  padding: 12px 15px;
  font-size: 16px;
  border: 2px solid #333;
  border-radius: 6px;
  background: #2a2a2a;
  color: #e0e0e0;
  width: 100%;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #4a9eff;
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.2);
}

4. localStorage のパターン

必ず含める項目：

// localStorage Manager
const Storage = {
  key: 'app-name-data',

  save(data) {
    try {
      localStorage.setItem(this.key, JSON.stringify({
        ...data,
        lastUpdated: new Date().toISOString()
      }));
      this.showFeedback('✅ Saved!');
    } catch (error) {
      this.showFeedback('❌ Save failed', true);
      console.error('Save error:', error);
    }
  },

  load() {
    try {
      const data = localStorage.getItem(this.key);
      return data ? JSON.parse(data) : this.getDefaults();
    } catch (error) {
      console.error('Load error:', error);
      return this.getDefaults();
    }
  },

  getDefaults() {
    return {
      items: [],
      settings: {},
      created: new Date().toISOString()
    };
  },

  showFeedback(message, isError = false) {
    const feedback = document.createElement('div');
    feedback.textContent = message;
    feedback.style.cssText = `
      position: fixed;
      top: 20px;
      right: 20px;
      padding: 15px 25px;
      background: ${isError ? '#ff4444' : '#44ff88'};
      color: #000;
      border-radius: 8px;
      font-weight: 600;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      z-index: 1000;
      animation: slideIn 0.3s ease;
    `;
    document.body.appendChild(feedback);
    setTimeout(() => feedback.remove(), 2000);
  }
};

// Auto-save on any change
function autoSave(data) {
  Storage.save(data);
}

// Load on page load
let appData = Storage.load();

5. アプリのテンプレート

完全なサンプルはtemplates.mdを参照してください。

• ダッシュボード：指標、グラフ、ステータスインジケーター
• トラッカー：習慣、タスク、進捗
• フォーム：データ入力、検証、送信
• ツール：電卓、コンバーター、ユーティリティ
• 可視化：チャート、グラフ、タイムライン

6. アプリを提供する

形式：

✅ **{App Name}** complete!

**Features**:
- {Feature 1}
- {Feature 2}
- {Feature 3}

**Usage**:
1. Save the file as `{app-name}.html`
2. Open in any browser
3. Works offline
4. Data auto-saves to your browser

**Customization**:
- Colors: Edit the CSS variables at the top
- Features: Modify the JavaScript section
- Layout: Adjust the HTML structure

続いて、完全な HTML ファイルを提供します。

一般的なアプリの種類

ダッシュボード

目的：指標、ステータス、重要な情報を表示します
要素：カード、チャート、進捗バー、ステータスインジケーター
データ：リアルタイムまたは静的な指標
例：プロジェクトのステータスダッシュボード、分析ビューアー

トラッカー

目的：繰り返し発生する項目を記録し、追跡します
要素：項目の追加／削除、チェックボックス、タイムスタンプ
データ：ステータスと日付を含む項目のリスト
例：習慣トラッカー、タスクリスト、気分日記

フォーム／入力

目的：ユーザー入力を収集し、検証します
要素：入力フィールド、検証、送信ボタン
データ：タイムスタンプ付きのフォーム送信データ
例：アンケート、電卓、データ入力ツール

可視化

目的：データを視覚的に表示します
要素：チャート、グラフ、タイムライン
データ：データセットの視覚的な表現
例：チャート作成ツール、タイムラインビューアー、グラフツール

インタラクティブツール

目的：特定の作業や計算を実行します
要素：コントロール、リアルタイム更新、結果
データ：一時的または永続的なツールの状態
例：タイマー、コンバーター、ゲーム、シミュレーター

高度な機能

ダークモード／ライトモードの切り替え

function toggleTheme() {
  const currentTheme = document.body.dataset.theme || 'dark';
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  document.body.dataset.theme = newTheme;
  localStorage.setItem('theme-preference', newTheme);
}

// Load saved theme
document.body.dataset.theme = localStorage.getItem('theme-preference') || 'dark';

データのエクスポート

function exportData() {
  const data = Storage.load();
  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `app-data-${Date.now()}.json`;
  a.click();
  URL.revokeObjectURL(url);
}

データのインポート

function importData() {
  const input = document.createElement('input');
  input.type = 'file';
  input.accept = 'application/json';
  input.onchange = (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.onload = (event) => {
      try {
        const data = JSON.parse(event.target.result);
        Storage.save(data);
        location.reload();
      } catch (error) {
        alert('Invalid file format');
      }
    };
    reader.readAsText(file);
  };
  input.click();
}

ブラウザー通知

async function notifyUser(title, body) {
  if ('Notification' in window && Notification.permission === 'granted') {
    new Notification(title, { body });
  } else if (Notification.permission !== 'denied') {
    const permission = await Notification.requestPermission();
    if (permission === 'granted') {
      new Notification(title, { body });
    }
  }
}

スタイリングのガイドライン

以下についてはstyling.mdを参照してください。

• CSS フレームワーク全体
• 配色
• レスポンシブ対応のブレークポイント
• アニメーションのパターン
• アクセシビリティのガイドライン

他のスキルとの連携

Rapid Prototyper

アプリにバックエンドが必要な場合：

browser-app-creator → Creates frontend
rapid-prototyper → Creates backend API
Result: Full-stack app

Context Manager

アプリに関する決定を保存する場合：

remember: Created habit tracker with localStorage
Type: PROCEDURE
Tags: browser-app, localStorage, tracking

Error Debugger

アプリにバグがある場合：

Automatically invokes error-debugger for:
- JavaScript errors
- localStorage issues
- Browser compatibility

品質チェックリスト

提供する前に、以下を確認してください。

• ✅ 単一ファイル（HTML + CSS + JS）
• ✅ オフラインで動作する（外部依存関係なし）
• ✅ ボタンの高さが 60px 以上
• ✅ ダークモードがデフォルト
• ✅ localStorage に自動保存
• ✅ 操作に対する視覚的なフィードバック
• ✅ モバイル対応
• ✅ コンソールエラーなし
• ✅ 再読み込み後もデータが保持される

出力例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Habit Tracker</title>
  <style>
    /* Complete styles here */
  </style>
</head>
<body>
  <h1>Habit Tracker</h1>
  <div id="app">
    
  </div>
  <script>
    // Complete logic here
  </script>
</body>
</html>

成功基準

✅ アプリを開くとすぐに動作する
✅ ブラウザーのセッションをまたいでデータが保持される
✅ ADHD に配慮して最適化されている（大きなボタン、自動保存）
✅ セットアップやインストールが不要
✅ モバイルで使いやすい
✅ プロフェッショナルな外観
✅ 直感的に使える
✅ エラーを適切に処理する

追加リソース

• アプリテンプレート - すぐに使える完成済みの例
• スタイルガイド - CSS のパターンと配色

クイックリファレンス

トリガーフレーズ

• 「アプリを作成」
• 「ツールを構築」
• 「ダッシュボードを作成」
• 「トラッカーを作成」
• 「計算機を構築」
• 「タイマーを作成」

ファイルの保存先

作成したすべてのアプリは、次の場所に保存してください。

• Linux/macOS：~/.claude-artifacts/
• Windows：%USERPROFILE%\.claude-artifacts\

よく使われるパターン

アプリの種類	主な機能	localStorage の構造
トラッカー	リスト＋チェックボックス	{ items: [...], dates: {...} }
ダッシュボード	カード＋指標	{ metrics: {...}, updated: "" }
フォーム	入力＋検証	{ submissions: [...] }
ツール	コントロール＋結果	{ settings: {...}, history: [...] }