top-design

Evaluate digital interfaces against a 10-point design rubric.

Updated Jul 31, 2026
One-click install
npx skills add https://github.com/fsolla/teqo --skill top-design-fsolla
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: top-design
Source: https://github.com/fsolla/teqo/tree/main/.agents/skills/top-design
Command: npx skills add https://github.com/fsolla/teqo --skill top-design-fsolla

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill bridges the gap between standard web development and world-class, Awwwards-featured digital experiences by providing a rigorous framework for design intention, motion, and typographic architecture.

Core Features & Use Cases

  • Design Scoring & Rubric: Evaluate any digital interface against a 10-point scale used by top-tier agencies.
  • Seven Pillars of Craft: Implement expert-level typography, layout, motion, color, scroll-based storytelling, performance, and micro-interactions.
  • Use Case: When building a high-impact portfolio or brand landing page, use this skill to transform a generic layout into a memorable, cinematic experience with purposeful motion and dramatic typographic hierarchy.

Quick Start

Use the top-design skill to evaluate my current landing page design and provide specific, actionable improvements to reach a 10/10 score.

Frequently Asked Questions about top-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I evaluate my web design against award-winning standards?

To evaluate web design against award-winning standards, apply a 10-point scoring rubric assessing typography, layout, motion, color, scroll-based storytelling, performance, and micro-interactions to identify specific areas for cinematic improvement.

What makes a portfolio site feel like an immersive web experience?

An immersive web experience relies on purposeful motion, dramatic typographic hierarchy, GPU-accelerated animations, custom easing, and scroll-based storytelling to transform a generic portfolio layout into a memorable, cinematic journey.

How do I optimize typography for high-performance landing pages?

Optimize typography for high-performance landing pages by implementing performance-optimized typographic architecture that ensures GPU-accelerated rendering and maintains world-class aesthetic standards without compromising load speed.

Can I use this design framework for brand landing pages and web applications?

Yes, this design framework applies directly to building high-impact brand landing pages, immersive web applications, and portfolio sites requiring world-class aesthetic, interaction, and motion standards.

What are the core principles of Awwwards-level web design?

Awwwards-level web design requires mastering seven pillars of craft: expert typography, layout, motion, color, scroll-based storytelling, performance optimization, and micro-interactions to achieve rigorous design intention.

How do I add micro-interactions and custom easing to a digital interface?

Add micro-interactions and custom easing to a digital interface by applying a rigorous motion framework that utilizes GPU-accelerated animations to create purposeful, cinematic user experiences.