Vibe Design System

Name: Vibe Design System
Author: mondaycom

@mondaycom

リポジトリホームページ

Vibe Design System について

🎨 Vibe Design System - Official monday.com UI resources for application development in React.js

#react #javascript #typescript #ui #js #reactjs #mcp #icons #codemod #component-library #ui-components #tsx #vibe #hacktoberfest #design-system #ui-library #monday #llm #mcp-server #vibe-coding

基本情報

カテゴリ

メディアとデザイン

ランタイム

node

トランスポート

stdio

公開者

mondaycom

設定

標準の設定はありません

このサーバーの README には解析可能な MCP 設定ブロックが含まれていません。インストール手順はリポジトリをご確認ください。

リポジトリ

ツール

ツールは検出されませんでした

ツールは README から自動的に抽出されます。メンテナーは ## Tools という見出しの下に記載することで、このタブに反映できます。

概要

What is Vibe Design System?

Vibe Design System is a collection of official monday.com UI resources for application development in React.js. It includes an MCP (Model Context Protocol) server that provides intelligent assistance for discovering component APIs, getting usage examples, finding appropriate icons, and following best practices.

How to use Vibe Design System?

Install the core library via npm install @vibe/core or yarn add @vibe/core, then import the CSS tokens in your root file. Components like Button are imported from @vibe/core. For MCP integration, follow the installation instructions in the @vibe/mcp documentation to connect with your preferred AI development tools.

Key features of Vibe Design System

Core component library for React.js applications
MCP server for intelligent component assistance
Icons library (@vibe/icons)
Testing utilities for Playwright (@vibe/testkit)
Codemods and CLI tools (@vibe/codemod)
Styling foundations included in @vibe/core

Use cases of Vibe Design System

Building monday.com-compatible UIs with consistent design
Rapidly prototyping React applications using pre-built components
Discovering component APIs and usage examples via AI tools
Migrating between major versions with codemod tooling

FAQ from Vibe Design System

What does the Vibe Design System MCP server do?

It provides intelligent assistance for working with Vibe components, helping you discover component APIs, get usage examples, find appropriate icons, and follow best practices.

How do I install and use Vibe Design System?

Install @vibe/core via npm or yarn, import the tokens file, then import components directly from the library. For the MCP server, refer to the @vibe/mcp documentation.

What other packages are part of the ecosystem?

The ecosystem includes @vibe/core, @vibe/icons, @vibe/testkit, @vibe/codemod, @vibe/style, vibe-storybook-components, storybook-addon-playground, and @vibe/mcp.

What are the older versions and their support status?

Vibe 3 (@vibe/core v3) receives critical bug fixes but no new features. Vibe 2 (monday-ui-react-core) is no longer maintained. All users should migrate to Vibe 4.