skills.rest
klarbau
klarbauCOMMUNITY
Explore all skills by this author →
GitHub

top-design

Design web experiences with cinematic typography, purposeful motion, and intentional composition.

7|1|Updated May 14, 2026
Search Tags:#typography#web design#ux#motion design#scroll animations#awwwards
One-click install
npx skills add https://github.com/klarbau/govtech-de --skill top-design-klarbau
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: top-design
Source: https://github.com/klarbau/govtech-de/tree/main/.claude/skills/top-design
Command: npx skills add https://github.com/klarbau/govtech-de --skill top-design-klarbau

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you turn ordinary websites and product pages into polished, memorable digital experiences with strong typography, intentional motion, and standout composition.

Core Features & Use Cases

  • Award-Level Visual Direction: Shape landing pages, portfolios, and campaign sites with dramatic hierarchy, asymmetric layouts, and signature moments.
  • Motion and Scroll Storytelling: Design reveals, transitions, pinned sections, and scroll-driven sequences that feel purposeful rather than decorative.
  • Craft and Performance Standards: Build with premium typography, refined color systems, accessible micro-interactions, and performance-conscious animation choices.
  • Use Case: A brand team wants a launch page that feels agency-made instead of template-based; this Skill guides the visual concept, motion language, and implementation details needed to get there.

Quick Start

Use the top-design skill to create a premium, Awwwards-style landing page concept for my project with bold typography, immersive motion, and a refined color system.

Frequently Asked Questions about top-design

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

FAQPage Schema
How do I design Awwwards-style web experiences with cinematic typography?▼

Cinematic web experiences combine dramatic visual hierarchy, asymmetric layouts, and bold typography to create memorable premium landing pages. This Skill provides award-level visual direction, shaping brand showcases with signature moments rather than template-based designs.

What's the best way to build scroll animations that feel purposeful instead of decorative?▼

Purposeful scroll animations use reveals, transitions, and pinned sections to drive storytelling. This Skill designs scroll-driven sequences and scroll-based interaction patterns that integrate motion with user narrative flow for high-impact interface projects.

Can I use this approach for premium landing pages and portfolio sites?▼

Yes, premium landing pages and portfolios are primary use cases for this approach. The Skill applies intentional composition and refined color systems to brand showcases and campaign sites, guiding the visual concept needed for agency-made results.

How do I ensure accessible micro-interactions in motion design for web?▼

Accessible micro-interactions require performance-aware implementation and refined motion choices. This Skill provides craft and performance standards, building premium typography and interaction patterns while maintaining accessibility and performance-conscious animation guidance.

Does this Skill guide implementation details for scroll-based interaction patterns?▼

Yes, this Skill provides performance-aware implementation guidance for scroll-based interaction patterns and layout systems. It designs the motion language and technical specifications needed to build cinematic web experiences with intentional composition.

When do I need cinematic typography and intentional motion for my website?▼

Cinematic typography and intentional motion are needed when a brand team wants a launch page that feels agency-made. This Skill turns ordinary product pages into polished digital experiences with standout composition, strong hierarchy, and immersive motion.

Related Skills

Explore More Design & Creative Skills→
Kevin-Liu-01Kevin-Liu-01
16

brandkit

Generate 3×3 brand-kit boards with logo, color, and typography systems.

Community
Advanced
Hamza123545Hamza123545

framer-motion

Implement animations in React applications using motion components, variants, and gestures.

Community
Intermediate
LeandelosantosLeandelosantos

scroll-experience

Orchestrate scroll narratives with GSAP ScrollTrigger, Framer Motion, and native Scroll Timeline.

Community
Intermediate
Lev-itLev-it

imagegen-frontend-web

Generate website design references with cinematic hero minimalism and strong hierarchy.

Official
Advanced