mui

Overview of mui skill

The mui skill is a focused guide for working with Material UI v7 in React projects, especially when you need correct sx styling, theme-aware components, responsive layouts, and up-to-date v7 patterns instead of generic React UI advice. It is best for frontend developers, AI-assisted coding users, and teams already using @mui/material who want faster implementation with fewer version-specific mistakes.

What the mui skill helps you do

Use this mui skill when your real job is not “learn MUI from scratch,” but to ship a component, page, layout, theme, or migration safely. It is strongest for:

• building MUI components with idiomatic imports
• styling with the sx prop instead of ad hoc CSS
• using theme tokens for spacing, palette, and typography
• applying responsive breakpoints cleanly
• handling MUI v7 changes that break older examples

Who should install this skill

This skill is a good fit if you:

• already use React and want better MUI output from an AI agent
• need a reusable mui guide for repeated frontend work
• are migrating from MUI v6 and want fewer outdated patterns
• want prompts that produce theme-consistent UI code

If you are not using MUI at all, this will be too specific.

Why this skill is more useful than a generic prompt

A plain prompt like “make a Material UI form” often returns mixed-version code, weak theme usage, or styling that ignores MUI conventions. The mui skill adds practical guardrails around:

• MUI v7 component patterns
• sx as the primary styling path
• package import choices
• responsive prop usage
• theme-first design decisions

That usually means less cleanup after the first generated draft.

The most important differentiators

The main value of this mui skill is not breadth. It is that it narrows the agent onto the patterns MUI users actually care about:

• v7-aware guidance, including breaking changes from v6
• examples centered on Box, Typography, Paper, Button, Grid2, Stack, and common app UI building blocks
• concrete styling references in resources/styling-guide.md
• practical theme setup patterns in resources/theme-customization.md

Key version caveats surfaced by the skill

This skill explicitly points to MUI v7 realities that often trip up AI-generated code:

• deep imports are no longer the safe default; prefer package exports
• onBackdropClick on Modal is removed; use onClose
• the slots and slotProps pattern is now standardized
• CSS layers support matters for setups such as Tailwind v4 with enableCssLayer

Those details alone can justify using the skill instead of relying on older blog examples.

How to Use mui skill

How to install the mui skill

Install the skill into your agent toolkit context with:

npx skills add softaworks/agent-toolkit --skill mui

If your environment uses a different skills loader, keep the repo and skill slug the same: softaworks/agent-toolkit, skill mui.

What to read first before using mui

Start with these files in order:

1. skills/mui/SKILL.md
2. skills/mui/resources/styling-guide.md
3. skills/mui/resources/component-library.md
4. skills/mui/resources/theme-customization.md
5. skills/mui/skill-rules-fragment.json

That reading path matters because the resources contain the concrete implementation patterns, while the rules file shows what kinds of prompts and files are meant to trigger the mui skill.

What input the mui skill needs

The mui skill works best when you provide enough frontend context for the agent to choose the right component, layout, and theme pattern. Useful inputs include:

• the component or page you want built
• your MUI version, especially if migrating
• whether styling should use sx, theme overrides, or styled
• responsive requirements such as xs, sm, md
• form, dialog, card, navigation, or layout behavior
• existing theme file paths like src/theme.ts
• accessibility or design constraints

Weak input:

• “Make this look better with MUI”

Strong input:

• “Create a responsive MUI v7 settings page using Container, Paper, Stack, TextField, and Switch, styled with sx, using theme spacing and palette tokens, with mobile-first layout and no hardcoded colors.”

How to turn a rough goal into a good mui prompt

A strong mui usage prompt usually includes five parts:

1. target UI
2. component set
3. styling method
4. theme/responsive constraints
5. output format

Example:

“Using MUI v7, build a profile card component in TypeScript with Card, Avatar, Typography, and Button. Use sx only, reference theme palette and spacing, support xs to md responsive behavior, and return a self-contained component plus any extracted SxProps<Theme> styles.”

This is better than a generic request because it tells the agent how to stay inside MUI’s intended workflow.

Practical mui usage workflow

A reliable workflow for this mui skill:

1. identify whether the task is component, layout, form, or theming
2. name the exact MUI primitives you want used
3. require sx and theme tokens unless you truly need another path
4. ask for responsive behavior explicitly
5. review generated imports and v7 compatibility
6. then refine spacing, variants, and slot-level customization

This keeps the first draft close to production shape.

Trigger phrases that should invoke the mui skill

The repo’s rule fragment suggests that prompts containing terms like these are especially appropriate for mui:

• mui
• material-ui
• @mui/material
• sx prop
• ThemeProvider
• createTheme
• useTheme
• Dialog
• Drawer
• TextField
• Autocomplete

If your agent does not auto-trigger skills, use those terms deliberately in your request.

Best practices for component generation

Ask the agent to produce code that follows the patterns emphasized by the skill:

• import from @mui/material or approved package exports
• keep styles theme-aware
• use SxProps<Theme> when extracted styles improve reuse
• prefer MUI layout primitives like Box, Stack, Container, and Grid2
• use breakpoint objects in sx for responsive behavior

That combination usually yields cleaner mui output than mixing inline CSS, CSS modules, and arbitrary utility classes.

Best practices for theme work

When the task is theme customization, be explicit about the scope:

