skills.rest
Jatinkrmahato993203
Jatinkrmahato993203COMMUNITY
Explore all skills by this author →
GitHub

gpt-taste

Generates award-level React landing pages with GSAP animations and randomized layout selection.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? LLM-generated frontend code tends to repeat the same narrow layouts, produce six-line wrapped headings, leave gaps in bento grids, and use cheap section labels. This Skill enforces a rigorous design engineering process that produces varied, motion-rich, editorial-quality 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. - Strict Layout Rules: Enforces wide H1 containers with a 2-3 line limit, gapless bento grids via grid-flow-dense, AIDA page structure, and large section spacing. - Advanced GSAP Motion: Implements scroll pinning, scrubbing text reveals, image scale-and-fade effects, and card stacking 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 gallery, and high-contrast CTA footer. ## 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?▼

Request a landing page and the skill outputs a design plan followed by React code using @gsap/react and ScrollTrigger. It implements scroll pinning, scrubbing text reveals, image scale-and-fade effects, and card stacking animations.

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

The skill enforces ultra-wide H1 containers like max-w-5xl or max-w-6xl and clamps font size with clamp(3rem, 5vw, 5.5rem). This guarantees headings flow horizontally in two to three lines instead of narrow six-line walls.

What fonts does this design skill use instead of Inter?▼

It randomly selects from Satoshi, Cabinet Grotesk, Outfit, or Geist via a simulated Python randomization step. Inter is explicitly banned to avoid generic-looking typography.

Does the skill work with Tailwind CSS grid layouts?▼

Yes, it requires Tailwind's grid-flow-dense on every bento grid and mathematically verifies col-span and row-span values interlock. This eliminates empty cells and dead corners common in AI-generated grids.

Why does the skill require a design plan before writing code?▼

The mandatory pre-flight design plan forces verification of layout randomization, AIDA structure, hero width math, grid density, and label bans before any UI code is written. This prevents common LLM design failures from reaching the output.

Related Skills

Explore More Design & Creative Skills→
4tie4tie

frontend-design

Design responsive, accessible frontend interfaces with distinctive visual identity and typography.

Community
Intermediate
encoredevencoredev
26

encore-frontend

Generate a typed TypeScript client for React/Next.js frontends from Encore.ts APIs.

Official
Intermediate
Team-AiltirTeam-Ailtir
2

recraft

Generate SVG vector icons from text prompts aligned with Ailtir brand guidelines.

Official
Intermediate
speqqaispeqqai

figma-implement-design

Translate Figma design artifacts into production-ready React UI code.

Official
Advanced