TerminalSkills/skills

あなたは Bolt.new (StackBlitz) のエキスパートです。Bolt.new はブラウザ上で完全に動作する AI 搭載フルスタック開発環境です。自然言語のプロンプトを使って、開発者がアイデアからデプロイまでのアプリを数分で作成できるように支援します。フロントエンド、バックエンド、データベース、デプロイを含む完全なアプリケーションを生成し、すべて WebContainer 上でローカル環境なしに実行します。

skills とは？

このスキルは、Bolt.new (StackBlitz) のエキスパートとして機能します。Bolt.new はブラウザ上で完全に動作する AI 搭載フルスタック開発環境であり、開発者が自然言語のプロンプトを使ってアプリケーション全体（フロントエンド、バックエンド、データベース、デプロイ）を数分で作成できるようにします。このスキルは、「プロンプトからアプリ生成」の中核機能に加え、反復的な開発（フォローアッププロンプトで既存コードベースを修正）、幅広い技術スタック（React, Vue, Svelte, Next.js, Tailwind, SQLite, Supabase など）、そしてブラウザ内で Node.js ランタイムを提供する WebContainer テクノロジーをサポートします。開発者は、インストール不要で bolt.new にアクセスし、具体的なプロンプト（例：「React、Tailwind、SQLite を使用したプロジェクト管理ダッシュボード」）を与えることで、即座に動作するアプリを入手し、Netlify や Vercel へワンクリックデプロイできます。このスキルは、プロトタイピングから本番環境への橋渡しとして、Cursor などの他の AI エディタと組み合わせて使用する際のベストプラクティスも提供します。

対応~Claude Code~Codex CLI✓Cursor

npx skills add https://github.com/TerminalSkills/skills/tree/HEAD/skills/bolt

ドキュメント

Bolt.new — ブラウザ上で動作する AI フルスタックアプリビルダー

中核機能

プロンプトからアプリへ

## Bolt の動作方法

1. アプリを自然言語で説明する
2. Bolt が完全なコードベース（フロントエンド + バックエンド + データベース）を生成
3. アプリがブラウザ内でライブ実行される（WebContainer）
4. フォローアッププロンプトで反復的に改善
5. Netlify/Vercel へワンクリックでデプロイ

## プロンプト例

### SaaS ダッシュボード
「以下の機能を持つプロジェクト管理ダッシュボードを構築してください：
- ユーザー認証（メール/パスワード）
- ドラッグ＆ドロップ対応のカンバンボード
- チームメンバー管理
- アクティビティフィード
- ダークモード切替
React、Tailwind、SQLite をデータベースとして使用してください。」

### API + ランディングページ
「以下の機能を持つ URL 短縮サービスを作成してください：
- 長い URL を貼り付けるフォーム付きランディングページ
- 短いコードを生成する API
- リダイレクトハンドラー
- クリック分析ダッシュボード
- レート制限（IP あたり 1 時間に 10 URL）
フロントエンドは Astro、API は Hono を使用してください。」

### 社内ツール
「従業員ディレクトリアプリを構築してください：
- 名前、部署、場所で検索
- 写真、役割、連絡先情報を含むプロフィールカード
- 部署フィルターサイドバー
- 従業員一括追加のための CSV インポート
- プロフィール編集用の管理パネル」

反復的な開発

## フォローアッププロンプト（生成されたアプリを反復的に改善）

初期生成後：
- 「プロフィール写真アップロード機能付きの設定ページを追加してください」
- 「ダッシュボードをモバイル対応にしてください」
- 「サーバー送信イベントを使用したリアルタイム通知を追加してください」
- 「SQLite ではなく Supabase に接続してください」
- 「プレミアムプラン向けに Stripe チェックアウトを追加してください」
- 「API エンドポイントのテストを書いてください」
- 「モバイルでサイドバーが閉じないバグを修正してください」

Bolt は生成されたアプリの全コンテキストを理解しています。
各プロンプトは既存のコードベースを変更し、最初からやり直すことはありません。

技術スタックのオプション

## サポートされているフレームワークとツール

フロントエンド: React, Vue, Svelte, Astro, Next.js, Remix, Angular
スタイリング: Tailwind CSS, shadcn/ui, DaisyUI, CSS Modules
バックエンド: Node.js, Hono, Express, Fastify
データベース: SQLite（組み込み）, Supabase, Firebase, Prisma
認証: Clerk, Supabase Auth, カスタム JWT
デプロイ: Netlify, Vercel, Cloudflare Pages

## WebContainer
- ブラウザ内で完全な Node.js ランタイム
- npm install が動作（ほとんどのパッケージ）
- ファイルシステム、ターミナル、パッケージマネージャー
- Docker 不要、ローカル環境不要、環境問題なし

インストール

# インストール不要 — ブラウザで動作
# https://bolt.new

# 無料版: 生成回数制限あり
# Pro: $20/月（生成回数無制限）
# チーム: カスタム料金

ベストプラクティス

プロンプトは具体的に — 「ドラッグ＆ドロップ対応、デフォルト3列、ローカルストレージを使用したカンバンボードを構築してください」の方が「プロジェクト用ツールを構築してください」より優れています
やり直さずに反復する — フォローアッププロンプトを使用して機能を追加します。Bolt は生成されたアプリの全コンテキストを保持します
技術スタックを指定する — 「React、Tailwind、Supabase を使用してください」と指定することで、Bolt が予期しない選択をするのを防ぎます
まずはプロトタイプを作成 — Bolt はプロトタイピングに優れています。コードをエクスポートし、IDE で本番品質に洗練させてください
データベースは初期段階で — データベースのニーズは最初に伝えてください。後から永続性を追加するには、より多くのリファクタリングが必要です
モバイルファースト — 初期プロンプトでレスポンシブデザインを要求してください。後からの修正はより困難です
GitHub へのエクスポート — 生成されたコードを GitHub リポジトリにエクスポートし、通常のワークフローで開発を続けてください
Cursor と組み合わせる — Bolt でプロトタイプを生成し、エクスポートしてから、Cursor で本番品質に洗練させてください