skills.rest
divinaarmuela
divinaarmuelaCOMMUNITY
Explore all skills by this author →
GitHub

gpt-taste

Generates React landing pages with GSAP animations, bento grids, and AIDA structure.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? LLM-generated frontend code tends to repeat the same layouts, produce cramped sections, leave gaps in CSS grids, and use low-contrast buttons. This Skill enforces a strict design system so generated React/Tailwind pages follow editorial typography, gapless bento grids, and scroll-driven GSAP motion. ## Core Features & Use Cases - Deterministic Layout Randomization: Simulates a Python RNG step to select hero architecture, typography stack, components, and GSAP paradigms so no two pages look alike. - AIDA Page Structure: Enforces Navigation, Attention (Hero), Interest (Bento), Desire (GSAP scroll sections), and Action (Footer/CTA) with large vertical spacing. - GSAP Motion Rules: Mandates ScrollTrigger pinning, scrubbing text reveals, image scale/fade on scroll, and card stacking. - Use Case: Ask for a landing page for a SaaS product and receive a complete React/Tailwind page with a wide 2-line hero, dense bento grid, pinned scroll gallery, and a pre-flight design plan verifying layout math. ## Quick Start Ask the AI to build a landing page for your product using the gpt-taste skill and it will output a design plan followed by the full React 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 generate a landing page with GSAP scroll animations?▼

Describe your product and request a landing page; the Skill outputs a design plan then full React code using GSAP ScrollTrigger for pinned sections, scrubbing text reveals, and image scale-and-fade effects. Tailwind classes handle layout and hover physics.

How to prevent empty gaps in CSS bento grids?▼

Apply Tailwind's grid-flow-dense utility and verify that col-span and row-span values interlock mathematically so no cell is left empty. The Skill requires this density proof in its pre-flight design plan before any UI code is written.

Does this work with React and Tailwind CSS?▼

Yes, all output is React component code styled with Tailwind utilities, using @gsap/react and ScrollTrigger for animations. It also references @phosphor-icons/react for marquee icon rows.

Why do LLM-generated hero sections wrap into many lines?▼

Narrow containers force headings to wrap into 4-6 lines. The fix is using ultra-wide containers like max-w-5xl or max-w-6xl with clamp-based font sizing so the H1 stays within 2-3 lines.

What are the limitations of this design approach?▼

It targets single-page marketing sites with React, Tailwind, and GSAP only; it does not cover backend logic, multi-page apps, or non-GSAP animation libraries. Images come from picsum.photos placeholders rather than real brand assets.

Related Skills

Explore More Design & Creative Skills→
juanjaragavijuanjaragavi

brand-identity

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

Community
Advanced
brainbrewlabsbrainbrewlabs
7

doc-publishing

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

Official
Intermediate
Arupbiswas09Arupbiswas09

gsap-performance

Optimize GSAP animations with transform and opacity techniques to reduce layout thrashing.

Community
Intermediate
ayofemiadeayofemiade

animated-component-libraries

Implements pre-built animated React components from Magic UI and React Bits libraries.

Community
Intermediate