mcpField
U
ui-development

ui-development

github.com/redpanda-dataデザイン・UI4.3k47 回インストール今日更新
リポジトリ

ui-development について

Redpanda UI Registryを使うプロジェクト向けのUI開発スキルです。ドキュメント確認、コンポーネントの導入、スタイル規則、変更時の制約を案内します。

主な機能

  1. 01コンポーネント文書の検索
  2. 02Registryコンポーネントの利用
  3. 03余白とスタイル規則の順守
  4. 04規則に沿ったコンポーネント変更

活用シーン

  1. 01UIページやコンポーネントの作成
  2. 02既存Registryコンポーネントの変更

MCP 対応

最初にRedpanda UIのMCPツールで文書を検索するか、コンポーネント情報を取得する手順です。

インストール

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

$npx skills add https://github.com/redpanda-data/console --skill ui-development

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

同梱ファイル

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

rules/
icon-system.md
style-no-margin-on-registry.md
style-use-variants.md
use-ui-registry.md

詳細

UI 開発

Redpanda UI Registry を使ってユーザーインターフェースを構築します。

有効化条件

  • UI コンポーネントまたはページの構築・作成
  • キーワード：「デザインシステム」、「UI」、「フロントエンド」、「レジストリ」、「コンポーネント」
  • 既存のレジストリコンポーネントの変更

クイックリファレンス

操作ルール
コンポーネントを使用するuse-ui-registry.md
余白を追加するstyle-no-margin-on-registry.md
見た目をカスタマイズするstyle-use-variants.md
アイコンを使用するicon-system.md

ワークフロー

1. ドキュメントを取得する
FIRST: Use MCP tool mcp__redpanda-ui__search-docs or mcp__redpanda-ui__get_component
2. 既存のコンポーネントを確認する
ls src/components/redpanda-ui/

重要なルール

必ず守ること
  • src/components/redpanda-ui/ の Registry コンポーネントを使用する
  • UI コードを書く前に、最初の操作として mcp__redpanda-ui__get_component を呼び出す
  • CLI 経由でコンポーネントをインストールする
禁止事項
  • @redpanda-data/ui（非推奨）を使用する — no-legacy を参照
  • レジストリのソースをコピー＆ペーストする（CLI 経由でインストールする）
  • ユーザーからの依頼なしに外部 UI ライブラリをインストールする
  • レジストリコンポーネントでインラインの style プロパティを使用する
  • レジストリコンポーネントに className で直接マージンを追加する
レジストリコンポーネントを変更する場合

src/components/redpanda-ui/ 内のファイルを編集する場合：

  1. // UPSTREAM: <reason> を使ったコメントで変更内容を記録する
  2. 変更を最小限に抑え、後方互換性を維持する
  3. いずれ上流のレジストリに貢献できるよう、変更を追跡する

ルール

詳細なガイダンスについては、rules/ ディレクトリを参照してください。

コメント

Markdown 対応