mcpField
B
bundle

bundle

github.com/johnlindquist開発2637 回インストール45 週間前に更新
リポジトリ

bundle について

bundleは、コードと関連情報をMarkdownやGitHub Gistにまとめるスキルです。コード片や依存関係、プロジェクト情報を共有する開発者向けで、バンドル作成とGist管理を扱います。

主な機能

  1. 01ファイルとローカルインポートのバンドル
  2. 02CLAUDE.mdへのプロジェクト情報生成
  3. 03GitHub Gistの作成、表示、編集、クローン
  4. 04インポートの抽出と依存関係の確認

活用シーン

  1. 01レビュー用コード片の共有
  2. 02実行可能なデモのGist化
  3. 03共有用のソースとドキュメントの集約

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/johnlindquist/claude --skill bundle

インストール後、Claude Code で/bundleを入力して読み込まれたか確認します。

詳細

コードバンドラー

Gist や Markdown で共有するためにコードをバンドルします。

前提条件

# GitHub CLI for gists
brew install gh
gh auth login

CLI リファレンス

GitHub Gist
Gist を作成
# Single file gist (public)
gh gist create file.ts

# Private gist
gh gist create --private file.ts

# Multiple files
gh gist create file1.ts file2.ts file3.ts

# With description
gh gist create -d "My code snippet" file.ts

# From stdin
echo "console.log('hello')" | gh gist create -f hello.js

# Public with description
gh gist create -d "Utility functions" --public utils.ts helpers.ts
Gist の一覧を表示
# Your gists
gh gist list

# With limit
gh gist list --limit 20

# Public only
gh gist list --public

# Secret only
gh gist list --secret
Gist を表示
# View gist content
gh gist view <gist-id>

# View specific file
gh gist view <gist-id> --filename utils.ts

# Get raw content
gh gist view <gist-id> --raw
Gist を編集
# Edit in editor
gh gist edit <gist-id>

# Add file to gist
gh gist edit <gist-id> --add newfile.ts

# Remove file
gh gist edit <gist-id> --remove oldfile.ts
Gist をクローン
# Clone as repo
gh gist clone <gist-id>

# Clone to specific directory
gh gist clone <gist-id> my-snippet
Gist を削除
gh gist delete <gist-id>

バンドルのパターン

依存関係を含めてファイルをバンドル
#!/bin/bash
# bundle-file.sh - Bundle a file with its local imports

FILE=$1
OUTPUT=${2:-bundle.md}

echo "# Code Bundle" > $OUTPUT
echo "" >> $OUTPUT
echo "## Main File: $FILE" >> $OUTPUT
echo '```typescript' >> $OUTPUT
cat $FILE >> $OUTPUT
echo '```' >> $OUTPUT

# Extract and include imports
grep -E "^import.*from ['\"]\./" $FILE | while read import; do
  # Extract path
  path=$(echo $import | sed -E "s/.*from ['\"](.+)['\"].*/\1/")
  resolved="${path}.ts"
  if [ -f "$resolved" ]; then
    echo "" >> $OUTPUT
    echo "## $resolved" >> $OUTPUT
    echo '```typescript' >> $OUTPUT
    cat "$resolved" >> $OUTPUT
    echo '```' >> $OUTPUT
  fi
done

echo "Bundle created: $OUTPUT"
プロジェクト用の CLAUDE.md を作成
#!/bin/bash
# Generate project context file

OUTPUT="CLAUDE.md"

echo "# Project Context" > $OUTPUT
echo "" >> $OUTPUT

# Package info
if [ -f "package.json" ]; then
  echo "## Dependencies" >> $OUTPUT
  echo '```json' >> $OUTPUT
  jq '.dependencies' package.json >> $OUTPUT
  echo '```' >> $OUTPUT
fi

# Key files
echo "" >> $OUTPUT
echo "## Key Files" >> $OUTPUT

for f in src/index.ts src/main.ts app.ts; do
  if [ -f "$f" ]; then
    echo "" >> $OUTPUT
    echo "### $f" >> $OUTPUT
    echo '```typescript' >> $OUTPUT
    head -100 "$f" >> $OUTPUT
    echo '```' >> $OUTPUT
  fi
done
コードスニペットを共有
# Quick share a file as gist
share-code() {
  local file=$1
  local desc=${2:-"Code snippet"}

  gh gist create -d "$desc" --public "$file" | tail -1
}

# Usage
share-code src/utils.ts "Utility functions"

インポートの抽出

すべてのインポートを検索
# Extract import statements
grep -h "^import" src/**/*.ts | sort -u

# External imports only
grep -h "^import" src/**/*.ts | grep -v "from '\.\." | sort -u

# Local imports only
grep -h "^import" src/**/*.ts | grep "from '\.\." | sort -u
依存関係グラフ
# Show what imports what
for f in src/**/*.ts; do
  echo "=== $f ==="
  grep "^import" "$f" | sed 's/.*from /  <- /'
done

Gist のワークフロー

コードレビューで共有
# Share specific function for review
FILE=src/auth.ts
START=$(grep -n "export function login" $FILE | cut -d: -f1)
END=$(tail -n +$START $FILE | grep -n "^}" | head -1 | cut -d: -f1)

sed -n "${START},$((START+END-1))p" $FILE | \
  gh gist create -d "Login function for review" -f login.ts
クイックデモ
# Create runnable demo
cat > /tmp/demo.ts << 'EOF'
// Demo: Array utilities
const nums = [1, 2, 3, 4, 5];
console.log(nums.filter(n => n % 2 === 0));
EOF

gh gist create -d "Quick demo" --public /tmp/demo.ts
ドキュメント用 Gist
# Bundle docs with code
gh gist create \
  -d "My utility library" \
  README.md \
  src/utils.ts \
  examples/usage.ts

ベストプラクティス

  1. 説明を追加する - コンテキストを示すために -d を使用します
  2. デフォルトでは非公開にする - 意図的に共有する場合を除きます
  3. README を含める - コードの内容を説明します
  4. 重要な Gist にバージョンを付ける - クローンして変更をコミットします
  5. 共有前に整理する - シークレットやコメントを削除します
  6. 依存関係をバンドルする - 必要なコンテキストを含めます

コメント