Skip to content
mcp/skillhub

Agent Skill

Mui skill

muisoftaworks/agent-toolkitskills/mui/SKILL.md

Material-UI v7 component library patterns including sx prop styling, theme integration, responsive design, and MUI-specific hooks. Use when working with MUI components, styling with sx prop, theme customization, or MUI utilities.

2.6kMIT

always on

48 tokname + description

once used

2,498 tokSKILL.md body

bundled files

535 KB

repo stars

2.6kGitHub

Install the Mui skill

Skills CLI (Claude Code, Codex, Cursor and others)

npx skills add https://github.com/softaworks/agent-toolkit --skill mui

Claude Code, by hand (all projects)

git clone --depth 1 https://github.com/softaworks/agent-toolkit.git /tmp/agent-toolkit
mkdir -p ~/.claude/skills
cp -R /tmp/agent-toolkit/skills/mui ~/.claude/skills/mui

For one project only, copy the folder into .claude/skills/ in that project instead. The agent picks it up when a task matches its description.

What it costs your context

Agent Skills load in three steps. Tokens counted with the o200k tokenizer; your model's count will differ a little.

WhenWhat loadsCost
Every sessionName and description48 tok
When the agent uses itThe SKILL.md instructions2,498 tok
Only if opened5 bundled files (35 KB)varies

Until it is used, mui costs about 28× less than the median MCP server we measured (1,363 tokens on every turn). Installing all 43 skills from softaworks/agent-toolkit would load 2,462 tokens of descriptions. Skills vs MCP study

Checks

Our checks found nothing to flag: it follows the Agent Skills specification's naming and size guidelines and doesn't pipe downloads into a shell.

Checked 2026-10-22 · method

What's inside

The headings of its SKILL.md. Read the full file on GitHub.

  • MUI v7 Patterns
  • Purpose
  • When to Use This Skill
  • Quick Start
  • Basic MUI Component
  • Styling Patterns
  • Inline Styles (< 100 lines)
  • Separate Styles File (>= 100 lines)
  • Common Components
  • Layout Components
  • Grid System
  • Typography
  • Buttons
  • Theme Integration
  • Using Theme Values
  • Theme in sx Prop
  • Responsive Design
  • Breakpoints
  • Responsive Typography
  • Forms
  • Common Patterns
  • Card Component
  • Dialog/Modal
  • Loading States

More skills from softaworks/agent-toolkit

All skills in this repo
  1. agent-md-refactorsoftaworks/agent-toolkit

    Refactor bloated AGENTS.md, CLAUDE.md, or similar agent instruction files to follow progressive disclosure principles. Splits monolithic files into organized, linked documentation.

    2.6k40 tok idle · 1,732 in use
  2. backend-to-frontend-handoff-docssoftaworks/agent-toolkit

    Create API handoff documentation for frontend developers. Use when backend work is complete and needs to be documented for frontend integration, or user says 'create handoff', 'document API', 'frontend handoff', or 'API documentation'.

    2.6k55 tok idle · 1,139 in use
  3. c4-architecturesoftaworks/agent-toolkit

    Generate architecture documentation using C4 model Mermaid diagrams. Use when asked to create architecture diagrams, document system architecture, visualize software structure, create C4 diagrams, or generate context/container/component/deployment diagrams. Triggers include "architecture diagram", "C4 diagram", "system context", "container diagram", "component diagram", "deployment diagram", "document architecture", "visualize architecture".

    2.6k82 tok idle · 2,505 in use
  4. codexsoftaworks/agent-toolkit

    Use when the user asks to run Codex CLI (codex exec, codex resume) or references OpenAI Codex for code analysis, refactoring, or automated editing. Uses GPT-5.2 by default for state-of-the-art software engineering.

    2.6k55 tok idle · 1,275 in use
  5. command-creatorsoftaworks/agent-toolkit

    This skill should be used when creating a Claude Code slash command. Use when users ask to "create a command", "make a slash command", "add a command", or want to document a workflow as a reusable command. Essential for creating optimized, agent-executable slash commands with proper structure and best practices.

    2.6k66 tok idle · 1,492 in use
  6. commit-worksoftaworks/agent-toolkit

    Create high-quality git commits: review/stage intended changes, split into logical commits, and write clear commit messages (including Conventional Commits). Use when the user asks to commit, craft a commit message, stage changes, or split work into multiple commits.

    2.6k54 tok idle · 522 in use
  7. crafting-effective-readmessoftaworks/agent-toolkit

    Use when writing or improving README files. Not all READMEs are the same — provides templates and guidance matched to your audience and project type.

    2.6k35 tok idle · 589 in use
  8. daily-meeting-updatesoftaworks/agent-toolkit

    Interactive daily standup/meeting update generator. Use when user says 'daily', 'standup', 'scrum update', 'status update', 'what did I do yesterday', 'prepare for meeting', 'morning update', or 'team sync'. Pulls activity from GitHub, Jira, and Claude Code session history. Conducts 4-question interview (yesterday, today, blockers, discussion topics) and generates formatted Markdown update.

    2.6k194 tok idle · 2,779 in use