top-design
Create award-winning, immersive web experiences at the level of Awwwards-featured agencies. Use when the user mentions "Awwwards quality", "make my site stunning", "scroll animations", "parallax storytelling", "cinematic web design", "portfolio site", or "brand experience". Also trigger when elevating a standard landing page into 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.
npx skills add wondelai/skills --skill top-design --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Creates immersive web experiences at the level of Awwwards-featured agencies, focusing on typography as design, purposeful motion, scroll-based composition, and performance-optimized animation. It guides scoring to push for 10/10 using a rubric spanning typography, visual composition, motion & interaction, color & atmosphere, and details & craft.
How it works
The skill emphasizes that every pixel is intentional, drawing inspiration from named studios. It defines a scoring rubric with 0-10 scale across five pillars and a weighted quick score formula. It prescribes prioritizing dramatic typography, layout rhythm, choreographed motion with custom easing, context-aware color systems, and scroll-based storytelling. It includes sections on typographic scale, grid discipline with intentional breaks, motion choreography with per-element timing, color strategy with a single strong accent, scroll-based design using smooth scrolling and pinning, performance constraints (font loading, image optimization, GPU-accelerated animations, CLS reduction, LCP under 2.5s), and micro-interactions including opt-in custom cursors. It references external guidance for typography, layout systems, animation patterns, technical stacks, and accessibility considerations, and it requires using the specified testing and optimization approaches (e.g., Lighthouse targets, IntersectionObserver for scroll reveals, GSAP ScrollTrigger for complex sequences).
When to use it
Use when the user mentions terms like "Awwwards quality", "make my site stunning", "scroll animations", "parallax storytelling", "cinematic web design", "portfolio site", or "brand experience". Also trigger when elevating a standard landing page into a memorable digital experience. It is applicable for foundational UI guidance, typography selection, and performance-focused UI craft.
What it can touch
It lists touchpoints around fonts (subset/ preload), images (WebP/AVIF, srcset, lazy-loading), and animation (transform/opacity only), along with intersection-based reveals and optional GSAP usage. It references and relies on tools like Lenis, Locomotive Scroll, and GSAP ScrollTrigger for scroll behaviors and performance-conscious animation sequencing. Deployment considerations include font-loading strategies, image optimization, and skeleton/loading states.
Caveats
Describes ethical boundaries for accessibility (prefers-reduced-motion, keyboard visibility) and warns against scroll hijacking. It notes that custom cursors are opt-in and must not degrade usability. It states the license as MIT and mentions the version 1.6.0 with author and repository details. It does not claim outcomes beyond the rubric and prescribed improvements to reach 10/10.
# 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 |
- Core Principle
- Scoring
- Scoring Rubric
- Category Scoring (Each 0-10)
- Quick Score Formula
- The Seven Pillars of 10/10 Design
- 1. Typography as Architecture
- 2. Layout & Composition
- 3. Motion & Animation
- 4. Color & Contrast
- 5. Scroll-Based Design
- 6. Performance & Loading
- 7. Micro-Interactions
- Design Process
What does the top-design skill do?
Create award-winning, immersive web experiences at the level of Awwwards-featured agencies. Use when the user mentions "Awwwards quality", "make my site stunning", "scroll animations", "parallax storytelling", "cinematic web design", "portfolio site", or "brand experience". Also trigger when elevating a standard landing page into 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.
How do I install it?
Run `npx skills add wondelai/skills --skill top-design --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From wondelai/skills, a repository with 1,835 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.