skills.rest
mngarcia
mngarciaCOMMUNITY
Explore all skills by this author →
GitHub

top-design

Optimize web design typography, layout, motion, color, and performance.

Updated Apr 5, 2026
Search Tags:#typography#performance#layout#web design#animation#Awwwards
One-click install
npx skills add https://github.com/mngarcia/spun-pages --skill top-design-mngarcia
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: top-design
Source: https://github.com/mngarcia/spun-pages/tree/main/.claude/skills/top-design
Command: npx skills add https://github.com/mngarcia/spun-pages --skill top-design-mngarcia

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pangram-pangram, dinamo, grilli-type, klim, commercial-type, space-grotesk, instrument-serif, fraunces, locomotive-scroll, three.js, gsap, lenis, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill empowers users to create web experiences that rival Awwwards-winning agencies, focusing on immersive design and user engagement.

Core Features & Use Cases

  • Advanced Typography: Incorporates typography as a design element, enhancing visual hierarchy and readability.
  • Dynamic Layouts: Utilizes asymmetry and white space to create tension and visual interest.
  • Engaging Motion: Animations and interactions designed to create emotional resonance and guide user attention.
  • Performance-Optimized: Ensures websites are both visually stunning and performant at 60fps.
  • Use Case: Ideal for web developers and designers looking to elevate standard websites into memorable digital experiences, particularly for premium websites, portfolios, and landing pages.

Quick Start

Use the top-design skill to style the homepage of your website with cinematic web design and optimized animations.

Frequently Asked Questions about top-design

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

FAQPage Schema
How do I create Awwwards-quality web design with smooth 60fps animations?▼

Awwwards-quality web design combines advanced typography, dynamic asymmetrical layouts, and motion libraries like GSAP and Lenis to create immersive experiences optimized for 60fps performance.

What is the best way to use typography as a design element in premium web layouts?▼

Using typography as a design element involves incorporating premium typefaces like Fraunces, Instrument Serif, and Space Grotesk to enhance visual hierarchy, readability, and tension within asymmetrical layouts.

Can I use Three.js and GSAP together for cinematic scroll animations on a portfolio site?▼

Yes, Three.js and GSAP can be combined with locomotive-scroll or Lenis to build cinematic scroll animations and micro-interactions that guide user attention and create emotional resonance.

Does building award-winning web experiences require optimizing three.js for performance?▼

Optimizing Three.js and GSAP animations is required to ensure visually stunning award-winning web experiences maintain smooth 60fps performance without degrading the user's browsing experience.

Why does my web animation performance drop below 60fps when using locomotive-scroll?▼

Animation performance drops below 60fps when heavy scroll events from libraries like locomotive-scroll are not properly synchronized with GSAP timelines, requiring performance optimization techniques.

Related Skills

Explore More Design & Creative Skills→
xavierfuentesxavierfuentes

humanize

Rewrite AI-generated text to match the user's writing style using stored patterns and writing samples.

Community
Basic
jangtrinhjangtrinh

performance-profiling

Run Lighthouse audits on web applications and analyze category scores.

Community
Intermediate
doanchienthangdevdoanchienthangdev
4

building-3d-graphics

Build 3D web scenes with Three.js and React Three Fiber.

Community
Advanced
fyunusafyunusa

scroll-reveal-libraries

Implement scroll-triggered animations with AOS data attributes.

Community
Basic