Communitygithub.com

0xAlchemist-cs/personal-ui-system

ユーザーのタスクがAnt Design(antd)に関するものである場合に使用します。antdコンポーネントの作成、antdの問題のデバッグ、antdのAPI/プロップス/トークン/デモの照会、antdバージョン間の移行、プロジェクト内のantd使用状況の分析などを支援します。antd関連コード、'antd'からのインポート、またはantdに関する明示的な質問でトリガーされます。

personal-ui-system とは?

このスキルは、Ant Design (antd) の開発効率を最大化するためのCLIツール `@ant-design/cli` に関するものです。v3 から v6 までの antd メタデータと移行ガイドをオフラインでバンドルしており、ネットワーク接続を必要とせずに、コンポーネントの知識照会、プロジェクト分析、バージョン移行を支援します。主な機能は3つあり、(1) コンポーネントのAPI、デモ、デザイントークンの照会、(2) プロジェクト全体のantd使用状況のスキャンと非推奨APIのリンティング、(3) バージョン間の移行チェックリストと自動化プロンプトの生成です。Claude Code、Cursor、Codex などのAIエージェントや、MCPプロトコルをサポートするIDEで利用可能で、常に `--format json` を使い、プログラムで解析可能な構造化データを出力します。スキルは、コードを書く前にAPIを確認し、変更後はリントを実行し、バグ報告はプレビュー確認後に送信するという厳格なワークフローを定義しており、antd開発におけるヒューマンエラーを大幅に削減します。

対応✓Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/0xAlchemist-cs/personal-ui-system/tree/HEAD/.agents/skills/antd

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Ant Design CLI

あなたは @ant-design/cli にアクセスできます。これは、v4/v5/v6 向けのantdメタデータ(v3→v4、v4→v5、v5→v6の移行ガイドも含む)をバンドルしたローカルCLIツールです。これを使用して、コンポーネントの知識を照会したり、プロジェクトを分析したり、移行をガイドしたりできます。すべてのデータはオフラインで利用でき、ネットワークは必要ありません。

セットアップ

初回使用前に、CLIがインストールされているか確認してください。インストールされていない場合は、自動的にインストールします。

which antd || npm install -g @ant-design/cli

コマンド実行後、出力に「Update available」という通知が含まれている場合は、続行する前に antd upgrade を実行して更新してください。

プログラムで解析できる構造化出力を得るには、常に --format json を使用してください。

シナリオ

1. antdコンポーネントコードの作成

antdコンポーネントコードを作成する前に、まずそのAPIを調べてください。記憶に頼らないでください。

# 利用可能なプロパティを確認
antd info Button --format json

# 出発点として動作するデモを取得
antd demo Button basic --format json

# カスタムスタイリングのためのセマンティッククラス名/スタイルを確認
antd semantic Button --format json

# テーマ設定のためのコンポーネントレベルのデザイントークンを確認
antd token Button --format json

# 全体的なデザイン言語(design.md):色、タイポグラフィ、スペーシング、半径+原則を取得
antd design.md --format json

ワークフロー: antd info → プロップスを理解 → antd demo → 動作例を取得 → コードを作成

2. 完全なドキュメントの参照

プロップスだけでなく包括的なコンポーネントドキュメントが必要な場合:

antd doc Table --format json        # Tableの完全なマークダウンドキュメント
antd doc Table --lang zh            # 中国語のドキュメント

3. antdの問題のデバッグ

コードが期待通りに動作しない場合、またはユーザーがantdのバグを報告した場合:

# 完全な環境スナップショットを収集(システム、依存関係、ブラウザ、ビルドツール)
# 出力にはシステム情報が含まれ、問題のトラブルシューティングに役立ちます
antd env --format json

# ユーザーのantdバージョンに対してプロップが存在するか確認
antd info Select --version 5.12.0 --format json

# プロップが非推奨かどうか確認
antd lint ./src/components/MyForm.tsx --format json

# プロジェクトレベルの設定問題を診断
antd doctor --format json

ワークフロー: antd env → 完全な環境を取得 → antd doctor → 設定を確認 → antd info --version X → ユーザーの正確なバージョンに対してAPIを検証 → antd lint → 非推奨または誤った使用法を発見

4. バージョン間の移行

ユーザーがantdをアップグレードしたい場合(例:v3→v4、v4→v5):

# 完全な移行チェックリストを取得
antd migrate 3 4 --format json    # v3 → v4
antd migrate 4 5 --format json    # v4 → v5

# 特定のコンポーネントの移行を確認
antd migrate 4 5 --component Select --format json

# エージェント向けの自動移行プロンプトを生成(ファイルは変更しません)
antd migrate 4 5 --apply ./src --format json

# 2つのバージョン間の変更点を確認
antd changelog 4.24.0 5.0.0 --format json

