S
SkillNav

Next.js Tailwind Assistant

编码与调试

by CaullenOmdahl

面向构建现代 Next.js 应用的 AI 助手，提供 React 与 Tailwind CSS 文档、可直接用于生产的组件，以及成熟设计模式。

3GitHub

什么是 Next.js Tailwind Assistant？

面向构建现代 Next.js 应用的 AI 助手，提供 React 与 Tailwind CSS 文档、可直接用于生产的组件，以及成熟设计模式。

核心功能 (16 个工具)

get_nextjs_full_docs

Get the complete Next.js 15+ documentation (~2.5MB, ~320,000 tokens). WARNING: This returns ~320,000 tokens. Only use with LLMs that support large context windows (100k+ tokens). For smaller contexts, use 'search_nextjs_docs' instead. Covers: App Router, Server Components, Client Components, routing, layouts, pages, data fetching, Server Actions, middleware, deployment, and optimization.

get_tailwind_full_docs

Get the complete Tailwind CSS documentation (~2.1MB, ~730,000 tokens). WARNING: This returns ~730,000 tokens. Only use with LLMs that support very large context windows (200k+ tokens). For smaller contexts, use 'search_tailwind_docs' instead. Covers all utility classes, concepts, responsive design, dark mode, customization, and plugins.

search_nextjs_docs

Search within the Next.js documentation for specific topics or keywords. Returns relevant excerpts matching the query. Recommended for most use cases as it provides targeted results without the full 320k token context.

search_tailwind_docs

Search within the Tailwind CSS documentation for specific utility classes or concepts. Returns relevant excerpts matching the query. Recommended for most use cases as it provides targeted results without the full 730k token context.

get_catalyst_component

Retrieve the TypeScript source code for a specific Catalyst UI component. Components include forms (button, checkbox, input, etc.), navigation (navbar, sidebar, dropdown), layout (divider, heading), feedback (alert, badge, dialog), and data display (avatar, table, pagination). All components are production-ready TypeScript React components with Tailwind styling and Headless UI integration.

list_catalyst_components

List all 28 available Catalyst UI components organized by category. Categories include: forms (button, checkbox, fieldset, input, radio, select, switch, textarea), navigation (navbar, sidebar, dropdown, link), layout (divider, heading, stacked-layout, auth-layout), feedback (alert, badge, dialog), data-display (avatar, description-list, listbox, pagination, table, text), and advanced (combobox).

get_pattern

Retrieve documentation for a specific abstracted pattern. Patterns are organized into: layouts (app-header, sidebar-layout, auth-layout, overlay-navigation), pages (hero-section, pricing-page, blog-layout), and features (animations, dark-mode). Patterns include implementation details, code examples, accessibility considerations, and dependencies.

list_patterns

List all available abstracted template patterns organized by category (layouts, pages, features). Patterns are abstracted from professional Next.js templates and include common architectural approaches, not template-specific implementations. Each pattern includes multiple variants, dependencies, accessibility guidelines, and dark mode support.

get_color_design_guidance

Retrieve comprehensive color design patterns documentation (~20KB). Covers color psychology, premium vs cheap distinctions, harmony systems, industry-specific guidance, and 2024-2025 modern trends. **RECOMMENDED WORKFLOW**: Due to the comprehensive nature of this content, consider using a subagent to execute the color selection workflow with full context. The subagent can analyze the guidance and make informed color decisions for your specific project.

analyze_existing_site

Analyze an existing website or Google Business listing to extract useful information and assets for rebuilding. Extracts business info, contact details, images, content structure, site type, and design elements. **RECOMMENDED WORKFLOW**: Due to the complexity of site analysis and data extraction, use a subagent to perform the analysis. The subagent can use WebFetch to scrape the site, analyze structure, extract assets, and return organized data for the new build.

list_starter_kits

List all available template starter kits with their features, use cases, and complexity levels. Each template includes architectural decision guidance that teaches you how to choose the right libraries and patterns for your needs, rather than prescribing specific solutions. Includes: Documentation Site, SaaS Marketing, Portfolio & Blog, Agency/Studio, Content Platform, Event/Conference, App Marketing, Podcast/Media, CMS-Integrated, Pitch Deck, Admin Dashboard, and E-commerce templates.

get_starter_kit

Get detailed information about a specific template starter kit including features, architectural decisions with tradeoffs, alternative approaches, and implementation guidance. Each template teaches decision-making frameworks rather than prescribing specific libraries. Use list_starter_kits to see available template IDs.

