Toolverse
All skills
Frontend

using-base-ui-with-material-ui

by siriwatknp

Always use this skill when integrating Base UI components `@base-ui-components/react` with Material UI `@mui/material`.

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
siriwatknp
Category
Frontend
Views
12
GitHub repo

About this skill

Always use this skill when integrating Base UI components @base-ui-components/react with Material UI @mui/material.

How to use

  1. Aktywuj skill w Claude'ie, wpisując zapytanie o integrację Base UI z Material UI. Skill automatycznie ogłosi swoją aktywację: "Using Base UI with Material UI skill".

  2. Opisz komponent, który chcesz zbudować (np. menu nawigacyjne, przycisk, formularz). Skill będzie miał dostęp do dokumentacji Base UI i będzie wiedzieć, jak prawidłowo strukturyzować komponenty.

  3. Skill użyje Base UI jako fundamentu — jego komponentów do logiki i dostępności — a następnie przekaże Material UI do właściwości render dla wyglądu. Na przykład dla NavigationMenu.Link użyje Material UI Link jako elementu renderującego.

  4. Przejrzyj wygenerowany kod. Będzie zawierać Base UI komponenty opakowane Material UI elementami ze stylami z sx prop, co zapewni spójny wygląd z Twoim designem Material UI.

  5. Skopiuj kod do swojego projektu. Upewnij się, że masz zainstalowane obie biblioteki: @base-ui-components/react i @mui/material.

  6. Dostosuj style i props do swoich potrzeb — Material UI komponenty będą obsługiwać wygląd, a Base UI będzie zarządzać zachowaniem i dostępnością.

Related skills

shadcn-ui-setup

by maneeshanif

Install and configure Shadcn/ui component library with Radix UI primitives, Aceternity UI effects, set up components, and manage the component registry. Use when adding Shadcn/ui to a Next.js project or installing specific UI components for Phase 2.

Frontend
23167

browser-use

by browser-use

Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, or extract information from web pages.

Frontend
23107

bubbletea

by hmans

Browse Bubbletea TUI framework documentation and examples. Use when working with Bubbletea components, models, commands, or building terminal user interfaces in Go.

Frontend
2158

angular

by sickn33

Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns. Use PROACTIVELY for Angular development, component architecture, state management, performance optimization, and migration to modern

Frontend
2656

screenshot-to-code

by OneWave-AI

Convert UI screenshots into working HTML/CSS/React/Vue code. Detects design patterns, components, and generates responsive layouts. Use this when users provide screenshots of websites, apps, or UI designs and want code implementation.

Frontend
94209

domain-name-brainstormer

by ComposioHQ

Generates creative domain name ideas for your project and checks availability across multiple TLDs (.com, .io, .dev, .ai, etc.). Saves hours of brainstorming and manual checking.

Frontend
21116