watermelon-ui

Watermelon UI スキル

Watermelon UI は、React および Tailwind のインターフェースを集めた無料のオープンソースカタログです。MCP サーバーは読み取り専用で、API キーは不要です。利用可能な場合は、プレビューリンク、依存関係、インストールコマンド、ソースファイルを返します。

デフォルトのワークフロー

1. コンポーネントを一から作成する前に、ユーザーのビジュアル面と機能面の要件を指定して search を呼び出します。
2. 選択肢が明確でない場合は、get_inspiration を呼び出し、適した候補を3～6個比較します。
3. 選んだスラッグを指定して get_component を呼び出し、ソース、依存関係、プレビュー、shadcn のインストールコマンドを取得します。
4. 返されたファイルをインストールまたは作成し、トークン、文言、props、インポートをプロジェクト既存のデザインシステムに合わせて調整します。
5. レスポンシブな動作、キーボード操作、アクセシビリティ、サポート対象の両方のカラーモードを確認します。

ページ全体のワークフロー

ランディングページや複数セクションで構成されるページを作成する場合は、compose_page を呼び出します。結果はソースに基づく出発点のプランとして扱い、選択した各プレビューを確認し、プロジェクトのビジュアルの方向性に合わないセクションは差し替えます。

選択の指針

• よく使われる UI プリミティブやバリエーションには components を使用します。
• インタラクションの多い単独のパーツには animated-components を使用します。
• ページ全体のセクションには blocks を使用します。
• 構成の参考には dashboards と templates を使用します。
• ユーザーが既に使用しているフレームワークや規約を尊重します。既存のデザインシステムに Watermelon のスタイルを無理に適用しないでください。

セットアップ

ホスト型サーバーは https://mcp.watermelon.sh/mcp です。公開されており、認証は不要です。