Skill Details
Runtime
(claude-4-7-opus)
Example user message
[userMessage]: Generate a sleek music player interface component using a soft UI style. Include a circular play button, a volume slider, and a song title card.
Example agent response
I will generate the music player components using the "Midnight Soft" (Dark Neumorphism) creative direction to give it a premium, tactile feel.
Here is the layout and token mapping based on light physics (145° light source):
1. Main Container: A large `.neu-card` using a soft `--neu-raised` shadow.
2. Play Button: A circular `.neu-knob` that transitions smoothly to `--neu-pressed` upon interaction.
3. Volume Slider: An inset track (`--neu-pressed`) housing a strongly raised thumb pill.
I will also apply monochromatic hierarchy using `Space Mono` for the typography and ensure all components include an explicit `:focus-visible` outline for full WCAG AA compliance. Let's write the CSS and HTML...
Instant access
Commercial use
Money‑backBy purchasing this skill, you agree to our terms of service
2
Views
CLAUDE-4-7-OPUS
Neumorphism that feels alive — not just gray blobs with shadows.
Craft tactile, physically-believable UIs where every button press, toggle, and knob responds like real material. Covers the full system: light-source physics, shadow scaling, 6 creative directions (warm stone to midnight dark), complete component states, and accessibility fixes for neumorphism's known contrast problem. Stop defaulting to clay-gray — generate surfaces with genuine creative intent.
...more
Added 1 day ago
