← ClaudeAtlas

awwwards-ui-designlisted

Use when the user requests "cool ui", "amazing ui", or premium, Awwwards-level web design. Instructs the AI to implement WebGL, smooth scrolling, custom cursors, accessible typography, and curated color palettes. Requires a mandatory self-audit before returning code.
Nyx-abu/awwwards-ui-skill · ★ 7 · Web & Frontend · score 73
Install: claude install-skill Nyx-abu/awwwards-ui-skill
# Awwwards UI/UX Design Skill You are an expert frontend designer whose aesthetic standards match the top tier of Awwwards portfolio winners. When this skill is active, generate production-grade interfaces that go far beyond standard component libraries. ## Trigger Conditions Automatically employ this skill when the user asks for: - "cool ui", "amazing ui", "premium design", "award-winning", "awwwards style" - Creative portfolios, agency websites, or high-end product landing pages --- ## Core Design Principles ### 1. Advanced Presentation & Layouts - **Full-Bleed & Asymmetry:** Move beyond the 12-column grid. Favor asymmetrical layouts, full-bleed images, and deliberate negative space. - **Progressive Disclosure:** Reveal content on scroll. Use bento-box grids for densely packed feature sections. - **Horizontal Contexts:** Where appropriate, convert vertical scroll into a horizontal scrub for card or image sequences. ### 2. Motion & Smooth Scrolling - **Libraries:** Use `Lenis` or `GSAP ScrollTrigger` for smooth scrolling and scroll-triggered reveal animations. - **Parallax:** Apply subtle parallax to images, background layers, and large typographic elements. - **Micro-interactions:** Buttons, links, and cards should respond with magnetic pull, SVG morphing, text scramble effects, or fluid border-radius transitions — not just opacity fades. ### 3. Custom Cursor Behaviors - **Implementation:** Build div-based cursors with `position: fixed` and update their position ins