# 特定のコンポーネントの変更点を確認
antd changelog 4.24.0 5.0.0 Select --format json

ワークフロー: antd migrate → 完全なチェックリストを取得 → antd changelog <v1> <v2> → 破壊的変更を理解 → 修正を適用 → antd lint → 非推奨の使用が残っていないか確認

5. プロジェクトのantd使用状況の分析

ユーザーが自分のプロジェクトでantdがどのように使用されているかを理解したい場合:

# コンポーネントの使用統計をスキャン
antd usage ./src --format json

# 特定のコンポーネントにフィルタリング
antd usage ./src --filter Form --format json

# ベストプラクティス違反をリント
antd lint ./src --format json

# 特定のルールカテゴリのみを確認
antd lint ./src --only deprecated --format json
antd lint ./src --only a11y --format json
antd lint ./src --only performance --format json

6. 変更履歴とバージョン履歴の確認

ユーザーがバージョンでの変更点について質問した場合:

# 特定のバージョンの変更履歴
antd changelog 5.22.0 --format json

# バージョン範囲(両端を含む)
antd changelog 5.21.0..5.24.0 --format json

7. 利用可能なコンポーネントの探索

ユーザーがどのコンポーネントを使用すべきか選んでいる場合:

# すべてのコンポーネントをカテゴリ付きで一覧表示
antd list --format json

# 特定のantdバージョンのコンポーネントを一覧表示
antd list --version 5.0.0 --format json

8. 環境情報の収集

プロジェクトのantdセットアップを理解する必要がある場合、またはバグレポートの情報を準備する場合:

# 完全な環境スナップショット(テキスト — GitHub Issuesに貼り付け可能)
antd env

# プログラムで使用するための構造化JSON
antd env --format json

# 特定のプロジェクトディレクトリをスキャン
antd env ./my-project --format json

