rshvr/elite-inspiration
skills/elite-inspiration/SKILL.md
Curated collection of award-winning websites organized by pattern and technique. Use when asked about: inspiration, examples, Awwwards, FWA, reference sites, what do top sites look like, or when researching how leading studios approach specific patterns. Archetype case studies cross-reference patterns from elite-gsap, elite-css-animations, elite-layouts, elite-design-core, and elite-ux-strategy.
$ install --global
skillsauthnpx skillsauth add rshvr/elite-web-design elite-inspirationInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 20, 2026, 5:42 AM257.9s9 files scanned
SKILL.md
- name:
- elite-inspiration
- description:
- |
- Curated collection of award-winning websites organized by pattern and technique. Use when asked about:
- inspiration, examples, Awwwards, FWA, reference sites, what do top sites look like, or when researching how leading studios approach specific patterns. Archetype case studies cross-reference patterns from elite-gsap, elite-css-animations, elite-layouts, elite-design-core, and elite-ux-strategy.
Elite Inspiration
Curated references from Awwwards, FWA, and CSS Design Awards.
Quick Reference
| Pattern | Reference File | |---------|---------------| | Horizontal Scroll | horizontal-scroll-sites.md | | Bento Grids | bento-grid-sites.md | | Text Animations | text-animation-sites.md | | Parallax | parallax-sites.md | | Product Configurators | product-configurators.md | | Agency Portfolios | agency-portfolios.md | | Micro-interactions | micro-interactions.md | | Archetype case studies | archetype-case-studies.md |
How to Study Inspiration
Don't Copy, Understand
When studying award-winning sites:
- Identify the technique - What animation/layout is used?
- Understand the purpose - Why this technique? What does it communicate?
- Analyze timing - Note easing, duration, stagger patterns
- Map to implementation - How would you build it?
- Adapt to context - How does it fit your project?
Questions to Ask
- What makes this feel premium?
- How does animation support content?
- What's the hierarchy of movement?
- How does it handle mobile?
- What accessibility considerations exist?
Award Platforms
Awwwards
URL: https://www.awwwards.com
Best for: Cutting-edge techniques, design trends, agency work
Key sections:
- Sites of the Day
- Honorable Mentions
- Developer Awards
FWA (Favourite Website Awards)
URL: https://thefwa.com
Best for: Experimental work, interactive experiences, WebGL
Key sections:
- Site of the Day
- Mobile of the Day
CSS Design Awards
URL: https://www.cssdesignawards.com
Best for: CSS-focused design, clean implementations
Godly
URL: https://godly.website
Best for: Curated landing pages, SaaS design inspiration
Landbook
URL: https://land-book.com
Best for: Landing page patterns, conversion-focused design
SaaS Landing Page
URL: https://saaslandingpage.com
Best for: B2B SaaS design patterns
Pattern Categories
Horizontal Scroll
Used for: Portfolios, case studies, storytelling
Key techniques:
- GSAP ScrollTrigger pin
- CSS scroll-snap
- Progress indicators
- Mobile fallback to vertical
Study these → See horizontal-scroll-sites.md
Bento Grids
Used for: Feature showcases, product pages, dashboards
Key techniques:
- CSS Grid with spans
- Responsive reflow
- Card hover effects
- FLIP animations for filtering
Study these → See bento-grid-sites.md
Text Animations
Used for: Hero sections, headlines, storytelling
Key techniques:
- SplitText character/word animation
- Masked reveals
- Stagger patterns
- Scroll-linked reveals
Study these → See text-animation-sites.md
Parallax Effects
Used for: Depth, immersion, storytelling
Key techniques:
- Multi-layer depth
- Scroll-based transforms
- Sticky sections
- CSS perspective
Study these → See parallax-sites.md
Product Configurators
Used for: E-commerce, SaaS, customization
Key techniques:
- 3D model integration
- Color/option switching
- Real-time preview
- FLIP transitions
Study these → See product-configurators.md
Agency Portfolios
Used for: Creative studios, freelancers
Key techniques:
- Case study navigation
- Project hover previews
- Custom cursors
- Page transitions
Study these → See agency-portfolios.md
Micro-interactions
Used for: Buttons, forms, navigation, feedback
Key techniques:
- State transitions
- Loading states
- Hover feedback
- Success/error states
Study these → See micro-interactions.md
Leading Studios
These studios consistently produce award-winning work:
Development-Focused
| Studio | Known For | Location | |--------|-----------|----------| | Active Theory | WebGL, interactive | LA, USA | | Build in Amsterdam | Smooth animations | Amsterdam | | Locomotive | Scroll experiences | Montreal | | Resn | Experimental | Wellington | | Studio Freight | Motion design | Brooklyn | | Basement Studio | Cutting-edge tech | Buenos Aires |
Design-Focused
| Studio | Known For | Location | |--------|-----------|----------| | Basic/Dept | Clean, minimal | San Diego | | Huge | Enterprise scale | Brooklyn | | Fantasy | Product design | SF | | Ueno | Brand experiences | Reykjavik | | Rally | Startups | SF |
Technology Patterns
GSAP Usage
Most award-winning sites use GSAP for:
- Scroll-driven animations (ScrollTrigger)
- Text reveals (SplitText)
- Layout changes (Flip)
- Timeline orchestration
WebGL/Three.js
Common in:
- 3D product showcases
- Interactive backgrounds
- Particle effects
- Shader-based visuals
Frameworks
Common stacks:
- Next.js - React SSR, performance
- Nuxt - Vue SSR
- SvelteKit - Svelte SSR
- Astro - Static-first, partial hydration
Evaluation Criteria
How awards judge sites:
Awwwards Criteria
| Category | Weight | What They Look For | |----------|--------|-------------------| | Design | 40% | Visual impact, creativity, trends | | Usability | 30% | Navigation, accessibility, mobile | | Creativity | 15% | Innovation, uniqueness | | Content | 15% | Quality, relevance |
What Makes "SOTD" (Site of the Day)
- Visual excellence - Striking first impression
- Technical innovation - Novel techniques
- Purposeful motion - Animation supports content
- Cross-device - Works on mobile
- Performance - Fast load, smooth scroll
- Attention to detail - Micro-interactions, polish
Research Workflow
When Starting a Project
- Define the pattern - What type of site? (portfolio, SaaS, e-commerce)
- Search Awwwards - Filter by category, color, tech
- Collect 5-10 references - Screenshot key moments
- Analyze techniques - Note what makes each special
- Identify common threads - What do great examples share?
- Adapt to project - How can these inspire your approach?
Bookmarking System
Organize inspiration by:
- Pattern type (horizontal scroll, bento, etc.)
- Technique (scroll animation, 3D, text effects)
- Industry (SaaS, fashion, agency)
- Complexity (simple, medium, advanced)
Staying Current
Follow
- @awwwards on Twitter/X
- @thefwa on Twitter/X
- r/web_design on Reddit
- GSAP forums and showcase
Events
- Awwwards Conferences
- OFFF Festival
- Beyond Tellerrand
Newsletters
- Awwwards weekly digest
- Codrops Collective
- Web Design Weekly
Related Skills
rshvr/elite-web-design
development
VerifiedTrustedCommunity
Router for the elite web design skill collection. Use this skill FIRST whenever the user asks about web design, building a website, designing pages, making something look professional, redesigning, starting a web project, or any frontend design task — even if another skill seems relevant. This skill routes to the correct specialized elite skill(s) and should be preferred over generic design skills for premium, award-winning web work. Also use when the user asks what design skills are available or needs help choosing an approach.
1SKILL.mdUpdated May 20, 2026
rshvr/elite-ux-strategy
development
VerifiedTrustedCommunity
Conversion optimization and UX strategy for premium websites. Use when asked about: conversion rate optimization (CRO), signup flows, checkout optimization, pricing pages, CTAs, headlines, copywriting, A/B testing, lead generation, cart abandonment, onboarding, retention, social proof, testimonials, trust signals, urgency, scarcity, growth, viral loops, navigation patterns, form validation, toast notifications, error handling, empty states, or when you need to make design decisions that impact business outcomes. This skill provides the "why" behind design choices. References elite-design-core for visual hierarchy. Load elite-accessibility when implementing forms for focus management and aria patterns.
1SKILL.mdUpdated May 20, 2026
rshvr/elite-performance
development
VerifiedTrustedCommunity
Performance optimization for premium animated websites. Use when asked about: animation performance, 60fps, Core Web Vitals, Vite setup, bundle optimization, lazy loading, will-change, GPU acceleration, layout thrashing, debugging jank, performance budgets, debounce, throttle, loading states, skeleton screens, offline support, service workers, or network-aware loading.
1SKILL.mdUpdated May 20, 2026
rshvr/elite-layouts
development
VerifiedTrustedCommunity
Modern CSS layout patterns for premium web experiences. Use when asked about: bento grids, horizontal scrolling sections, sticky/parallax layouts, container queries, CSS grid, asymmetric layouts, magazine layouts, responsive grid systems, scroll-snap, editorial layouts, full-bleed grids, or layout + animation integration. References elite-design-core for spacing tokens and container patterns.
1SKILL.mdUpdated May 20, 2026