premium-frontend-ui

Use it when:: You ask for a premium landing page, an interactive portfolio or an "Awwwards-style" component.
It does:: Has the agent commit to one visual direction, such as editorial brutalism or cyber, and build in a preloader, full-screen hero, scroll animations and cursor effects.
You get:: Code with pinned and horizontal scroll sections, parallax, magnetic buttons, a custom cursor, huge fluid headlines, grain and frosted glass.
Keeps:: Performance and accessibility: animates only transform and opacity, limits cursor effects to fine pointers and keeps heavy motion behind reduced-motion settings.
Libraries:: Framer Motion and Lenis for React or Next.js, plus React Three Fiber for 3D; GSAP, Lenis and SplitType for plain HTML or Astro.

TL;DR

A set of standards for when a page has to feel high-end rather than merely work. The agent first commits to a strong identity, such as one of the four directions it describes: editorial brutalism, organic fluidity, cyber/technical or cinematic pacing. Pages then get layers a plain build would skip: a preloader that waits for fonts and images and leaves with a reveal, a full-viewport hero whose headline is split into words or letters for staggered entrances, and a sticky header that hides on scroll down and returns on scroll up. Motion is tied to scrolling, with pinned sections, horizontal galleries and parallax, plus magnetic buttons, a custom cursor that trails the pointer and 3D hover transforms. Typography uses extreme scale contrast, with clamp() headlines up to 12vw, premium or variable fonts, a faint noise overlay and frosted-glass panels. Performance rules come with it: animate only transform and opacity, use will-change sparingly, keep cursor and hover effects behind a fine-pointer media query and heavy animation behind prefers-reduced-motion. Whenever you ask for a premium or immersive page, it wraps the result in smooth scrolling and staggered entrances by default.

Summarizes the skill at 797337f.

npx skills add https://github.com/github/awesome-copilot --skill premium-frontend-ui

skills.sh page Source on GitHub All skills from github/awesome-copilot

Total Downloads: 5,000 on skills.sh, Nov 9, 2026
Repo stars: 40,943 github/awesome-copilot
First seen: Mar 18, 2026 on skills.sh

Weekly Downloads

-29% over the 8 weeks to Nov 9

Weekly values

Week to	Installs
Sep 21	77
Sep 28	86
Oct 5	80
Oct 12	67
Oct 19	68
Oct 26	62
Nov 2	71
Nov 9	55

Category	category:design category:software-engineering Taste for interfaces that don't look generated: direction, motion and accessibility. Everything for building software: planning, coding, debugging, design, frameworks, cloud, agents and skills.
Type	type:guidelines Knowledge and rules the agent applies while it works: best practices, design principles, API references.
Effect	effect:none Adds no side effects of its own. It shapes how the agent thinks, writes or reviews. Guidelines and routers are always effect:none, even when the task they support edits code.
Needs	needs:none Instructions only. Works in any agent that supports skills.
Publisher	by:official A verified publisher on skills.sh, or the company or maintainer behind the product the skill operates.
Topics	design animation performance accessibility
Stack	stack:gsap stack:framer-motion stack:lenis

SKILL.md

From github/awesome-copilot at 797337f. Checked daily, last changed Nov 6, 2026.

Frontmatter

name: premium-frontend-ui
description: 'A comprehensive guide for GitHub Copilot to craft immersive, high-performance web experiences with advanced motion, typography, and architectural craftsmanship.'
metadata:
  author: 'Utkarsh Patrikar'
  author_url: 'https://github.com/utkarsh232005'

Immersive Frontend UI Craftsmanship

As an AI engineering assistant, your role when building premium frontend experiences goes beyond outputting functional HTML and CSS. You must architect immersive digital environments. This skill provides the blueprint for generating highly intentional, award-level web applications that prioritize aesthetic quality, deep interactivity, and flawless performance.

When a user requests a high-end landing page, an interactive portfolio, or a specialized component that requires top-tier visual polish, apply the following rigorous standards to every line of code you generate.

1. Establishing the Creative Foundation

Before generating layout code, ensure you understand the core emotional resonance the UI should deliver. Do not default to generic, unopinionated code.

Commit to a strong visual identity in your CSS and component structure:

Editorial Brutalism: High-contrast monochromatic palettes, oversized typography, sharp rectangular edges, and raw grid structures.
Organic Fluidity: Soft gradients, deeply rounded corners, glassmorphism overlays, and bouncy spring-based physics.
Cyber / Technical: Dark mode dominance, glowing neon accents, monospaced typography, and rapid, staggered reveal animations.
Cinematic Pacing: Full-viewport imagery, slow cross-fades, profound use of negative space, and scroll-dependent storytelling.

