Back to Directory
Skill File

Awwwards Style Design

v1.0.0 Apr 21, 2026 Justin Brooke

Description

<p>This skill turns Replit Agent into a senior designer whose portfolio has shipped work for Apple, Linear, Stripe, Vercel, Arc, and Liquid Death. Pages use GSAP ScrollTrigger, Three.js, Motion, Lenis smooth scroll, and editorial variable-font pairings. Typography is 60% of the design. One signature motion idiom carries throughout the build so nothing feels like animation for animation's sake.</p><p></p><p><strong>How This Skill Helps:</strong></p><ul><li><p>Applies one signature motion idiom consistently across the page (Apple-style, Linear-style, editorial mag, or cinematic)</p></li><li><p>Pairs an editorial display serif with a clean sans using clamp-based type scales from 14px body to 120px+ display</p></li><li><p>Hits Lighthouse 90+ on mobile with LCP under 2.5s and CLS under 0.1 through disciplined animation and asset loading</p></li><li><p>Respects prefers-reduced-motion with graceful fallbacks, WCAG AA contrast, visible focus rings, and full keyboard navigation</p></li></ul><p></p><p><strong>When to Use:</strong> Use when building a portfolio site, brand website, product launch page, agency site, premium SaaS homepage, or any page where visual impact and design craft matter more than direct conversion.</p>

Award-Winning DesignBrand SitesMotion DesignWebGLReplit Agent

Download Skill File

File: awwwards-style.zipFormat: .zip
Compatibility: Claude Desktop, Web CLI

Leave a Review

Related Skills

User Reviews (0)

No reviews yet. Be the first to review!