mcpField
A
ascii-progress-and-spinner

ascii-progress-and-spinner

github.com/full-stack-skillsデザイン・UI575 回インストール4 週間前に更新
リポジトリ

ascii-progress-and-spinner について

ascii-progress-and-spinner は ASCII の進捗バーとスピナーの設計を支援するスキルです。描画規則と代替出力を扱い、対話型ターミナルとリダイレクトされたログの両方を想定しています。

主な機能

  1. 01確定進捗バーのスタイル
  2. 02不確定スピナーのスタイル
  3. 03TTY の1行更新規則
  4. 04非 TTY のログ行への切り替え
  5. 05幅とパーセント表示の設定
  6. 06ASCII のみのスタイル

活用シーン

  1. 01ターミナルの進捗表示を設計する
  2. 02対話型出力にローディング状態を表示する
  3. 03リダイレクトされたログで進捗を伝える

インストール

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

$npx skills add https://github.com/full-stack-skills/ascii-skills --skill ascii-progress-and-spinner

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

LICENSE.txt
agents/
openai.yaml
examples/
styles.md
scripts/
demo.py

詳細

このスキルを使用するタイミング

重要なトリガールール

  • ユーザーがスキル名 ascii-progress-and-spinner を正確に明示した場合にのみ、このスキルを使用してください。

トリガーフレーズの例:

  • "ascii-progress-and-spinner"
  • "use ascii-progress-and-spinner"
  • "用 ascii-progress-and-spinner 生成 ASCII 进度条"
  • "使用 ascii-progress-and-spinner 做 spinner / loading"

適用範囲

  • 特定の UI フレームワークには統合しないでください。スタイル、更新ルール、フォールバックプロトコル、使用例を出力してください。
  • 必ず以下を扱ってください:
    • 確定的な進捗バー
    • 不確定なスピナー
    • TTY 以外/リダイレクトされた出力へのフォールバック(ログ行、キャリッジリターンによる更新なし)

このスキルの使用方法

入力
  • mode(determinate | indeterminate)
  • width(デフォルトは 40)
  • showPercent(デフォルトは true)
  • showEta(任意)
  • multiTask(任意)
  • colorMode(none | ansi256、デフォルトは none)
出力(必須)
  • progressBarStyles(3 つ以上)
  • spinnerStyles(2 つ以上)
  • renderRules(TTY の単一行更新と logLines)
  • fallbackRules(非対話型/リダイレクトされた出力)
推奨する描画ルール
  • TTY(対話型): 単一行を更新(前の行を上書き)し、ログの過剰な出力を避けます。
  • 非 TTY(ログ): ログ行を出力します(上書きなし)。各行にはタスク名とパーセンテージを含めてもかまいません。

スクリプト

  • scripts/demo.py:進捗バーとスピナーの形状を確認するローカルデモ

使用例

  • examples/styles.md

品質チェックリスト

  1. 固定幅(揺れを防ぐため、パーセンテージ欄の幅を固定します)
  2. ログモードでは grep しやすい形式(上書きなし)
  3. あいまいな幅の Unicode 文字を避けるため、ASCII のみのデフォルトを使用可能

キーワード

英語: ascii-progress-and-spinner, progress bar, spinner, loading, tty, non-interactive, log output, ascii 日本語: ascii-progress-and-spinner, 進捗バー, スピナー, ローディング, ターミナル, TTY, ログへのフォールバック, ASCII

よくある落とし穴

  1. バージョン互換性: フレームワークのバージョンと依存ライブラリの互換性に注意してください。バージョンによって API が異なる場合があります。
  2. 設定ファイルの形式: 設定ファイルの形式の誤りは最もよくある問題です。エディターの構文チェックを使用することをおすすめします。
  3. 環境変数: 必要な環境変数がすべて正しく設定されていることを確認してください。機密情報をハードコードしないでください。
  4. 依存関係の競合: 複数のバージョンが共存する場合は依存関係の競合に注意し、lock ファイルを使ってバージョンを固定してください。
  5. パフォーマンス上の落とし穴: 大量のデータを扱う場合はパフォーマンスの最適化に注意し、N+1 クエリなどのよくある問題を避けてください。

使用手順

Step 1: 環境の準備

開発環境に必要な依存関係とツールがインストールされていることを確認します。

Step 2: 初期設定

プロジェクトの要件に応じて基本設定を行います。

Step 3: コア機能の使用

サンプルコードに従ってコア機能を実装します。

Step 4: テストと検証

テストを実行して機能が正常に動作することを確認します。

Step 5: デプロイ

開発完了後、デプロイと監視を行います。

コメント