2. Structural Requirements for Immersive UI

When scaffolding a page or generating core components, include the following architectural layers to transform a standard page into an experience.

2.1 The Entry Sequence (Preloading & Initialization)

A blank screen is unacceptable. The user's first interaction must set expectations.

Implementation: Generate a lightweight preloader component that handles asset resolution (fonts, initial images, 3D models).
Animation: Output code that transitions the preloader away fluidly—such as a split-door reveal, a scale-up zoom, or a staggered text sweep.

2.2 The Hero Architecture

The top fold must command attention immediately.

Visuals: Output code that implements full-bleed containers (100vh/100dvh).
Typography Engine: Ensure headlines are broken down syntactically (e.g., span wrapping by word or character) to allow for cascading entrance animations.
Depth: Utilize subtle floating elements or background clipping paths to create a sense of scale and depth behind the primary copy.

2.3 Fluid & Contextual Navigation

Implementation: Do not generate standard static navbars. Output sticky headers that react toscroll direction (hide on scroll down, reveal on scroll up).
Interactivity: Include hover states that reveal rich content (e.g., mega-menus that display image previews of the hovered link).

3. The Motion Design System

Animation is not an afterthought; it is the connective tissue of a premium site. Always implement the following motion principles:

3.1 Scroll-Driven Narratives

Generate code utilizing modern scroll libraries (like GSAP's ScrollTrigger) to tie animations to user progress.

Pinned Containers: Create sections that lock into the viewport while secondary content flows past or reveals itself.
Horizontal Journeys: Translate vertical scroll data into horizontal movement for specific galleries or showcases.
Parallax Mapping: Assign subtle, varying scroll-speeds to background elements, midground text, and foreground imagery.

3.2 High-Fidelity Micro-Interactions

The cursor is the user's avatar. Build interactions around it.

Magnetic Components: Write logic that calculates the distance between the mouse pointer and a button, pulling the button towards the cursor dynamically.
Custom Tracking Elements: Generate custom cursor components that follow the mouse with calculated interpolation (lerp) for a smooth drag effect.
Dimensional Hover States: Use CSS Transforms (scale, rotateX, translate3d) to give interactive elements weight and tactile feedback.

4. Typography & Visual Texture

The aesthetics of your generated code must reflect premium craftsmanship.

Type Hierarchy: Enforce massive contrast in scale. Headlines should utilize extreme sizing (clamp() functions spanning up to 12vw), while body copy remains incredibly crisp (16px-18px minimum).
Font Selection: Always recommend or implement highly specified variable fonts or premium typefaces over system defaults.
Atmospheric Filters: Implement CSS/SVG noise overlays (mix-blend-mode: overlay, opacity 0.02 - 0.05) to remove digital sterility and add photographic grain.
Lighting & Glass: Utilize backdrop-filter: blur(x) combined with ultra-thin, semi-transparent borders to create modern, frosted-glass depth.

5. The Performance Imperative

A beautiful site that stutters is a failure. Enforce strict performance guardrails in all generated code:

Hardware Acceleration: Only animate properties that do not trigger layout recalculations: transform and opacity. Code that animates width, height, top, or margin should be fiercely avoided.
Render Optimization: Apply will-change: transform intelligently on complex moving elements, but remove it post-animation to conserve memory.
Responsive Degradation: Wrap custom cursor logic and heavy hover animations in @media (hover: hover) and (pointer: fine) to ensure pristine performance on touch devices.
Accessibility: Wrap heavy continuous animations in @media (prefers-reduced-motion: no-preference). Never sacrifice user accessibility for aesthetic flair.

6. Implementation Ecosystem

When the user asks you to implement these patterns, leverage industry-standard libraries tailored to their framework:

For React / Next.js Targets

Structure the application to support Framer Motion for layout transitions and spring physics.
Recommend Lenis (@studio-freight/lenis) for smooth scrolling context.
Implement React Three Fiber (@react-three/fiber) if webGL or 3D interactions are requested.

For Vanilla / HTML / Astro Targets

Rely heavily on GSAP (GreenSock Animation Platform) for timeline sequencing.
Utilize vanilla Lenis via CDN for scroll hijacking and smoothing.
Use SplitType for safe, accessible typography chunking.

Summary of Action

Whenever you receive a prompt to "Build a premium landing page," "Create an Awwwards-style component," or "Design an immersive UI," you must automatically:

Wrap the output in a robust, scroll-smoothed architecture.
Provide CSS that guarantees perfect performance using composited layers.
Integrate sweeping, staggered component entrances.
Elevate the typography using fluid scales.
Create an intentional, memorable aesthetic footprint.