skills.rest
KlyrhonMiko
KlyrhonMikoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gpt-taste

Generates React UI code with GSAP animations, bento grids, and AIDA page structure.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? LLMs tend to produce repetitive, poorly spaced frontend layouts with narrow containers, multi-line wrapped headings, empty grid cells, and static interfaces. This Skill enforces strict design rules to generate varied, motion-rich, award-level React UI code. ## Core Features & Use Cases - Deterministic Layout Randomization: Simulates Python random selection of hero architectures, typography stacks, components, and GSAP paradigms to prevent repeated layouts. - Strict Structural Rules: Enforces AIDA page structure, 2-3 line hero headings with wide containers, gapless bento grids using grid-flow-dense, and large section spacing. - Advanced GSAP Motion: Implements scroll pinning, scrubbing text reveals, card stacking, and image scale/fade effects with @gsap/react and ScrollTrigger. - 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 high-contrast CTA footer. ## Quick Start Use the gpt-taste skill to build a landing page for my photography portfolio with GSAP 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 generate a landing page with GSAP scroll animations?▼

Request a page with this Skill and it outputs React code using @gsap/react and ScrollTrigger for scroll pinning, scrubbing text reveals, card stacking, and image scale effects. A design plan block precedes the code to verify structure and animation choices.

How to prevent AI-generated hero headings from wrapping into many lines?▼

The Skill enforces a 2-3 line limit on H1 headings by requiring ultra-wide containers like max-w-5xl or max-w-6xl and clamp-based font sizing. This guarantees horizontal text flow instead of narrow 6-line text walls.

What fonts does this Skill use for typography?▼

It randomly selects from Satoshi, Cabinet Grotesk, Outfit, or Geist via simulated Python randomization. Inter is explicitly banned to avoid generic default styling.

Does the Skill work with Tailwind CSS grids?▼

Yes, it requires Tailwind's grid-flow-dense on every bento grid and mathematically verifies col-span and row-span values interlock with zero empty cells. It also limits grids to 3-5 intentional cards.

What image sources does the generated UI code use?▼

The code uses picsum.photos seeded URLs matched to the page's theme, combined with CSS filters like grayscale, mix-blend-luminosity, and contrast-125 for a sophisticated look. No external image assets are bundled with the Skill.

Related Skills

Explore More Design & Creative Skills→
jorgeasaurusjorgeasaurus
12

ckm-brand

Enforce brand voice, visual identity, and messaging frameworks across content and assets.

Community
Advanced
brainbrewlabsbrainbrewlabs
7

doc-publishing

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

Official
Intermediate
SwimmingLiuSwimmingLiu
1

audit

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

Community
Advanced
DITEKmaxDITEKmax

animated-component-libraries

Provide pre-built animated React components for Tailwind CSS and Framer Motion.

Community
Intermediate