skills.rest
FadhilAlif
FadhilAlifCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gpt-taste

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? LLMs repeatedly produce generic frontend designs: narrow containers causing 6-line wrapped headings, gappy bento grids, cheap meta-labels, invisible button text, and identical left/right layouts. This Skill enforces a rigorous design engineering workflow that breaks these statistical defaults. ## Core Features & Use Cases - Deterministic Layout Randomization: Simulates Python RNG selection of hero architectures, typography stacks (Satoshi, Cabinet Grotesk, Outfit, Geist), and component arsenals so no two pages look alike. - Advanced GSAP Motion: Implements ScrollTrigger pinning, scrubbing text reveals, image scale/fade scroll effects, and card stacking with real @gsap/react code. - Structural Enforcement: Mandates AIDA page structure, gapless bento grids via grid-flow-dense, 2-3 line hero headings with wide containers, and a pre-flight design_plan verification block. - Use Case: Ask for a landing page for a SaaS product and receive a cinematic, motion-rich Next.js page with verified grid math, high-contrast CTAs, and zero banned meta-labels. ## 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 stop AI from generating repetitive landing page layouts?▼

Use deterministic randomization that simulates Python random.choice with a seed derived from the prompt's character count. This forces selection of distinct hero architectures, typography stacks, and component arsenals instead of defaulting to the same layout.

How to implement GSAP ScrollTrigger animations in React?▼

Use @gsap/react with ScrollTrigger for scroll pinning, scrubbing text reveals, and image scale effects. Pin a section title while content scrolls beside it, or scrub word opacity from 0.1 to 1.0 as the user scrolls.

Why do CSS grid bento layouts have empty gaps?▼

Empty cells occur when col-span and row-span values do not interlock mathematically. Apply Tailwind's grid-flow-dense and verify that card spans fill every grid cell, limiting designs to 3-5 intentional cards.

How do I prevent hero headings from wrapping into many lines?▼

Use ultra-wide containers like max-w-5xl or max-w-6xl and fluid font sizing such as clamp(3rem, 5vw, 5.5rem). This lets the H1 flow horizontally and stay within 2-3 lines instead of wrapping into a narrow text wall.

Does this approach work with Next.js and Tailwind CSS?▼

Yes, the output targets React and Next.js with Tailwind utility classes for grids, spacing, and hover physics. It also uses @phosphor-icons/react for iconography and picsum.photos seeded images with CSS filters for assets.

Related Skills

Explore More Design & Creative Skills→
pikkujspikkujs

copywriting

Generate conversion-focused marketing copy for web pages.

Official
Intermediate
Dokkabei97Dokkabei97
2

landing-page-gen

Generate React or HTML landing pages with Tailwind CSS sections.

Community
Intermediate
aramark-destinationsaramark-destinations

quality-audit

Audit page quality across Lighthouse, SEO, and WCAG checks.

Official
Advanced
DevQwietDevQwiet

gpt-taste

Generate randomized UX/UI layouts with Python and GSAP animations.

Community
Advanced