skills.rest
AvaTar-ArTs
AvaTar-ArTsCOMMUNITY
Explore all skills by this author →
GitHub

gpt-taste

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? LLMs tend to produce repetitive, generic frontend layouts with narrow containers, multi-line wrapped headings, empty grid cells, and static interfaces. This Skill enforces strict design rules so generated React/Tailwind pages achieve editorial, award-site quality with varied layouts and rich motion. ## Core Features & Use Cases - Deterministic Layout Randomization: Simulates a Python RNG seeded by prompt length to select hero architectures, typography stacks, components, and GSAP paradigms, preventing repeated layouts. - Structural Enforcement: Mandates AIDA page flow, 2-3 line hero headings via wide containers, gapless bento grids using grid-flow-dense, and large section spacing. - Advanced Motion: Requires real GSAP ScrollTrigger patterns including pinning, scrubbing text reveals, card stacking, and image scale/fade effects. - Use Case: Ask for a landing page for a SaaS product and receive a complete React component with a cinematic hero, dense bento feature grid, pinned scroll gallery, and high-contrast CTA footer. ## Quick Start Use the gpt-taste skill to build a landing page for my photography portfolio 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 generate a landing page with GSAP scroll animations?▼

Request a page and the skill outputs a React component using GSAP ScrollTrigger with pinning, scrubbing text reveals, card stacking, and image scale effects. A design plan block verifies the animation choices before any UI code is written.

How to stop AI from generating repetitive website layouts?▼

The skill simulates a Python random selection seeded by the prompt's character count to pick hero architectures, font stacks, components, and animations. This forces varied layouts instead of defaulting to the same left-right patterns.

Why do AI-generated hero headings wrap into many lines?▼

Narrow containers cause headings to wrap into 4-6 lines. The skill mandates ultra-wide containers like max-w-5xl or max-w-6xl and clamp-based font sizing so the H1 stays within 2-3 lines.

How do I fix empty gaps in CSS bento grids?▼

Apply Tailwind's grid-flow-dense and verify that col-span and row-span values interlock mathematically. The skill requires a density verification step proving zero empty cells before code is output.

Does this skill work with fonts other than Inter?▼

Yes, Inter is explicitly banned. The randomization selects from Satoshi, Cabinet Grotesk, Outfit, or Geist to ensure distinctive editorial typography on every generation.

Related Skills

Explore More Design & Creative Skills→
Pika-LabsPika-Labs
38

build-a-brand

Build a complete brand identity and 15-page brand guidelines PDF.

Official
Advanced
MattSenterMattSenter

senternet-site-init

Generates AGENTS.md, CLAUDE.md, and README.md documentation for completed Vite or Next.js sites.

Community
Intermediate
SwimmingLiuSwimmingLiu
1

audit

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

Community
Advanced
evolving-machines-labevolving-machines-lab
76

shadcn-webapp-design

Standardizes creation of web interfaces using shadcn/ui, Tailwind CSS and Framer Motion for Next.js apps and dashboards.

Official
Advanced