Creates CSS gradients, glassmorphism, glows, shadows, and camera UI elements for dark-theme interfaces.
npx skills add https://github.com/Fivents/one-id --skill visual-effects
Please help me install this Agent Skill. Skill: visual-effects Source: https://github.com/Fivents/one-id/tree/main/.claude/skills/visual-effects Command: npx skills add https://github.com/Fivents/one-id --skill visual-effects
Provide a consistent set of modern CSS patterns and guidance to add depth, polish, and readable contrast to user interfaces—especially for dark themes and physical-display contexts—while avoiding common performance pitfalls.
Apply a hero gradient background, a frosted-glass card with backdrop blur, and a subtle ambient glow to the primary landing section to add depth while keeping text legible.
High-intent search queries and answers about installing and using this skill.
To create glassmorphism UI effects with good performance, apply backdrop blur to frosted surfaces using GPU-friendly CSS patterns. Avoid animating expensive backdrop-filter and box-shadow properties to maintain smooth rendering on physical-display hardware.
For dark theme interfaces, use gradient systems, glassmorphism primitives, and ambient neon glows to add depth. Applying Oklch color values ensures consistent, readable contrast while creating rich color layers across components.
Yes, you can use Tailwind-style utilities to apply visual effects. The system supports these utilities alongside Oklch color values to generate consistent gradient backgrounds, shadow patterns, and overlay textures.
Build camera and video UI overlays by applying specific CSS patterns for viewfinder corners, face-detection highlights, and animated scan lines. These visual elements are designed for totem or kiosk interfaces on physical displays.
Animating box-shadow and backdrop-filter causes UI lag because they are expensive properties that trigger heavy repaints. To avoid performance pitfalls on physical displays, use GPU-friendly CSS patterns and static shadow layers instead.
broomvaImplement glassmorphism and dark-first themes with OKLCh tokens for Next.js and Tailwind CSS v4.
nexu-ioGenerate a single-file HTML Spotify-style card with inline SVG and CSS gradients.
GeneralJerelCreate frosted-glass UI surfaces with backdrop blur and translucent backgrounds.
guilhermemarketingCreate layered CSS progressive blur effects with backdrop-filter masks.