• palette only
• typography only
• component defaults
• dark mode
• app-wide ThemeProvider wiring

Example prompt:

“Update our MUI v7 theme to use a custom primary and secondary palette, Inter typography, rounded corners, and button text without uppercase. Show the createTheme object and the ThemeProvider integration.”

This aligns well with the skill’s theme resource and avoids one-off styling that should live in the theme.

Common repo files this skill maps to

The mui skill is especially relevant when your repo contains:

• theme.ts or theme.tsx
• components/**/*.tsx
• *.styles.ts or *.styles.tsx
• imports from @mui/material, @mui/icons-material, or @mui/system

If your codebase already has those signals, the skill is a strong install candidate for Frontend Development workflows.

What to validate after the first output

Before accepting generated code, check:

• imports are valid for MUI v7
• no deprecated onBackdropClick
• responsive props use current patterns
• theme values are used instead of raw hex and px everywhere
• Grid2 usage matches your installed package conventions
• slots and slotProps are used where component customization needs them

These checks catch the most expensive mistakes early.

mui skill FAQ

Is this mui skill good for beginners?

Yes, if you already know basic React. The skill gives a practical mui guide for common tasks without forcing you to read the full docs first. Absolute beginners to React may still need outside help for component state, props, and app structure.

Does the mui skill replace the MUI docs?

No. It is best used as an implementation accelerator, not as the canonical API reference. Use it to generate better first drafts and avoid version mistakes, then confirm edge-case props in the official docs when needed.

Is this mainly for MUI v7?

Yes. That is one of the main reasons to use it. The skill highlights changes that make older examples unreliable, so it is especially useful if your usual prompts keep producing v5 or v6-era patterns.

When should I not use this mui skill?

Skip it when:

• your project does not use MUI
• you need a framework-agnostic design system answer
• you want raw CSS, Tailwind-first output, or non-React UI solutions
• your task is mostly business logic rather than presentation

In those cases, the specialization will not help much.

How is this different from asking for “Material UI code” directly?

Ordinary prompts often miss MUI’s styling model and version nuances. The mui skill improves output by steering the agent toward sx, theme integration, responsive breakpoints, and current component conventions. That usually reduces rewrite time.

Can I use the mui skill for migration work?

Yes. It is a good fit for migration-oriented prompts such as:

• replacing deprecated APIs
• updating imports
• moving styling into sx
• adapting old customization code to slots and slotProps

For migration tasks, always state your current version and target version.

How to Improve mui skill

Give the agent stronger UI specifications

The fastest way to improve mui output is to stop asking for “a nice component” and instead define:

• layout structure
• component primitives
• responsiveness
• visual intent
• state behavior
• theming rules

For example, specify “two-column desktop, one-column mobile, Paper sections, primary CTA, TextField validation state, and theme-based spacing” instead of “make a settings page.”

Tell it which styling path to use

MUI supports several styling approaches, but this skill clearly favors sx for most component work. If you do not say that, the output may drift.

Useful instruction:

• “Use sx for all local styling and keep values theme-aware.”

That single line improves consistency a lot.

Provide existing theme and design tokens

If your project already has a theme, include the relevant palette names, spacing scale, typography choices, and component overrides. The mui skill gets materially better when it can align with your real design system instead of inventing one.

Best inputs to share:

• theme.ts
• custom palette names
• typography variants
• dark mode requirements
• preferred radius and spacing rules

Ask for extracted styles only when they help

For small components, inline sx is often clearer. For reused or complex styles, ask for const styles: Record<string, SxProps<Theme>>. If you do not make this choice explicit, the output can become either too fragmented or too crowded.

A good refinement prompt:

• “Refactor repeated sx blocks into typed reusable style objects.”

Watch for common failure modes

The most common issues with mui usage are:

• hardcoded colors instead of palette tokens
• raw pixel-heavy spacing instead of theme spacing
• outdated imports or deprecated APIs
• nonresponsive layouts
• overuse of custom CSS where MUI primitives already solve the problem

These are better fixed by tightening your prompt than by post-editing silently.

Iterate with targeted follow-up prompts

After the first draft, do not ask “improve this.” Ask for one kind of improvement at a time:

• “Make the layout mobile-first using breakpoint objects.”
• “Replace hardcoded colors with theme palette tokens.”
• “Convert the modal behavior to v7-safe onClose handling.”
• “Use slotProps for internal part customization.”

That style of iteration makes the mui skill much more reliable.

Use the resource files as prompt anchors

A practical way to improve results is to explicitly mention the internal resource topics the skill covers:

• component library patterns
• styling guide patterns
• theme customization patterns

Even if your agent does not literally open those files, prompting in their vocabulary nudges it toward the intended mui guide behavior.

Improve output quality for Frontend Development teams

For team use, standardize your prompts around:

• MUI version
• TypeScript requirement
• sx as default styling
• theme token usage
• breakpoint expectations
• accessibility basics
• import conventions

That turns the mui skill from a one-off helper into a repeatable frontend implementation tool.

How to judge whether the mui skill is helping

The skill is doing its job if the generated code:

• looks like your existing MUI codebase
• uses current v7-compatible patterns
• needs fewer import and styling fixes
• respects your theme
• avoids generic React styling detours

If not, the fix is usually better context, not abandoning the skill.