skills.rest
miyake-san
miyake-sanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

premium-frontend-ui

Generates immersive frontend UI code with scroll-driven animations, fluid typography, and performance guardrails.

Updated Aug 28, 2026
Search Tags:#typography#landing page#frontend#web design#animation#gsap#framer-motion
One-click install
npx skills add https://github.com/miyake-san/sogo-agent-platform --skill premium-frontend-ui-miyake-san
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: premium-frontend-ui
Source: https://github.com/miyake-san/sogo-agent-platform/tree/main/skills/core/premium-frontend-ui
Command: npx skills add https://github.com/miyake-san/sogo-agent-platform --skill premium-frontend-ui-miyake-san

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Standard AI-generated frontend code often produces generic, static pages lacking visual identity, motion design, and performance discipline. This Skill guides the AI to architect immersive, award-level web experiences with intentional aesthetics, scroll-driven narratives, and strict rendering performance. ## Core Features & Use Cases - Motion Design System: Implements scroll-driven animations with GSAP ScrollTrigger, pinned sections, parallax mapping, magnetic buttons, and custom lerped cursors. - Typography & Visual Texture: Enforces fluid type scales with clamp(), premium variable fonts, noise overlays, and frosted-glass effects using backdrop-filter. - Performance Guardrails: Restricts animations to composited transform/opacity properties, applies prefers-reduced-motion and pointer-fine media queries for accessibility and touch devices. - Use Case: When asked to build an Awwwards-style landing page or interactive portfolio, the Skill produces a Next.js page with Framer Motion transitions, Lenis smooth scrolling, and staggered hero typography reveals. ## Quick Start Ask the AI to build a premium landing page with scroll-driven animations and immersive typography for your product.

Frequently Asked Questions about premium-frontend-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build an Awwwards-style landing page with AI?▼

Request a premium landing page and the Skill generates a full architecture: preloader with animated reveal, full-viewport hero with staggered typography, scroll-driven sections via GSAP ScrollTrigger, and magnetic micro-interactions, all with performance guardrails.

What animation libraries work best for scroll-driven websites?▼

GSAP with ScrollTrigger handles timeline sequencing and pinned sections for vanilla or Astro projects. For React and Next.js, Framer Motion covers layout transitions and spring physics, while Lenis provides smooth scrolling in both ecosystems.

Can I use Framer Motion with Next.js for page transitions?▼

Yes, the Skill recommends Framer Motion for React and Next.js targets to handle layout transitions and spring physics. It pairs with Lenis for smooth scroll context and React Three Fiber when 3D or WebGL interactions are requested.

Why do CSS animations cause jank and stuttering?▼

Animating layout properties like width, height, top, or margin triggers expensive layout recalculations. The Skill restricts animations to composited transform and opacity properties and applies will-change selectively to keep rendering on the GPU.

How do I make heavy animations accessible for all users?▼

Wrap continuous animations in a prefers-reduced-motion media query so users who opt out see static content. Gate custom cursors and hover effects behind hover and pointer-fine media queries to preserve touch device performance.

Related Skills

Explore More Design & Creative Skills→
s0613s0613
1

sj-design

Generates three on-brand wireframe HTML design variants from reference URLs or brand design systems.

Community
Advanced
gwpjpgwpjp
3

visual-qa-lighthouse

Audit production web apps with Lighthouse CLI and generate JSON performance reports.

Community
Advanced
HakiickHakiick

responsive-tester

Validate responsive design across mobile, tablet, and desktop viewports with Playwright.

Community
Intermediate
HouseGarofaloHouseGarofalo
3

tailwind-ui

Guide Tailwind CSS utility-first styling for responsive web UI development.

Official
Intermediate