recommend_template

Get template recommendations based on your project requirements. Provide criteria like purpose, color preferences, animation level, required features, and complexity. Returns ranked template suggestions with explanations.

answer_questionnaire

Submit answers to the template selection questionnaire and receive personalized recommendations. Provide answers as a key-value object where keys are question IDs (purpose, colorPreference, animations, features, complexity) and values are your choices.

get_library_docs

Get comprehensive documentation for commonly used libraries in Next.js projects. Available: framer-motion, mdx, headless-ui, next-themes, clsx, tailwind-plugins. Includes installation, usage examples, patterns, and best practices.

list_library_docs

List all available library documentation files. Includes commonly used libraries like Framer Motion, MDX, Headless UI, next-themes, clsx, and Tailwind plugins. Each provides installation, usage examples, and best practices.

README

Next.js + React + Tailwind Assistant MCP Server

Your comprehensive AI companion for building modern Next.js applications with React and Tailwind CSS.

Features

📚 Complete Documentation

  • Next.js 15+: App Router, Server Components, Server Actions, routing, data fetching
  • Tailwind CSS 3+: All utility classes, responsive design, dark mode, customization
  • Smart Search: Targeted results without overwhelming context

🎨 27 Catalyst UI Components

  • Production-ready TypeScript React components
  • Built with Tailwind CSS and Headless UI
  • Fully accessible, responsive, and customizable
  • Categories: forms, navigation, layout, feedback, data display

✨ 13 Design Patterns

Abstracted from 11 professional Next.js templates:

Visual Effects: Gradients, glows, animations, bento grids, decorative SVGs Component Library: Buttons, cards, badges, inputs, avatars, alerts, tooltips Color Systems: 8 palette strategies (Professional, SaaS, Bold, Minimal, Semantic, Dark Mode) Typography: Font systems, type scales, responsive patterns Layouts: App headers, auth pages, sidebars, overlay navigation Pages: Hero sections, pricing tables, blog layouts

All patterns include accessibility, performance, and dark mode support.

Installation

Via Smithery

bash
npx @smithery/cli install @username/nextjs-react-tailwind-assistant --client claude

Manual Installation

  1. Clone the repository:
bash
git clone https://github.com/CaullenOmdahl/Nextjs-React-Tailwind-Assistant.git
cd Nextjs-React-Tailwind-Assistant
  1. Install dependencies:
bash
npm install
  1. Build the server:
bash
npm run build

This will:

  • Build the MCP server using Smithery CLI → .smithery/index.cjs (1.67 MB)
  • Copy the content directory → .smithery/content/ (5.3 MB)

Development

bash
npm run dev          # Start development server with hot reload
npm run inspector    # Launch MCP inspector for testing
npm run build        # Build production bundle
npm run watch        # TypeScript watch mode

Available Tools

  • search_nextjs_docs - Search Next.js documentation
  • search_tailwind_docs - Search Tailwind CSS utilities and concepts
  • get_nextjs_full_docs - Complete Next.js documentation (large)
  • get_tailwind_full_docs - Complete Tailwind documentation (large)
  • get_catalyst_component - Retrieve production-ready components
  • list_catalyst_components - Browse available components
  • list_patterns - Browse design patterns
  • get_pattern - Get detailed pattern implementations

Content Structure

code
content/
├── components/
│   └── catalyst/          # 27 TypeScript React components
├── docs/
│   ├── nextjs/           # Complete Next.js 15+ docs (2.9 MB)
│   └── tailwind/         # Complete Tailwind CSS docs (2.1 MB)
├── patterns/
│   ├── features/         # 6 feature patterns
│   ├── layouts/          # 4 layout patterns
│   └── pages/            # 3 page patterns
└── content-summary.json  # Catalog of all content

Deployment to Smithery

Important: Content Directory Deployment

The server requires the content/ directory (5.3 MB) to be available at runtime. Smithery deploys from your GitHub repository and includes files listed in package.json "files" array.

Deployment Process:

  1. Ensure content is committed to git:
bash
git add content/
git commit -m "Add documentation and pattern content"
  1. Push to GitHub:
bash
git push origin main
  1. Deploy to Smithery:
  • Smithery clones your repository
  • Runs npm install
  • Runs npm run build (which copies content to .smithery/content/)
  • Deploys the server