収集する情報:OS、Node、パッケージマネージャー(npm/pnpm/yarn/bun/utoo)、npmレジストリ、ブラウザ、コア依存関係(antd/react/dayjs)、すべての @ant-design/* および rc-* パッケージ、ビルドツール(umi/vite/webpack/typescript/など)。

9. antdのバグ報告

ユーザーがantdのバグを報告するよう依頼した場合:

# ステップ0:参照用に環境情報を収集(オプション — antd bugは基本的な環境を既に埋め込みます)
# 出力を使用してバージョンを相互確認したり、バグレポートに追加の詳細を添付したりします
antd env --format json

# ステップ1:ユーザーレビュー用にプレビュー
antd bug --title "日付選択時にDatePickerがクラッシュする" \
  --reproduction "https://codesandbox.io/s/xxx" \
  --steps "1. DatePickerを開く 2. 日付をクリック" \
  --expected "日付が選択される" \
  --actual "コンポーネントがエラーでクラッシュする" \
  --format json

# ステップ2:ユーザーに表示し、確認を求める

# ステップ3:ユーザーが確認したら送信
antd bug --title "日付選択時にDatePickerがクラッシュする" \
  --reproduction "https://codesandbox.io/s/xxx" \
  --steps "1. DatePickerを開く 2. 日付をクリック" \
  --expected "日付が選択される" \
  --actual "コンポーネントがエラーでクラッシュする" \
  --submit

10. CLIの問題報告

ユーザーがCLIのバグを報告するよう依頼した場合、または明示的に報告を依頼した場合:

# ユーザー向けにバグレポートをプレビュー
antd bug-cli --title "antd info Buttonがv5.12.0で間違ったプロップスを返す" \
  --description "バージョン5.12.0のButtonプロップスを照会すると、そのバージョンに存在しないプロップスが出力に含まれます" \
  --steps "1. 実行: antd info Button --version 5.12.0 --format json" \
  --expected "antd 5.12.0のButton APIと一致するプロップス" \
  --actual "'classNames'が含まれていますが、これは5.16.0で追加されました" \
  --format json

レポートをユーザーに表示し、送信前に確認を得てください:

antd bug-cli --title "antd info Buttonがv5.12.0で間違ったプロップスを返す" \
  --description "..." \
  --steps "..." \
  --expected "..." \
  --actual "..." \
  --submit

オプトアウト: 環境変数 ANTD_NO_AUTO_REPORT=1 が設定されている場合、バグ報告の提案をすべてスキップしてください。ユーザーが直接依頼しない限り、antd bug や antd bug-cli を提案しないでください。

11. CLIのアップグレード

ユーザーが @ant-design/cli を最新バージョンに更新したい場合、または「Update available」通知が表示された場合:

# 最新バージョンにアップグレード(パッケージマネージャーを自動検出)
antd upgrade

このコマンドは、CLIをインストールしたパッケージマネージャー(npm、yarn、pnpm、bun、cnpm、utoo)を検出し、適切なアップグレードコマンドを実行します。検出に失敗した場合は、手動コマンドを提案します。

12. MCPサーバーとしての使用

MCPをサポートするIDE(Claude Desktop、Cursorなど)で作業する場合、CLIはMCPサーバーとしても実行でき、すべての知識照会ツールを直接公開します:

{
  "mcpServers": {
    "antd": {
      "command": "antd",
      "args": ["mcp", "--version", "5.20.0"]
    }
  }
}

これにより、MCPプロトコルを介して8つのツール(antd_list、antd_info、antd_doc、antd_demo、antd_token、antd_design_md、antd_semantic、antd_changelog)と2つのプロンプト(antd-expert、antd-page-generator)が提供されます。

グローバルフラグ

フラグ目的
--format <format>出力形式: json、text、または markdown(エージェントは json を推奨)
--version <v>特定のantdバージョンを対象とする(例: 5.20.0)
--lang zh中国語出力(デフォルト: en)
--detail追加フィールド(description、since、deprecated、FAQ)を含める
-V, --cli-versionCLIバージョンを表示して終了

主要なルール

  1. 常に作成前に照会する — antd APIを記憶から推測しないでください。最初に antd info を実行してください。
  2. ユーザーのバージョンに合わせる — 知識照会(list/info/doc/demo/token/semantic/changelog)はantd v4+をサポートします。プロジェクトがantd 4.x/5.x/6.xを使用している場合は、--version 4.24.0 / 5.24.0 / 6.x を渡してください。antd v3プロジェクトの場合は、最初に antd migrate 3 4 を使用してください。
  3. --format json を使用する — すべてのコマンドがこれをサポートします。テキスト出力を正規表現でマッチングするのではなく、JSON出力を解析してください。
  4. 移行を提案する前に確認する — バージョンアップグレードについてアドバイスする前に、antd changelog <v1> <v2> と antd migrate を実行してください。
  5. 変更後にリントする — antdコードを作成または変更した後、変更したファイルに対して antd lint を実行し、非推奨または問題のある使用法を検出してください。
  6. antdのバグを報告する — ユーザーがantdのバグを報告するよう依頼した場合は、antd bug を使用してください。常に最初にプレビューし、ユーザーの確認を得てから送信してください。
  7. CLIの問題を報告する — ユーザーがCLIの問題について質問した場合は、antd bug-cli を使用して報告を支援してください。常に最初にプレビューし、ユーザーの確認を得てから送信してください。

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

0xAlchemist-cs/personal-ui-system

Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form, dashboard, navbar, card, landing section, pricing table, or layout using Chakra UI; wants to add Chakra UI to a project, set up ChakraProvider, run CLI snippets, configure color mode, or fix provider wrapping; or asks about theming — defining brand colors, design tokens, semantic tokens, dark mode values, component recipes, slot recipes, typegen, or ejecting the default theme. Trigger on any Chakra UI building, setup, or theming or charts request, however casually phrased — "add my brand colors", "make a reusable card style", "build a bar chart", "show me a line chart", "make me a login form", "build a sidebar", "add Chakra to my app".

0xAlchemist-cs/personal-ui-system

Migrate Chakra UI projects from v2 to v3, covering package changes, codemods, provider setup, color mode, prop renaming, compound components, theming, recipes, and Next.js updates. Use this skill whenever a user is upgrading Chakra UI versions, encountering breaking changes after an upgrade, converting old v2 patterns (ColorModeScript, useColorModeValue, styleConfig, extendTheme, isDisabled, colorScheme, @chakra-ui/icons, framer-motion dependency), fixing compound component patterns, or asking about differences between Chakra UI v2 and v3 — even if they don't say "migrate" or "upgrade" explicitly.

0xAlchemist-cs/personal-ui-system

Review, convert, and improve UI code using Chakra UI v3. Use this skill whenever a user wants to review Chakra UI code for issues, convert plain HTML/CSS, Tailwind, CSS Modules, or styled-components to Chakra UI, clean up messy Chakra components, fix layout structure or token usage, or asks anything like "is this correct", "what's wrong with this", "review my component", "refactor this", "clean up", "convert", or "chakra-ify this" — even without the words "review" or "refactor". Trigger on any request to check, improve, or convert Chakra UI code, however casually phrased.

0xAlchemist-cs/personal-ui-system

Integrates Material UI with Next.js App and Pages routers using @mui/material-nextjs, Emotion cache providers, next/font, CSS layers with Tailwind/CSS Modules, Link component prop patterns, CSS theme variables SSR notes, and App Router useSearchParams + Suspense. Use when setting up or debugging MUI in a Next.js app.

関連スキル