本文へ移動
cccskills
無料GitHub で公開

Bun

Use when building, running, testing, or bundling JavaScript/TypeScript applications. Reach for Bun when you need to execute scripts, manage packages, run tests, or bundle code for production. Bun is a drop-in replacement for Node.js with integrated package manager, test runner, and bundler.

インストール方法を見る

含まれるファイル(1)

  • SKILL.md10.8 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Bun Skill Reference

Product summary

Bun is an all-in-one JavaScript/TypeScript toolkit that ships as a single binary. It includes a fast runtime (drop-in Node.js replacement), package manager, test runner, and bundler. The runtime uses JavaScriptCore (Apple's engine) and is written in Zig, delivering 4x faster startup than Node.js. Key files: bunfig.toml (configuration), package.json (scripts and dependencies), bun.lock (lockfile). Primary CLI commands: bun run, bun install, bun test, bun build. See https://bun.com/docs for complete documentation.

When to use

  • Running scripts: Execute .ts, .tsx, .js, .jsx files directly without compilation step
  • Package management: Install, add, remove, or update npm packages faster than npm/yarn
  • Testing: Write and run Jest-compatible tests with TypeScript support, snapshots, and watch mode
  • Bundling: Bundle JavaScript/TypeScript for browsers or servers with code splitting and plugins
  • HTTP servers: Build servers with Bun.serve() for fast request handling
  • File operations: Read/write files with optimized APIs (Bun.file(), Bun.write())
  • Monorepos: Manage workspaces with shared dependencies and workspace linking
  • Migrating from Node.js: Drop-in replacement for existing Node.js projects with minimal changes

Quick reference

Core commands

CommandPurpose
bun run <file>Execute a TypeScript/JavaScript file
bun run <script>Run a package.json script
bun installInstall dependencies (30x faster than npm)
bun add <pkg>Add a package to dependencies
bun remove <pkg>Remove a package
bun testRun tests matching *.test.ts, *_test.ts, *.spec.ts, *_spec.ts
bun build <entry>Bundle code for production
bunx <pkg>Execute a package without installing

Configuration file (bunfig.toml)

# Runtime settings
preload = ["./setup.ts"]
jsx = "react"
logLevel = "debug"

# Package manager
[install]
optional = true
dev = true
peer = true
linker = "hoisted"  # or "isolated"

# Test runner
[test]
root = "."
coverage = false
coverageThreshold = 0.9

# Script runner
[run]
shell = "system"  # or "bun"
bun = true        # alias node to bun
silent = false

File I/O essentials

// Read file
const file = Bun.file('path/to/file.txt');
const text = await file.text();
const bytes = await file.bytes();

// Write file
await Bun.write('path/to/file.txt', 'content');

// Incremental write
const writer = Bun.file('output.txt').writer();
writer.write('chunk 1\n');
writer.write('chunk 2\n');
writer.end();

HTTP server basics

Bun.serve({
	port: 3000,
	routes: {
		'/': () => new Response('Home'),
		'/api': () => Response.json({ data: [] }),
		'/users/:id': (req) => new Response(`User ${req.params.id}`)
	},
	fetch(req) {
		return new Response('Not found', { status: 404 });
	}
});

Package manager flags

FlagPurpose
--save-dev / -dAdd as dev dependency
--optionalAdd as optional dependency
--exactUse exact version (not caret range)
--productionSkip dev dependencies on install
--frozen-lockfileFail if lockfile needs updating
--globalInstall globally

Test runner flags

FlagPurpose
--watchRe-run on file changes
--concurrentRun tests in parallel
--timeout <ms>Per-test timeout (default 5000)
--bailStop after first failure
--retry <n>Retry failed tests
--coverageGenerate coverage report
--update-snapshotsUpdate snapshot files

Bundler options

await Bun.build({
	entrypoints: ['./index.tsx'],
	outdir: './dist',
	target: 'browser', // "browser" | "bun" | "node"
	format: 'esm', // "esm" | "cjs" | "iife"
	splitting: true, // Enable code splitting
	minify: true, // Minify output
	sourcemap: 'linked', // "none" | "linked" | "inline" | "external"
	external: ['react'], // Don't bundle these
	define: { VERSION: '"1.0"' }
});

Decision guidance

When to use bun run vs bun

ScenarioUse
Running a package.json scriptbun run <script>
Running a file directlybun <file> or bun run <file>
Ambiguous name (file or script)bun run (prioritizes scripts)
Running system commandsbun run (in scripts)

When to use hoisted vs isolated linker

ScenarioUse
Single-package projecthoisted (default)
Monorepo with workspacesisolated (default for new workspaces)
Need flat node_moduleshoisted
Strict dependency isolationisolated

When to bundle vs run directly

ScenarioUse
Development/testingRun directly with bun run
Production serverBundle with bun build --target bun
Browser/client codeBundle with bun build --target browser
Single executableBundle with bun build --compile
Reduce startup timeBundle with --bytecode

When to use test.serial vs test.concurrent

ScenarioUse
Tests share statetest.serial()
Independent async teststest.concurrent()
Database operationstest.serial()
API callstest.concurrent()

Workflow

1. Initialize a new project

bun init my-app
cd my-app

2. Install dependencies

bun install
# or add specific packages
bun add react react-dom
bun add -d typescript @types/react

3. Create and run scripts

Edit package.json:

{
	"scripts": {
		"dev": "bun run src/index.ts",
		"build": "bun build src/index.ts --outdir dist",
		"test": "bun test"
	}
}

Run with:

bun run dev
bun run build
bun test

4. Build for production

# Browser bundle
bun build src/index.tsx --outdir dist --target browser

# Server bundle
bun build src/server.ts --outdir dist --target bun

# Single executable
bun build src/cli.ts --outfile mycli --compile

5. Write and run tests

Create math.test.ts:

import { test, expect } from 'bun:test';

test('addition', () => {
	expect(2 + 2).toBe(4);
});

Run tests:

bun test
bun test --watch
bun test --coverage

6. Configure with bunfig.toml

Create bunfig.toml in project root:

[install]
linker = "hoisted"

[test]
coverage = true
coverageThreshold = 0.8

[run]
bun = true

Common gotchas

  • Shebang handling: Scripts with #!/usr/bin/env node run with Node.js by default. Use bun run --bun <script> to force Bun execution.
  • TypeScript config: Add @types/bun to dev dependencies and configure tsconfig.json with "lib": ["ESNext"] and "module": "Preserve" for proper type support.
  • Auto-install disabled in CI: Set [install] auto = "disable" in bunfig.toml for CI environments to avoid unexpected package installations.
  • Lockfile format: Bun generates binary bun.lockb by default (faster). Use [install] saveTextLockfile = true for text-based lockfile.
  • Module resolution: Bun defaults to ESM. CommonJS modules work but ESM is recommended. Use "type": "module" in package.json.
  • Environment variables: Bun auto-loads .env, .env.local, and .env.[NODE_ENV] files. Disable with [env] file = false in bunfig.toml.
  • Test file discovery: Only files matching *.test.ts, *_test.ts, *.spec.ts, *_spec.ts are discovered. Nested test files in subdirectories are found.
  • Workspace linking: Use "workspace:*" in dependencies to link workspace packages. Run bun install from root to link all workspaces.
  • Bundler not for type-checking: bun build does not generate .d.ts files. Use tsc separately for type declarations.
  • External imports in bundles: Mark packages as external with external: ["pkg"] to avoid bundling them. They must be available at runtime.

Verification checklist

Before submitting work with Bun:

  • All tests pass: bun test
  • No TypeScript errors: Check editor or run tsc --noEmit
  • Dependencies installed: bun install completes without errors
  • Scripts run correctly: Test each script in package.json with bun run <script>
  • Build succeeds: bun build completes without errors
  • No console errors: Check runtime output for warnings or errors
  • Lockfile committed: bun.lock or bun.lockb is in version control
  • bunfig.toml valid: TOML syntax is correct (use online validator if unsure)
  • Environment variables set: Required .env files exist or CI/CD provides them
  • Coverage threshold met: If configured, bun test --coverage meets threshold

Resources


For additional documentation and navigation, see: https://bun.com/docs/llms.txt

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".

日本語の概要は準備中です。原文の説明を表示しています。

human-kit/ui172026年10月11日 更新

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

日本語の概要は準備中です。原文の説明を表示しています。

human-kit/ui172026年10月11日 更新

Use when writing Playwright tests, fixing flaky tests, debugging failures, implementing Page Object Model, configuring CI/CD, optimizing performance, mocking APIs, handling authentication or OAuth, testing accessibility (axe-core), file uploads/downloads, date/time mocking, WebSockets, geolocation, permissions, multi-tab/popup flows, mobile/responsive layouts, touch gestures, GraphQL, error handling, offline mode, multi-user collaboration, third-party services (payments, email verification), console error monitoring, global setup/teardown, test annotations (skip, fixme, slow), test tags (@smoke, @fast, @critical, filtering with --grep), project dependencies, security testing (XSS, CSRF, auth), performance budgets (Web Vitals, Lighthouse), iframes, component testing, canvas/WebGL, service workers/PWA, test coverage, i18n/localization, Electron apps, or browser extension testing. Covers E2E, component, API, visual, accessibility, security, Electron, and extension testing.

日本語の概要は準備中です。原文の説明を表示しています。

human-kit/ui172026年10月11日 更新

CLI tools for Svelte 5 documentation lookup and code analysis. MUST be used whenever creating, editing or analyzing any Svelte component (.svelte) or Svelte module (.svelte.ts/.svelte.js). If possible, this skill should be executed within the svelte-file-editor agent for optimal results.

日本語の概要は準備中です。原文の説明を表示しています。

human-kit/ui172026年10月11日 更新

Svelte 5 runes, snippets, SvelteKit patterns, and modern best practices for TypeScript and component development. Use when writing, reviewing, or refactoring Svelte 5 components and SvelteKit applications. Triggers on: Svelte components, runes ($state, $derived, $effect, $props, $bindable, $inspect), snippets ({#snippet}, {@render}), event handling, SvelteKit data loading, form actions, Svelte 4 to Svelte 5 migration, store to rune migration, slots to snippets migration, TypeScript props typing, generic components, SSR state isolation, performance optimization, or component testing.

日本語の概要は準備中です。原文の説明を表示しています。

human-kit/ui172026年10月11日 更新

Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.

日本語の概要は準備中です。原文の説明を表示しています。

human-kit/ui172026年10月11日 更新

human-kit のスキルをすべて見る

このスキルの問題を報告する