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.