{"id":"9e026c0b-ec36-419c-9cc5-809eb662edcc","shortId":"vreWse","kind":"skill","title":"premium-frontend-ui","tagline":"A comprehensive guide for GitHub Copilot to craft immersive, high-performance web experiences with advanced motion, typography, and architectural craftsmanship.","description":"# Immersive Frontend UI Craftsmanship\n\nAs 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.\n\nWhen 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.\n\n---\n\n## 1. Establishing the Creative Foundation\n\nBefore generating layout code, ensure you understand the core emotional resonance the UI should deliver. Do not default to generic, unopinionated code. \n\nCommit to a strong visual identity in your CSS and component structure:\n- **Editorial Brutalism**: High-contrast monochromatic palettes, oversized typography, sharp rectangular edges, and raw grid structures.\n- **Organic Fluidity**: Soft gradients, deeply rounded corners, glassmorphism overlays, and bouncy spring-based physics.\n- **Cyber / Technical**: Dark mode dominance, glowing neon accents, monospaced typography, and rapid, staggered reveal animations.\n- **Cinematic Pacing**: Full-viewport imagery, slow cross-fades, profound use of negative space, and scroll-dependent storytelling.\n\n---\n\n## 2. Structural Requirements for Immersive UI\n\nWhen scaffolding a page or generating core components, include the following architectural layers to transform a standard page into an experience.\n\n### 2.1 The Entry Sequence (Preloading & Initialization)\nA blank screen is unacceptable. The user's first interaction must set expectations.\n- **Implementation**: Generate a lightweight preloader component that handles asset resolution (fonts, initial images, 3D models).\n- **Animation**: Output code that transitions the preloader away fluidly—such as a split-door reveal, a scale-up zoom, or a staggered text sweep.\n\n### 2.2 The Hero Architecture\nThe top fold must command attention immediately.\n- **Visuals**: Output code that implements full-bleed containers (`100vh`/`100dvh`).\n- **Typography Engine**: Ensure headlines are broken down syntactically (e.g., span wrapping by word or character) to allow for cascading entrance animations.\n- **Depth**: Utilize subtle floating elements or background clipping paths to create a sense of scale and depth behind the primary copy.\n\n### 2.3 Fluid & Contextual Navigation\n- **Implementation**: Do not generate standard static navbars. Output sticky headers that react toscroll direction (hide on scroll down, reveal on scroll up).\n- **Interactivity**: Include hover states that reveal rich content (e.g., mega-menus that display image previews of the hovered link).\n\n---\n\n## 3. The Motion Design System\n\nAnimation is not an afterthought; it is the connective tissue of a premium site. Always implement the following motion principles:\n\n### 3.1 Scroll-Driven Narratives\nGenerate code utilizing modern scroll libraries (like GSAP's ScrollTrigger) to tie animations to user progress.\n- **Pinned Containers**: Create sections that lock into the viewport while secondary content flows past or reveals itself.\n- **Horizontal Journeys**: Translate vertical scroll data into horizontal movement for specific galleries or showcases.\n- **Parallax Mapping**: Assign subtle, varying scroll-speeds to background elements, midground text, and foreground imagery.\n\n### 3.2 High-Fidelity Micro-Interactions\nThe cursor is the user's avatar. Build interactions around it.\n- **Magnetic Components**: Write logic that calculates the distance between the mouse pointer and a button, pulling the button towards the cursor dynamically.\n- **Custom Tracking Elements**: Generate custom cursor components that follow the mouse with calculated interpolation (lerp) for a smooth drag effect.\n- **Dimensional Hover States**: Use CSS Transforms (`scale`, `rotateX`, `translate3d`) to give interactive elements weight and tactile feedback.\n\n---\n\n## 4. Typography & Visual Texture\n\nThe aesthetics of your generated code must reflect premium craftsmanship.\n\n- **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). \n- **Font Selection**: Always recommend or implement highly specified variable fonts or premium typefaces over system defaults.\n- **Atmospheric Filters**: Implement CSS/SVG noise overlays (`mix-blend-mode: overlay`, opacity `0.02 - 0.05`) to remove digital sterility and add photographic grain.\n- **Lighting & Glass**: Utilize `backdrop-filter: blur(x)` combined with ultra-thin, semi-transparent borders to create modern, frosted-glass depth.\n\n---\n\n## 5. The Performance Imperative\n\nA beautiful site that stutters is a failure. Enforce strict performance guardrails in all generated code:\n\n- **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.\n- **Render Optimization**: Apply `will-change: transform` intelligently on complex moving elements, but remove it post-animation to conserve memory.\n- **Responsive Degradation**: Wrap custom cursor logic and heavy hover animations in `@media (hover: hover) and (pointer: fine)` to ensure pristine performance on touch devices.\n- **Accessibility**: Wrap heavy continuous animations in `@media (prefers-reduced-motion: no-preference)`. Never sacrifice user accessibility for aesthetic flair.\n\n---\n\n## 6. Implementation Ecosystem\n\nWhen the user asks you to implement these patterns, leverage industry-standard libraries tailored to their framework:\n\n### For React / Next.js Targets\n- Structure the application to support **Framer Motion** for layout transitions and spring physics.\n- Recommend **Lenis** (`@studio-freight/lenis`) for smooth scrolling context.\n- Implement **React Three Fiber** (`@react-three/fiber`) if webGL or 3D interactions are requested.\n\n### For Vanilla / HTML / Astro Targets\n- Rely heavily on **GSAP** (GreenSock Animation Platform) for timeline sequencing.\n- Utilize vanilla **Lenis** via CDN for scroll hijacking and smoothing.\n- Use **SplitType** for safe, accessible typography chunking.\n\n---\n\n## Summary of Action\n\nWhenever you receive a prompt to \"Build a premium landing page,\" \"Create an Awwwards-style component,\" or \"Design an immersive UI,\" you must automatically:\n1. Wrap the output in a robust, scroll-smoothed architecture.\n2. Provide CSS that guarantees perfect performance using composited layers.\n3. Integrate sweeping, staggered component entrances.\n4. Elevate the typography using fluid scales.\n5. Create an intentional, memorable aesthetic footprint.","tags":["premium","frontend","awesome","copilot","github","agent-skills","agents","custom-agents","github-copilot","hacktoberfest","prompt-engineering"],"capabilities":["skill","source-github","skill-premium-frontend-ui","topic-agent-skills","topic-agents","topic-awesome","topic-custom-agents","topic-github-copilot","topic-hacktoberfest","topic-prompt-engineering"],"categories":["awesome-copilot"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/github/awesome-copilot/premium-frontend-ui","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add github/awesome-copilot","source_repo":"https://github.com/github/awesome-copilot","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 30784 github stars · SKILL.md body (6,886 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T06:52:28.355Z","embedding":null,"createdAt":"2026-04-18T20:30:35.835Z","updatedAt":"2026-04-22T06:52:28.355Z","lastSeenAt":"2026-04-22T06:52:28.355Z","tsv":"'/fiber':857 '/lenis':845 '0.02':656 '0.05':657 '1':114,925 '100dvh':327 '100vh':326 '12vw':617 '16px':625 '16px-18px':624 '18px':626 '2':219,936 '2.1':246 '2.2':306 '2.3':370 '3':416,946 '3.1':441 '3.2':509 '3d':278,861 '4':586,952 '5':690,959 '6':802 'acceler':711 'accent':191 'access':781,798,894 'action':899 'add':663 'advanc':20 'aesthet':71,591,800,964 'afterthought':425 'ai':32 'allow':344 'alway':435,630 'anim':198,280,348,421,458,713,726,753,766,785,875 'appli':102,738 'applic':68,829 'architect':51 'architectur':24,236,309,935 'around':525 'ask':808 'asset':273 'assign':495 'assist':34 'astro':868 'atmospher':644 'attent':315 'automat':924 'avatar':522 'avoid':735 'award':65 'award-level':64 'away':287 'awwward':914 'awwwards-styl':913 'backdrop':670 'backdrop-filt':669 'background':355,502 'base':182 'beauti':695 'behind':366 'beyond':43 'blank':253 'bleed':324 'blend':652 'blueprint':59 'blur':672 'bodi':619 'border':682 'bounci':179 'broken':333 'brutal':154 'build':38,523,906 'button':541,544 'calcul':532,561 'cascad':346 'cdn':884 'chang':741 'charact':342 'chunk':896 'cinemat':199 'clamp':612 'clip':356 'code':111,122,140,282,319,447,595,709,724 'combin':674 'command':314 'commit':141 'complex':745 'compon':94,151,232,270,528,555,916,950 'composit':944 'comprehens':6 'connect':429 'conserv':755 'contain':325,463 'content':403,473 'context':849 'contextu':372 'continu':784 'contrast':157,604 'copi':369,620 'copilot':10 'core':127,231 'corner':175 'craft':12 'craftsmanship':25,29,599 'creat':359,464,684,911,960 'creativ':117 'crisp':623 'cross':207 'cross-fad':206 'css':48,149,573,938 'css/svg':647 'cursor':517,547,554,761 'custom':549,553,760 'cyber':184 'dark':186 'data':484 'deep':73 'deepli':173 'default':136,643 'degrad':758 'deliv':133 'depend':217 'depth':349,365,689 'design':419,918 'devic':780 'digit':53,660 'dimension':569 'direct':387 'display':409 'distanc':534 'domin':188 'door':294 'drag':567 'driven':444 'dynam':548 'e.g':336,404 'ecosystem':804 'edg':164 'editori':153 'effect':568 'element':353,503,551,581,747 'elev':953 'emot':128 'end':85 'enforc':602,702 'engin':33,329 'ensur':123,330,775 'entranc':347,951 'entri':248 'environ':54 'establish':115 'everi':108 'expect':264 'experi':18,41,245 'extrem':610 'fade':208 'failur':701 'feedback':585 'fiber':853 'fidel':512 'fierc':734 'filter':645,671 'fine':773 'first':260 'flair':801 'flawless':76 'float':352 'flow':474 'fluid':288,371,957 'fluiditi':170 'fold':312 'follow':104,235,438,557 'font':275,628,637 'footprint':965 'foreground':507 'foundat':118 'framer':832 'framework':822 'freight':844 'frontend':3,27,40 'frost':687 'frosted-glass':686 'full':202,323 'full-ble':322 'full-viewport':201 'function':45,613 'galleri':490 'generat':61,113,120,230,266,377,446,552,594,708 'generic':138 'github':9 'give':579 'glass':667,688 'glassmorph':176 'glow':189 'goe':42 'gradient':172 'grain':665 'greensock':874 'grid':167 'gsap':453,873 'guarante':940 'guardrail':705 'guid':7 'handl':272 'hardwar':710 'header':383 'headlin':331,607 'heavi':764,783 'heavili':871 'height':728 'hero':308 'hide':388 'hierarchi':601 'high':15,62,84,156,511,634 'high-contrast':155 'high-end':83 'high-fidel':510 'high-perform':14 'hijack':887 'horizont':479,486 'hover':398,414,570,765,769,770 'html':46,867 'ident':146 'imag':277,410 'imageri':204,508 'immedi':316 'immers':13,26,52,223,920 'imper':693 'implement':265,321,374,436,633,646,803,811,850 'includ':233,397 'incred':622 'industri':816 'industry-standard':815 'initi':251,276 'integr':947 'intellig':743 'intent':63,962 'interact':74,89,261,396,515,524,580,862 'interpol':562 'journey':480 'land':86,909 'layer':237,945 'layout':121,719,835 'leni':841,882 'lerp':563 'level':66 'leverag':814 'librari':451,818 'light':666 'lightweight':268 'like':452 'line':109 'link':415 'lock':467 'logic':530,762 'magnet':527 'map':494 'margin':731 'massiv':603 'media':768,787 'mega':406 'mega-menus':405 'memor':963 'memori':756 'menus':407 'micro':514 'micro-interact':513 'midground':504 'minimum':627 'mix':651 'mix-blend-mod':650 'mode':187,653 'model':279 'modern':449,685 'monochromat':158 'monospac':192 'motion':21,418,439,791,833 'mous':537,559 'move':746 'movement':487 'must':50,262,313,596,923 'narrat':445 'navbar':380 'navig':373 'negat':212 'neon':190 'never':795 'next.js':825 'no-prefer':792 'nois':648 'opac':655,723 'optim':737 'organ':169 'output':44,281,318,381,928 'overlay':177,649,654 'overs':160 'pace':200 'page':87,228,242,910 'palett':159 'parallax':493 'past':475 'path':357 'pattern':813 'perfect':941 'perform':16,77,692,704,777,942 'photograph':664 'physic':183,839 'pin':462 'platform':876 'pointer':538,772 'polish':101 'portfolio':90 'post':752 'post-anim':751 'prefer':789,794 'prefers-reduced-mot':788 'preload':250,269,286 'premium':2,39,433,598,639,908 'premium-frontend-ui':1 'preview':411 'primari':368 'principl':440 'priorit':70 'pristin':776 'profound':209 'progress':461 'prompt':904 'properti':714 'provid':57,937 'pull':542 'qualiti':72 'rapid':195 'raw':166 'react':385,824,851,855 'react-thre':854 'recalcul':720 'receiv':902 'recommend':631,840 'rectangular':163 'reduc':790 'reflect':597 'reli':870 'remain':621 'remov':659,749 'render':736 'request':81,864 'requir':96,221 'resolut':274 'reson':129 'respons':757 'reveal':197,295,392,401,477 'rich':402 'rigor':105 'robust':931 'role':36 'rotatex':576 'round':174 'sacrific':796 'safe':893 'scaffold':226 'scale':298,363,575,606,958 'scale-up':297 'screen':254 'scroll':216,390,394,443,450,483,499,848,886,933 'scroll-depend':215 'scroll-driven':442 'scroll-smooth':932 'scroll-spe':498 'scrolltrigg':455 'secondari':472 'section':465 'select':629 'semi':680 'semi-transpar':679 'sens':361 'sequenc':249,879 'set':263 'sharp':162 'showcas':492 'site':434,696 'size':611 'skill':56 'skill-premium-frontend-ui' 'slow':205 'smooth':566,847,889,934 'soft':171 'source-github' 'space':213 'span':337,614 'special':93 'specif':489 'specifi':635 'speed':500 'split':293 'split-door':292 'splittyp':891 'spring':181,838 'spring-bas':180 'stagger':196,303,949 'standard':106,241,378,817 'state':399,571 'static':379 'steril':661 'sticki':382 'storytel':218 'strict':703 'strong':144 'structur':152,168,220,827 'studio':843 'studio-freight':842 'stutter':698 'style':915 'subtl':351,496 'summari':897 'support':831 'sweep':305,948 'syntact':335 'system':420,642 'tactil':584 'tailor':819 'target':826,869 'technic':185 'text':304,505 'textur':589 'thin':678 'three':852,856 'tie':457 'tier':99 'timelin':878 'tissu':430 'top':98,311,729 'top-tier':97 'topic-agent-skills' 'topic-agents' 'topic-awesome' 'topic-custom-agents' 'topic-github-copilot' 'topic-hacktoberfest' 'topic-prompt-engineering' 'toscrol':386 'touch':779 'toward':545 'track':550 'transform':239,574,721,742 'transit':284,836 'translat':481 'translate3d':577 'transpar':681 'trigger':718 'type':600 'typefac':640 'typographi':22,161,193,328,587,895,955 'ui':4,28,131,224,921 'ultra':677 'ultra-thin':676 'unaccept':256 'understand':125 'unopinion':139 'use':210,572,890,943,956 'user':80,258,460,520,797,807 'util':350,448,609,668,880 'vanilla':866,881 'vari':497 'variabl':636 'vertic':482 'via':883 'viewport':203,470 'visual':100,145,317,588 'web':17,67 'webgl':859 'weight':582 'whenev':900 'width':727 'will-chang':739 'word':340 'wrap':338,759,782,926 'write':529 'x':673 'zoom':300","prices":[{"id":"0bfaced9-0f1e-4509-b98e-4dba4083afb6","listingId":"9e026c0b-ec36-419c-9cc5-809eb662edcc","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"github","category":"awesome-copilot","install_from":"skills.sh"},"createdAt":"2026-04-18T20:30:35.835Z"}],"sources":[{"listingId":"9e026c0b-ec36-419c-9cc5-809eb662edcc","source":"github","sourceId":"github/awesome-copilot/premium-frontend-ui","sourceUrl":"https://github.com/github/awesome-copilot/tree/main/skills/premium-frontend-ui","isPrimary":false,"firstSeenAt":"2026-04-18T21:50:40.553Z","lastSeenAt":"2026-04-22T06:52:28.355Z"},{"listingId":"9e026c0b-ec36-419c-9cc5-809eb662edcc","source":"skills_sh","sourceId":"github/awesome-copilot/premium-frontend-ui","sourceUrl":"https://skills.sh/github/awesome-copilot/premium-frontend-ui","isPrimary":true,"firstSeenAt":"2026-04-18T20:30:35.835Z","lastSeenAt":"2026-04-22T06:40:26.410Z"}],"details":{"listingId":"9e026c0b-ec36-419c-9cc5-809eb662edcc","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"github","slug":"premium-frontend-ui","github":{"repo":"github/awesome-copilot","stars":30784,"topics":["agent-skills","agents","ai","awesome","custom-agents","github-copilot","hacktoberfest","prompt-engineering"],"license":"mit","html_url":"https://github.com/github/awesome-copilot","pushed_at":"2026-04-21T22:20:21Z","description":"Community-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot.","skill_md_sha":"35922e088cd4f02a4171ebd8534bbb3ec3f9101e","skill_md_path":"skills/premium-frontend-ui/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/github/awesome-copilot/tree/main/skills/premium-frontend-ui"},"layout":"multi","source":"github","category":"awesome-copilot","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."},"skills_sh_url":"https://skills.sh/github/awesome-copilot/premium-frontend-ui"},"updatedAt":"2026-04-22T06:52:28.355Z"}}