jpskill.com
🛠️ 開発・MCP コミュニティ

clack

JavaScriptやTypeScriptでCLI(コマンドラインインターフェース)を開発・デバッグする際に、@clack/coreや@clack/promptsの活用方法を、豊富なサンプルやAPI利用例を基に分かりやすくガイドし、最適なプロンプトフローを実装するSkill。

📜 元の英語説明(参考)

Comprehensive guidance for building and debugging JavaScript and TypeScript CLIs with @clack/core and @clack/prompts, backed by bundled upstream source and examples. Use when implementing clack prompt flows, deciding between core primitives and styled prompts, adapting clack examples, or validating clack API usage.

🇯🇵 日本人クリエイター向け解説

一言でいうと

JavaScriptやTypeScriptでCLI(コマンドラインインターフェース)を開発・デバッグする際に、@clack/coreや@clack/promptsの活用方法を、豊富なサンプルやAPI利用例を基に分かりやすくガイドし、最適なプロンプトフローを実装するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o clack.zip https://jpskill.com/download/10657.zip && unzip -o clack.zip && rm clack.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/10657.zip -OutFile "$d\clack.zip"; Expand-Archive "$d\clack.zip" -DestinationPath $d -Force; ri "$d\clack.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して clack.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → clack フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Clack CLI Skill

このスキルを使用すると、@clack/core および @clack/prompts を用いて、信頼性の高いインタラクティブな CLI を実装できます。

ワークフロー

  1. @clack/prompts または @clack/core のどちらを使用するか決定します。
  2. タスクに必要な最小限の参照ファイルのみを読みます。
  3. references/examples/ にある最も近い例から始めます。
  4. 各プロンプトの後にキャンセル処理を実装します。
  5. 必要に応じて UX を磨きます (intro, outro, spinner, progress, tasks, log, taskLog, stream)。
  6. references/docs/prompts-exports.ts および references/docs/core-exports.ts のエクスポートマップに対してインポートを検証します。

適切なレイヤーを選択する

デフォルトでは @clack/prompts を使用してください。

  • 製品版レベルのスタイリングと迅速な提供のために選択してください。
  • リクエストが標準的なプロンプトタイプ(テキスト、確認、選択、複数選択、グループ化されたプロンプト、ログ、スピナー、進捗、タスク、またはストリーミングログ)に対応する場合に使用してください。

より低レベルの制御が必要な場合は、@clack/core を使用してください。

  • カスタムレンダリング、カスタムプロンプト動作、またはスタイルなしのプリミティブのために選択してください。
  • リクエストが直接プロンプトクラス (TextPrompt, SelectPrompt, ConfirmPrompt, Prompt) または深いカスタマイズを必要とする場合に使用してください。

必須の安全パターン

すべてのプロンプト結果でキャンセルを処理します。

import * as p from '@clack/prompts';

const value = await p.text({ message: 'Your name?' });
if (p.isCancel(value)) {
  p.cancel('Operation cancelled.');
  process.exit(0);
}

ユーザー向けの CLI では、セッションをクリーンに開始および終了します。

p.intro('create-app');
// prompts
p.outro('Done');

プロンプト設計のガイダンス

ユーザーから特に指示がない限り、これらのデフォルトを使用してください。

  • text: 必須または制約のある入力に対して validate を提供します。
  • confirm: 二者択一の決定に使用します。自由形式のテキストを強制することは避けてください。
  • select: 相互に排他的な選択肢に使用します。
  • multiselect または groupMultiselect: 複数選択および階層的な複数選択フローに使用します。
  • group: ステップ間の依存関係を維持しながら、構造化された回答を収集します。
  • spinner および progress: 時間のかかるタスクをラップし、ステータスを明確に更新します。
  • tasks: スピナーステータスで連続したタスクブロックを実行します。
  • taskLog: サブプロセスの出力をストリーミングし、成功/失敗で終了します。
  • stream: 非同期またはトークン化された出力(LLM スタイルのストリーミング用)をレンダリングします。

実装シーケンス

  1. ユーザー要件を調査し、必要なプロンプトプリミティブを特定します。
  2. references/examples/ の下にある最も近い例を読みます。
  3. 次の場所から関数/クラスの可用性を確認します。
    • references/docs/prompts-exports.ts
    • references/docs/core-exports.ts
  4. 動作が不明な場合は、次の場所にあるソースを調べます。
    • references/source/prompts/
    • references/source/core/
  5. キャンセルガードと明確なターミナルメッセージングを使用して実装します。
  6. 要求された場合、非インタラクティブなコンテキストに対するフォールバック動作を維持します(スピナーと CI 志向の例を参照)。

参照読み込み戦略

これらのファイルから始めてください。

  • references/docs/prompts-readme.md
  • references/docs/core-readme.md
  • references/INDEX.md

