Premium Frontend UI Skill: Immersive Motion and Type

What is the premium-frontend-ui skill?

The premium-frontend-ui skill is one SKILL.md in the awesome-copilot repository, credited to Utkarsh Patrikar. It frames the agent as an architect of immersive digital environments, aimed at high-end landing pages and interactive portfolios.

It is a single file with no bundled references. Everything the agent needs sits in six numbered sections, from creative direction through to the libraries to use for React, Next.js, vanilla HTML and Astro.

What changes in your agent's output

• The agent commits to a named visual identity before writing layout code, instead of defaulting to unopinionated markup.
• Pages gain an entry sequence: a lightweight preloader that resolves fonts, images and 3D models, then transitions away.
• Headlines are split by word or character so they can cascade in, and the hero is a full-bleed 100vh or 100dvh container.
• Scroll drives the story through pinned sections, horizontal galleries and parallax layers.

The four visual identities

• Editorial Brutalism: high-contrast monochrome, oversized type, sharp edges and raw grids.
• Organic Fluidity: soft gradients, deep rounding, glassmorphism and spring physics.
• Cyber and Technical: dark mode, neon accents, monospaced type and staggered reveals.
• Cinematic Pacing: full-viewport imagery, slow cross-fades and scroll-dependent storytelling.

Performance and accessibility guardrails

Animation is limited to transform and opacity. will-change is applied on complex movers and removed afterwards. Custom cursors sit behind a hover and fine-pointer media query, and heavy loops are wrapped in a prefers-reduced-motion check.

Who the premium-frontend-ui skill is for

Best for

• Marketing pages, portfolios and showcase components where visual polish is the product.
• Builders already using GSAP. Related: gsap-scrolltrigger.
• Agents that need a strong default look. Related: high-end-visual-design.

Not for

• Utility screens where a mandatory preloader and scroll smoothing would slow people down.
• Teams that want a short checklist. This skill asks for a lot on every page.
• Projects that need a code review. It builds, and does not audit.

Use it with UiChemy

The skill writes front-end code for effects like pinned scroll and custom cursors. When the page must live in WordPress, UiChemy Composer works as an AI visual editor that writes real HTML, CSS and JavaScript inside Elementor or Gutenberg. Click Get Started.

How to install Premium Frontend UI Skill: Immersive Motion and Type

git clone https://github.com/github/awesome-copilot.git

1. Clone the repository

   Run git clone https://github.com/github/awesome-copilot.git. The skill is the single file in skills/premium-frontend-ui.

2. Copy the skill folder

   Copy skills/premium-frontend-ui into the place your agent loads skills from. It holds only SKILL.md, so nothing else needs to travel with it.

3. Add the libraries you need

   Install GSAP, Lenis or Framer Motion in your project if the agent should use them. The skill recommends them but does not install them.

4. Ask for a premium build

   Use prompts such as build a premium landing page, create an Awwwards-style component, or design an immersive UI.

Check that it loaded

Ask the agent for a premium landing page hero. The output should include a named visual identity, a preloader, split headline spans and reduced-motion handling.

Read the official instructions on GitHub

Key features

• Creative foundationBefore layout code, the agent picks one of four identities: Editorial Brutalism, Organic Fluidity, Cyber and Technical, or Cinematic Pacing.
• Entry sequenceA preloader handles asset resolution and leaves with a split-door reveal, a scale-up zoom or a staggered text sweep.
• Hero architectureFull-bleed 100vh or 100dvh containers, words or characters wrapped for cascading entrances, and floating elements or clipping paths for depth.
• Reactive navigationSticky headers hide on scroll down and reveal on scroll up, and hover states can show rich content such as mega-menus with image previews.
• Scroll-driven narrativesGSAP ScrollTrigger ties motion to progress with pinned containers, horizontal journeys and parallax at different speeds per layer.
• Cursor micro-interactionsMagnetic buttons pull toward the pointer, custom cursors follow with lerp smoothing, and transforms give hover states weight.
• Fluid typographyHeadlines use clamp() sizing up to 12vw while body copy stays at 16px to 18px minimum.
• Texture and glassNoise overlays with mix-blend-mode overlay at 0.02 to 0.05 opacity add grain, and backdrop-filter blur with thin borders adds frosted depth.
• Performance rulesOnly transform and opacity animate, and width, height, top and margin animation is to be avoided. Related: fixing-motion-performance.
• Library choicesReact and Next.js targets get Framer Motion, Lenis and React Three Fiber. Vanilla, HTML and Astro targets get GSAP, Lenis via CDN and SplitType.

Frequently asked questions