Premium Frontend Design
Ship landing pages, dashboards, or product shells that feel crafted and memorable instead of generic template UI.
Overview
Premium Frontend Design is an agent skill most often used in Build (also Validate landing work) that guides award-caliber, cinematic web interfaces with WebGL, premium motion, and intentional aesthetics.
Install
npx skills add https://github.com/kv0906/cc-skills --skill premium-frontend-designWhat is this skill?
- Framework-flexible stack guidance for Three.js, React Three Fiber, Framer Motion, GSAP, and zero-bundle CSS motion
- Targets Awwwards-level, cinematic interfaces that avoid generic AI-generated visual slop
- Dependency matrix compares animation libraries by complexity and bundle size
- Covers WebGL templates, custom shaders, scroll-driven motion, and distinctive brand aesthetics
- Explicitly for interfaces where every pixel should feel intentional and alive
- Animation library comparison table across 4 tiers including CSS through GSAP + Club
Adoption & trust: 1k installs on skills.sh; 14 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need a landing page or product UI that converts and impresses, but agent-default layouts read as interchangeable AI slop.
Who is it for?
Solo builders shipping marketing sites, dashboards, or SaaS shells where brand perception and motion quality matter as much as feature lists.
Skip if: Teams that only need accessible, minimal admin UIs with no brand story, or backends/API-only work with no customer-facing surface.
When should I use this skill?
Building landing pages, dashboards, platforms, or any interface where generic AI slop is unacceptable.
What do I get? / Deliverables
You get a framework-aware plan for shaders, animation libraries, and distinctive visual systems that agents can implement as a memorable, production-grade interface.
- Interface implementation plan with chosen motion and 3D stack
- Premium visual and interaction direction agents can code against
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Primary shelf is Build because the skill centers on implementing interfaces with WebGL, animation stacks, and production-grade front-end craft. Frontend is the canonical subphase: shaders, motion libraries, layout, and component aesthetics are all implementation-time UI work.
Where it fits
Shape a prototype landing page with scroll-driven motion before you commit to full product build.
Implement the main dashboard shell with intentional typography and micro-interactions instead of default shadcn layouts.
Refresh the public marketing site so launch traffic sees a distinctive, cinematic first impression.
How it compares
Use instead of generic “make it pretty” prompts—it prescribes library choices, 3D options, and anti-slop craft rules rather than one-off Tailwind tweaks.
Common Questions / FAQ
Who is premium-frontend-design for?
Indie and solo builders using Claude Code, Cursor, or similar agents who want customer-facing React or web UIs that stand out on landing pages and product dashboards.
When should I use premium-frontend-design?
During Validate when polishing a landing or prototype demo, during Build when implementing the main app shell, and before Launch when the public site must feel premium rather than template-built.
Is premium-frontend-design safe to install?
Review the Security Audits panel on this Prism page for license and repository signals; the skill describes adding npm packages (Three.js, motion libs) you should vet like any frontend dependency.
SKILL.md
READMESKILL.md - Premium Frontend Design
# 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) ```bash pnpm add three @react-three/fiber @react-three/drei ``` ### 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 | ```bash # Framer Motion (simpler, React-idiomatic) pnpm add framer-motion # GSAP (powerful, timeline-based) pnpm add gsap @gsap/react # Note: SplitText, ScrollTrigger require GSAP Club license ``` **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 ```bash # Mesh gradients (for mesh-gradient-hero) pnpm add @paper-design/shaders-react # Icons pnpm add lucide-react # Charts/Sparklines (for dashboards) pnpm add recharts # or lightweight: pnpm add @visx/shape @visx/scale ``` ### 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. **Tone**: Pick ONE extreme direction (not a blend): - Brutally minimal - Maximalist chaos - Retro-futuristic / Cyberpunk - Organic / Natural - Luxury / Refined - Playful / Toy-like - Editorial / Magazine - Brutalist / Raw - Art Deco / Geometric - Industrial / Utilitarian - Bio-luminescent / Sci-fi - Mission Control / Technical 3. **The One Thing**: What single element will someone remember? Every great interface has a signature moment. 4. **Constraints**: Framework, performance budgets, accessibility requirements. **CRITICAL**: Bold maximalism and refined minimalism both work. The key is **intentionality, not intensity**. A single, perfectly-executed animation beats 50 mediocre ones. --- ## Wow + Clarity Framework Use this whenever the brief is vague or when you need to justify design decisions. The goal is **wow factor with purpose**. ### 1. Hierarchy Guardrails - **1 hero flourish** (shader, particle system, or globe)