premium-frontend-design

SKILL.md

Craft premium, cinematic frontend interfaces that feel alive and unforgettable.

Framework-flexible approach with optional WebGL, shader effects, and advanced animations; choose CSS, Framer Motion, or GSAP based on complexity needs

Comprehensive design system covering dark-mode color architecture, typography discipline, spacing rules, and glassmorphism patterns with strict anti-patterns to avoid generic AI aesthetics

Extensive animation library spanning CSS keyframes, staggered entrances, GSAP timelines, and Framer Motion patterns; includes accessibility-first motion preferences and reduced-motion fallbacks

Industry-specific templates and shader selection guide (AI/neural, crypto/DeFi, developer tools, SaaS, creative) with performance-tiered options from WebGL-heavy to CSS-only implementations

Quality checklist, mobile responsiveness strategy, loading/error state patterns, and SEO considerations for WebGL content ensure production-grade delivery

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)

pnpm add three @react-three/fiber @react-three/drei

Animation (choose based on user preference)