mcpField
U
ui-design

ui-design

github.com/starchild-ai-agentデザイン・UI301.8k 回インストール1 週間前に更新
リポジトリ

ui-design について

ui-design は、静的ページから React ベースのプロジェクトまで、ユーザー向け Web UI を構築するスキルです。アクセシビリティ、レスポンシブ対応、操作性の実装指針と、視覚的な方向性を定める taste-skill を組み合わせます。

主な機能

  1. 01手作業とコンポーネントライブラリの選択
  2. 02taste-skill によるスタイル方針の策定
  3. 03インタラクティブページのモーション設計
  4. 04アクセシビリティとレスポンシブ対応の確認
  5. 05チャートとダッシュボードの資料

活用シーン

  1. 01静的なランディングページやポートフォリオの作成
  2. 02コンポーネントライブラリを使った React ダッシュボードの構築
  3. 03実装前のインタラクションモーション設計
  4. 04UI のアクセシビリティとレスポンシブ動作の確認

インストール

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

$npx skills add https://github.com/starchild-ai-agent/official-skills --skill ui-design

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

同梱ファイル

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

references/
aesthetics.md
animations.md
charts.md
component-libraries.md
components.md
dashboards.md
design-process.md

詳細

UI デザインスキル

このスキルは、ビジュアル作業のための単一のエントリーポイントです。

ユーザー向けのあらゆる HTML/CSS/JS 出力に使用してください。ランディングページ、ダッシュボード、製品 UI、社内ツール、ポートフォリオページなどが対象です。

ステップ 1 — ビルドトラックを選択する

コーディングの前に意図的に選択してください：

  • トラック A（ハンドビルド）: 静的プレビュー、バニラ HTML/CSS/JS、簡単なカスタムページ
  • トラック B（コンポーネントライブラリ）: shadcn/ui、HeroUI、または coss ui を使用する React/Vite/Next プロジェクト

トラックの決定とコンポーネントライブラリの戦略は、常に ui-design が所有します。

ステップ 2 — Taste Overlay Contract（必須）

ui-design ワークフロー内で、taste-skill を正確に次の 3 つのスタイルブロックに対して呼び出します：

  1. Brief Inference
  2. Design Dials（レイアウトのバリエーション / モーションの強度 / 視覚的密度）
  3. Anti-slop ハードルール
境界
  • ui-design はエンジニアリング品質とデリバリーの所有権を保持します。
  • taste-skill はスタイルの方向性とアンチテンプレートなテイスト制約を提供します。

これにより、ui-design のエンジニアリングリファレンス（コンポーネントライブラリ、a11y、プレビュー、データダッシュボード実装）との重複を避けます。

ステップ 3 — ランタイム順序（毎回これを使用してください）

  1. ui-design を使用してトラック A/B を選択します。
  2. UI コードを書く前に taste Brief Inference を実行します。
  3. taste Design Dials を適用してスタイルの方向性を設定します。
  4. インタラクティブなページでは、まずモーションプランを定義します（何がアニメーションするか、なぜか、頻度、 duration、easing、reduced-motion のパス）。
  5. ui-design のエンジニアリングルール（a11y/テーマ/レスポンシブ/コンポーネント戦略/パフォーマンス）に従って実装します。
  6. デリバリー前に、最終的なスタイルゲートとして taste Anti-slop チェックを実行します。

一文でまとめると：

  • taste がスタイルの性格を決定する
  • ui-design が堅牢な実装を保証する

ハードルール：ページにインタラクションがある場合、モーションデザインは必須です（少なくとも触覚フィードバック + 状態遷移フィードバック）。静的に見えるインタラクション状態は、不完全な UI として扱われます。

ステップ 4 — 競合の仲裁

ルールが重複する場合：

  • スタイルの競合 → taste-skill が優先
  • エンジニアリングの安全性/正確性の競合 → ui-design が優先

エンジニアリングの安全性には、アクセシビリティ、レスポンシブの安定性、インタラクションの信頼性、ランタイムの正確性、パフォーマンス制約が含まれます。

ステップ 5 — taste-skill を読む/ダウンロードする場所（ローカルミラーなし）

ローカルミラーやバージョンスタンプファイルを維持しないでください。

常に GitHub から直接 taste ルールを読み取り/更新してください：

  • リポジトリ: https://github.com/Leonxlnx/taste-skill
  • 参照すべきメインスキル: https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md
  • Raw ダウンロード URL: https://raw.githubusercontent.com/Leonxlnx/taste-skill/main/skills/taste-skill/SKILL.md
  • スキルパッケージ全体のディレクトリ: https://github.com/Leonxlnx/taste-skill/tree/main/skills

taste-skill が更新されたら、GitHub ソースを直接再確認し、必要な変更を ui-design オーバーレイコントラクトに適用してください。

エンジニアリングリファレンス

ファイル目的
references/design-process.mdエンジニアリング品質ゲート（a11y/テーマ/レスポンシブ/インタラクション/ランタイムのチェックリスト）
references/component-libraries.mdshadcn/ui · HeroUI · coss ui の選択 + ルックアップワークフロー
references/animations.mdモーション実装標準、インタラクティブモーションの要件（emil-design-eng の意思決定フレームワークと統合）、および GSAP の使用上の注意
references/charts.mdChart.js/ECharts の実装パターン
references/dashboards.mdデータソーシング、リアルタイム更新、ダッシュボード構造、パフォーマンス
taste-skill GitHub ソースGitHub から直接スタイルルールを読み取ります: https://github.com/Leonxlnx/taste-skill/tree/main/skills

コメント

Markdown 対応