Does this skill work with specific CSS frameworks?

Yes, Top-Design provides implementation patterns applicable to Tailwind CSS, Framer Motion, GSAP, and standard CSS, focusing on the underlying principles of motion and composition.

What is a 10/10 design according to this skill?

A 10/10 design represents world-class craftsmanship that defines new standards, featuring 'gasp-worthy' typography, signature motion moments, and intentional visual tension that would qualify for Site of the Day awards.

Can I use this for standard SaaS or B2B applications?

Absolutely. While it excels at immersive brand sites, applying the Top-Design rubric to SaaS apps helps create a more premium, high-end feel that differentiates the product from generic competitors.

How does Top-Design improve my website's typography?

It implements 'Typography as Architecture,' focusing on dramatic scale ratios (at least 10:1), negative tracking for display type, and the use of premium foundries or high-quality variable fonts.

Top-Design

Name: Top-Design
Author: wondelai

bywondelai

•

214

•

Design Tools

Creates award-winning, immersive web experiences following the craftsmanship standards of world-class digital agencies like Locomotive and Studio Freight.

Top-Design is a specialized Claude Code skill that elevates frontend development from functional to world-class. It provides a rigorous framework for creating digital experiences that meet the standards of Awwwards, FWA, and CSS Design Awards. The skill uses a detailed 10-point scoring rubric to evaluate and improve typography, motion choreography, and visual composition. By focusing on 'typography as architecture' and purposeful motion, it helps developers implement dramatic scale, custom easing curves, and intentional grid-breaking to create memorable, high-performance brand experiences.

Key Features

01214 GitHub stars

02Motion choreography system based on custom cubic-bezier easing and narrative flow

03Weighted 10/10 scoring system to audit and improve design craftsmanship

04Performance-focused animation patterns optimized for 60fps interactions

05Advanced layout strategies for intentional grid-breaking and asymmetric tension

06Architectural typography guidance using dramatic scale contrast and premium pairings

Use Cases

01Auditing existing UI/UX against high-end agency standards for premium brand experiences

02Transforming a standard React or Next.js portfolio into an award-winning immersive site

03Implementing complex scroll-based storytelling and orchestrated animation sequences

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add wondelai/skills top-design

For use in Claude.ai and ChatGPT

Download Skill