premium-frontend-design
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)
More from kv0906/cc-skills
svg-art
Create SVG graphics through programmatic code generation. Use this skill when the user asks to create icons, logos, illustrations, diagrams, data visualizations, generative art, patterns, fractals, or any vector graphics. Provides executable Python scripts for grids, radial patterns, fractals, waves, particles, charts, icons, and optimization.
277excalidraw
Create Excalidraw diagrams as JSON files for flowcharts, user journeys, system architectures, wireframes, and visual documentation. Use when the user asks to create diagrams, flowcharts, visual representations, architecture diagrams, mind maps, or any Excalidraw-compatible visualizations. Outputs .excalidraw.json files that can be opened in excalidraw.com or any Excalidraw-compatible app.
32ralph
Set up and run Ralph Wiggum loop - autonomous AI coding with clean slate iterations, PRD-driven features, and CI quality gates. Use for long-running autonomous coding tasks.
28planning-with-files
Transforms workflow to use Manus-style persistent markdown files for planning, progress tracking, and knowledge storage. Use when starting complex tasks, multi-step projects, research tasks, or when the user mentions planning, organizing work, tracking progress, or wants structured output.
23gws
This skill should be used when the user asks to "set up gws", "install Google Workspace CLI", "connect Gmail to Claude", "manage Google Drive from terminal", "send email from CLI", "check my calendar", "create a Google Doc", "use gws", "Google Workspace agent", or mentions gws CLI, Google Workspace automation, or wants to interact with Gmail, Drive, Calendar, Sheets, Docs, Slides, Chat, Tasks, Meet, or Forms from the command line.
8