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.
89
Does it follow best practices?
If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:
npx tessl skill review --optimize ./path/to/skillAgent success when using this skill
Validation for skill structure
Discovery
89%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is a well-crafted skill description that clearly identifies its niche (Material-UI v7) and includes an explicit 'Use when...' clause with relevant trigger terms. The main weakness is that the capabilities listed are somewhat categorical rather than listing specific concrete actions (e.g., 'create themed buttons', 'build responsive layouts').
Suggestions
Consider adding more concrete actions like 'create themed components', 'build responsive grids', or 'customize color palettes' to improve specificity
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (Material-UI v7) and lists several actions/concepts (sx prop styling, theme integration, responsive design, MUI-specific hooks), but these are more categories than concrete actions like 'create buttons' or 'build data grids'. | 2 / 3 |
Completeness | Clearly answers both what (MUI v7 component library patterns including sx prop, theme integration, responsive design, hooks) and when (explicit 'Use when...' clause with specific triggers for MUI components, sx prop, theme customization, utilities). | 3 / 3 |
Trigger Term Quality | Good coverage of natural terms users would say: 'MUI components', 'sx prop', 'theme customization', 'MUI utilities', 'Material-UI'. These are terms developers naturally use when working with this library. | 3 / 3 |
Distinctiveness Conflict Risk | Very specific to Material-UI/MUI ecosystem with distinct triggers like 'sx prop', 'MUI components', and 'Material-UI v7'. Unlikely to conflict with other CSS or React skills due to MUI-specific terminology. | 3 / 3 |
Total | 11 / 12 Passed |
Implementation
85%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a strong MUI v7 reference skill with excellent actionability - nearly all examples are executable and properly typed. The structure is logical with good progressive disclosure. Minor verbosity issues exist (redundant comments, 'When to Use' section), but overall the skill efficiently delivers practical patterns for MUI development.
Suggestions
Remove the 'When to Use This Skill' section - Claude can infer appropriate usage from the content itself
Trim inline comments like '// Generic container' and '// 12-column grid' that explain obvious MUI concepts
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is mostly efficient with good code examples, but includes some unnecessary explanations like 'Generic container' comments and could be tightened. The 'When to Use This Skill' section repeats information Claude can infer. | 2 / 3 |
Actionability | Excellent executable code examples throughout - all TypeScript/React snippets are copy-paste ready with proper imports, typed styles, and complete component structures. The patterns are concrete and immediately usable. | 3 / 3 |
Workflow Clarity | For a component library reference skill, the workflow is appropriately clear. The organization follows a logical progression from quick start to specific patterns, with clear guidance on when to use inline vs separate style files (< 100 lines threshold). | 3 / 3 |
Progressive Disclosure | Well-structured with clear sections and appropriate depth. References to additional resources (styling-guide.md, component-library.md, theme-customization.md) are one level deep and clearly signaled at the end. | 3 / 3 |
Total | 11 / 12 Passed |
Validation
90%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 10 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
skill_md_line_count | SKILL.md is long (505 lines); consider splitting into references/ and linking | Warning |
Total | 10 / 11 Passed | |
Table of Contents
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.