skills.rest
trobias
trobiasCOMMUNITY
Explore all skills by this author →
Website𝕏@tobiasnwnGitHub

top-design

Create award-level web experiences with dramatic typography, custom motion, and scroll-based composition.

Updated Aug 28, 2026
Search Tags:#typography#web design#portfolio#motion design#gsap#scroll animation#awwwards
One-click install
npx skills add https://github.com/trobias/portfolio-nextjs-v2 --skill top-design-trobias
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: top-design
Source: https://github.com/trobias/portfolio-nextjs-v2/tree/main/.agents/skills/top-design
Command: npx skills add https://github.com/trobias/portfolio-nextjs-v2 --skill top-design-trobias

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Standard landing pages and portfolio sites often look generic and forgettable. This Skill provides a structured design methodology, scoring rubric, and implementation references to elevate a basic web page into an immersive, Awwwards-caliber digital experience. ## Core Features & Use Cases - Design Scoring Rubric: Rate any web experience 0-10 across typography, composition, motion, color, and craft, with concrete fixes for each gap. - Seven Design Pillars: Actionable guidance on typography as architecture, asymmetric layout, custom easing curves, signature color systems, scroll-based storytelling, performance budgets, and micro-interactions. - Implementation References: Copy-pasteable CSS/GSAP patterns for staggered reveals, magnetic buttons, smooth scrolling with Lenis, fluid type scales, and grid systems. - Use Case: A developer has a functional Next.js portfolio that feels template-like. Use this Skill to diagnose it against the rubric, define a signature moment, and implement choreographed page-load animations and dramatic display typography. ## Quick Start Redesign my portfolio hero section to award-winning standards with dramatic typography, custom easing animations, and a scroll-driven reveal sequence.

Frequently Asked Questions about top-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make my website look like an Awwwards winner?▼

Start with dramatic typography at 10:1 scale contrast, custom cubic-bezier easing on all animations, and one signature moment users will screenshot. Score your current design against the rubric across typography, composition, motion, color, and details, then fix the lowest categories first.

What fonts should I use for premium web design?▼

Avoid Inter, Roboto, Arial, and system fonts for hero experiences. Use premium foundry typefaces from Pangram Pangram, Dinamo, or Klim, or quality free alternatives like Space Grotesk, Instrument Serif, and Fraunces. Variable fonts enable weight animation on hover.

GSAP vs Motion for scroll animations in React?▼

GSAP with ScrollTrigger handles complex multi-step scroll sequences, pinning, and horizontal galleries. Motion (Framer Motion) suits declarative React components with whileInView reveals and layout animations. Both pair with Lenis for smooth scrolling.

How do I add smooth scrolling to my website?▼

Install Lenis and run its raf loop, then connect it to GSAP ScrollTrigger via lenis.on('scroll', ScrollTrigger.update). Lenis preserves native scroll accessibility while adding the weighted physical feel used by award-winning sites.

Why do my web animations feel cheap and mechanical?▼

Default easing curves like ease, ease-in-out, and linear instantly signal amateur work. Replace them with custom cubic-bezier curves such as cubic-bezier(0.16, 1, 0.3, 1), stagger element reveals instead of animating everything at once, and only animate transform and opacity for 60fps.

When should I avoid parallax and heavy scroll effects?▼

Never apply parallax to text or critical content, and never hijack scroll so users lose pacing control. Respect prefers-reduced-motion, keep all content reachable without animation, and cut any animation that drops below 60fps.

Related Skills

Explore More Design & Creative Skills→
Growth4U-systemsGrowth4U-systems

visual-identity

Generate logos and style guides from brand traits, colors, typography, and imagery style.

Official
Advanced
WesleySmitsWesleySmits
6

profiling-performance

Audit web performance with Lighthouse and Core Web Vitals metrics.

Community
Advanced
lexicalninjalexicalninja
2

accessibility-design-checker

Identify accessibility issues in UI designs, wireframes, and prototypes.

Community
Intermediate
snake-dev-teamsnake-dev-team

ck:ui-styling

Style React interfaces with shadcn/ui components and Tailwind CSS.

Official
Intermediate