Install any skill in seconds. Free to start, no credit card required.
Get Started Free →lingxling/holographic-ui
Web and App implementation guide for Holographic UI.
Passed 22 of 23 test cases with the skill, and 18 of 23 without it.
and 2 more in the full report
4 fixed18 passed either way1 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 4 test cases the skill fixed. Same model, same prompt, with and without the skill.
I'm building a sci-fi space station web app and need a CSS card component styled to look like a floating light projection interface. Please provide the HTML and CSS code for a system status panel that feels translucent and projected in mid-air.
| Checked | Without skill | With skill |
|---|---|---|
| The CSS applies mix-blend-mode set to screen for projected light blending. | Missed | Passed |
| The card background uses a low-opacity rgba color rather than a solid background fill. | Passed | Passed |
The instructions your model reads when the skill loads.
"Made of light. Interfaces projected into thin air, visible but completely translucent."
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.
text-shadow.rgba(), mix-blend-mode: screen or add, and CSS filters.body {
background-color: #020202; /* Must be dark for holograms to show */
background-image: url('dark-lab-background.jpg');
background-size: cover;
color: #88ffff;
}
.hologram-panel {
background: rgba(0, 200, 255, 0.05); /* Extremely sheer */
border: 1px solid rgba(136, 255, 255, 0.5);
border-radius: 4px;
padding: 30px;
/* The glowing edge */
box-shadow:
inset 0 0 20px rgba(0, 200, 255, 0.2),
0 0 15px rgba(0, 200, 255, 0.3);
/* Scanline effect */
test cases passed, vs 18 / 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.