skills.rest
kaitoartz
kaitoartzCOMMUNITY
Explore all skills by this author →
Website𝕏@kaitoartzzGitHub

gpt-taste

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? LLM-generated frontend code tends to repeat the same layouts, produce narrow multi-line headings, leave gaps in CSS grids, and ship static pages without motion. This Skill enforces a strict design engineering process that produces varied, motion-rich React landing pages. ## 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 look alike. - Structural Enforcement: Mandates AIDA page flow, ultra-wide hero containers capped at 2-3 heading lines, gapless bento grids using grid-flow-dense, and large section spacing. - Advanced Motion: Requires real GSAP ScrollTrigger patterns including 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 cinematic hero, dense bento feature grid, pinned scroll gallery, and high-contrast CTA footer, preceded by a verifiable design plan. ## Quick Start Use the gpt-taste skill to build a landing page for my AI note-taking app with a cinematic hero and scroll animations.

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 a deterministic randomization step that selects hero layouts, font stacks, components, and animations before writing code. This Skill simulates a Python random.choice call seeded by the prompt's character count to force varied output each time.

How to build scroll animations with GSAP ScrollTrigger in React?▼

Use @gsap/react with ScrollTrigger to pin sections, scrub text opacity from 0.1 to 1.0, scale images from 0.8 to 1.0 on entry, and stack cards dynamically. Register the plugin and define triggers per section.

Why does my CSS grid have empty gaps in bento layouts?▼

Empty cells appear when col-span and row-span values do not interlock. Apply Tailwind's grid-flow-dense utility and mathematically verify that span values fill every row and column without voids.

How do I keep 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 placeholder images in prototypes?▼

Yes, it uses picsum.photos seeded URLs matched to the design vibe, combined with CSS filters like grayscale, mix-blend-luminosity, and contrast-125 so placeholder images look intentional rather than like generic stock photos.

Related Skills

Explore More Design & Creative Skills→
zwmopenzwmopen

anygen-website

Generate websites and landing pages from briefs using the AnyGen CLI.

Community
Intermediate
Dokkabei97Dokkabei97
2

landing-page-gen

Generate React or HTML landing pages with Tailwind CSS sections.

Community
Intermediate
SwimmingLiuSwimmingLiu
1

audit

Audit UI quality across accessibility, performance, theming, and responsive design.

Community
Advanced
winetree94winetree94

figma-implement-design

Translate Figma designs into production-ready UI component code.

Community
Advanced