mui

Tổng quan về mui skill

mui skill là hướng dẫn chuyên sâu để làm việc với Material UI v7 trong các dự án React, đặc biệt hữu ích khi bạn cần viết sx chuẩn, xây dựng component bám theme, tạo layout responsive và áp dụng đúng các pattern mới của v7 thay vì dùng lời khuyên React UI chung chung. mui skill phù hợp nhất với frontend developer, người dùng code có AI hỗ trợ, và các team đã dùng @mui/material nhưng muốn triển khai nhanh hơn với ít lỗi đặc thù theo version hơn.

mui skill giúp bạn làm được gì

Hãy dùng mui skill khi công việc thực tế của bạn không phải là “học MUI từ đầu”, mà là ship một component, page, layout, theme hoặc migration cho an toàn. Skill này phát huy tốt nhất khi bạn cần:

• xây component MUI với cách import đúng chuẩn
• style bằng sx prop thay vì CSS chắp vá
• dùng theme token cho spacing, palette và typography
• áp dụng breakpoint responsive gọn và đúng
• xử lý các thay đổi của MUI v7 vốn thường làm hỏng những ví dụ cũ

Ai nên cài skill này

Skill này rất phù hợp nếu bạn:

• đã dùng React và muốn AI agent tạo code MUI tốt hơn
• cần một hướng dẫn mui có thể tái sử dụng cho các tác vụ frontend lặp lại
• đang migrate từ MUI v6 và muốn tránh các pattern đã lỗi thời
• muốn prompt tạo ra UI code nhất quán với theme

Nếu bạn hoàn toàn không dùng MUI, skill này sẽ quá chuyên biệt.

Vì sao skill này hữu ích hơn một prompt chung chung

Một prompt đơn giản như “make a Material UI form” thường trả về code lẫn lộn nhiều version, dùng theme hời hợt, hoặc style không theo convention của MUI. mui skill bổ sung các guardrail thực tế xoay quanh:

• pattern component của MUI v7
• sx là đường style chính
• lựa chọn import package
• cách dùng responsive prop
• quyết định thiết kế theo hướng theme-first

Điều đó thường giúp bạn đỡ phải dọn dẹp nhiều sau bản nháp đầu tiên.

Những điểm khác biệt quan trọng nhất

Giá trị chính của mui skill không nằm ở độ bao phủ thật rộng. Điểm mạnh là nó buộc agent tập trung vào đúng những pattern mà người dùng MUI thực sự quan tâm:

• hướng dẫn bám sát v7, bao gồm cả breaking change từ v6
• ví dụ xoay quanh Box, Typography, Paper, Button, Grid2, Stack và các building block UI phổ biến trong app
• tham chiếu style cụ thể trong resources/styling-guide.md
• pattern thiết lập theme thực tế trong resources/theme-customization.md

Các lưu ý version quan trọng mà skill này chỉ ra

Skill này nêu rất rõ những thực tế của MUI v7, vốn là các điểm AI-generated code hay vấp phải:

• deep import không còn là mặc định an toàn; nên ưu tiên package export
• onBackdropClick trên Modal đã bị loại bỏ; hãy dùng onClose
• pattern slots và slotProps giờ đã được chuẩn hóa
• hỗ trợ CSS layers rất quan trọng trong các setup như Tailwind v4 với enableCssLayer

Chỉ riêng các chi tiết đó cũng đủ là lý do để dùng skill này thay vì dựa vào các bài blog cũ.

Cách dùng mui skill

Cách cài mui skill

Cài skill vào agent toolkit context của bạn bằng:

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

Nếu môi trường của bạn dùng skills loader khác, hãy giữ nguyên repo và skill slug: softaworks/agent-toolkit, skill mui.

Nên đọc gì trước khi dùng mui skill

Hãy bắt đầu với các file này theo đúng thứ tự:

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

Thứ tự này rất quan trọng vì các file resource chứa pattern triển khai cụ thể, còn file rules cho bạn biết loại prompt và loại file nào được thiết kế để kích hoạt mui skill.

mui skill cần đầu vào gì

mui skill hoạt động tốt nhất khi bạn cung cấp đủ ngữ cảnh frontend để agent chọn đúng component, layout và pattern theme. Các đầu vào hữu ích gồm:

• component hoặc page bạn muốn xây
• version MUI bạn đang dùng, đặc biệt nếu đang migrate
• style nên dùng sx, theme overrides hay styled
• yêu cầu responsive như xs, sm, md
• hành vi của form, dialog, card, navigation hoặc layout
• đường dẫn file theme hiện có như src/theme.ts
• ràng buộc về accessibility hoặc thiết kế

Đầu vào yếu:

• “Make this look better with MUI”

Đầu vào tốt:

• “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.”

Cách biến một mục tiêu mơ hồ thành prompt mui tốt

Một prompt dùng mui hiệu quả thường có 5 phần:

1. UI mục tiêu
2. bộ component
3. cách style
4. ràng buộc về theme/responsive
5. định dạng đầu ra

