gpt-taste

Generate Next.js landing pages with AIDA structure and GSAP ScrollTrigger motion.

Updated Apr 24, 2026
One-click install
npx skills add https://github.com/otto-poblysh/pedagemy-early-access --skill gpt-taste-otto-poblysh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gpt-taste
Source: https://github.com/otto-poblysh/pedagemy-early-access/tree/main/.agents/skills/gpt-taste
Command: npx skills add https://github.com/otto-poblysh/pedagemy-early-access --skill gpt-taste-otto-poblysh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents generic, cramped, and visually inconsistent UI output by enforcing elite layout rules, typographic discipline, and motion-first GSAP behavior.

Core Features & Use Cases

  • Python-driven deterministic variation: Selects a Hero architecture, typography stack, component set, and GSAP paradigms via simulated true-randomization to avoid repetitive layouts.
  • AIDA structure with cinematic spacing: Guarantees Navigation, Attention (Hero), Interest (Bento), Desire (GSAP), and Action (Footer) with large chapter-like vertical padding.
  • Mathematically gapless motion layout: Enforces wide H1 constraints (never 4–6 lines) and dense, gapless bento grids using grid-flow-dense with interlocking spans.

Quick Start

Ask the AI to generate a Next.js landing page section set that follows the gpt-taste rules for AIDA structure, wide two-to-three-line hero typography, gapless bento grids, and GSAP ScrollTrigger pinning and scrubbing reveals.

Frequently Asked Questions about gpt-taste

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

FAQPage Schema
How do I build a Next.js landing page with GSAP ScrollTrigger pinning and scrubbing?▼

Build a Next.js landing page with GSAP ScrollTrigger by applying AIDA-structured sections with cinematic spacing, enforcing wide two-to-three-line hero typography, and using ScrollTrigger pinning, stacking, fading, and scrubbing for premium interactive behaviors.

What's the best way to prevent cramped UI layouts and generic component designs?▼

Prevent cramped UI layouts by enforcing elite layout rules with mathematically gapless bento grids using `grid-flow-dense` interlocking spans, wide H1 constraints to avoid four-to-six line breaks, and deterministic layout variation to break common design defaults.

How do I create gapless bento grid compositions in Next.js?▼

Create gapless bento grid compositions by applying CSS `grid-flow-dense` with interlocking spans to ensure dense, visually consistent component systems without empty grid gaps or layout misalignments.

Does this approach support deterministic layout variation for marketing-grade pages?▼

Deterministic layout variation for marketing-grade pages is supported via simulated true-randomization that selects a Hero architecture, typography stack, component set, and GSAP paradigms to avoid repetitive layouts across premium landing pages.

Can I use GSAP motion with AIDA structure for landing page design?▼

Use GSAP motion with AIDA structure by mapping Navigation, Attention (Hero), Interest (Bento), Desire (GSAP), and Action (Footer) sections with large chapter-like vertical padding and ScrollTrigger reveals for marketing-grade experiences.

Why does my hero typography break into too many lines on wide layouts?▼

Hero typography breaks into too many lines when wide H1 constraints are not enforced, resulting in four-to-six line flows instead of the intended two-to-three-line wide flow required for premium AIDA-structured hero sections.