mcpField
K
kanban-board

kanban-board

github.com/nexu-ioデザイン・UI104.6k236 回インストール今日更新
リポジトリ

kanban-board について

kanban-boardは、セマンティックHTMLで1画面のカンバンボードを生成するスキルです。ブリーフの情報を4つの固定ステータス列、タスクカード、フィルター、スプリント進捗サイドバーに整理します。

主な機能

  1. 011画面のカンバンボードをHTMLで生成
  2. 024つのタスクステータス列を設定
  3. 03タスクタグ、担当者、見積もりの表示
  4. 04メンバー・タグ・ステータスの絞り込みと検索
  5. 05スプリント進捗、担当者、ブロック中チケットの表示

活用シーン

  1. 01チームの現在のスプリントタスクの提示
  2. 02タスク状況と担当者割り当ての確認
  3. 03スプリント進捗とブロック中の作業の把握

インストール

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

$npx skills add https://github.com/nexu-io/open-design --skill kanban-board

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

同梱ファイルexample.html

詳細

カンバンボードスキル

1 画面に収まるカンバンボードを作成します。

ワークフロー

  1. アクティブな DESIGN.md を読みます。
  2. 概要からチーム名、スプリント番号、列、メンバー一覧を特定します。
  3. レイアウト：
    • トップバー：プロジェクトのパンくずリスト、スプリントチップ、フィルター行（メンバー、ラベル、ステータス）、検索。
    • 4 列：バックログ、進行中、レビュー中、完了。各列には件数チップと「+ 追加」の操作要素を設けます。
    • 各列に 3～6 枚のカードを配置します。各カードには、タグチップ、タイトル、担当者のアバター、ポイント見積もり、進捗（該当する場合）を含めます。
    • サイドバー（折りたたみ可能な印象）：進捗バー、上位の担当者、ブロック中のチケットのコールアウトを含む「スプリントの状況」。
  4. インラインの <style> を 1 つ使用し、セマンティック HTML にします。

出力仕様

<artifact identifier="kanban-board" type="text/html" title="Sprint Board">
<!doctype html>...</artifact>

コメント

Markdown 対応