Ví dụ:

“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.”

Prompt này tốt hơn yêu cầu chung chung vì nó chỉ rõ cách để agent bám vào đúng workflow mà MUI hướng tới.

Quy trình sử dụng mui skill hiệu quả trong thực tế

Một workflow đáng tin cậy cho mui skill:

1. xác định tác vụ là component, layout, form hay theming
2. gọi tên chính xác các primitive MUI bạn muốn dùng
3. yêu cầu sx và theme token trừ khi bạn thực sự cần hướng khác
4. nêu rõ yêu cầu responsive
5. rà lại import được sinh ra và mức tương thích với v7
6. sau đó mới tinh chỉnh spacing, variants và slot-level customization

Cách này giúp bản nháp đầu tiên gần với dạng có thể đưa vào production hơn.

Những cụm từ gợi ý nên kích hoạt mui skill

Rule fragment của repo cho thấy các prompt chứa những cụm từ dưới đây đặc biệt phù hợp với mui:

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

Nếu agent của bạn không tự động kích hoạt skill, hãy chủ động đưa các cụm này vào request.

Best practice khi sinh component

Hãy yêu cầu agent tạo code theo đúng các pattern mà skill nhấn mạnh:

• import từ @mui/material hoặc package export đã được chấp nhận
• giữ cho style bám theme
• dùng SxProps<Theme> khi việc tách style giúp tái sử dụng tốt hơn
• ưu tiên các layout primitive của MUI như Box, Stack, Container và Grid2
• dùng breakpoint object trong sx để xử lý responsive

Tổ hợp này thường cho ra output mui sạch hơn so với việc trộn inline CSS, CSS modules và utility class tùy tiện.

Best practice cho công việc với theme

Khi tác vụ là tùy biến theme, hãy nói rõ phạm vi:

• chỉ palette
• chỉ typography
• mặc định của component
• dark mode
• wiring ThemeProvider toàn app

Ví dụ 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.”

Cách này khớp tốt với resource về theme của skill và tránh tình trạng nhồi các chỉnh sửa lẻ tẻ vào chỗ lẽ ra nên nằm trong theme.

Những file repo phổ biến mà skill này ánh xạ tới

mui skill đặc biệt liên quan khi repo của bạn có các file hoặc tín hiệu như:

• theme.ts hoặc theme.tsx
• components/**/*.tsx
• *.styles.ts hoặc *.styles.tsx
• import từ @mui/material, @mui/icons-material, hoặc @mui/system

Nếu codebase của bạn đã có các dấu hiệu đó, skill này là ứng viên cài đặt rất đáng cân nhắc cho workflow Frontend Development.

Cần kiểm tra gì sau bản output đầu tiên

Trước khi chấp nhận code được tạo ra, hãy kiểm tra:

• import có hợp lệ với MUI v7 không
• không còn onBackdropClick đã bị deprecate
• responsive props có dùng pattern hiện tại không
• giá trị theme có được dùng thay cho hex và px viết tay ở khắp nơi không
• cách dùng Grid2 có khớp với convention package bạn đã cài không
• slots và slotProps có được dùng ở nơi cần custom nội bộ component không

Các bước kiểm tra này giúp bắt những lỗi tốn kém nhất ngay từ sớm.

Câu hỏi thường gặp về mui skill

mui skill có phù hợp cho người mới bắt đầu không?

Có, nếu bạn đã biết những kiến thức React cơ bản. Skill này cung cấp một hướng dẫn mui thực dụng cho các tác vụ phổ biến mà không bắt bạn phải đọc hết tài liệu chính thức ngay từ đầu. Tuy vậy, người hoàn toàn mới với React vẫn có thể cần hỗ trợ thêm về state component, props và cấu trúc app.

mui skill có thay thế tài liệu MUI không?

Không. Skill này nên được xem là công cụ tăng tốc triển khai, chứ không phải nguồn tham chiếu API chuẩn mực. Hãy dùng nó để tạo bản nháp đầu tốt hơn và tránh lỗi version, sau đó kiểm tra lại những prop ở ca biên trong tài liệu chính thức khi cần.

Skill này chủ yếu dành cho MUI v7 đúng không?

Đúng. Đây là một trong những lý do lớn nhất để dùng nó. Skill làm nổi bật các thay đổi khiến ví dụ cũ trở nên thiếu tin cậy, nên đặc biệt hữu ích nếu các prompt bạn hay dùng cứ tiếp tục sinh ra pattern kiểu v5 hoặc v6.

Khi nào không nên dùng mui skill?

Hãy bỏ qua skill này khi:

• dự án của bạn không dùng MUI
• bạn cần câu trả lời về design system không phụ thuộc framework
• bạn muốn output thiên về raw CSS, Tailwind-first, hoặc giải pháp UI không dùng React
• tác vụ của bạn chủ yếu là business logic chứ không phải phần trình bày

