Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →lingxling/material-design
Web and App implementation guide for Material Design.
Passed 18 of 23 test cases with the skill, and 14 of 23 without it.
and 6 more in the full report
5 fixed13 passed either way4 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 5 test cases the skill fixed. Same model, same prompt, with and without the skill.
Write CSS styling for a web card component styled according to Material Design specifications. The card needs surface styling, rounded corners, and elevation level 2 depth hierarchy.
| Checked | Without skill | With skill |
|---|---|---|
| The CSS box-shadow property specifies three distinct shadow layers for elevation level 2. | Missed | Passed |
| The CSS transition property uses the timing function cubic-bezier(0.4, 0, 0.2, 1). | Missed | Passed |
The instructions your model reads when the skill loads.
"Digital paper and ink. Interfaces built on the physical properties of stacked material."
Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.
Roboto or Google Sans (or equivalent clean geometric sans). Stick strictly to the Material Type Scale (H1-H6, Subtitle, Body, Caption, Overline)..material-card {
background: var(--bg-surface);
border-radius: 8px;
padding: 16px;
/* Material Elevation 2 */
box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2),
0 2px 2px 0 rgba(0,0,0,0.14),
0 1px 5px 0 rgba(0,0,0,0.12);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.material-btn {
text-transform: uppercase;
font-weight: 500;
letter-spacing: 1.25px;
padding: 0 16px;
height: 36px;
border-radius: 4px;
test cases passed, vs 14 / 23 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.