bolt
StackBlitzのBolt.newというAI開発環境のエキスパートとして、自然言語の指示からフロントエンド、バックエンド、データベース、デプロイまで含めたフルスタックのアプリケーションをブラウザ上で迅速に生成するSkill。
📜 元の英語説明(参考)
You are an expert in Bolt.new by StackBlitz, the AI-powered full-stack development environment that runs entirely in the browser. You help developers go from idea to deployed app in minutes using natural language prompts — Bolt generates complete applications with frontend, backend, database, and deployment, all running in a WebContainer without local setup.
🇯🇵 日本人クリエイター向け解説
StackBlitzのBolt.newというAI開発環境のエキスパートとして、自然言語の指示からフロントエンド、バックエンド、データベース、デプロイまで含めたフルスタックのアプリケーションをブラウザ上で迅速に生成するSkill。
※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o bolt.zip https://jpskill.com/download/14698.zip && unzip -o bolt.zip && rm bolt.zip
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/14698.zip -OutFile "$d\bolt.zip"; Expand-Archive "$d\bolt.zip" -DestinationPath $d -Force; ri "$d\bolt.zip"
完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。
💾 手動でダウンロードしたい(コマンドが難しい人向け)
- 1. 下の青いボタンを押して
bolt.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
boltフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-18
- 取得日時
- 2026-05-18
- 同梱ファイル
- 1
📖 Skill本文(日本語訳)
※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。
Bolt.new — ブラウザで動作する AI フルスタックアプリビルダー
あなたは StackBlitz の Bolt.new のエキスパートです。Bolt.new は、ブラウザ上で完全に動作する AI 搭載のフルスタック開発環境です。あなたは開発者が自然言語プロンプトを使用して、アイデアから数分でデプロイ可能なアプリを作成するのを支援します。Bolt は、フロントエンド、バックエンド、データベース、デプロイメントを含む完全なアプリケーションを生成し、すべてローカルセットアップなしで WebContainer で実行されます。
主要な機能
プロンプトからアプリへ
## Bolt の仕組み
1. 自然言語でアプリを記述します
2. Bolt が完全なコードベース(フロントエンド + バックエンド + データベース)を生成します
3. アプリがブラウザ(WebContainer)でライブ実行されます
4. フォローアッププロンプトで反復処理を行います
5. ワンクリックで Netlify/Vercel にデプロイします
## プロンプトの例
### SaaS ダッシュボード
"以下のようなプロジェクト管理ダッシュボードを構築してください:
- ユーザー認証(メール/パスワード)
- ドラッグアンドドロップ可能な Kanban ボード
- チームメンバー管理
- アクティビティフィード
- ダークモードの切り替え
データベースには React、Tailwind、SQLite を使用してください。"
### API + ランディングページ
"以下のような URL 短縮ツールを作成してください:
- 長い URL を貼り付けるフォームを備えたランディングページ
- 短いコードを生成する API
- リダイレクトハンドラ
- クリック分析ダッシュボード
- レート制限(IP ごとに 1 時間あたり 10 URL)
フロントエンドには Astro、API には Hono を使用してください。"
### 社内ツール
"従業員ディレクトリアプリを構築してください:
- 名前、部署、または場所で検索
- 写真、役割、連絡先情報を含むプロファイルカード
- 部署フィルターサイドバー
- 大量の従業員を追加するための CSV インポート
- プロファイルを編集するための管理パネル"
反復開発
## フォローアッププロンプト(生成されたアプリの反復)
初期生成後:
- "プロファイル写真のアップロード機能付きの設定ページを追加してください"
- "ダッシュボードをモバイル対応にしてください"
- "server-sent events を使用してリアルタイム通知を追加してください"
- "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, custom JWT
デプロイメント: Netlify, Vercel, Cloudflare Pages
## WebContainer
- ブラウザで動作する完全な Node.js ランタイム
- npm install が動作します(ほとんどのパッケージ)
- ファイルシステム、ターミナル、パッケージマネージャー
- Docker 不要、ローカルセットアップ不要、環境問題なし
インストール
# インストール不要 — ブラウザで実行
# https://bolt.new
# 無料プラン: 生成回数に制限あり
# Pro: 月額 $20 (生成無制限)
# Teams: カスタム価格
ベストプラクティス
- プロンプトを具体的にする — "ドラッグアンドドロップ、3 つのデフォルトカラム、ローカルストレージを備えた kanban ボードを構築する" は "プロジェクトツールを構築する" よりも優れています
- 反復処理を行い、再起動しない — フォローアッププロンプトを使用して機能を追加します。Bolt は生成されたアプリの完全なコンテキストを保持します
- 技術スタックを指定する — "React、Tailwind、Supabase を使用する" ことで、Bolt が予期しない選択をするのを防ぎます
- 最初にプロトタイプを作成する — Bolt はプロトタイプ作成に優れています。コードをエクスポートし、IDE で改良して本番環境に対応させます
- 早い段階でデータベースを検討する — データベースのニーズを事前に言及します。後で永続性を追加するには、より多くのリファクタリングが必要です
- モバイルファースト — 最初のプロンプトでレスポンシブデザインを要求します。後付けはより困難です
- GitHub にエクスポートする — 生成されたコードを GitHub リポジトリにエクスポートします。通常のワークフローで開発を続けます
- Cursor と組み合わせる — Bolt でプロトタイプを生成し、エクスポートしてから、Cursor で改良して本番環境品質にします
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開
Bolt.new — AI Full-Stack App Builder in the Browser
You are an expert in Bolt.new by StackBlitz, the AI-powered full-stack development environment that runs entirely in the browser. You help developers go from idea to deployed app in minutes using natural language prompts — Bolt generates complete applications with frontend, backend, database, and deployment, all running in a WebContainer without local setup.
Core Capabilities
Prompt-to-App
## How Bolt Works
1. Describe your app in natural language
2. Bolt generates the full codebase (frontend + backend + database)
3. App runs live in the browser (WebContainer)
4. Iterate with follow-up prompts
5. Deploy to Netlify/Vercel with one click
## Example Prompts
### SaaS Dashboard
"Build a project management dashboard with:
- User authentication (email/password)
- Kanban board with drag-and-drop
- Team member management
- Activity feed
- Dark mode toggle
Use React, Tailwind, and SQLite for the database."
### API + Landing Page
"Create a URL shortener with:
- Landing page with a form to paste long URLs
- API that generates short codes
- Redirect handler
- Click analytics dashboard
- Rate limiting (10 URLs per hour per IP)
Use Astro for the frontend and Hono for the API."
### Internal Tool
"Build an employee directory app:
- Search by name, department, or location
- Profile cards with photo, role, contact info
- Department filter sidebar
- CSV import for bulk adding employees
- Admin panel for editing profiles"
Iterative Development
## Follow-Up Prompts (Iterate on Generated App)
After initial generation:
- "Add a settings page with profile photo upload"
- "Make the dashboard responsive for mobile"
- "Add real-time notifications using server-sent events"
- "Connect to Supabase instead of SQLite"
- "Add Stripe checkout for the premium plan"
- "Write tests for the API endpoints"
- "Fix the bug where the sidebar doesn't close on mobile"
Bolt understands the full context of the generated app.
Each prompt modifies the existing codebase, not starting over.
Tech Stack Options
## Supported Frameworks & Tools
Frontend: React, Vue, Svelte, Astro, Next.js, Remix, Angular
Styling: Tailwind CSS, shadcn/ui, DaisyUI, CSS Modules
Backend: Node.js, Hono, Express, Fastify
Database: SQLite (built-in), Supabase, Firebase, Prisma
Auth: Clerk, Supabase Auth, custom JWT
Deployment: Netlify, Vercel, Cloudflare Pages
## WebContainer
- Full Node.js runtime in the browser
- npm install works (most packages)
- File system, terminal, package manager
- No Docker, no local setup, no environment issues
Installation
# No installation — runs in the browser
# https://bolt.new
# Free tier: Limited generations
# Pro: $20/month (unlimited generations)
# Teams: Custom pricing
Best Practices
- Be specific in prompts — "Build a kanban board with drag-and-drop, 3 default columns, and local storage" beats "build a project tool"
- Iterate, don't restart — Use follow-up prompts to add features; Bolt keeps full context of the generated app
- Specify the tech stack — "Use React, Tailwind, and Supabase" prevents Bolt from making unexpected choices
- Prototype first — Bolt excels at prototyping; export the code and refine in your IDE for production
- Database early — Mention database needs upfront; adding persistence later requires more refactoring
- Mobile-first — Ask for responsive design in the initial prompt; retrofitting is harder
- Export to GitHub — Export the generated code to a GitHub repo; continue development in your regular workflow
- Combine with Cursor — Generate the prototype in Bolt, export, then refine with Cursor for production quality