What is the Top-Design Claude Code skill?

It is a specialized capability that guides Claude to create world-class web experiences matching the quality of award-winning digital agencies like Locomotive or Studio Freight.

How does Top-Design help with web animations?

It provides specific instructions for 'motion that tells stories,' focusing on custom cubic-bezier easing, orchestrated reveals, and performance-optimized, scroll-based composition.

Does this skill work with existing CSS frameworks?

Yes, it can be applied to any frontend stack, providing the design principles and CSS overrides needed to elevate standard UI components into premium experiences.

What is the 10/10 scoring rubric?

It is an internal evaluation system used by the skill to rate typography, composition, motion, color, and craft on a scale from 0 to 10, helping you reach 'world-class' status.

When should I trigger the Top-Design skill?

Use it whenever you mention keywords like 'premium website', 'portfolio site', 'Awwwards quality', or 'brand experience' to initiate high-level design guidance.

Top-Design: Premium Web Experiences

Name: Top-Design: Premium Web Experiences
Author: jeremylongshore

byjeremylongshore

•

1,844

•

Design Tools

Generates award-winning, immersive web experiences following high-end agency standards for typography, motion, and composition.

Top-Design transforms Claude into a world-class digital design director, enabling the creation of websites that meet the standards of elite platforms like Awwwards, FWA, and CSS Design Awards. It provides precise, opinionated guidance on architectural typography, purposeful motion choreography, and intentional layout composition to elevate projects from basic to world-class. This skill is essential for developers building premium portfolios, high-end brand experiences, or performance-optimized marketing sites where every pixel must feel deliberate.

Key Features

01Grid-breaking layout strategies that use white space and asymmetry to create visual tension.

021,844 GitHub stars

03Design scoring rubric (0-10) to evaluate and improve project quality against Awwwards standards.

04Architectural typography guidance focusing on dramatic scale contrast and premium font selection.

05Micro-interaction refinement for custom cursors, magnetic buttons, and branded states.

06Advanced motion choreography using custom cubic-bezier easing and orchestrated reveal patterns.

Use Cases

01Developing a high-end agency or personal portfolio that requires signature visual moments.

02Implementing complex, scroll-driven animations and choreographed page transitions.

03Refining a brand landing page to achieve 'Site of the Day' quality and professional polish.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jeremylongshore/claude-code-plugins-plus-skills top-design

For use in Claude.ai and ChatGPT

Key Features

01Grid-breaking layout strategies that use white space and asymmetry to create visual tension.

021,844 GitHub stars

03Design scoring rubric (0-10) to evaluate and improve project quality against Awwwards standards.

04Architectural typography guidance focusing on dramatic scale contrast and premium font selection.

05Micro-interaction refinement for custom cursors, magnetic buttons, and branded states.

06Advanced motion choreography using custom cubic-bezier easing and orchestrated reveal patterns.

Use Cases

01Developing a high-end agency or personal portfolio that requires signature visual moments.

02Implementing complex, scroll-driven animations and choreographed page transitions.

03Refining a brand landing page to achieve 'Site of the Day' quality and professional polish.