Ui/ux Tools React + Material Ui
@MarcusViniciusBarcelos
Ui/ux Tools React + Material Ui について
概要はまだありません
基本情報
設定
以下の設定を使って、このサーバーを MCP 対応クライアントに追加してください。
{
"mcpServers": {
"uiux-tools": {
"command": "docker",
"args": [
"run",
"-i",
"MarcusViniciusBarcelos/uiux-tools-react-mui"
]
}
}
}ツール
ツールは検出されませんでした
ツールは 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
useMediaQueryand adaptive dimensions. - Material‑UI best practices:
theme.spacing,alpha(),sxprop, 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.
FAQ from Ui/ux Tools React + Material Ui
What breakpoints does it cover?
Material‑UI’s default breakpoints: xs (0px), sm (600px), md (900px), lg (1200px), xl (1536px).
How do I ensure touch targets are accessible?
Set minWidth: 44 and minHeight: 44 on IconButton or similar interactive elements.
Does it include form validation?
Yes – real‑time validation with TextField error/helperText props and placeholder examples.
What runtime dependencies are required?
Only React and Material‑UI (@mui/material). No additional libraries are needed for the patterns.
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.
「その他」の他のコンテンツ
Inbox Zero AI
elie222The world's best AI personal assistant for email. Open source app to help you reach inbox zero fast.
MCP Toolbox for Databases
googleapisMCP Toolbox for Databases is an open source MCP server for databases.
FastMCP v2 🚀
jlowin🚀 The fast, Pythonic way to build MCP servers and clients.
MCP Go 🚀
mark3labsA Go implementation of the Model Context Protocol (MCP), enabling seamless integration between LLM applications and external data sources and tools.

Sequential Thinking
modelcontextprotocolModel Context Protocol Servers
コメント