skills.rest
ferrarifankid04
ferrarifankid04COMMUNITY
Explore all skills by this author →
GitHub

gpt-taste

Generates React UI code following AIDA structure, GSAP animations, and gapless bento grid rules.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? LLM-generated frontend code tends to repeat the same layouts, produce narrow multi-line headings, leave empty gaps in bento grids, and ship static pages without motion. This Skill enforces a strict design engineering checklist so generated React/Tailwind pages follow editorial typography rules, AIDA page structure, and GSAP scroll animations. ## Core Features & Use Cases - Layout Randomization: Simulates a deterministic Python RNG step to select hero architectures, typography stacks, components, and GSAP paradigms so outputs vary between generations. - Grid and Typography Constraints: Enforces gapless bento grids via grid-flow-dense, wide H1 containers limited to 2-3 lines, and bans meta-labels like "SECTION 01". - GSAP Motion Rules: Requires ScrollTrigger patterns such as pinned sections, scrubbed 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 a pre-flight design plan verifying spacing and contrast rules. ## Quick Start Use the gpt-taste skill to build a landing page for my product with a hero, bento features, 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 LLM-generated landing pages from looking repetitive?▼

Use a deterministic randomization step that selects hero layouts, font stacks, components, and animation patterns before writing code. This Skill simulates a Python RNG seeded by the prompt so each generation picks a different combination instead of defaulting to the same layout.

How to build a bento grid with no empty cells in Tailwind?▼

Apply grid-flow-dense (grid-auto-flow: dense) and verify that col-span and row-span values interlock mathematically so no dead cells remain. Limit the grid to 3-5 intentional cards filled with imagery, typography, or CSS effects.

What GSAP ScrollTrigger patterns work for landing pages?▼

Common patterns include pinning a section title while content scrolls beside it, scrubbing word opacity from 0.1 to 1.0 on scroll, scaling images from 0.8 to 1.0 as they enter the viewport, and stacking cards that overlap as the user scrolls down.

Why do AI-generated hero sections wrap into 5 or 6 lines?▼

They use narrow containers that force long headings to wrap. Fix it by widening the H1 container to max-w-5xl or max-w-6xl and reducing font size with clamp(3rem, 5vw, 5.5rem) so the heading stays within 2-3 lines.

Does this approach work with frameworks other than React?▼

The rules are written for React with Tailwind and @gsap/react, including specific class names and JSX snippets. The design principles transfer conceptually, but the code output and pre-flight checks assume a React and Tailwind stack.

Related Skills

Explore More Design & Creative Skills→
GoogleCloudPlatformGoogleCloudPlatform
129

visual-direction

Generate cohesive marketing imagery by applying visual-direction guidelines.

Official
Intermediate
thatrebeccaraethatrebeccarae
97

cro-auditor

Audit landing pages and funnels using the LIFT heuristic with prioritized A/B test plans.

Community
Advanced
Hack23Hack23
235

playwright-ui-testing

Automate cross-browser UI tests with Playwright for the CIA platform.

Official
Intermediate
alinur527alinur527

ckm:ui-styling

Create accessible React interfaces with shadcn/ui components and Tailwind CSS.

Community
Advanced