top-design

Solid

Create award-winning, immersive web experiences at the level of Awwwards-featured agencies. Use when the user mentions "premium website", "portfolio site", "scroll animations", "Awwwards quality", "brand experience", "cinematic web design", "parallax storytelling", or "agency-quality site". Also trigger when building landing pages that need to impress, designing creative portfolios, or elevating a standard website to a memorable digital experience. Covers dramatic typography, purposeful motion, scroll-based composition, and performance-optimized animation. For foundational UI, see refactoring-ui. For type selection, see web-typography.

Web & Frontend 1,295 stars 135 forks Updated yesterday MIT

Install

View on GitHub

Quality Score: 96/100

Stars 20%
100
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# Top-Design: Award-Winning Digital Experiences Create websites and applications at the level of world-class digital agencies. This skill embodies the craft of studios that consistently win FWA, Awwwards, CSS Design Awards, and Webby Awards. ## Core Principle **Every pixel is intentional -- nothing default, nothing accidental.** The agencies you are emulating -- Locomotive, Studio Freight, AREA 17, Active Theory, Hello Monday -- share a common DNA: typography IS the design, motion creates emotion, white space is a weapon, and performance is non-negotiable (60fps or nothing). **The foundation:** The gap between 8/10 and 10/10 is not skill -- it is intention. An 8/10 has good typography and smooth animations; a 10/10 has typography that makes you gasp and animations that tell stories. Every decision must answer: "Does this serve the experience, or is it just filling space?" ## Scoring **Goal: 10/10.** Rate any digital experience 0-10 using the rubric below -- a 10/10 would be featured on Awwwards. Always state the current score and the specific improvements needed to reach 10/10. ### Scoring Rubric | Score | Level | Description | |-------|-------|-------------| | **0-2** | Amateur | Default fonts, no hierarchy, generic layout, template feel | | **3-4** | Basic | Decent typography, some hierarchy, but forgettable | | **5-6** | Competent | Good fundamentals, clean execution, but lacks soul | | **7-8** | Professional | Strong typography, intentional motion, clear POV | | *...

Details

Author
wondelai
Repository
wondelai/skills
Created
4 months ago
Last Updated
yesterday
Language
Shell
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category