広告掲載
MCP.so
ログイン
U

Ui/ux Tools React + Material Ui MCP Server

@MarcusViniciusBarcelos

リポジトリ

基本情報

カテゴリ

その他

トランスポート

stdio

作者

MarcusViniciusBarcelos

投稿者

Marcus Barcelos

Ui/ux Tools React + Material Ui MCP Server について

概要はまだありません

Ui/ux Tools React + Material Ui MCP Server の設定

以下の設定を使って、このサーバーを MCP 対応クライアントに追加してください。

{
  "mcpServers": {
    "uiux-tools": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "MarcusViniciusBarcelos/uiux-tools-react-mui"
      ]
    }
  }
}

Ui/ux Tools React + Material Ui MCP Server のツール

ツール一覧はまだありません

この掲載には表示できるツール一覧がまだありません。サーバーにツールがないという意味ではありません。対応機能はプロジェクトのドキュメントをご確認ください。

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

概要

What is Ui/ux Tools React + Material Ui?

A curated set of UI/UX best practices, code snippets, and design patterns for building React applications with Material-UI. It covers mobile-first responsiveness, Material-UI conventions, Apple-inspired interactions, Nielsen’s heuristics, and visual feedback principles. Designed for front-end developers who want ready-to-use, production‑quality patterns.

How to use Ui/ux Tools React + Material Ui?

Reference the provided instructions and apply the code examples directly to your React components. No installation or configuration is required; the tool is purely informational with actionable snippets.

Key features of Ui/ux Tools React + Material Ui

  • Mobile‑first responsive design with useMediaQuery and adaptive dimensions.
  • Material‑UI best practices: theme.spacing, alpha(), sx prop, native components.
  • Apple‑inspired scrollbar, animations, and minimalistic styling.
  • Nielsen’s heuristics: user control, error prevention, system‑world matching.
  • Constant visual feedback: loading states, badges, tooltips, snackbars.
  • Touch targets minimum 44×44px and spaced layouts.

Use cases of Ui/ux Tools React + Material Ui

  • Building responsive UIs that adapt to mobile and desktop breakpoints.
  • Implementing consistent Material‑UI patterns across a product.
  • Adding smooth transitions and Apple‑like polish to interfaces.
  • Applying usability heuristics to prevent errors and empower users.
  • Creating clear feedback loops (loading, success, error) for every action.

よくある質問

1

What breakpoints does it cover?

Material‑UI’s default breakpoints: xs (0px), sm (600px), md (900px), lg (1200px), xl (1536px).

2

How do I ensure touch targets are accessible?

Set `minWidth: 44` and `minHeight: 44` on `IconButton` or similar interactive elements.

3

Does it include form validation?

Yes – real‑time validation with `TextField` `error`/`helperText` props and placeholder examples.

4

What runtime dependencies are required?

Only React and Material‑UI (`@mui/material`). No additional libraries are needed for the patterns.

5

Are there any limitations?

The tool provides only guidance and code snippets; it does not enforce or automate the patterns. No transport or authentication is involved.

コメント

「その他」の他のコンテンツ

Sequential Thinking

modelcontextprotocol

Model Context Protocol Servers

88.2K
N

Next Generation Movers: free moving quotes (remote MCP)

Next Generation Movers

Free moving quotes for AI agents from Next Generation Movers, a licensed interstate mover (USDOT 3764697). US long-distance nationwide and local DC/MD/VA. Indicative ballpark price and booking options; optional $0.01 x40

Lemon.io

lemon-io

Request dedicated senior developers to work on your project, write job descriptions, and prep technical interviews — all without leaving your Claude chat. Just describe what you need, and Lemon.io MCP does the rest. 1–3

Handl

Handl speaks the Model Context Protocol. Your whole billing operation — projects, invoices, clients, reports, approvals — as tools any AI assistant can call, inside your autonomy rules.

Hindsight

vectorize-io

Hindsight: Agent Memory That Learns

50.4K
広告掲載