← ClaudeAtlas

premium-frontend-uilisted

Premium frontend UI direction for immersive, high-performance web experiences with strong motion, typography, and visual systems. Use when building high-end landing pages, polished interactive components, or portfolio-style sites.
bg-szy/TOP-SKILLS · ★ 1 · Web & Frontend · score 70
Install: claude install-skill bg-szy/TOP-SKILLS
# Immersive Frontend UI Craftsmanship When building premium frontend experiences, your role 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. --- - Leverage native parallel subagent dispatch and 200k+ context windows where available. ## 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 Re