メニュー
A comprehensive guide for GitHub Copilot to craft immersive, high-performance web experiences with advanced motion, typography, and architectural craftsmanship.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use this skill when implementing or reviewing Harmoniarr backend work in ESM JavaScript: Express routes, metadata/library/system services, stores, PostgreSQL migrations, operation runs, maintenance locks, audit/activity events, schema snapshots, and startup wiring. Trigger for backend feature work, route changes, database persistence, background jobs, reconciliation, or any request that must follow Harmoniarr's modular service/store boundaries.
Use this skill when writing or reviewing Harmoniarr product copy, docs, route labels, test names, component names, or code identifiers for platform terminology. Trigger when work touches Discover, Home, artist detail, monitored artists, recommended artists, requests, wanted/desired state, release or track overrides, reconciliation, Activity, Background Jobs, or legacy seed/follow wording.
Use this skill when choosing, running, or explaining Harmoniarr validation for code changes. Trigger for test planning, deciding focused versus full validation, Vue/client changes, backend service or route changes, migrations, schema snapshots, Docker/local deployment checks, release evidence, CI failures, or any request to make a change with high confidence.
Harmoniarr-specific UI skill covering the design system, CSS tokens, component architecture, composable patterns, and layout conventions. Use when building or modifying any Vue component, view, style, or UI feature in Harmoniarr. Covers the --hx- design token system, theme switching, app shell layout, responsive breakpoints, and all CSS primitives.
Use this skill whenever the user wants to build scroll animations, scroll effects, parallax, scroll-triggered reveals, pinned sections, horizontal scroll, text animations, or any motion tied to scroll position — in vanilla JS, React, or Next.js. Covers GSAP ScrollTrigger (pinning, scrubbing, snapping, timelines, horizontal scroll, ScrollSmoother, matchMedia) and Framer Motion / Motion v12 (useScroll, useTransform, useSpring, whileInView, variants). Use this skill even if the user just says "animate on scroll", "fade in as I scroll", "make it scroll like Apple", "parallax effect", "sticky section", "scroll progress bar", or "entrance animation". Also triggers for Copilot prompt patterns for GSAP or Framer Motion code generation. Pairs with the premium-frontend-ui skill for creative philosophy and design-level polish.
Expert 10x engineer with comprehensive knowledge of web development, internet protocols, and web standards. Use when working with HTML, CSS, JavaScript, web APIs, HTTP/HTTPS, web security, performance optimization, accessibility, or any web/internet concepts. Specializes in translating web terminology accurately and implementing modern web standards across frontend and backend development.
| 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","github-path":"skills/premium-frontend-ui","github-ref":"refs/heads/main","github-repo":"https://github.com/github/awesome-copilot","github-tree-sha":"11ed1a3f37de027eaa81ed003541846491f6815c"} |
| name | premium-frontend-ui |
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.
Harmoniarr uses a dense ops-console aesthetic — not a marketing/landing-page style. When applying premium UI principles to this project:
.js imports in JS modules and <script setup> blocks.--hx- prefixed CSS custom properties from src/client/design-system.css. Never introduce hardcoded colors, spacing, or typography values.data-theme on <html>.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:
When scaffolding a page or generating core components, include the following architectural layers to transform a standard page into an experience.
A blank screen is unacceptable. The user's first interaction must set expectations.
The top fold must command attention immediately.
100vh/100dvh).Animation is not an afterthought; it is the connective tissue of a premium site. Always implement the following motion principles:
Generate code utilizing modern scroll libraries (like GSAP's ScrollTrigger) to tie animations to user progress.
The cursor is the user's avatar. Build interactions around it.
scale, rotateX, translate3d) to give interactive elements weight and tactile feedback.The aesthetics of your generated code must reflect premium craftsmanship.
clamp() functions spanning up to 12vw), while body copy remains incredibly crisp (16px-18px minimum).mix-blend-mode: overlay, opacity 0.02 - 0.05) to remove digital sterility and add photographic grain.backdrop-filter: blur(x) combined with ultra-thin, semi-transparent borders to create modern, frosted-glass depth.A beautiful site that stutters is a failure. Enforce strict performance guardrails in all generated code:
transform and opacity. Code that animates width, height, top, or margin should be fiercely avoided.will-change: transform intelligently on complex moving elements, but remove it post-animation to conserve memory.@media (hover: hover) and (pointer: fine) to ensure pristine performance on touch devices.@media (prefers-reduced-motion: no-preference). Never sacrifice user accessibility for aesthetic flair.When the user asks you to implement these patterns, leverage industry-standard libraries tailored to their framework:
@studio-freight/lenis) for smooth scrolling context.@react-three/fiber) if webGL or 3D interactions are requested.Whenever you receive a prompt to "Build a premium landing page," "Create an Awwwards-style component," or "Design an immersive UI," you must automatically: