mcpField
U
ui-component

ui-component

github.com/sickn33デザイン・UI48.7k92 回インストール今日更新
リポジトリ

ui-component について

ui-componentは、既存のStyleSeedプロジェクトでUIコンポーネントを生成するスキルです。スタイル、プロパティ、アクセシビリティ、ファイル配置に関する規約を開発者向けに示します。

主な機能

  1. 01StyleSeedのコンポーネント規約
  2. 02デザイントークンの使用
  3. 03型付きプロパティとclassNameの上書き
  4. 04アクセシビリティとキーボードフォーカス
  5. 05コンポーネントのエクスポートと配置

活用シーン

  1. 01再利用可能なUIプリミティブの作成
  2. 02スタイルバリアント付きコンポーネントの追加
  3. 03キーボード操作に対応するコントロールの構築

インストール

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

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill ui-component

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

詳細

UIコンポーネントジェネレーター

使用する場面

StyleSeed のデザイン規約に従って新しい UI コンポーネントを生成する場合に、このスキルを使用します。

使用しない場面

  • ページ全体のひな形を作成する場合 → /ss-page を使用します
  • 複数のコンポーネントを組み合わせたパターンを作成する場合 → /ss-pattern を使用します
  • 既存のコンポーネントを調整する場合 — ファイルを直接編集します
  • StyleSeed 以外のプロジェクトの場合（components/ui/ ディレクトリまたは Tailwind v4 がない場合）

新しいコンポーネントを生成します：$0 説明：$ARGUMENTS

手順

  1. まず、デザインシステムのシードを読み、コンテキストを確認します：

    • コンポーネント規約について CLAUDE.md を読みます
    • 利用可能なデザイントークンについて css/theme.css を読みます
    • 参考パターンとして components/ui/button.tsx を読みます

  2. 以下の規約を厳守します：

    • const ではなく、function 宣言を使用します
    • data-slot="component-name" 属性を追加します
    • すべての className のマージに @/components/ui/utils の cn() を使用します
    • プロパティの型付けには React.ComponentProps<> を使用します
    • 上書き用の className プロパティを必ずサポートします
    • バリアントがあるコンポーネントには CVA（class-variance-authority）を使用します
    • セマンティックなカラー トークン（bg-card、text-foreground）を使用し、インラインの 16 進数カラーは使用しません

  3. デザイントークンの使用方法：

    • 色：text-foreground、bg-card、text-brand、text-muted-foreground、border-border
    • 影：shadow-[var(--shadow-card)]、shadow-[var(--shadow-elevated)]
    • 角丸：rounded-md、rounded-lg、rounded-2xl
    • 余白：6px の倍数（p-1.5、p-3、p-6）
    • モーション：duration-[var(--duration-fast)]、ease-[var(--ease-default)]

  4. タイポグラフィのルール：

    • ディスプレイ（36～48px）：leading-none tracking-[-0.02em]
    • 見出し（18～24px）：leading-snug tracking-[-0.01em]
    • 本文（14～17px）：leading-normal（デフォルトの文字間隔）
    • キャプションの大文字表記（10～13px）：tracking-[0.05em]
    • w-* h-* の代わりに、省略形の size-* を使用します
    • ml-*/mr-* の代わりに、論理プロパティの ms-*/me-* を使用します

  5. アクセシビリティ要件：

    • タッチターゲットの最小サイズ：44x44px（min-h-11 min-w-11）
    • aria-* 属性の受け渡しをサポートします
    • キーボードフォーカスには focus-visible:ring-2 focus-visible:ring-ring を使用します
    • アニメーションでは prefers-reduced-motion を尊重します

  6. コンポーネントは名前付きエクスポートで公開します（デフォルトエクスポートではありません）

  7. 適切なディレクトリにファイルを配置します：

    • プリミティブ／再利用可能なコンポーネント → src/components/ui/
    • 組み合わせたパターン → src/components/patterns/

例

ユーザーのリクエスト：

StyleSeed のデザイン規約に従って新しい UI コンポーネントを生成してください。

制限事項

  • タスクが上流のソースおよびローカルプロジェクトのコンテキストに明確に合致する場合に限り、このスキルを使用します。
  • 変更を適用する前に、コマンド、生成コード、依存関係、認証情報、外部サービスの動作を確認します。
  • 例を、環境固有のテスト、セキュリティレビュー、破壊的または高額な操作に対するユーザーの承認の代わりとして扱わないでください。

実行範囲

このガイドは、既存の StyleSeed プロジェクトを対象としています。記載されているプロジェクトパス、コンポーネント、トークン、/ss-* コマンドは、この単一ファイルのエントリーポイントには含まれていません。編集を行う前に実際のプロジェクトルートを特定し、前提条件を確認してください。リソースが見つからない場合は、作り上げずにその旨を報告してください。ホストがサポートする呼び出し方法と既存のプロジェクト規約を使用します。レイアウトの数値はデザインシステム上の選択であり、普遍的なユーザビリティの保証ではありません。実際のインターフェースで、キーボード操作、レスポンシブ時のはみ出し、モーションの低減をテストしてください。

コメント

Markdown 対応