gpt-taste

Provide a product or page prompt and the skill outputs a mandatory design plan verifying hero width, bento grid density, and AIDA structure before writing React and Tailwind code. It then produces the full page with GSAP scroll animations and randomized layout choices.

Apply Tailwind's grid-flow-dense class and mathematically verify that col-span and row-span values interlock with zero empty cells. The skill requires this density proof in its pre-flight design plan before any UI code is written.

It implements ScrollTrigger-based effects including 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 scale transitions inside overflow-hidden containers.

Yes, all output targets React components styled with Tailwind CSS utility classes, using @gsap/react for animations and @phosphor-icons/react for iconography. Images use picsum.photos seed URLs with CSS filters for styling.

LLMs default to narrow containers, forcing headings into 4-6 line wraps. The fix is using ultra-wide containers like max-w-5xl or max-w-6xl with clamp-based font sizing so the H1 flows horizontally within 2-3 lines.

Banned elements include meta-labels like SECTION 01 or QUESTION 05, floating stamp badges on hero text, pill-tags under heroes, raw stats in heroes, the Inter font, emojis in code, and low-contrast invisible button text.