Note: The server uses process.cwd() + '/content' to locate files. When deployed to Smithery, the content directory from your repository should be available in the working directory.

Troubleshooting Deployment

If you get a 500 error on Smithery:

  1. Verify content is in repository:
bash
git ls-files content/ | wc -l  # Should show files
du -sh content/                # Should show ~5.3M
  1. Check package.json "files" array includes "content":
json
"files": ["dist", "content", "icon.png", "icon.svg"]
  1. Ensure build copies content:
bash
npm run build
ls -la .smithery/content/  # Should show content directory
  1. Test locally:
bash
cd .smithery && node index.cjs
# Should start without errors

Architecture

Module System

  • ES Modules only ("type": "module" in package.json)
  • All imports use .js extensions for TypeScript files
  • No CommonJS

Security Features

  • Input validation with regex patterns (alphanumeric + -_. only)
  • Path sanitization to prevent ../ traversal
  • Base path boundary checking
  • File size limits (3MB for docs, 1MB for components)
  • Safe error messages (no internal details exposed)

Caching

  • LRU cache with 5-minute timeout
  • Cache keys use full resolved file paths
  • Improves performance for repeated documentation queries

License

MIT

Credits

  • Design patterns abstracted from professional Next.js templates
  • Catalyst components from Tailwind Labs
  • Documentation from official Next.js and Tailwind CSS sources

常见问题

Next.js Tailwind Assistant 是什么？

面向构建现代 Next.js 应用的 AI 助手，提供 React 与 Tailwind CSS 文档、可直接用于生产的组件，以及成熟设计模式。

Next.js Tailwind Assistant 提供哪些工具？

提供 16 个工具，包括 get_nextjs_full_docs、get_tailwind_full_docs、search_nextjs_docs 等。

相关 Skills

前端设计

by anthropics

Universal
热门

面向组件、页面、海报和 Web 应用开发，按鲜明视觉方向生成可直接落地的前端代码与高质感 UI，适合做 landing page、Dashboard 或美化现有界面，避开千篇一律的 AI 审美。

✎ 想把页面做得既能上线又有设计感，就用前端设计：组件到整站都能产出，难得的是能避开千篇一律的 AI 味。

编码与调试
未扫描109.6k

网页构建器

by anthropics

Universal
热门

面向复杂 claude.ai HTML artifact 开发，快速初始化 React + Tailwind CSS + shadcn/ui 项目并打包为单文件 HTML，适合需要状态管理、路由或多组件交互的页面。

✎ 在 claude.ai 里做复杂网页 Artifact 很省心，多组件、状态和路由都能顺手搭起来，React、Tailwind 与 shadcn/ui 组合效率高、成品也更精致。

编码与调试
未扫描109.6k

网页应用测试

by anthropics

Universal
热门

用 Playwright 为本地 Web 应用编写自动化测试，支持启动开发服务器、校验前端交互、排查 UI 异常、抓取截图与浏览器日志，适合调试动态页面和回归验证。

✎ 借助 Playwright 一站式验证本地 Web 应用前端功能，调 UI 时还能同步查看日志和截图，定位问题更快。

编码与调试
未扫描109.6k

相关 MCP Server

GitHub

编辑精选

by GitHub

热门

GitHub 是 MCP 官方参考服务器，让 Claude 直接读写你的代码仓库和 Issues。

✎ 这个参考服务器解决了开发者想让 AI 安全访问 GitHub 数据的问题，适合需要自动化代码审查或 Issue 管理的团队。但注意它只是参考实现，生产环境得自己加固安全。

编码与调试
82.9k

Context7 文档查询

编辑精选

by Context7

热门

Context7 是实时拉取最新文档和代码示例的智能助手，让你告别过时资料。

✎ 它能解决开发者查找文档时信息滞后的问题，特别适合快速上手新库或跟进更新。不过，依赖外部源可能导致偶尔的数据延迟，建议结合官方文档使用。

编码与调试
51.5k

io.github.tldraw/tldraw

编辑精选

by tldraw

热门

tldraw 是让 AI 助手直接在无限画布上绘图和协作的 MCP 服务器。

✎ 这解决了 AI 只能输出文本、无法视觉化协作的痛点——想象让 Claude 帮你画流程图或白板讨论。最适合需要快速原型设计或头脑风暴的开发者。不过，目前它只是个基础连接器，你得自己搭建画布应用才能发挥全部潜力。

编码与调试
46.2k

评论