skills.rest
gmolike
gmolikeCOMMUNITY
Explore all skills by this author →
GitHub

gpt-taste

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

Updated Mar 4, 2026
Search Tags:#landing page#react#ui design#tailwind#gsap#scrolltrigger#bento grid
One-click install
npx skills add https://github.com/gmolike/Claude-Template --skill gpt-taste-gmolike
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gpt-taste
Source: https://github.com/gmolike/Claude-Template/tree/main/.agents/skills/gpt-taste
Command: npx skills add https://github.com/gmolike/Claude-Template --skill gpt-taste-gmolike

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 system that breaks those defaults and produces varied, cinematic, motion-rich React interfaces. ## 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. - Strict Layout Rules: Enforces AIDA page structure, ultra-wide H1 containers limited to 2-3 lines, gapless bento grids via grid-flow-dense, and massive section spacing. - Advanced GSAP Motion: Implements ScrollTrigger pinning, scrubbing text reveals, image scale-and-fade effects, and card stacking with hover physics. - 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 Ask the agent to build a landing page for your product and it will output a verified 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 layouts, typography stacks, and components 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?▼

Apply ultra-wide containers like max-w-5xl or max-w-6xl to 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?▼

Gaps appear when col-span and row-span values do not interlock. Apply Tailwind's grid-flow-dense and mathematically verify that cell spans fill every row and column with no dead cells.

Does this approach work with GSAP ScrollTrigger in React?▼

Yes, it uses @gsap/react with ScrollTrigger for section pinning, scrubbing text reveals, image scale-and-fade on scroll, and card stacking. Every clickable element also gets hover physics via Tailwind transitions.

What fonts and images does the design system use?▼

Typography is limited to Satoshi, Cabinet Grotesk, Outfit, or Geist, with Inter banned. Images come from picsum.photos with keyword-matched seeds and CSS filters like grayscale and mix-blend-luminosity.

Related Skills

Explore More Design & Creative Skills→
felvieirafelvieira
22

design-intelligence

Identify top design competitors and extract visual patterns for UI strategy.

Community
Advanced
brainbrewlabsbrainbrewlabs
7

doc-publishing

Publishes documentation to GitHub Pages, Vercel, or Netlify from source docs and build outputs.

Official
Intermediate
boparaiamritboparaiamrit
5

accessibility-audit

Audit frontend UI accessibility against WCAG standards and generate remediation guidance.

Community
Advanced
fgarofalo56fgarofalo56
6

tailwind-ui

Guide Tailwind CSS styling for responsive UI components with utility classes.

Community
Intermediate