Trong các trường hợp đó, tính chuyên biệt của skill sẽ không giúp được nhiều.

Skill này khác gì so với việc hỏi trực tiếp “Material UI code”?

Prompt thông thường thường bỏ sót mô hình style và các khác biệt giữa version của MUI. mui skill cải thiện output bằng cách hướng agent về sx, tích hợp theme, responsive breakpoints và convention component hiện tại. Kết quả thường là giảm đáng kể thời gian phải viết lại.

Tôi có thể dùng mui skill cho công việc migration không?

Có. Skill này rất hợp với các prompt thiên về migration như:

• thay thế API đã deprecated
• cập nhật import
• chuyển style sang sx
• điều chỉnh code custom cũ sang slots và slotProps

Với tác vụ migration, luôn nêu rõ version hiện tại và version mục tiêu của bạn.

Cách cải thiện mui skill

Cho agent đặc tả UI rõ hơn

Cách nhanh nhất để cải thiện output của mui là đừng chỉ yêu cầu “một component đẹp”, mà hãy mô tả rõ:

• cấu trúc layout
• component primitive
• cách responsive
• chủ đích thị giác
• hành vi state
• quy tắc theming

Ví dụ, hãy ghi rõ “desktop hai cột, mobile một cột, các section dùng Paper, có primary CTA, trạng thái validation cho TextField, và spacing theo theme” thay vì chỉ nói “make a settings page.”

Chỉ rõ hướng style cần dùng

MUI hỗ trợ nhiều cách style, nhưng skill này ưu tiên khá rõ sx cho phần lớn công việc ở cấp component. Nếu bạn không nói rõ điều đó, output rất dễ bị trôi sang hướng khác.

Chỉ dẫn hữu ích:

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

Chỉ một dòng như vậy cũng giúp tăng tính nhất quán lên đáng kể.

Cung cấp theme và design token sẵn có

Nếu dự án của bạn đã có theme, hãy chia sẻ các palette name liên quan, spacing scale, lựa chọn typography và component overrides. mui skill hoạt động tốt hơn hẳn khi nó có thể bám vào design system thật của bạn thay vì tự bịa ra một cái mới.

Những đầu vào nên chia sẻ nhất:

• theme.ts
• tên palette tùy chỉnh
• typography variants
• yêu cầu dark mode
• quy tắc bo góc và spacing ưu tiên

Chỉ yêu cầu tách style khi thực sự có ích

Với component nhỏ, sx inline thường dễ đọc hơn. Với style được tái sử dụng hoặc phức tạp, hãy yêu cầu const styles: Record<string, SxProps<Theme>>. Nếu bạn không nói rõ lựa chọn này, output có thể trở nên либо quá vụn hoặc quá chật chội.

Một prompt tinh chỉnh tốt:

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

Theo dõi các kiểu lỗi hay gặp

Những vấn đề phổ biến nhất khi dùng mui là:

• hardcode màu thay vì dùng palette token
• spacing nặng về pixel viết tay thay vì theme spacing
• import cũ hoặc API đã deprecated
• layout không responsive
• lạm dụng CSS custom trong khi MUI primitive đã giải quyết được bài toán

Các vấn đề này nên được xử lý bằng cách siết prompt chặt hơn, thay vì âm thầm sửa tay về sau.

Lặp lại bằng các prompt follow-up có mục tiêu rõ

Sau bản nháp đầu tiên, đừng hỏi “improve this.” Hãy yêu cầu từng loại cải thiện một:

• “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.”

Kiểu lặp này làm cho mui skill đáng tin cậy hơn nhiều.

Dùng các file resource làm điểm neo cho prompt

Một cách thực tế để cải thiện kết quả là nhắc thẳng đến các chủ đề resource nội bộ mà skill bao phủ:

• pattern thư viện component
• pattern trong styling guide
• pattern tùy biến theme

Ngay cả khi agent của bạn không thực sự mở các file đó, việc prompt theo đúng “vốn từ” của chúng vẫn giúp nó đi đúng hướng hành vi của mui skill.

Nâng chất lượng output cho team Frontend Development

Khi dùng theo team, hãy chuẩn hóa prompt xoay quanh:

• version MUI
• yêu cầu TypeScript
• sx là style mặc định
• dùng theme token
• kỳ vọng về breakpoint
• các nguyên tắc accessibility cơ bản
• quy ước import

Cách này biến mui skill từ một trợ lý dùng một lần thành công cụ triển khai frontend có thể lặp lại.

Đánh giá mui skill có thực sự giúp ích hay không

Skill này đang làm đúng việc nếu code được tạo ra:

• trông giống code MUI hiện có trong codebase của bạn
• dùng các pattern hiện hành, tương thích v7
• cần ít sửa hơn ở phần import và styling
• tôn trọng theme của bạn
• tránh đi chệch sang các hướng style React quá chung chung

Nếu chưa đạt, nguyên nhân thường là thiếu ngữ cảnh tốt, chứ không phải do bạn nên bỏ hẳn skill này.