Agent skill · design visual · kv0906
premium-frontend-design
Create award-winning, cinematic frontend interfaces that feel ALIVE. Combines 10+ years of creative frontend experience with technical excellence. Specializes in WebGL, custom shaders, premium animations, and distinctive aesthetics that would win on Awwwards. Use when building landing pages, dashboards, platforms, or any interface where "generic AI slop" is unacceptable.
Why this skill is useful
Provides specific guidance on advanced frontend techniques and libraries for creating immersive user interfaces that the AI wouldn't reliably generate on its own.
What it needs
Requires pnpm installed locally. About 11k tokens when loaded. Last updated 2026-07-30. 14 stars on the source repository.
What this skill does
Premium Frontend Design Skill This skill guides creation of production-grade frontend interfaces that feel ALIVE — not generic, not copy-paste, but genuinely crafted experiences that users remember. "The difference between a good interface and an unforgettable one is intentionality in every pixel." --- Dependencies (Flexible — Choose What Fits) This skill is framework-flexible. Pick packages based on user preference and project needs. Core 3D (for WebGL templates) Animation (choose based on user preference) Library Best For Complexity Bundle Size --------- ---------- ------------ ------------- CSS/Tailwind Simple transitions, micro-interactions Low 0KB Framer Motion React-native feel, layout animations, gestures Medium ~30KB GSAP Complex timelines, scroll-triggered, text effects High ~60KB GSAP + Club SplitText, ScrollTrigger, MorphSVG High ~80KB Decision Guide: User says "simple" or "lightweight" → CSS + Framer Motion User says "complex animations" or "scroll effects" → GSAP User says "text animations" or "split text" → GSAP + SplitText User doesn't specify → Default to Framer Motion (simpler API) Optional Enhancements Browser Compatibility Notes backdrop-filter: Not supported in Firefox < 103 (add fallback bg) WebGL: Provide CSS fallback for older devices @starting-style: Chrome 117+, Safari 17.4+ (progressive enhancement) --- Core Philosophy The "Alive" Principle An interface feels alive when: It breathes: Subtle ambient animations, particles, or shader effects create constant but non-distracting motion It responds: Micro-interactions acknowledge every user action with satisfying feedback It has depth: Layers, parallax, glassmorphism, and shadows create dimensional space It surprises: At least one element breaks expectations in a delightful way Design Thinking (Before ANY Code) Before writing a single line, answer these: 1. Purpose: What problem does this solve? Who uses it? 2. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills kv0906/advanced-frontend-skill