nextjs-react-tailwind-assistant-mcp-server

Name: nextjs-react-tailwind-assistant-mcp-server
Author: CaullenOmdahl

design MCP Server

MCP server providing Next.js 15+ and Tailwind CSS documentation, Catalyst UI components, and template patterns

byCaullenOmdahl

VerifiedInstall Ready

designdesign

7 views4 stars2 forksv0.5.7

View on GitHub Homepage

Why This Matters

Discovered via smithery and last synced 4mo ago.

VerifiedInstall Ready

Source: smithery
Stars: 4
Last synced: 4mo ago
Install: Instructions detected

Install

1. Install the package

npx nextjs-react-tailwind-assistant-mcp-server

2. Add to claude_desktop_config.json

{
  "mcpServers": {
    "nextjs-react-tailwind-assistant-mcp-server": {
      "command": "npx",
      "args": [
        "nextjs-react-tailwind-assistant-mcp-server"
      ]
    }
  }
}

Config file location: ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) / %APPDATA%\Claude\claude_desktop_config.json (Windows)

Tools

Resources

Prompts

Standard I/O

Transport

Available Tools (8)

list_patterns

Browse design patterns

search_tailwind_docs

Search Tailwind CSS utilities and concepts

get_tailwind_full_docs

Complete Tailwind documentation (large)

get_pattern

Get detailed pattern implementations

get_nextjs_full_docs

Complete Next.js documentation (large)

list_catalyst_components

Browse available components

search_nextjs_docs

Search Next.js documentation

get_catalyst_component

Retrieve production-ready components

Works Well With - Skills

product-design

Design de produto nivel Apple — sistemas visuais, UX flows, acessibilidade, linguagem visual proprietaria, design tokens, prototipagem e handoff. Cobre Figma, design systems, tipografia, cor, espacamento, motion design e principios de design cognitivo.

52 starsHas guide

imagegen

Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites, mockups, UI mockups, product shots, or transparent-background cutouts. Use when the result should be an image asset rather than repo-native SVG, HTML/CSS, or canvas.

20 starsHas guide

demand-elegance

Challenges hacky fixes on non-trivial changes.

3 starsHas guide

refactoring-ui

Apply UI design principles from Refactoring UI by Adam Wathan & Steve Schoger. Covers visual hierarchy (size, weight, color, spacing), layout systems (spacing scales, grids), typography (type scales, line-height, alignment), color (HSL palettes, shade systems, accessible contrast), depth (shadow elevation, overlap), images (text on images, user content, icons), and finishing touches (accent borders, empty states, fewer borders). Trigger on "UI design", "visual hierarchy", "spacing system", "type scale", "color palette", "shadow", "layout", "design system", "component design", "card design", "form design", "button design", "refactoring UI", "design tokens", "dark mode", "responsive design".

2 stars

Works Well With - Agents

Baoyu Design

Run Claude Design locally as an Agent Skill — Cursor, Claude Code & more. Produce polished UI mockups, prototypes, decks & wireframes as self-contained HTML, without claude.ai/design. Best with Opus or Claude.

4202 stars

Ui Craft

Design engineering skill for AI Agents — build interfaces with craft-level quality

44 stars