必要に応じて特定のソースファイルのみをロードします。

  • プロンプトラッパーの内部: references/source/prompts/*.ts
  • コアプロンプトプリミティブ: references/source/core/prompts/*.ts
  • コアユーティリティの動作: references/source/core/utils/*.ts

例を優先したマッピング

フローを再発明することを避けるために、このクイックマッピングを使用してください。

  • 一般的なプロンプトスイート: references/examples/basic/index.ts
  • バリデーション: references/examples/basic/text-validation.ts
  • オートコンプリート: references/examples/basic/autocomplete.ts
  • オートコンプリート複数選択: references/examples/basic/autocomplete-multiselect.ts
  • デフォルト値: references/examples/basic/default-value.ts
  • ファイルシステムパスプロンプト: references/examples/basic/path.ts
  • スピナーの基本: references/examples/basic/spinner.ts
  • スピナーのキャンセル: references/examples/basic/spinner-cancel.ts
  • 高度なスピナーのキャンセル: references/examples/basic/spinner-cancel-advanced.ts
  • CI 志向のスピナー動作: references/examples/basic/spinner-ci.ts
  • タイマースタイルのスピナー更新: references/examples/basic/spinner-timer.ts
  • プログレスバー: references/examples/basic/progress.ts
  • タスクログストリーミング: references/examples/basic/task-log.ts
  • ストリームユーティリティ: references/examples/basic/stream.ts
  • Changesets 統合フロー: references/examples/changesets/index.ts

品質基準

clack の実装を最終決定する前に:

  • すべてのインポートが現在のエクスポートファイルに存在することを確認します。
  • キャンセルフローが常に安全に終了することを確認します。
  • プロンプトの文言が短く、曖昧でないことを確認します。
  • 時間のかかる操作が目に見えるステータスを提供することを確認します。
  • 選択されたレイヤー (coreprompts) がカスタマイズのニーズに一致することを確認します。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Clack CLI Skill

Use this skill to implement reliable interactive CLIs with @clack/core and @clack/prompts.

Workflow

  1. Decide whether to use @clack/prompts or @clack/core.
  2. Read only the minimum reference files needed for the task.
  3. Start from the closest example in references/examples/.
  4. Implement cancellation handling after every prompt.
  5. Add UX polish (intro, outro, spinner, progress, tasks, log, taskLog, stream) when useful.
  6. Verify imports against export maps in references/docs/prompts-exports.ts and references/docs/core-exports.ts.

Pick the Right Layer

Use @clack/prompts by default.

  • Choose it for production-ready styling and quick delivery.
  • Use it when the request maps to standard prompt types: text, confirm, select, multiselect, grouped prompts, logs, spinners, progress, tasks, or streaming logs.

Use @clack/core when lower-level control is required.

  • Choose it for custom rendering, custom prompt behavior, or unstyled primitives.
  • Use it when the request needs direct prompt classes (TextPrompt, SelectPrompt, ConfirmPrompt, Prompt) or deep customization.

Mandatory Safety Patterns

Handle cancellation on every prompt result.

import * as p from '@clack/prompts';

const value = await p.text({ message: 'Your name?' });
if (p.isCancel(value)) {
  p.cancel('Operation cancelled.');
  process.exit(0);
}

Start and close sessions cleanly for user-facing CLIs.

p.intro('create-app');
// prompts
p.outro('Done');

Prompt Design Guidance

Use these defaults unless the user asks otherwise.

  • text: provide validate for required or constrained input.
  • confirm: use for binary decisions; avoid coercing free-form text.
  • select: use for mutually exclusive choices.
  • multiselect or groupMultiselect: use for multi-choice and hierarchical multi-choice flows.
  • group: gather structured answers while preserving dependencies between steps.
  • spinner and progress: wrap long-running tasks and update status clearly.
  • tasks: execute sequential task blocks with spinner status.
  • taskLog: stream subprocess output and finish with success/failure.
  • stream: render async or tokenized output (for LLM-style streaming).

Implementation Sequence

  1. Inspect user requirements and identify required prompt primitives.
  2. Read the nearest example under references/examples/.
  3. Confirm function/class availability from:
    • references/docs/prompts-exports.ts
    • references/docs/core-exports.ts
  4. If behavior is unclear, inspect source under:
    • references/source/prompts/
    • references/source/core/
  5. Implement with cancellation guards and clear terminal messaging.
  6. Keep fallback behavior for non-interactive contexts when requested (see spinner and CI-oriented examples).

Reference Loading Strategy

Start with these files.

  • references/docs/prompts-readme.md
  • references/docs/core-readme.md
  • references/INDEX.md

Load specific source files only as needed.

  • Prompts wrapper internals: references/source/prompts/*.ts
  • Core prompt primitives: references/source/core/prompts/*.ts
  • Core utility behavior: references/source/core/utils/*.ts

Example-First Mapping

Use this quick mapping to avoid re-inventing flows.

  • General prompt suite: references/examples/basic/index.ts
  • Validation: references/examples/basic/text-validation.ts
  • Autocomplete: references/examples/basic/autocomplete.ts
  • Autocomplete multi-select: references/examples/basic/autocomplete-multiselect.ts
  • Defaults: references/examples/basic/default-value.ts
  • Filesystem path prompt: references/examples/basic/path.ts
  • Spinner basics: references/examples/basic/spinner.ts
  • Spinner cancellation: references/examples/basic/spinner-cancel.ts
  • Advanced spinner cancellation: references/examples/basic/spinner-cancel-advanced.ts
  • CI-oriented spinner behavior: references/examples/basic/spinner-ci.ts
  • Timer-style spinner updates: references/examples/basic/spinner-timer.ts
  • Progress bar: references/examples/basic/progress.ts
  • Task log streaming: references/examples/basic/task-log.ts
  • Stream utility: references/examples/basic/stream.ts
  • Changesets integration flow: references/examples/changesets/index.ts

Quality Bar

Before finalizing any clack implementation:

  • Confirm every import exists in the current exports file.
  • Ensure cancellation flow always exits safely.
  • Ensure prompt wording is short and unambiguous.
  • Ensure long-running operations provide visible status.
  • Ensure selected layer (core vs prompts) matches customization needs.