mcpField
W
watermelon-ui

watermelon-ui

github.com/watermeloncorpDesign & UI18452 installsUpdated 1d ago
Repository

About watermelon-ui

Watermelon UI is a skill for finding and using React and Tailwind interface components from a catalog. Its read-only, unauthenticated MCP server provides source files when available, previews, dependencies, and installation instructions.

Key features

  1. 01Searchable React and Tailwind catalog
  2. 02Component and page composition lookup
  3. 03Previews and source retrieval
  4. 04Dependencies and install commands
  5. 05Read-only server without API key

Use cases

  1. 01Finding interface components before coding
  2. 02Comparing options for a page design
  3. 03Building multi-section landing pages

MCP support

The hosted MCP server at https://mcp.watermelon.sh/mcp exposes search, inspiration, component retrieval, and page composition. It is read-only and requires no authentication.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/watermeloncorp/watermelon-platform --skill watermelon-ui

After installing, type/watermelon-uiin Claude Code to confirm it loaded.

Details

From the project README

Watermelon UI Skill

Watermelon UI is a free, open-source catalog of React and Tailwind interfaces. Its MCP server is read-only, needs no API key, and returns preview links, dependencies, installation commands, and source files where available.

Default workflow

  1. Call search with the user's visual and functional requirements before writing a component from scratch.
  2. If the choice is not obvious, call get_inspiration and compare 3-6 suitable options.
  3. Call get_component for the chosen slug to retrieve its source, dependencies, preview, and shadcn install command.
  4. Install or write the returned files, then adapt tokens, copy, props, and imports to the project's existing design system.
  5. Verify responsive behavior, keyboard interaction, accessibility, and both supported color modes.

Full-page workflow

Call compose_page for landing pages and other multi-section experiences. Treat its result as a source-backed starting plan, inspect each selected preview, and replace any section that does not fit the project's visual direction.

Selection guidance

  • Use components for familiar UI primitives and variants.
  • Use animated-components for interaction-heavy standalone pieces.
  • Use blocks for complete page sections.
  • Use dashboards and templates for composition references.
  • Preserve the user's existing framework and conventions. Do not force Watermelon styling over an established design system.

Setup

The hosted server is https://mcp.watermelon.sh/mcp. It is public and requires no authentication.

Comments

Markdown supported