skills.rest
jwinar
jwinarCOMMUNITY
Explore all skills by this author →
GitHub

gpt-taste

Generates award-level frontend UI code with GSAP animations and randomized layout selection.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? LLMs repeatedly produce generic, cramped frontend layouts with narrow headings, empty grid gaps, and static pages. This Skill enforces a rigorous design engineering process that breaks those defaults and produces varied, motion-rich, editorial-quality UI code. ## Core Features & Use Cases - Deterministic Layout Randomization: Simulates a Python RNG step to select hero architectures, typography stacks, components, and GSAP paradigms so no two pages repeat the same layout. - Strict Layout Rules: Enforces AIDA page structure, 2-3 line hero headings via wide containers, gapless bento grids with grid-flow-dense, and massive section spacing. - Advanced GSAP Motion: Requires real ScrollTrigger implementations including pinning, scrubbing text reveals, card stacking, and image scale/fade scroll effects. - 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 spacing and grid math. ## Quick Start Ask the AI to build a landing page for your product using this skill and it will output a verified design plan followed by the full UI 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-generated landing pages from looking repetitive?▼

Use a deterministic randomization step that selects hero layouts, typography stacks, components, and animation paradigms before coding. This skill simulates a Python RNG seeded by the prompt so each page uses a different combination instead of defaulting to the same layout.

How to build a bento grid with no empty gaps in Tailwind?▼

Apply grid-flow-dense (grid-auto-flow: dense) and mathematically verify that col-span and row-span values interlock to fill every cell. Limit the grid to 3-5 intentional cards mixing imagery, typography, and CSS effects.

What GSAP ScrollTrigger animations work for landing pages?▼

Effective patterns include pinned section titles with scrolling galleries, scrub-based text opacity reveals, images scaling from 0.8 to 1.0 on entry, and cards stacking from the bottom. All require @gsap/react with ScrollTrigger registration.

Why do AI-generated hero headings wrap into 5 or 6 lines?▼

Narrow containers force long headings to wrap excessively. Fix this by using ultra-wide containers like max-w-5xl or max-w-6xl and clamp-based font sizing such as clamp(3rem, 5vw, 5.5rem) so the H1 stays within 2-3 lines.

Does this skill work with fonts other than Inter?▼

Yes, Inter is explicitly banned. The skill randomizes between Satoshi, Cabinet Grotesk, Outfit, and Geist to ensure typographic variety across generated pages.

Related Skills

Explore More Design & Creative Skills→
juanjaragavijuanjaragavi

brand-identity

Enforce consistent brand identity across UI, copy, and imagery.

Community
Advanced
ForeverWorldForeverWorld

nextjs

Build React applications with Next.js App Router and Server Components.

Community
Advanced
smykla-skalskismykla-skalski

swiftui-design-rules

Audit SwiftUI views for accessibility, design, interaction, and performance compliance.

Official
Advanced
AlexDevFlowAlexDevFlow

ckm:ui-styling

Unify UI styling with shadcn/ui, Tailwind, and design tokens for React projects.

Community
Advanced