Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →lingxling/spatial-design
Web and App implementation guide for Spatial Design.
Passed 22 of 23 test cases with the skill, and 17 of 23 without it.
and 3 more in the full report
5 fixed17 passed either way1 still failing0 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.
Design a React Native spatial screen layout featuring a main glass panel containing an interactive action button. How should blur types be configured between the panel container and the button inside it?
| Checked | Without skill | With skill |
|---|---|---|
| Configures light blur type for the main outer panel. | Missed | Passed |
| Configures dark blur type for the inner action button. | Missed | Passed |
The instructions your model reads when the skill loads.
"UI that belongs in the room with you. Transparent, glass-like panels that react to the lighting of the physical space."
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.
rgba() white or black. The actual color comes entirely from the background environment.SF Pro is the gold standard here.body {
/* Needs a complex background to look right */
background: url('room-environment.jpg') cover;
}
.spatial-panel {
/* The core material */
background: rgba(255, 255, 255, 0.2); /* Very sheer */
backdrop-filter: blur(40px) saturate(150%);
-webkit-backdrop-filter: blur(40px) saturate(150%);
border-radius: 32px;
padding: 40px;
/* The specular rim light */
box-shadow:
inset 0 1px 1px rgba(255,255,255,0.6),
inset 0 0 1px 1px rgba(255,255,255,0.2),
0 24px 48px rgba(0,0,0,0.1);
test cases passed, vs 17 / 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.