skills.rest
dnkrow
dnkrowCOMMUNITY
Explore all skills by this author →
GitHub

gpt-taste

Generate React/Tailwind landing pages with AIDA structure and GSAP ScrollTrigger motion.

1|Updated May 15, 2026
Search Tags:#typography#landing page#tailwind#gsap#scrolltrigger#bento grid#ui engineering
One-click install
npx skills add https://github.com/dnkrow/skill --skill gpt-taste-dnkrow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gpt-taste
Source: https://github.com/dnkrow/skill/tree/main/clairement/gpt-taste
Command: npx skills add https://github.com/dnkrow/skill --skill gpt-taste-dnkrow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It eliminates the tendency of generic prompts to produce cramped typography, broken bento grids, and weak motion by enforcing premium layout rules and GSAP-driven interaction patterns.

Core Features & Use Cases

  • Python-driven true randomization: Simulates deterministic layout/typography/animation selection so outputs don’t repeat the same default structure.
  • Strict AIDA page engineering: Forces Navigation (Attention/Interest/Desire/Action) with large cinematic spacing between major sections.
  • Gapless bento grids & hover physics: Uses dense grid packing and ensures every interactive card/image has responsive hover and reveal behavior.
  • Advanced GSAP Scroll choreography: Implements pinning, stacking, scrubbing text reveals, and scroll-driven image scaling/fading for consistently dynamic UI.

Quick Start

Tell the AI to generate a premium AIDA-structured landing page using the gpt-taste style rules, with gapless bento grid math and GSAP ScrollTrigger motion.

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 landing page with gapless bento grids and GSAP ScrollTrigger motion in React?▼

Build a landing page by applying grid-flow-dense gapless span math for bento grids and engineering GSAP ScrollTrigger for pinned sections, stacked cards, and scroll-scrubbed typography reveals within a React and Tailwind environment.

What is the best way to stop AI landing page generators from repeating the same default layout?▼

To stop repeated layouts, apply deterministic layout variation using seeded mock Python selection, which enforces true randomization of typography, grid structures, and animation patterns across page generations.

Can I use AIDA structure to organize a premium landing page with cinematic spacing?▼

Yes, you can structure a landing page using strict AIDA engineering by mapping Navigation to Attention, Interest, Desire, and Action, while enforcing large cinematic spacing between major sections.

Does GSAP ScrollTrigger work well for scroll-scrubbed typography reveals and pinned sections?▼

Yes, GSAP ScrollTrigger works for scroll-scrubbed typography reveals by implementing pinning, stacking, scrubbing text reveals, and scroll-driven image scaling and fading for dynamic UI interactions.

How do I enforce two-to-three-line H1 constraints and hover physics in Tailwind UI engineering?▼

Enforce two-to-three-line H1 constraints by applying strict typography rules, and implement hover physics by ensuring every interactive bento grid card and image has responsive reveal behavior.

Related Skills

Explore More Design & Creative Skills→
Aurora-AIAurora-AI
1

cinematographer

Transform static HTML into cinematic web experiences with GSAP, ScrollTrigger, and Lenis.

Community
Intermediate
PolliticalSolutionsPolliticalSolutions

gpt-taste

Generate React UI designs with GSAP ScrollTrigger motion and bento grids.

Community
Advanced
otto-poblyshotto-poblysh

gpt-taste

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

Community
Advanced
TMR1905TMR1905

scroll-animation

Implement scroll-driven animations using CSS, Intersection Observer, and GSAP ScrollTrigger.

Community
Intermediate