gpt-taste

Designs cinematic landing pages with GSAP ScrollTrigger motion and bento layouts.

Updated Jan 30, 2026
One-click install
npx skills add https://github.com/Rayzerrek/dotfiles --skill gpt-taste-rayzerrek
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: gpt-taste
Source: https://github.com/Rayzerrek/dotfiles/tree/main/.pi/agent/skills/gpt-taste
Command: npx skills add https://github.com/Rayzerrek/dotfiles --skill gpt-taste-rayzerrek

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps create sophisticated frontend experiences that avoid generic layouts, cramped typography, weak visual hierarchy, and static interactions.

Core Features & Use Cases

  • AIDA Page Structure: Organizes pages into clear attention, interest, desire, and action sections for premium landing pages.
  • Advanced Motion Direction: Specifies GSAP ScrollTrigger pinning, scrubbing, stacking, and hover physics for rich interactive storytelling.
  • High-End Layout Engineering: Enforces wide hero containers, dense bento grids, large section spacing, and visually balanced composition.
  • Use Case: Use it when designing a product marketing page, portfolio showcase, or editorial-style interface that needs cinematic spacing and polished motion.

Quick Start

Ask for a premium landing page concept with a wide hero, dense bento section, GSAP scroll effects, and strong visual contrast.

Frequently Asked Questions about gpt-taste

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

FAQPage Schema
How do I design a premium landing page with bento grid layouts and GSAP ScrollTrigger interactions?

Design a premium landing page by applying AIDA structure, dense bento grid packing, and GSAP ScrollTrigger interactions for pinning and scrubbing. This enforces wide hero containers, high-contrast buttons, and cinematic spacing to avoid generic static layouts.

What's the best way to structure a product marketing page for cinematic visual hierarchy?

Structure a product marketing page using AIDA sections: attention, interest, desire, and action. This approach ensures precise spacing, large section gaps, and visually balanced composition, establishing a cinematic hierarchy that guides user focus effectively.

How does GSAP ScrollTrigger work for bento grid stacking on frontend landing pages?

GSAP ScrollTrigger works for bento grids by specifying pinning, scrubbing, and stacking interactions. It creates rich interactive storytelling through scroll-driven animations, ensuring dense grid packing without empty gaps or spam labels.

Can I use frontend design components for editorial experiences with this AIDA layout approach?

You can use this approach for editorial experiences, product showcases, and portfolio designs. It applies deterministic layout selection to enforce wide H1 containers, disciplined asset treatment, and visually varied hero compositions suited for editorial content.

Why does my frontend landing page layout have weak visual hierarchy and cramped typography?

Your landing page has weak visual hierarchy and cramped typography due to generic layouts lacking precise spacing. Applying deterministic layout selection with wide hero containers and large section spacing resolves these visual imbalance issues.