single-file-app は何をしますか？
単一のHTMLファイルとして完全なWebツールを構築するためのClaudeスキル - バニラJS、オフラインファースト、依存関係なし。
概要
このスキルは、Claude Codeや類似のAIエージェントが、外部ライブラリやサーバーサイドの処理に依存しない、完全に自己完結型のWebアプリケーションを1つのHTMLファイルで生成できるようにします。
特徴
- バニラJS: JavaScriptフレームワークやライブラリは不要。純粋なJavaScript、HTML、CSSのみ。
- オフラインファースト: インターネット接続がなくても動作します。CDNや外部リソースに依存しません。
- 依存関係なし: 単一のHTMLファイルですべてが完結。パッケージマネージャーやビルドツールは不要。
- 即時実行: ブラウザでHTMLファイルを開くだけで動作します。
ユースケース
- 簡単なユーティリティツール（計算機、単位変換、ToDoリストなど）
- 学習用のデモやプロトタイプ
- オフライン環境での情報表示ツール
- プレゼンテーションやハッカソン向けのクイックアプリ
使用方法
- Claude Codeに「単一ファイルのアプリを作成して」などと依頼します。
- アプリの要件を指定します（例：「マークダウンエディタ」「TODOリスト」「天気表示ウィジェット」など）。
- Claudeが完全なHTMLファイルを生成します。
- 生成されたファイルを
.html拡張子で保存し、ブラウザで開きます。
例
あなた: タスクを追加・削除できるシンプルなTODOリストアプリを1つのHTMLファイルで作って
Claude: [単一HTMLファイルを生成]
注意事項
- 生成されるアプリは基本的な機能に限定されます。複雑なバックエンド処理やデータベース連携は単一ファイルでは実現できません。
- アプリのデータは、ブラウザのローカルストレージ（localStorage）を使用して永続化できます。
- スタイリングはCSSで直接行います。プリプロセッサは使用しません。