mcpField
M
magic-ui

magic-ui

github.com/magicuidesignデザイン・UI22.9k1.3k 回インストール2 週間前に更新
リポジトリ

magic-ui について

Magic UI を使って React/Next.js の画面を作る開発者やコーディングエージェント向けのスキルです。コンポーネントの選定、導入、統合、品質確認を案内します。

主な機能

  1. 01UI要件に合う Magic UI コンポーネントの選定
  2. 02shadcn registry による導入手順
  3. 03セクション実装パターンの案内
  4. 04アクセシビリティ、レスポンシブ性、性能の確認

活用シーン

  1. 01ヒーローセクションへのアニメーション追加
  2. 02独自アニメーションを Magic UI に置き換え
  3. 03@magicui の導入やインポートの問題解決

MCP 対応

README では AI IDE ワークフロー向けの任意の MCP 設定に触れていますが、具体的な MCP 機能は説明していません。

インストール

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

$npx skills add https://github.com/magicuidesign/magicui --skill magic-ui

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

同梱ファイルreferences/components.mdreferences/recipes.md

詳細

Magic UI

Magic UI コンポーネント、アニメーション付き UI セクション、または Magic UI レジストリを使用して静的なセクションをインタラクティブな UI に変換するタスクでは、このスキルを使用してください。

適用するタイミング

ユーザーから次の依頼があった場合に、このスキルを適用してください。

  • Magic UI コンポーネントを追加する（例：marquee、globe、blur-fade、shiny-button）
  • Magic UI のエフェクトを使ってセクションを作成する（ヒーロー、推薦コメント、CTA、機能グリッド）
  • カスタムのアニメーションコードを Magic UI コンポーネントに置き換える
  • @magicui/* のインストールまたはインポートに関する問題を解決する

基本的なワークフロー

  1. まず UI の仕上がりを定義します。
  • セクションの種類、トーン、動きの強さ、レスポンシブ時の動作を特定します。
  • 動きには意図を持たせ、1 つのビューポート内で動きの強いエフェクトを重ねすぎないようにします。
  1. プロジェクトの前提条件を確認します。
  • プロジェクトは React/Next.js と Tailwind CSS を使用している必要があります。
  • レジストリコンポーネントを追加する前に、shadcn を初期化しておく必要があります。
npx shadcn@latest init
  1. 選択したコンポーネントをインストールします。
npx shadcn@latest add @magicui/<component-slug>

例：

npx shadcn@latest add @magicui/magic-card
  1. 対象のセクションに統合します。
  • 生成されたパス（通常は @/components/ui/<component-slug>）からインポートします。
  • コンポーネントの API はそのまま維持し、内部を書き換えるよりも prop や className によるカスタマイズを優先します。
  • ドキュメントに追加の依存関係や CSS キーフレームが記載されている場合は、統合時に追加します。
  1. 完了前に品質を検証します。
  • アクセシビリティ：セマンティック HTML、キーボード操作、意味のあるラベルやテキストを確認します。
  • レスポンシブ対応：モバイルレイアウトとオーバーフロー時の動作を確認します。
  • パフォーマンス：不要なクライアント専用ラッパーや、負荷の高いアニメーションの重ねすぎを避けます。
  • 保守性：新しいコードをモジュール化し、既存プロジェクトの規約と一貫性を保ちます。

必要に応じて参照するドキュメント

  • コンポーネントの選択、インストール形式、依存関係について：
    • references/components.md を読みます
  • セクション単位の実装パターンについて：
    • references/recipes.md を読みます

コンポーネント選択の簡易ガイド

  • ソーシャルプルーフ／ロゴの帯：marquee、avatar-circles
  • ヒーローの視覚的なインパクト：globe、warp-background、animated-grid-pattern
  • テキストアニメーション：blur-fade、text-animate、word-rotate、sparkles-text
  • CTA の強調：shiny-button、shimmer-button、rainbow-button
  • アンビエント背景：grid-pattern、dot-pattern、particles、flickering-grid

まず中核となるコンポーネントを 1 つと、それを補完するエフェクトを 1 つ使い、必要な場合にのみ追加してください。

トラブルシューティング

  • components.json またはレジストリ初期化のエラー：
    • プロジェクトのルートで npx shadcn@latest init を実行します。
  • インポートパスの不一致（@/ エイリアスが未設定）：
    • プロジェクトで使用しているエイリアス形式、または相対インポートを使用します。
  • インストール後に見た目が合わない：
    • コンポーネントのドキュメントに記載された、必要なグローバル CSS／キーフレームを確認します。
  • パッケージが見つからないエラー：
    • コンポーネントの手動インストール手順に記載された依存関係をインストールします。

参考リンク

  • Magic UI ドキュメント：https://magicui.design/docs
  • コンポーネントのドキュメント：https://magicui.design/docs/components
  • インストール：https://magicui.design/docs/installation
  • MCP のセットアップ（任意、AI IDE ワークフロー向け）：https://magicui.design/docs/mcp

コメント

Markdown 対応