skills.rest
Aeonxuu
AeonxuuCOMMUNITY
Explore all skills by this author →
GitHub

gpt-taste

Generates award-level frontend UI code with GSAP animations and strict layout rules.

Updated May 9, 2026
Search Tags:#React#landing page#frontend#animation#ui design#tailwind#gsap
One-click install
npx skills add https://github.com/Aeonxuu/southtownslandservice_v2 --skill gpt-taste-aeonxuu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gpt-taste
Source: https://github.com/Aeonxuu/southtownslandservice_v2/tree/main/.agents/skills/gpt-taste
Command: npx skills add https://github.com/Aeonxuu/southtownslandservice_v2 --skill gpt-taste-aeonxuu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? LLMs repeatedly produce generic, cramped frontend layouts with narrow headings, gappy bento grids, invisible button text, and static pages. This Skill enforces a rigorous design engineering workflow that breaks those defaults and produces varied, motion-rich, editorial-grade UI code. ## Core Features & Use Cases - Deterministic Layout Randomization: Simulates a Python RNG seeded by prompt character count to select hero architectures, typography stacks, components, and GSAP paradigms so no two outputs repeat. - Strict Layout Rules: Enforces AIDA page structure, 2-3 line H1 limits via wide containers, gapless bento grids with grid-flow-dense, and massive section spacing. - Advanced GSAP Motion: Implements ScrollTrigger pinning, scrubbing text reveals, image scale-and-fade, and card stacking animations. - 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 gallery, and a pre-flight design plan verifying every layout constraint. ## Quick Start Use the gpt-taste skill to build a landing page for my product with a cinematic hero, bento grid, and GSAP scroll animations.

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 award-level landing page with AI?▼

Invoke this Skill with a page request and it outputs a design plan followed by complete React and Tailwind code. It enforces AIDA structure, wide hero typography, gapless bento grids, and GSAP scroll animations automatically.

How to prevent LLMs from generating repetitive UI layouts?▼

The Skill simulates a Python random.choice execution seeded by the prompt's character count to deterministically select hero layouts, font stacks, components, and GSAP paradigms. This forbids defaulting to the same layout twice.

What GSAP animations does this Skill implement?▼

It implements ScrollTrigger section pinning with split scrolling, image scale-and-fade on scroll, scrubbing word-by-word text reveals, and dynamic card stacking. Hover physics use group-hover scaling inside overflow-hidden containers.

Does this Skill work with Tailwind CSS and React?▼

Yes, all output code targets React with Tailwind utility classes and @gsap/react for animations. It also uses @phosphor-icons/react for iconography and picsum.photos seeded images for assets.

Why do AI-generated bento grids have empty gaps?▼

LLMs often mismatch col-span and row-span values, leaving dead cells. This Skill mandates grid-flow-dense and requires mathematical verification in the design plan that all grid cells interlock with zero empty space.

What typography and content rules does it enforce?▼

It bans the Inter font in favor of Satoshi, Cabinet Grotesk, Outfit, or Geist, limits H1s to 2-3 lines using wide containers, and forbids cheap meta-labels like SECTION 01 or QUESTION 05.

Related Skills

Explore More Design & Creative Skills→
AdelysAlbertoAdelysAlberto
1

belfort

Generates Spanish landing page copy with UX direction using persuasion frameworks and product telemetry.

Community
Intermediate
PlayableIntelligencePlayableIntelligence
307

game-deploy

Deploy browser games to here.now, GitHub Pages, Vercel, or Netlify.

Official
Advanced
fiatkongenfiatkongen

design-polish

Generate design-system-aligned icons, heroes, and marketing imagery for React frontends.

Community
Intermediate
DITEKmaxDITEKmax

animated-component-libraries

Provide pre-built animated React components for Tailwind CSS and Framer Motion.

Community
Intermediate