top-design_skill

Overview

This skill packages an award-winning web design framework inspired by elite studios like Locomotive, Studio Freight, and AREA 17. Use it to build premium portfolio and brand sites with dramatic typography, purposeful motion, and performance‑first animations. It guides scoring, concrete design rules, and implementation patterns to reach Awwwards‑level quality.

How this skill works

The skill inspects and scores designs across five weighted categories: Typography, Visual Composition, Motion & Interaction, Color & Atmosphere, and Details & Craft. It returns a numeric score (0–10), highlights category breakdowns, and supplies targeted improvements needed to reach a 10/10. It also prescribes concrete patterns: typography scales, grid/bleed rules, custom easing curves, scroll choreography, and accessibility guardrails.

When to use it

• Creating a premium portfolio or brand website that must feel editorial and crafted
• Designing immersive scroll‑based experiences with staged reveals and pinned storytelling
• Implementing large-scale, performance‑optimized typography and type animations
• Auditing a site to reach Awwwards or similar award standards
• Refining motion systems to be purposeful and maintain 60fps performance

Best practices

• Treat typography as architecture: extreme scale contrast (≥10:1), optical alignment, and controlled line breaks
• Design against a strong grid so you can break it intentionally; use white space to create tension
• Prototype motion early: custom easing, choreographed page load and scroll timelines, respect prefers‑reduced‑motion
• Optimize animations for performance: prefer transforms, limit paint/layout, aim for 60fps
• Keep accessibility and usability first: readable body sizes, WCAG contrast, clear navigation despite compositional choices

Example use cases

• Score and audit an existing site, returning a 0–10 rating plus step‑by‑step fixes to reach 10/10
• Build a viewport‑filling hero with variable‑font weight animation and staged reveal choreography
• Create an asymmetric portfolio grid with overlapping cards and mixed full‑bleed imagery
• Implement scroll‑triggered storytelling with pinned sections and progressive reveals using a smooth scroll library
• Design micro‑interactions: magnetic buttons, custom cursors, and hover weight shifts using GPU‑friendly transforms