gpt-taste

Generates award-level React landing pages with GSAP animations, AIDA structure, and randomized layouts.

1|Updated Feb 22, 2026
One-click install
npx skills add https://github.com/TarunTeja44/portfolio --skill gpt-taste-tarunteja44
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: gpt-taste
Source: https://github.com/TarunTeja44/portfolio/tree/main/.agents/skills/gpt-tasteskill
Command: npx skills add https://github.com/TarunTeja44/portfolio --skill gpt-taste-tarunteja44

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? LLM-generated frontend code tends to repeat the same narrow layouts, produce headings that wrap into 4-6 lines, leave empty gaps in bento grids, and ship static pages without motion. This Skill enforces a rigorous design engineering process that breaks those defaults and produces varied, motion-rich, well-spaced landing pages. ## Core Features & Use Cases - Deterministic Layout Randomization: Simulates a Python RNG seeded by prompt length to select hero architectures, typography stacks, components, and GSAP paradigms so no two pages look alike. - Structural Design Rules: Enforces AIDA page structure, ultra-wide hero containers with a 2-3 line heading limit, gapless bento grids via grid-flow-dense, and massive section spacing. - Advanced GSAP Motion: Implements scroll pinning, scrubbing text reveals, image scale-and-fade effects, and card stacking with @gsap/react and ScrollTrigger. - Use Case: Ask for a landing page for a SaaS product and receive a complete React/Tailwind page with a cinematic hero, dense bento feature grid, pinned scroll sections, and a pre-flight design plan verifying layout math. ## Quick Start Ask the AI to build a landing page for your product using the gpt-taste skill and it will output a verified design plan followed by the full animated React code.

Frequently Asked Questions about gpt-taste

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

FAQPage Schema
How do I generate an animated landing page with GSAP and React?

Describe your product or page goal and the skill produces a full React page using @gsap/react and ScrollTrigger. It includes scroll pinning, scrubbing text reveals, image scale effects, and card stacking, preceded by a design plan verifying layout choices.

How to prevent AI-generated hero headings from wrapping into many lines?

The skill enforces ultra-wide containers like max-w-5xl or max-w-6xl and clamps font size with clamp(3rem, 5vw, 5.5rem). This guarantees the H1 flows horizontally within 2-3 lines instead of stacking into a narrow text wall.

Why do CSS bento grids have empty gaps and how to fix them?

Empty cells appear when col-span and row-span values do not interlock. The skill applies Tailwind's grid-flow-dense and mathematically verifies that all spans fill the grid completely, limiting cards to 3-5 intentional elements.

Does this work with Tailwind CSS and Next.js projects?

Yes, the output is React component code using Tailwind utility classes and @gsap/react, which integrates directly into Next.js or Vite React projects. It also wraps pages in overflow-x-hidden containers to prevent horizontal scroll bugs.

What fonts and images does the generated UI use?

Typography is randomly selected from Satoshi, Cabinet Grotesk, Outfit, or Geist, with Inter explicitly banned. Images come from picsum.photos with keyword-matched seeds and CSS filters like grayscale and contrast-125 for a refined look.