Components

ui-design-system は、Design Systems 向けの Claude skill です。design tokens、color scales、typography、spacing、responsive rules、component documentation、developer handoff assets の生成を支援し、JSON、CSS、SCSS、summary 出力に対応した Python token generator と各種リファレンスも備えています。

figma-code-connect-components は、Figma Code Connect を使って Figma のデザインコンポーネントを対応するコードコンポーネントに対応付けるためのスキルです。デザイン実装の整合、variant と prop の対応、そしてマッピング作成前に適切なローカルコンポーネントを見つける用途に向いています。キャンバス上の文章作成やページ全体の生成ではなく、connect、map、link-to-code のワークフローに最適です。

wpds スキルを使うと、WordPress Design System（WPDS）に基づいて WordPress UI の作成やレビューを進められます。WPDS MCP server を通じてコンポーネント、トークン、パターン、パッケージの適合性を確認できるため、wpds ガイドを勘ではなく正規ドキュメントに沿って保てます。Gutenberg、WooCommerce、WordPress.com、Jetpack などの関連インターフェースにまたがる Design Systems 業務で特に有用です。

figma-use は、use_figma を呼び出す前に毎回インストールしておくことで、Figma のファイルコンテキスト内で JavaScript を安全に実行できるようにするスキルです。ノードの作成・編集、変数やスタイルの接続、コンポーネントやバリアントの構築、ファイル構造のプログラム的な निरी査といった、デザイン実装作業を支援します。リポジトリには、よくある Figma 自動化エラーを減らすための使い方、注意点、パターンがまとめられています。

hig-components-search は、検索フィールド、ページコントロール、パスコントロールに関する UI デザイン判断を支える Apple HIG スキルです。macOS や iPadOS のインターフェースで、検索の挙動、スコープ、ページネーション、階層ナビゲーションについて明確な指針が必要なときに使います。特に、検索 UX、検索候補、構造化ナビゲーションの検討に役立ちます。

hig-components-menus は、メニューとボタン主導のコマンドUIに関する Apple HIG ガイダンスを提供する skill です。メニュー、コンテキストメニュー、ツールバー、メニューバー、および関連コントロールについて、コマンドの配置、グルーピング、挙動を Apple の指針に沿って判断したいときの UI デザイン判断に使えます。

hig-components-layout は、サイドバー、分割ビュー、タブバー、リスト、テーブル、アウトラインビュー、カラム、パネル、ウィンドウ、スクロールビュー、ボックス、オーナメントの選択に役立つ、Apple HIG のナビゲーション／レイアウト用スキルです。UI 設計やアプリ構造の判断で、一般的なレスポンシブレイアウトの助言ではなく、プラットフォームに即した明確な指針が必要なときに使います。

hig-components-dialogs は、アラート、アクションシート、ポップオーバー、シート、数字入力ビューを選ぶための Apple HIG のプレゼンテーションコンポーネント向けスキルです。確認フロー、破壊的な操作、非モーダルなコンテンツ、そして iOS、iPadOS、macOS、watchOS、visionOS にまたがる UI 設計判断で、Apple の指針に沿った明確なダイアログ選定が必要なときに、この hig-components-dialogs ガイドを使ってください。

component-refactoringスキルは、アナライザーの指標をもとに、Difyフロントエンド内の複雑なReactコンポーネントをリファクタリングするのを支援します。`pnpm analyze-component --json` で複雑度が50を超える、行数が300を超える、またはコード分割、hook抽出、あるいは一般的な書き換えではなく、より安全なcomponent-refactoringの手順が必要な場合に使います。

figma-generate-library は、コードベースから Figma のデザインシステムを構築・更新するためのスキルです。トークン、コンポーネントライブラリ、ドキュメント、ライト/ダークテーマ対応まで、順序立てたワークフローで進められます。単発のモックアップではなく、Design Systems 向けの実践的なガイドが必要なときに使ってください。Plugin API の呼び出しには figma-use を補完的に併用できます。

figma-generate-design は、公開済みのデザインシステムを使って、コード化されたページ、モーダル、ドロワー、サイドバー、パネルなどの複数セクション画面を Figma へ落とし込むのに役立ちます。Code Connect や関連ソースからコンポーネント、変数、スタイル、ライブラリアセットを見つけ、画面全体を一から描き直すのではなく、Design Implementation 向けにセクションごとに組み立てます。コードやトークンとの忠実性を重視して Figma 画面を作成したいときは、figma-generate-design ガイドを使ってください。

figma-use は、Figma Plugin API のワークフローで安全に `use_figma` を呼び出すために必須のスキルです。Figmaファイルを JavaScript で作成・更新・確認・構成する前に、この figma-use スキルをインストールして読み込んでください。特に、Design Implementation、コンポーネント作業、変数、オートレイアウト、プログラムによるファイル読み取りで役立ちます。

figma-generate-library は、コードベースを tokens、variables、components、theming、documentation を備えた Figma の design system library に変換するのに役立ちます。Design Systems の作業で、install、setup、discovery、creation、validation、code との reconciliation まで含む段階的なワークフローが必要なときに、この figma-generate-library スキルを使います。

figma-generate-design は、実際の画面・ページ・複数セクションのレイアウトを、汎用的な図形ではなく公開済みのデザインシステムを再利用しながら Figma に落とし込むのに役立ちます。コードやプロダクトページとの高い整合性、編集しやすい構造、トークンベースの一貫性を重視する場合に最適です。ラフなモックアップではなく、フルページの UI デザイン更新に使ってください。