skills.rest
siriwatknpsiriwatknpCommunity·5 Agent Skills Included

mui-treasury

Build polished Material UI layouts and components with AI

Builds production-ready Material UI components, app layouts, and sidebar navigation from mockups or plain requests. Eliminates guesswork in MUI theming, dark mode, spacing, and accessibility by enforcing proven styling rules. Guides AI agents through design analysis, registry metadata, and visual testing so interfaces ship faster with fewer errors.
2,442|148
↗
npx skills add siriwatknp/mui-treasury --all -g -y
Available:

Instructs the AI agent on how to design, build, and verify MUI Treasury registry components, including layout workflows, theme rules, visual testing, and when to trigger each sub-skill.

All Skills in This Repository (5)

Pure Emerald Level Indicators
📦 In Repo
siriwatknpsiriwatknp

using-base-ui-with-material-ui

Integrates Base UI components with Material UI using the render prop pattern.

Community
Intermediate
📦 In Repo
siriwatknpsiriwatknp

writing-registry-meta

Generates JSON meta files with required fields for MUI Treasury registry components.

Community
Basic
📦 In Repo
siriwatknpsiriwatknp

build-app-layout

Create React application layouts with header, footer, content, and sidebar components.

Community
Intermediate
📦 In Repo
siriwatknpsiriwatknp

understand-doc-system

Plan software documentation using the four-quadrant Diataxis documentation framework.

Community
Basic
📦 In Repo
siriwatknpsiriwatknp

ui-engineer

Implements MUI components with theme-first styling, accessibility, and dark mode rules.

Community
Intermediate

Frequently Asked Questions

FAQPage Schema
How to install mui-treasury?▼

Run `npx skills add siriwatknp/mui-treasury --all -g -y` in your terminal to install all skills in this suite globally.

How to build a dashboard layout with Material UI?▼

The build-app-layout skill gives your AI agent step-by-step rules for creating collapsible sidebars, headers, and content regions using mui-treasury layout components.

Can AI generate MUI components from a mockup?▼

Yes. The suite analyzes your design top to bottom, maps elements to Material UI components, and produces theme-based code with proper dark mode and accessibility.

Does mui-treasury work with Claude Code and Cursor?▼

Yes. All skills follow the standard SKILL.md format and run in Claude Code, Cursor, and other compatible AI coding agents.

How to combine Base UI with Material UI?▼

The included skill teaches your agent the correct render-prop pattern so Base UI primitives get Material UI styling without prop duplication or styling conflicts.

Related Repositories in Design & Creative

View All in Design & Creative→
nextlevelbuildernextlevelbuilder
123.5k

ui-ux-pro-max-skill

AI design intelligence for professional UI, brands, and presentations

Official📦 13 Skills
shadcn-uishadcn-ui
122.7k

ui

Build and customize beautiful React component libraries with AI

Official📦 2 Skills
nexu-ionexu-io
93.2k

open-design

Open-source AI design studio for decks, prototypes, images, and video

Official📦 394 Skills