skills.rest
emiltsokov
emiltsokovCOMMUNITY
Explore all skills by this author →
GitHub

top-design

Codify typography, layout, motion, color, and performance guidelines for web design systems.

Updated Feb 20, 2026
Search Tags:#typography#design#performance#accessibility#layout#motion#web-design
One-click install
npx skills add https://github.com/emiltsokov/weeklyvaibe --skill top-design-emiltsokov
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: top-design
Source: https://github.com/emiltsokov/weeklyvaibe/tree/main/.agents/skills/top-design
Command: npx skills add https://github.com/emiltsokov/weeklyvaibe --skill top-design-emiltsokov

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provide a structured, end-to-end design framework that helps teams deliver award-winning, studio-grade web experiences with consistent typography, motion, layout, and accessibility across projects.

Core Features & Use Cases

  • Premium typography systems and scale rules to achieve dramatic visual hierarchy.
  • Robust layout and composition guidelines enabling asymmetric, high-tidelity designs.
  • Motion, color, and scroll-based design patterns that produce cohesive user experiences.
  • Performance and accessibility constraints baked into the workflow for reliable delivery.
  • Use cases include portfolio sites, brand websites, editorial layouts, and cultural/cinematic storytelling experiences.

Quick Start

Review the seven pillars and begin applying the typography, motion, and layout patterns to a sample project.

Frequently Asked Questions about top-design

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

FAQPage Schema
How do I build a premium web design system with scalable typography and motion guidelines?▼

To build a premium web design system, codify typography, layout, motion, color, and performance guidelines into scalable tokens. This framework enforces a seven-pillar methodology to deliver studio-grade web experiences with consistent, accessible interactions.

What's the best way to structure an award-winning design system for portfolio and editorial sites?▼

The best way to structure an award-winning design system is applying a seven-pillar methodology covering typography, layout, motion, color, scroll-based design, performance, and micro-interactions tailored for portfolio, brand, and editorial projects.

How does performance and accessibility factor into high-fidelity web design systems?▼

Performance and accessibility constraints are baked directly into the design workflow, ensuring reliable delivery of high-fidelity web experiences while maintaining accessible interactions and performant scroll-based design patterns.

Can I use this design framework for asymmetric layouts and cinematic storytelling?▼

Yes, you can apply this design framework to asymmetric layouts and cinematic storytelling. It provides robust composition guidelines and scroll-based design patterns that produce cohesive user experiences for cultural and editorial projects.

Do I need specific dependencies to implement scalable design tokens for web experiences?▼

No specific dependencies are required to implement scalable design tokens. The framework operates independently, allowing you to codify typography, layout, and motion guidelines directly into your premium web experiences without external tool restrictions.

Related Skills

Explore More Design & Creative Skills→
MuccariniMuccarini

teach-impeccable

Scan project assets and write design context to .impeccable.md.

Community
Advanced
SylphxAISylphxAI
4

uiux

Generate design system documentation with tokens and WCAG AA accessibility criteria.

Official
Basic
The-Skyy-Rose-Collection-LLCThe-Skyy-Rose-Collection-LLC
3

Interactive Web Development

Build interactive web experiences with JavaScript frameworks and animation libraries.

Official
Advanced
JoaquimCassanoJoaquimCassano
1

frontend-design

Create production-grade frontend interfaces with distinctive aesthetics and accessibility.

Community
Advanced