skills.rest
timikalo7
timikalo7COMMUNITY
Explore all skills by this author →
GitHub

gpt-taste

Generates Awwwards-level React landing pages with GSAP animations and strict layout rules.

Updated Jun 9, 2026
Search Tags:#landing page#react#ui design#tailwind#gsap#scroll animation#bento grid
One-click install
npx skills add https://github.com/timikalo7/Execute --skill gpt-taste-timikalo7
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gpt-taste
Source: https://github.com/timikalo7/Execute/tree/main/.claude/skill-library/gpt-tasteskill
Command: npx skills add https://github.com/timikalo7/Execute --skill gpt-taste-timikalo7

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? LLMs produce repetitive, low-quality frontend designs: narrow containers causing 6-line wrapped headings, gappy bento grids, cheap meta-labels, invisible button text, and identical layouts on every run. This Skill enforces a rigorous design engineering process that breaks those defaults. ## Core Features & Use Cases - Deterministic Layout Randomization: Simulates a Python RNG seeded by prompt length to select hero architecture, typography stack, components, and GSAP paradigms, preventing repeated layouts. - Strict Structural 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/fade scroll, and card stacking animations. - Use Case: Ask for a landing page for a SaaS product and receive a cinematic hero, dense bento feature grid, pinned scroll sections, and a high-contrast CTA footer with a mandatory pre-flight design plan. ## Quick Start Ask the agent to build a landing page for your product and it will output a design plan followed by the full React and GSAP code.

Frequently Asked Questions about gpt-taste

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

FAQPage Schema
How do I stop LLMs from generating repetitive landing page layouts?▼

Use deterministic randomization seeded by the prompt's character count to select hero architecture, typography, components, and animations before writing code. This forces varied output instead of defaulting to the same left-right layout every time.

How to prevent hero headings from wrapping into 6 lines?▼

Use ultra-wide containers like max-w-5xl or max-w-6xl for the H1 and reduce font size with clamp(3rem, 5vw, 5.5rem). This lets text flow horizontally and keeps headings within 2-3 lines.

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. Apply Tailwind's grid-flow-dense and mathematically verify that spans fill every cell, using 3-5 intentional cards rather than many messy ones.

What GSAP animations work for scroll-driven landing pages?▼

Use ScrollTrigger for section pinning with scrolling galleries, scrubbing text reveals where word opacity animates from 0.1 to 1.0, image scale-and-fade on scroll, and card stacking where cards overlap as the user scrolls down.

Does this approach work with any React and Tailwind setup?▼

Yes, the rules target standard React with Tailwind CSS and GSAP via @gsap/react and ScrollTrigger. It also uses @phosphor-icons/react for iconography and picsum.photos seeded images for placeholder assets.

Related Skills

Explore More Design & Creative Skills→
TugoukezhangTugoukezhang
8

frontend-dev

Orchestrates frontend page creation with AI-generated media, motion, and copy for React/Next.js projects.

Community
Advanced
TravisLeeeeeeTravisLeeeeee
110

Tracking & Measurement Specialist

Configure GTM/GA4 events, Google Ads conversions, and Meta Pixel/CAPI deduplication.

Community
Advanced
rothwellmawela-cyberrothwellmawela-cyber

seo-visual

Capture desktop and mobile screenshots to identify visual layout issues.

Community
Intermediate
Moliboy5000Moliboy5000

extract

Analyze code to extract reusable UI components and design tokens.

Community
Intermediate